feat: ปรับปรุงระบบ Tipitaka AI Reader และ LLM Prompt

- เพิ่มระบบ AI Disclaimer กาลามสูตร 10 วินาทีใน AIPopup

- เพิ่มปุ่ม Floating Maximize สำหรับ Focus Mode ในหน้า Chat

- ปรับปรุง System Prompt ของ AI ให้ตัดภาษาอังกฤษในหัวข้อ และรองรับชื่อโรมันในวงเล็บ

- ปรับปรุงโครงสร้าง Backend (FastAPI) และการจัดการ RAG

Dockerfile

@@ -39,7 +39,7 @@ COPY webapp/tipitaka-api/ ./api/
 RUN chmod +x /app/api/startup.sh
 
 # ── Create data directory (DB + vector files downloaded at runtime) ──
-RUN mkdir -p /app/data/db_vector
+RUN mkdir -p /app/data/qdrant_storage /app/data/snapshots
 
 # ── Port (HF Space expects 7860) ──
 EXPOSE 7860

chat_expert.py

@@ -41,12 +41,13 @@ class QwenEmbeddingFunction(EmbeddingFunction):
         return embeddings.tolist()
         
 # ========== Config ==========
-CHROMA_PATH = "./db_vector"
+DATA_DIR = "F:/_Ai/Tipitaka-AI-Expert/Tipitaka-Data"
+CHROMA_PATH = f"{DATA_DIR}/db_vector"
 COLLECTION_NAME = "tipitaka_mcu_qwen"
 EMBEDDING_MODEL = "Qwen/Qwen3-Embedding-0.6B"
 OLLAMA_MODEL = "gemma-4-e2b-it-q5_k_m"
 BATCH_SIZE = 32
-DB_PATH = "tipitaka_mcu.db"
+DB_PATH = f"{DATA_DIR}/tipitaka_mcu.db"
 N_RESULTS = 10    # ดึงมาเยอะเพื่อ dedup แล้วกรองทีหลัง
 SNIPPET_LEN = 400  # จำนวนตัวอักษรที่แสดงในโหมดย่อ
 RELEVANCE_GAP = 0.08  # ตัดผลที่ distance ห่างจาก best เกินค่านี้

tipitaka_query.py

@@ -37,19 +37,18 @@ def clean_text(
     for_tts: bool = False
 ) -> str:
     """
-    ทำความสะอาดข้อความพระไตรปิฎก
+    ทำความสะอาดข้อความพระไตรปิฎก (รองรับ Clean Dataset)
     
     Args:
         text: ข้อความดิบ
         remove_line_numbers: ลบเลขบรรทัด (001, 002, ...)
-        remove_footnotes: ลบเชิงอรรถ (บรรทัดที่ขึ้นต้นด้วย @)
+        remove_footnotes: ลบเชิงอรรถ (บรรทัดที่ขึ้นต้นด้วย @ หรือ [เชิงอรรถ])
         remove_item_numbers: ลบเลขข้อ [๑], [๒๓], ๑- เป็นต้น
         for_tts: เตรียมสำหรับ TTS (ลบทุกอย่างที่ไม่ควรอ่าน)
     
     Returns:
         ข้อความที่ clean แล้ว
     """
-    # ถ้าเป็น TTS mode ให้เปิด option ทั้งหมด
     if for_tts:
         remove_line_numbers = True
         remove_footnotes = True
@@ -59,40 +58,37 @@ def clean_text(
     cleaned = []
     
     for line in lines:
-        # ลบเลขบรรทัดหน้าบรรทัดก่อน (เช่น "001 ", "002 ")
+        # 1. ลบเลขบรรทัด (ถ้ามีหลุดมา)
         if remove_line_numbers:
             line = re.sub(r'^\s*\d{3}\s+', '', line)
         
-        # ข้ามบรรทัดเชิงอรรถ (ขึ้นต้นด้วย @)
-        if remove_footnotes and line.strip().startswith('@'):
-            continue
+        # 2. ข้ามบรรทัดเชิงอรรถ
+        # รองรับทั้ง @ (แบบเก่า) และ [เชิงอรรถ] (แบบคลีน)
+        s_line = line.strip()
+        if remove_footnotes:
+            if s_line.startswith('@') or s_line.startswith('[เชิงอรรถ]'):
+                continue
         
-        # ลบเลขข้อ [๑], [๒๓], [๑๒๓] และ ๑-, ๑-๒ เป็นต้น
+        # 3. ลบเลขข้อ และ footnote markers
         if remove_item_numbers:
-            # ลบ [๐-๙] แบบไทย
+            # ลบ [๑], [1]
             line = re.sub(r'\[[\u0E50-\u0E59]+\]', '', line)
-            # ลบ [0-9] แบบอาหรับ  
             line = re.sub(r'\[\d+\]', '', line)
-            # ลบ ๑-, ๑-๒ ที่อยู่ท้ายประโยค (footnote markers)
+            # ลบ ๑-, ๑-๒, 1-, 1-2
             line = re.sub(r'[\u0E50-\u0E59]+-[\u0E50-\u0E59]*', '', line)
             line = re.sub(r'\d+-\d*', '', line)
         else:
-            # กรณีไม่ลบเลขข้อ (ต้องการเก็บ [๑] ไว้) แต่ลบ ๑- ทิ้ง
-            line = re.sub(r'[\u0E50-\u0E59]+-', '', line)
-        
-        # สำหรับ TTS: ลบ "หน้าว่าง" และข้อความที่ไม่ควรอ่าน
-        if for_tts:
-            if 'หน้าว่าง' in line:
-                continue
-            # ลบเส้นขีด ___ และ ---
-            line = re.sub(r'[_-]{3,}', '', line)
+            # เก็บ [๑] ไว้ แต่ลบ ๑- (footnote reference) ทิ้ง
+            # ต้องระวังไม่ให้ลบ ๑- ที่เป็นส่วนหนึ่งของเลขข้อ เช่น "๑-๕. เรื่อง..."
+            # ปกติ footnote reference จะอยู่หลังคำ/ประโยคทันที โดยไม่มีช่องว่าง
+            line = re.sub(r'(?<=[^\s])[\u0E50-\u0E59]+-', '', line)
         
         cleaned.append(line)
     
     # รวมบรรทัดและลบช่องว่างซ้ำ
     result = '\n'.join(cleaned)
-    result = re.sub(r'\n{3,}', '\n\n', result)  # ลดบรรทัดว่างซ้ำ
-    result = re.sub(r'  +', ' ', result)  # ลดช่องว่างซ้ำ
+    result = re.sub(r'\n{3,}', '\n\n', result)
+    result = re.sub(r'  +', ' ', result)
     
     return result.strip()
 

webapp/tipitaka-api/app/config.py

@@ -1,20 +1,74 @@
 from pydantic_settings import BaseSettings
 from functools import lru_cache
 import os
+from pathlib import Path
 
+# Calculate the project root (tipitaka-api folder)
+PROJECT_ROOT = Path(__file__).resolve().parent.parent
+
+# Detect Data Directory
+# 1. Environment variable DATA_DIR
+# 2. Docker standard path /app/data (Only if on Linux/Docker)
+# 3. Local project 'data' folder
+if os.getenv("DATA_DIR"):
+    DATA_DIR_DEFAULT = os.getenv("DATA_DIR")
+elif os.name != 'nt' and os.path.exists("/app/data"):
+    DATA_DIR_DEFAULT = "/app/data"
+else:
+    DATA_DIR_DEFAULT = str(PROJECT_ROOT / "data")
+
+DATA_DIR = Path(DATA_DIR_DEFAULT)
+
+# User's local snapshot path fallback (Specific for this user's machine)
+USER_LOCAL_SNAPSHOT_DIR = Path(r"F:\_Ai\Tipitaka-AI-Expert\Tipitaka-Data\data\snapshots")
 
 class Settings(BaseSettings):
     """Application settings — loaded from .env file or environment variables."""
 
-    # ── LLM Provider (admin-only, NOT exposed to frontend) ──
+    # ── LLM Provider ──
     LLM_API_KEY: str = ""
     LLM_BASE_URL: str = "https://api.deepseek.com"
     LLM_MODEL_FAST: str = "deepseek-chat"
     LLM_MODEL_REASONER: str = "deepseek-reasoner"
 
-    # ── Database ──
-    DATABASE_PATH: str = "../../tipitaka_mcu.db"  # relative to app root
-    CHROMA_PERSIST_PATH: str = "../../db_vector"
+    # ── Paths ──
+    DATA_DIR: str = str(DATA_DIR)
+    DATABASE_PATH: str = ""
+    QDRANT_PATH: str = ""
+    SNAPSHOT_DIR: str = ""
+    QDRANT_URL: str | None = None
+    
+    def __init__(self, **values):
+        super().__init__(**values)
+        data_path = Path(self.DATA_DIR)
+        rag_root = PROJECT_ROOT.parent.parent # F:\_Ai\Tipitaka-AI-Expert\RAG
+        
+        # Initialize paths if not explicitly provided
+        if not self.DATABASE_PATH:
+            # Priority: 1. data/tipitaka_mcu.db, 2. RAG_ROOT/tipitaka_mcu.db
+            local_db = data_path / "tipitaka_mcu.db"
+            root_db = rag_root / "tipitaka_mcu.db"
+            if local_db.exists():
+                self.DATABASE_PATH = str(local_db)
+            elif root_db.exists():
+                self.DATABASE_PATH = str(root_db)
+            else:
+                self.DATABASE_PATH = str(local_db) # Fallback
+
+        if not self.QDRANT_PATH:
+            self.QDRANT_PATH = str(data_path / "qdrant_storage")
+            
+        if not self.SNAPSHOT_DIR:
+            # Check if user local exists, else use data/snapshots
+            if USER_LOCAL_SNAPSHOT_DIR.exists():
+                self.SNAPSHOT_DIR = str(USER_LOCAL_SNAPSHOT_DIR)
+            else:
+                # Also check PROJECT_ROOT / snapshots (common in some setups)
+                root_snapshots = rag_root / "snapshots"
+                if root_snapshots.exists():
+                    self.SNAPSHOT_DIR = str(root_snapshots)
+                else:
+                    self.SNAPSHOT_DIR = str(data_path / "snapshots")
 
     # ── CORS ──
     CORS_ORIGINS: str = "*"
@@ -24,13 +78,14 @@ class Settings(BaseSettings):
     DEBUG: bool = True
     PORT: int = 8000
 
-    # ── Production static file serving (used in Docker/HF Space) ──
+    # ── Production static file serving ──
     SERVE_STATIC: bool = False
     STATIC_DIR: str = ""
 
     class Config:
         env_file = ".env"
         env_file_encoding = "utf-8"
+        extra = "ignore"
 
 
 @lru_cache()

webapp/tipitaka-api/app/main.py

@@ -18,11 +18,35 @@ async def lifespan(app: FastAPI):
     settings = get_settings()
     db = get_db()
     
-    logger.info("Initializing database...")
-    db.load_to_memory()
-    logger.info("Database loaded to memory — all queries now run in-memory.")
-    db.ensure_search_log_table()
-    logger.info("Search log table ready.")
+    logger.info(f"Using database at: {db.db_path}")
+    
+    # Run heavy DB loading in a background thread to keep startup responsive
+    import anyio
+    
+    async def init_db():
+        try:
+            logger.info("Initializing services in background...")
+            
+            # 1. Load SQLite
+            await anyio.to_thread.run_sync(db.load_to_memory)
+            logger.info("Database loaded to memory.")
+            await anyio.to_thread.run_sync(db.ensure_search_log_table)
+            logger.info("Search log table ready.")
+            
+            # 2. Load RAG (This will trigger snapshot extraction if needed)
+            from app.routers.ai import get_llm_service
+            logger.info("Pre-loading RAG Service (Qdrant + Embedding Model)...")
+            await anyio.to_thread.run_sync(get_llm_service)
+            logger.info("RAG Service initialized.")
+            
+        except asyncio.CancelledError:
+            logger.info("Background initialization cancelled (system shutting down).")
+        except Exception as e:
+            logger.error(f"Background initialization failed: {e}")
+
+    # Start the background initialization task
+    import asyncio
+    task = asyncio.create_task(init_db())
     
     yield
     # Shutdown logic (if any)

webapp/tipitaka-api/app/routers/ai.py

@@ -1,11 +1,12 @@
 from functools import lru_cache
+from pathlib import Path
 from fastapi import APIRouter, Depends
 from fastapi.responses import JSONResponse
 from sse_starlette.sse import EventSourceResponse
 from app.services.llm_service import LLMService, AskRequest
 from app.database.sqlite_db import get_db, SQLiteDB
 from app.config import get_settings
-import chromadb
+import qdrant_client
 import logging
 import json
 
@@ -54,33 +55,60 @@ async def ask(request: AskRequest, service: LLMService = Depends(get_llm_service
 @router.get("/rag-status")
 async def rag_status():
     """
-    Check whether RAG (ChromaDB + Qwen) is ready.
-    Lightweight — does NOT trigger the full Qwen model load.
-    Uses the LLMService singleton if already created, otherwise
-    checks the ChromaDB collection directly.
+    Check whether RAG (Qdrant + Qwen) is ready.
+    Truly lightweight — does NOT trigger LLMService initialization.
+    Uses filesystem checks to avoid Qdrant locking issues.
     """
-    # First check if service was already initialized (avoids triggering model load)
-    try:
-        service = get_llm_service()
-        if service.rag_service.collection is not None:
-            return {"ready": True, "loading": False}
-        # Collection exists but model failed — check ChromaDB directly
-    except Exception:
-        pass
-
-    # Lightweight: check ChromaDB collection exists without loading embedding model
     try:
         settings = get_settings()
-        client = chromadb.PersistentClient(path=settings.CHROMA_PERSIST_PATH)
-        collections = client.list_collections()
-        names = [c.name for c in collections]
-        if "tipitaka_mcu_qwen" in names:
-            # Collection exists but needs full model load — return loading state
-            return {"ready": False, "loading": True,
-                    "message": "RAG database found — model loading on first query"}
+        
+        # 1. Determine if we should check Server or Local
+        qdrant_url = getattr(settings, "QDRANT_URL", None)
+        if not qdrant_url:
+            import httpx
+            try:
+                # Quick check if server exists even if not configured (auto-detect behavior)
+                # We use a sync client here but with a very short timeout, 
+                # or better yet, just skip to the next part since we do it below anyway.
+                # Let's just use the same logic as the service: check localhost:6333
+                with httpx.Client() as client:
+                    if client.get("http://localhost:6333/healthz", timeout=0.2).status_code == 200:
+                        qdrant_url = "http://localhost:6333"
+            except:
+                pass
+
+        if qdrant_url:
+            # Server Mode Check
+            import httpx
+            try:
+                async with httpx.AsyncClient() as client:
+                    resp = await client.get(f"{qdrant_url}/collections", timeout=1.0)
+                    if resp.status_code == 200:
+                        data = resp.json()
+                        cols = [c["name"] for c in data.get("result", {}).get("collections", [])]
+                        # Check if any collection starting with tipitaka_chunks exists
+                        has_chunks = any(c.startswith("tipitaka_chunks") for c in cols)
+                        if has_chunks:
+                            return {"ready": True, "loading": False, "message": f"Connected to Qdrant Server ({qdrant_url})"}
+                return {"ready": False, "loading": True, "message": "Qdrant Server starting or empty..."}
+            except Exception as e:
+                return {"ready": False, "loading": False, "message": f"Cannot connect to Qdrant Server: {str(e)}"}
+
+        # 2. Local Mode Check (Filesystem)
+        qdrant_path = Path(settings.QDRANT_PATH)
+        has_chunks = (qdrant_path / "collections" / "tipitaka_chunks").exists()
+        
+        if has_chunks:
+            return {"ready": True, "loading": False, "message": "RAG Local Collections ready"}
+
+        snapshot_dir = Path(settings.SNAPSHOT_DIR)
+        has_snapshots = (snapshot_dir / "tipitaka_chunks.snapshot").exists()
+
+        if has_snapshots:
+            return {"ready": False, "loading": True, "message": "Restoring Local snapshots..."}
         else:
-            return {"ready": False, "loading": False,
-                    "message": "No ChromaDB collection found"}
+            return {"ready": False, "loading": False, "message": "No Qdrant data found"}
+
     except Exception as e:
         logger.warning(f"RAG status check failed: {e}")
         return {"ready": False, "loading": False, "error": str(e)}

webapp/tipitaka-api/app/routers/health.py

@@ -78,16 +78,16 @@ def check_database(settings) -> dict:
         return {"status": "error", "error": str(e)}
 
 
-def check_chromadb(settings) -> dict:
+def check_qdrant(settings) -> dict:
     try:
-        import chromadb
-        p = _resolve(settings.CHROMA_PERSIST_PATH)
+        import qdrant_client
+        p = _resolve(settings.QDRANT_PATH)
         if not os.path.isdir(p):
             return {"status": "error", "error": "Dir not found"}
-        client = chromadb.PersistentClient(path=p)
-        names = [c.name for c in client.list_collections()]
-        if "tipitaka_mcu_qwen" in names:
-            return {"status": "ok"}
+        client = qdrant_client.QdrantClient(path=p)
+        names = [c.name for c in client.get_collections().collections]
+        if "tipitaka_chunks" in names:
+            return {"status": "ok", "collections": names}
         return {"status": "degraded", "message": "Collection missing"}
     except Exception as e:
         return {"status": "error", "error": str(e)[:150]}
@@ -130,7 +130,7 @@ def check_system() -> dict:
 def _run_all_checks(settings) -> dict:
     return {
         "database": check_database(settings),
-        "chromadb": check_chromadb(settings),
+        "qdrant": check_qdrant(settings),
         "llm_provider": check_llm_provider(settings),
         "system": check_system(),
     }

webapp/tipitaka-api/app/services/llm_service.py

@@ -13,22 +13,29 @@ class AskRequest(BaseModel):
     context: Optional[str] = None
     history: List[Message] = []
     mode: str = "fast"  # "fast" | "reasoner"
-    use_rag: bool = False
+    use_rag: bool = True
 
 from app.services.rag_service import RAGService
 
 SYSTEM_PROMPT = (
     "คุณคือผู้ช่วยตอบคำถามพระไตรปิฎก ฉบับมหาจุฬาลงกรณราชวิทยาลัย (มจร.) "
-    "หน้าที่ของคุณคือช่วยแปล สรุป และอธิบายธรรมะจากข้อความที่ผู้ใช้อ่าน "
-    "โดยเน้นความถูกต้องตามหลักวิชาการ รักษาความหมายดั้งเดิม "
-    "และตอบอย่างสั้นกระชับ ตรงประเด็น หากมีบาลีประกอบให้รักษาไว้เสมอ\n\n"
-    "⚠️ ห้ามแทนตัวเองว่าอาตมา ให้ใช้ภาษาแบบผู้ช่วยทั่วไป ไม่ใช่ภิกษุ/พระสงฆ์\n"
-    "⚠️ ข้อกำหนดสำคัญเกี่ยวกับการอ้างอิงแหล่งที่มา:\n"
-    "1. ใช้ข้อมูลใน \"เนื้อหาที่ผู้ใช้อ่าน\" (context) เท่านั้นในการอ้างอิงแหล่งที่มา "
-    "— ห้ามใช้ความรู้ของตัวเองในการเดาหรือสร้างแหล่งที่มา\n"
-    "2. หาก context มีข้อมูลเล่ม/หน้า/ชื่อพระสูตร ให้อ้างอิงตามนั้นทุกครั้ง\n"
-    "3. หากไม่แน่ใจหรือไม่มีข้อมูลแหล่งที่มาใน context ให้บอกอย่างตรงไปตรงมาว่าไม่ทราบ "
-    "— อย่าเดาหรือสร้างข้อมูลเท็จ"
+    "ทำหน้าที่เป็นสารานุกรมพระไตรปิฎกเคลื่อนที่ที่มีความเป็นสิริและถูกต้องแม่นยำที่สุด "
+    "ตอบโดยใช้ความรู้เกี่ยวกับพระพุทธศาสนาและพระไตรปิฎกอย่างเต็มที่ "
+    "เน้นความถูกต้องตามหลักวิชาการ รักษาความหมายดั้งเดิม และใช้ภาษาที่เคารพแต่ตรงไปตรงมา\n\n"
+    "📖 รูปแบบการตอบแบบ 'วิกิ' (Wiki-style) สำหรับบุคคลสำคัญ:\n"
+    "เมื่อผู้ใช้ถามถึงบุคคล (เช่น พระสาวก, พระเจ้าแผ่นดิน, หรือบุคคลในพุทธประวัติ) ให้จัดโครงสร้างการตอบดังนี้เสมอ:\n"
+    "### [ชื่อบุคคล]\n"
+    "**1. สรุปภาพรวม:** อธิบายสั้นๆ ว่าท่านคือใคร มีความสำคัญอย่างไรในพระศาสนา\n"
+    "**2. ประวัติและภูมิหลัง:** ระบุชื่อเดิมก่อนบวช (ถ้ามี) ชาติตระกูล และเหตุการณ์สำคัญในการเข้าสู่พระศาสนา\n"
+    "**3. บทบาทและหน้าที่สำคัญ:** ระบุตำแหน่งเอตทัคคะ หน้าที่หลักในคณะสงฆ์ หรือความโดดเด่นเฉพาะตัว (เช่น ปัญญามาก, เลิศทางฤทธิ์)\n"
+    "**4. ธรรมและพระสูตรที่เกี่ยวข้อง:** ระบุคำสอน พระสูตร หรือเหตุการณ์สำคัญที่เกี่ยวข้องกับบุคคลนั้นโดยเฉพาะ\n\n"
+    "⚠️ ห้ามแทนตัวเองว่าอาตมา ให้ใช้ภาษาแบบผู้ช่วยผู้เชี่ยวชาญ ไม่ใช่ภิกษุ/พระสงฆ์\n"
+    "📌 กฎเกี่ยวกับการอ้างอิงแหล่งที่มา (Citation Rules):\n"
+    "1. ให้ความสำคัญกับข้อมูลใน context (เล่ม/หน้���) เป็นอันดับแรก\n"
+    "2. หากข้อมูลใน context ไม่เพียงพอ ให้ใช้ความรู้พื้นฐานที่มีได้ แต่ต้องกำกับว่า \"อ้างอิงจากความรู้ทั่วไป\" สำหรับส่วนนั้น\n"
+    "3. ห้ามแต่งเลขเล่ม/หน้า หรือข้อมูลเท็จขึ้นมาเองเด็ดขาด\n"
+    "✅ สรุป: ตอบคำถามให้ลึกซึ้งและเป็นขั้นตอน หากมีภาษาบาลีให้รักษาไว้เพื่อความถูกต้องของความหมาย\n"
+    "🚫 ข้อห้าม: ห้ามใช้คำศัพท์เทคนิค เช่น 'RAG', 'Context', 'Vector' หรือ 'ข้อมูลจากระบบ' ให้ใช้คำว่า 'ข้อมูลอ้างอิง' หรือ 'หลักฐานในพระไตรปิฎก' แทน ห้ามมีภาษาอังกฤษที่เป็นคำแปล (เช่น Overview, Biography) ปนในวงเล็บหรือหลังหัวข้อเด็ดขาด แต่ยังคงอนุญาตให้ใช้ชื่อภาษาบาลีหรือสันสกฤตที่เขียนด้วยอักษรโรมันในวงเล็บได้เพื่อความสมบูรณ์ของข้อมูล (เช่น (Moggallāna))"
 )
 
 
@@ -63,7 +70,7 @@ class LLMService:
         if request.use_rag:
             rag_hits = await self.rag_service.query(request.question)
             if rag_hits:
-                extra_ctx = f"\n\nข้อมูลอ้างอิงเพิ่มเติมจากพระไตรปิฎก (RAG):\n{rag_hits}"
+                extra_ctx = f"\n\nข้อมูลอ้างอิงเพิ่มเติมจากส่วนอื่นของพระไตรปิฎก:\n{rag_hits}"
 
         full_ctx = (base_ctx + extra_ctx).strip()
         if full_ctx:

webapp/tipitaka-api/app/services/page_service.py

@@ -71,7 +71,8 @@ class PageService:
                 WHERE v.volume_number = ? AND c.level <= 2
                 ORDER BY c.page_number, c.id
             """, (volume_number,))
-            rows = [dict(r) for r in cursor.fetchall()]
+            columns = [c[0] for c in cursor.description]
+            rows = [dict(zip(columns, r)) for r in cursor.fetchall()]
 
         def is_noise(title: str) -> bool:
             return (
@@ -102,4 +103,5 @@ class PageService:
                 FROM volumes
                 ORDER BY volume_number
             """)
-            return [dict(row) for row in cursor.fetchall()]
+            columns = [c[0] for c in cursor.description]
+            return [dict(zip(columns, row)) for row in cursor.fetchall()]

webapp/tipitaka-api/app/services/rag_service.py

@@ -1,79 +1,328 @@
-import chromadb
-from chromadb.utils import embedding_functions
-from sentence_transformers import SentenceTransformer
-import torch
+import logging
+from pathlib import Path
+import qdrant_client
+from qdrant_client.http import models as qmodels
+import httpx
 from app.config import get_settings
+from app.database.sqlite_db import get_db
+import torch
+import anyio
+import re
 
-class QwenEmbeddingFunction:
-    def __init__(self, model_name: str):
-        self.device = "cuda" if torch.cuda.is_available() else "cpu"
-        self.model = SentenceTransformer(model_name, trust_remote_code=True, device=self.device)
-
-    def name(self) -> str:
-        return "Qwen3-Embedding-0.6B"
-
-    def _encode(self, input: list[str]) -> list[list[float]]:
-        embeddings = self.model.encode(
-            input,
-            batch_size=32,
-            show_progress_bar=False,
-            normalize_embeddings=True,
-            convert_to_numpy=True,
-        )
-        return embeddings.tolist()
-
-    def embed_query(self, input: list[str]) -> list[list[float]]:
-        return self._encode(input)
-
-    def embed_documents(self, input: list[str]) -> list[list[float]]:
-        return self._encode(input)
+OLLAMA_URL = "http://localhost:11434"
+EMBED_MODEL = "hf.co/second-state/jina-embeddings-v3-GGUF:jina-embeddings-v3-Q4_K_M.gguf"
+EMBED_DIMS = 1024
+RERANK_MODEL_PATH = "models/jina-v2-onnx"
+RERANK_MODEL_NAME = "jinaai/jina-reranker-v2-base-multilingual"
 
-    def __call__(self, input: list[str]) -> list[list[float]]:
-        return self._encode(input)
+logger = logging.getLogger(__name__)
 
 class RAGService:
+    def _extract_snapshot(self, col_name: str, snap_path: Path):
+        """Manually extract a Qdrant snapshot into the storage folder for Local Mode."""
+        import tarfile
+        import shutil
+        
+        target_dir = Path(self.qdrant_path) / "collections" / col_name
+        if target_dir.exists():
+            shutil.rmtree(target_dir)
+        target_dir.mkdir(parents=True, exist_ok=True)
+        
+        logger.info(f"Extracting snapshot to {target_dir}...")
+        try:
+            with tarfile.open(snap_path, "r:*") as tar:
+                tar.extractall(path=target_dir)
+            logger.info(f"Extraction of '{col_name}' complete.")
+            return True
+        except Exception as e:
+            logger.error(f"Error extracting snapshot for {col_name}: {e}")
+            return False
+        except Exception as e:
+            logger.error(f"Error extracting snapshot for {col_name}: {e}")
+            return False
+
     def __init__(self):
         settings = get_settings()
-        self.persist_path = settings.CHROMA_PERSIST_PATH
+        self.qdrant_path = settings.QDRANT_PATH
+        self.snapshot_dir = Path(settings.SNAPSHOT_DIR)
+        self.collections = ["tipitaka_chunks", "tipitaka_scripture"]
+        
+        self.model = None  # Flag: None = not verified, 'ready' = OK
+        self.reranker = None
+        self.actual_chunks_col = "tipitaka_chunks" # Default name
+        
+        try:
+            # 1. Determine Mode (Auto-detect Server vs Local)
+            qdrant_url = getattr(settings, "QDRANT_URL", None)
+            
+            if not qdrant_url:
+                try:
+                    with httpx.Client() as client:
+                        response = client.get("http://localhost:6333/healthz", timeout=1.0)
+                        if response.status_code == 200:
+                            qdrant_url = "http://localhost:6333"
+                            logger.info(f"Auto-detected running Qdrant Server at {qdrant_url}")
+                except Exception:
+                    pass
 
-        # Initialize ChromaDB client
-        self.client = chromadb.PersistentClient(path=self.persist_path)
+            is_local = not bool(qdrant_url)
+            
+            if is_local:
+                logger.info(f"Initializing Qdrant in Local Mode at {self.qdrant_path}")
+                storage_path = Path(self.qdrant_path)
+                storage_path.mkdir(parents=True, exist_ok=True)
+                
+                lock_file = storage_path / ".lock"
+                if lock_file.exists():
+                    try:
+                        logger.warning(f"Removing stale Qdrant lock file: {lock_file}")
+                        lock_file.unlink()
+                    except Exception as e:
+                        logger.error(f"Failed to remove lock file: {e}")
+
+                for col_name in self.collections:
+                    col_dir = storage_path / "collections" / col_name
+                    if not col_dir.exists():
+                        snap_path = self.snapshot_dir / f"{col_name}.snapshot"
+                        if snap_path.exists():
+                            logger.info(f"Restoring '{col_name}' via manual extraction...")
+                            self._extract_snapshot(col_name, snap_path)
+                
+                self.client = qdrant_client.QdrantClient(path=self.qdrant_path)
+                logger.info("Qdrant Local Client initialized.")
+            
+            else:
+                logger.info(f"Connecting to Qdrant Server at {qdrant_url}")
+                self.client = qdrant_client.QdrantClient(url=qdrant_url)
+                ALLOWED_SNAP_ROOT = Path(r"F:\_Ai\_db\qdrant\snapshots")
+                
+                try:
+                    all_cols = [c.name for c in self.client.get_collections().collections]
+                except Exception as e:
+                    logger.error(f"Failed to list collections: {e}")
+                    all_cols = []
+
+                for col_name in self.collections:
+                    actual_col = None
+                    if col_name in all_cols:
+                        actual_col = col_name
+                    else:
+                        matches = [c for c in all_cols if c.startswith(f"{col_name}_") or c.startswith(col_name)]
+                        if matches: actual_col = matches[0]
+
+                    if actual_col:
+                        if col_name == "tipitaka_chunks": self.actual_chunks_col = actual_col
+                    else:
+                        snap_filename = f"{col_name}.snapshot"
+                        target_snap = ALLOWED_SNAP_ROOT / snap_filename
+                        if not target_snap.exists(): target_snap = self.snapshot_dir / snap_filename
+                            
+                        if target_snap.exists():
+                            import os
+                            logger.info(f"Restoring server collection '{col_name}' from {target_snap}...")
+                            abs_snap_path = os.path.abspath(target_snap).replace("\\", "/")
+                            if not abs_snap_path.startswith("/"): abs_snap_path = "/" + abs_snap_path
+                            try:
+                                self.client.recover_snapshot(col_name, location=f"file://{abs_snap_path}")
+                                if col_name == "tipitaka_chunks": self.actual_chunks_col = col_name
+                            except Exception as e:
+                                logger.error(f"Failed to restore: {e}")
+
+            # 3. Pre-load Models (Embedding + Reranker)
+            self._load_model()
+            self._load_reranker()
 
-        try:
-            # Load Qwen model first, then get collection with embedding function
-            self.embedding_fn = QwenEmbeddingFunction("Qwen/Qwen3-Embedding-0.6B")
-            self.collection = self.client.get_collection(
-                name="tipitaka_mcu_qwen",
-                embedding_function=self.embedding_fn,
-            )
         except Exception as e:
-            print(f"RAG Initialization Error: {e}")
-            self.collection = None
-            self.embedding_fn = None
+            logger.error(f"RAG Initialization Error: {e}")
+            self.client = None
 
-    async def query(self, text: str, n_results: int = 3, threshold: float = 0.55) -> str:
+    def _load_model(self):
+        """Verify Ollama embedding service is accessible."""
+        if self.model is None:
+            logger.info(f"Verifying Ollama embedding model...")
+            try:
+                r = httpx.get(f"{OLLAMA_URL}/api/tags", timeout=5)
+                r.raise_for_status()
+                self.model = "ready"
+                logger.info(f"Ollama embedding service ready.")
+            except Exception as e:
+                logger.error(f"Ollama not accessible: {e}")
+                self.model = None
+
+    def _load_reranker(self):
+        """Pre-load the Reranker model using ONNX for CPU performance."""
+        if self.reranker is None:
+            logger.info(f"Pre-loading ONNX Reranker from {RERANK_MODEL_PATH}...")
+            try:
+                from app.services.onnx_reranker import ONNXReranker
+                self.reranker = ONNXReranker(RERANK_MODEL_PATH)
+                logger.info("ONNX Reranker v2 pre-loaded successfully.")
+            except Exception as e:
+                logger.error(f"Failed to pre-load ONNX Reranker: {e}")
+                # Fallback flag
+                self.reranker = "error"
+
+    def _get_embedding(self, text: str) -> list:
+        """Get embedding vector from Ollama API."""
+        response = httpx.post(
+            f"{OLLAMA_URL}/api/embed",
+            json={"model": EMBED_MODEL, "input": text},
+            timeout=30
+        )
+        response.raise_for_status()
+        return response.json()["embeddings"][0]
+
+    async def query(self, text: str, n_results: int = 10, threshold: float = 0.2) -> str:
         """
-        Query ChromaDB for relevant chunks and return formatted context.
-        Uses the distance threshold logic from tipitaka_app_v2.1.py
+        Hybrid Search Strategy: 
+        1. FTS5 Search (SQLite) for exact keyword matches.
+        2. Vector Search (Qdrant) for semantic relevance.
+        3. Merge & Deduplicate.
+        4. Rerank via Jina v2 ONNX.
         """
-        if not self.collection or not self.embedding_fn:
+        if not self.client:
             return ""
+            
+        # Ensure models are ready
+        if self.model is None:
+            await anyio.to_thread.run_sync(self._load_model)
+        if self.reranker is None:
+            await anyio.to_thread.run_sync(self._load_reranker)
 
-        results = self.collection.query(
-            query_texts=[text],
-            n_results=n_results,
-            include=["documents", "metadatas", "distances"],
-        )
+        candidates = []
+        seen_keys = set() # For deduplication (vol_page)
+
+        try:
+            # --- PHASE 1: FTS5 Search (SQLite) ---
+            logger.info(f"Starting FTS5 search for: {text[:30]}...")
+            def _blocking_fts():
+                fts_results = []
+                db = get_db()
+                with db.get_connection() as conn:
+                    # Search pages_fts and join with pages for metadata
+                    # We limit to 30 for performance
+                    query_sql = """
+                        SELECT id, volume_id, page_number, content_text 
+                        FROM pages 
+                        WHERE id IN (
+                            SELECT rowid FROM pages_fts 
+                            WHERE pages_fts MATCH ? 
+                            LIMIT 30
+                        )
+                    """
+                    # Sanitize FTS query: wrap in quotes for literal or keep simple
+                    sanitized_query = text.replace('"', '').strip()
+                    if not sanitized_query: return []
+                    
+                    try:
+                        cursor = conn.execute(query_sql, (f'"{sanitized_query}"',))
+                        for row in cursor.fetchall():
+                            key = f"{row['volume_id']}_{row['page_number']}"
+                            fts_results.append({
+                                "id": row['id'],
+                                "score": 0.9, # High initial score for FTS matches
+                                "payload": {
+                                    "volume": row['volume_id'],
+                                    "page": row['page_number'],
+                                    "content": row['content_text']
+                                },
+                                "key": key
+                            })
+                    except Exception as e:
+                        logger.warning(f"FTS5 query failed: {e}")
+                return fts_results
+
+            fts_candidates = await anyio.to_thread.run_sync(_blocking_fts)
+            for cand in fts_candidates:
+                if cand['key'] not in seen_keys:
+                    candidates.append(cand)
+                    seen_keys.add(cand['key'])
+            
+            # --- PHASE 2: Vector Search (Qdrant) ---
+            logger.info(f"Starting Vector search for: {text[:30]}...")
+            def _blocking_vector():
+                query_vector = self._get_embedding(text)
+                if hasattr(self.client, "search"):
+                    hits = self.client.search(
+                        collection_name=self.actual_chunks_col,
+                        query_vector=("dense", query_vector),
+                        limit=30,
+                        with_payload=True,
+                        score_threshold=threshold
+                    )
+                else:
+                    response = self.client.query_points(
+                        collection_name=self.actual_chunks_col,
+                        query=query_vector,
+                        using="dense",
+                        limit=30,
+                        with_payload=True,
+                        score_threshold=threshold
+                    )
+                    hits = response.points
+                
+                vec_results = []
+                for hit in hits:
+                    vol = hit.payload.get("volume", hit.payload.get("volume_id"))
+                    page = hit.payload.get("page", hit.payload.get("page_number"))
+                    key = f"{vol}_{page}"
+                    vec_results.append({
+                        "id": hit.id,
+                        "score": hit.score,
+                        "payload": hit.payload,
+                        "key": key
+                    })
+                return vec_results
+
+            vector_candidates = await anyio.to_thread.run_sync(_blocking_vector)
+            for cand in vector_candidates:
+                if cand['key'] not in seen_keys:
+                    candidates.append(cand)
+                    seen_keys.add(cand['key'])
+
+            if not candidates:
+                return ""
+
+            # --- PHASE 3: Rerank stage ---
+            if self.reranker and self.reranker != "error":
+                logger.info(f"Reranking {len(candidates)} hybrid candidates...")
+                
+                def _blocking_rerank():
+                    # Prepare pairs: (query, passage)
+                    passages = [c['payload'].get("content", "")[:1000] for c in candidates]
+                    pairs = [[text, p] for p in passages]
+                    
+                    with torch.no_grad():
+                        scores = self.reranker.predict(pairs, show_progress_bar=False, batch_size=4)
+                    
+                    for i, cand in enumerate(candidates):
+                        cand['rerank_score'] = float(scores[i])
+                        
+                    return sorted(candidates, key=lambda x: x.get('rerank_score', 0), reverse=True)
+
+                candidates = await anyio.to_thread.run_sync(_blocking_rerank)
+            
+            # --- PHASE 4: Formatting ---
+            final_results = candidates[:n_results]
+            context_parts = []
+            for cand in final_results:
+                payload = cand['payload']
+                content = payload.get("content", "").strip()
+                if not content: continue
+                
+                vol = payload.get("volume")
+                page = payload.get("page")
+                
+                # Cleanup and formatting
+                clean_content = re.sub(r"---.*?---", "", content, flags=re.DOTALL).strip()
+                clean_content = re.sub(r"^\d{3}\s+", "", clean_content, flags=re.MULTILINE)
+                clean_content = clean_content[:2000]
+                
+                context_parts.append(f"[เล่ม {vol} หน้า {page}]\n{clean_content}")
+
+            return "\n---\n".join(context_parts) if context_parts else ""
+            
+        except Exception as e:
+            logger.error(f"Hybrid query error: {e}")
+            return ""
 
-        context_parts = []
-        if results["documents"] and results["distances"]:
-            for i, doc in enumerate(results["documents"][0]):
-                dist = results["distances"][0][i]
-                # Filter by threshold (0.55 from v2.1)
-                if dist <= threshold:
-                    meta = results["metadatas"][0][i]
-                    vol = meta.get("volume", meta.get("volume_id", "?"))
-                    page = meta.get("page", meta.get("page_number", "?"))
-                    context_parts.append(f"[เล่ม {vol} หน้า {page}]\n{doc[:1000]}")
-
-        return "\n---\n".join(context_parts) if context_parts else ""

webapp/tipitaka-api/download_assets.py

@@ -7,83 +7,128 @@ Files are fetched from: dhammawatthumpra/tipitaka-storage
 import os
 import sys
 from pathlib import Path
+from dotenv import load_dotenv
 
-DATA_DIR = Path("/app/data")
-DB_PATH = DATA_DIR / "tipitaka_mcu.db"
-VECTOR_DIR = DATA_DIR / "db_vector"
+# Add current directory to path so we can import app.config
+sys.path.append(str(Path(__file__).resolve().parent))
+from app.config import get_settings
+
+settings = get_settings()
+
+# Define paths from settings
+DB_PATH = Path(settings.DATABASE_PATH)
+QDRANT_DIR = Path(settings.QDRANT_PATH)
+SNAPSHOT_DIR = Path(settings.SNAPSHOT_DIR)
+
+# User's local snapshot path fallback (for verification in verify_assets)
+USER_LOCAL_SNAPSHOT_DIR = Path(r"F:\_Ai\Tipitaka-AI-Expert\Tipitaka-Data\data\snapshots")
 
 BUCKET_ID = "dhammawatthumpra/tipitaka-storage"
 
+# Files to check/download
 BUCKET_FILES = [
-    # Main database
     ("tipitaka_mcu.db", str(DB_PATH)),
-    # ChromaDB vector index
-    ("db_vector/chroma.sqlite3", str(VECTOR_DIR / "chroma.sqlite3")),
-    ("db_vector/b5791013-c1a3-427a-b4e2-6baa9d0a45e8/data_level0.bin",
-     str(VECTOR_DIR / "b5791013-c1a3-427a-b4e2-6baa9d0a45e8" / "data_level0.bin")),
-    ("db_vector/b5791013-c1a3-427a-b4e2-6baa9d0a45e8/header.bin",
-     str(VECTOR_DIR / "b5791013-c1a3-427a-b4e2-6baa9d0a45e8" / "header.bin")),
-    ("db_vector/b5791013-c1a3-427a-b4e2-6baa9d0a45e8/index_metadata.pickle",
-     str(VECTOR_DIR / "b5791013-c1a3-427a-b4e2-6baa9d0a45e8" / "index_metadata.pickle")),
-    ("db_vector/b5791013-c1a3-427a-b4e2-6baa9d0a45e8/length.bin",
-     str(VECTOR_DIR / "b5791013-c1a3-427a-b4e2-6baa9d0a45e8" / "length.bin")),
-    ("db_vector/b5791013-c1a3-427a-b4e2-6baa9d0a45e8/link_lists.bin",
-     str(VECTOR_DIR / "b5791013-c1a3-427a-b4e2-6baa9d0a45e8" / "link_lists.bin")),
+    ("qdrant/tipitaka_chunks.snapshot", "tipitaka_chunks.snapshot"),
+    ("qdrant/tipitaka_scripture.snapshot", "tipitaka_scripture.snapshot"),
 ]
 
 
+def check_file_exists(local_path_name: str) -> bool:
+    """Check if a file exists either in project SNAPSHOT_DIR or USER_LOCAL_SNAPSHOT_DIR."""
+    # If it's the DB, check DB_PATH
+    if local_path_name == str(DB_PATH):
+        return DB_PATH.exists()
+    
+    # If it's a snapshot, check both locations
+    in_project = SNAPSHOT_DIR / local_path_name
+    in_user_local = USER_LOCAL_SNAPSHOT_DIR / local_path_name
+    
+    return in_project.exists() or in_user_local.exists()
+
+
 def download_files() -> None:
     """Download missing files from HF bucket."""
     hf_token = os.getenv("HF_TOKEN", "")
-    if not hf_token:
-        print("WARNING: HF_TOKEN not set — skipping asset download.")
-        print("RAG and database will not be available.")
-        return
-
-    # Filter to files that don't exist yet
-    pending = [(remote, local) for remote, local in BUCKET_FILES if not Path(local).exists()]
+    
+    # Filter to files that don't exist yet in any location
+    pending = []
+    for remote, local_name in BUCKET_FILES:
+        if not check_file_exists(local_name if "snapshot" in local_name else str(DB_PATH)):
+            # Determine destination: if it's the DB, use DB_PATH, else use project SNAPSHOT_DIR
+            dest = DB_PATH if "db" in local_name else (SNAPSHOT_DIR / local_name)
+            pending.append((remote, str(dest)))
 
     if not pending:
-        print("All assets already exist — skipping download.")
+        print("Success: All assets already exist in project or local storage - skipping download.")
         return
 
-    print(f"Downloading {len(pending)} files from bucket '{BUCKET_ID}'...")
-
-    from huggingface_hub import HfApi
-    api = HfApi(token=hf_token)
+    if not hf_token:
+        print("WARNING: HF_TOKEN not set — skipping asset download.")
+        return
 
-    # Ensure parent directories exist
-    for _, local in pending:
-        Path(local).parent.mkdir(parents=True, exist_ok=True)
+    print(f"Downloading {len(pending)} files from bucket '{BUCKET_ID}'...")
 
     try:
-        api.download_bucket_files(
-            bucket_id=BUCKET_ID,
-            files=pending,
-        )
-        print("All files downloaded successfully.")
+        from huggingface_hub import hf_hub_download
+        
+        for remote, dest_str in pending:
+            dest_path = Path(dest_str)
+            print(f"Downloading {remote} -> {dest_path}")
+            
+            dest_path.parent.mkdir(parents=True, exist_ok=True)
+            
+            # Note: hf_hub_download with local_dir will create subfolders if remote has slashes
+            # So if remote is "qdrant/foo.snapshot" and local_dir is DATA_DIR, 
+            # it becomes DATA_DIR/qdrant/foo.snapshot.
+            # But we want it in DATA_DIR/snapshots/foo.snapshot.
+            # So we use local_dir_use_symlinks=False and manually move if needed, 
+            # or just download to a temp and move.
+            
+            downloaded_path = hf_hub_download(
+                repo_id=BUCKET_ID,
+                filename=remote,
+                repo_type="dataset",
+                token=hf_token
+            )
+            
+            import shutil
+            shutil.copy(downloaded_path, dest_path)
+            
+        print("All files processed successfully.")
     except Exception as e:
         print(f"ERROR downloading files: {e}")
-        sys.exit(1)
 
 
 def verify_assets() -> bool:
     """Check that critical files exist."""
     missing = []
     if not DB_PATH.exists():
-        missing.append(str(DB_PATH))
-    if not VECTOR_DIR.exists() or not any(VECTOR_DIR.iterdir()):
-        missing.append(str(VECTOR_DIR))
+        missing.append("tipitaka_mcu.db")
+    
+    chunks_exists = (SNAPSHOT_DIR / "tipitaka_chunks.snapshot").exists() or \
+                    (USER_LOCAL_SNAPSHOT_DIR / "tipitaka_chunks.snapshot").exists()
+    
+    scripture_exists = (SNAPSHOT_DIR / "tipitaka_scripture.snapshot").exists() or \
+                       (USER_LOCAL_SNAPSHOT_DIR / "tipitaka_scripture.snapshot").exists()
+
+    if not chunks_exists:
+        missing.append("tipitaka_chunks.snapshot")
+    if not scripture_exists:
+        missing.append("tipitaka_scripture.snapshot")
 
     if missing:
-        print(f"WARNING: Missing critical assets: {missing}")
+        print(f"WARNING: Missing critical assets in any location: {missing}")
         return False
+    
+    print("Success: All critical assets verified (either in project or local storage).")
     return True
 
 
 if __name__ == "__main__":
-    DATA_DIR.mkdir(parents=True, exist_ok=True)
-    VECTOR_DIR.mkdir(parents=True, exist_ok=True)
+    # Ensure directories exist
+    QDRANT_DIR.mkdir(parents=True, exist_ok=True)
+    SNAPSHOT_DIR.mkdir(parents=True, exist_ok=True)
+    
     download_files()
     verify_assets()
-    print("Asset download complete.")
+    print("Asset management complete.")

webapp/tipitaka-api/requirements.txt

@@ -4,7 +4,7 @@ pydantic-settings==2.9.1
 python-dotenv==1.1.0
 sse-starlette==1.8.2
 openai>=2.0
-chromadb>=1.5
+qdrant-client>=1.12.0
 sentence-transformers>=3.0
 huggingface_hub>=0.20
 torch>=2.0

webapp/tipitaka-api/startup.sh

@@ -12,8 +12,10 @@ cd /app/api
 python download_assets.py
 
 # ── 2. Export paths for the API ──
+export DATA_DIR="/app/data"
 export DATABASE_PATH="/app/data/tipitaka_mcu.db"
-export CHROMA_PERSIST_PATH="/app/data/db_vector"
+export QDRANT_PATH="/app/data/qdrant_storage"
+export SNAPSHOT_DIR="/app/data/snapshots"
 export SERVE_STATIC="true"
 export STATIC_DIR="/app/web/dist"
 

webapp/tipitaka-web/src/components/ai/AIPopup.tsx

@@ -1,13 +1,13 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { useAIStore } from '../../stores/aiStore';
 import { useReaderStore, useThemeStore } from '../../stores/appStore';
-import { X, Send, Sparkles, Trash2, Zap, Brain } from 'lucide-react';
-import { motion } from 'framer-motion';
+import { X, Send, Sparkles, Trash2, Zap, Brain, Maximize2, ChevronLeft, BookOpen, Minimize2 } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
 
-const PANEL_STYLES: Record<string, { bg: string; text: string; border: string; msgBg: string }> = {
-  dark:    { bg: 'bg-[#0f0f1e]', text: 'text-[#e0e0e0]', border: 'border-[#3a3a5e]', msgBg: 'bg-[#1a1a2e]' },
-  light:   { bg: 'bg-[#f5edd8]', text: 'text-[#1a1a1a]', border: 'border-[#e0d0b0]', msgBg: 'bg-[#fdfaf5]' },
-  classic: { bg: 'bg-[#fdfaf5]', text: 'text-[#1a1a1a]', border: 'border-[#d4c4a0]', msgBg: 'bg-[#faf7f2]' },
+const PANEL_STYLES: Record<string, { bg: string; text: string; border: string; msgBg: string; focusBg: string }> = {
+  dark:    { bg: 'bg-[#0f0f1e]', text: 'text-[#e0e0e0]', border: 'border-[#3a3a5e]', msgBg: 'bg-[#1a1a2e]', focusBg: 'bg-[#0a0a0f]' },
+  light:   { bg: 'bg-[#f5edd8]', text: 'text-[#1a1a1a]', border: 'border-[#e0d0b0]', msgBg: 'bg-[#fdfaf5]', focusBg: 'bg-[#faf3e0]' },
+  classic: { bg: 'bg-[#fdfaf5]', text: 'text-[#1a1a1a]', border: 'border-[#d4c4a0]', msgBg: 'bg-[#faf7f2]', focusBg: 'bg-[#f8f4ed]' },
 };
 
 const AIPopup: React.FC = () => {
@@ -21,7 +21,11 @@ const AIPopup: React.FC = () => {
   const { currentVolume, currentPage, currentContent } = useReaderStore();
   const { theme } = useThemeStore();
   const [input, setInput] = useState('');
+  const [showAiDisclaimer, setShowAiDisclaimer] = useState(false);
+  const [hasShownDisclaimer, setHasShownDisclaimer] = useState(false);
   const [showQuickPrompts, setShowQuickPrompts] = useState(true);
+  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+  
   const scrollRef = useRef<HTMLDivElement>(null);
   const panelRef = useRef<HTMLDivElement>(null);
 
@@ -35,9 +39,22 @@ const AIPopup: React.FC = () => {
     if (dragPos) setPos(dragPos);
   }, []);
 
+  // Disclaimer Logic: Show for 5s when opening
+  useEffect(() => {
+    if (isOpen && !hasShownDisclaimer) {
+      setShowAiDisclaimer(true);
+      const timer = setTimeout(() => {
+        setShowAiDisclaimer(false);
+        setHasShownDisclaimer(true);
+      }, 10000);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, hasShownDisclaimer]);
+
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
     // Only desktop — ignore if touch device or small screen
     if (window.innerWidth < 768) return;
+    if (expandedIndex !== null) return; // Disable drag in focus mode
 
     setIsDragging(true);
     const rect = panelRef.current?.getBoundingClientRect();
@@ -45,7 +62,7 @@ const AIPopup: React.FC = () => {
       dragOffset.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
     }
     e.preventDefault();
-  }, []);
+  }, [expandedIndex]);
 
   useEffect(() => {
     if (!isDragging) return;
@@ -75,10 +92,10 @@ const AIPopup: React.FC = () => {
   const s = PANEL_STYLES[theme] ?? PANEL_STYLES.dark;
 
   useEffect(() => {
-    if (scrollRef.current) {
+    if (scrollRef.current && expandedIndex === null) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
-  }, [messages, isStreaming]);
+  }, [messages, isStreaming, expandedIndex]);
 
   // Check RAG status when popup opens
   useEffect(() => {
@@ -93,6 +110,17 @@ const AIPopup: React.FC = () => {
     setInput('');
   };
 
+  // Keyboard shortcut to close Focus Mode
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && expandedIndex !== null) {
+        setExpandedIndex(null);
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [expandedIndex]);
+
   if (!isOpen) return null;
 
   // RAG status dot color
@@ -105,154 +133,275 @@ const AIPopup: React.FC = () => {
     : 'bg-red-400';                         // 🔴 ไม่พร้อม
 
   return (
-    <motion.div
-      ref={panelRef}
-      initial={{ opacity: 0, scale: 0.95, y: 20 }}
-      animate={{
-        opacity: 1, scale: 1, y: 0,
-        ...(pos && window.innerWidth >= 768
-          ? { left: pos.x, top: pos.y, right: 'auto', bottom: 'auto' }
-          : {}),
-      }}
-      exit={{ opacity: 0, scale: 0.95, y: 20 }}
-      // Mobile: always centered. Desktop: positioned by state or default bottom-right
-      className={`
-        fixed z-50 flex flex-col overflow-hidden rounded-2xl border shadow-2xl
-        ${s.bg} ${s.text} ${s.border}
-        bottom-24 left-1/2 -translate-x-1/2
-        ${pos && window.innerWidth >= 768 ? '' : 'md:left-auto md:right-14 md:translate-x-0'}
-        w-[calc(100vw-32px)] md:w-[400px]
-        h-[80vh] md:h-[550px]
-        ${isDragging ? 'cursor-grabbing select-none' : ''}
-      `}
-      style={pos && window.innerWidth >= 768 ? {
-        position: 'fixed',
-        left: pos.x,
-        top: pos.y,
-      } : undefined}
-    >
-      {/* ═══════════ Compact Header + Drag Handle ═══════════ */}
-      <div
-        className="flex flex-col flex-shrink-0 bg-[#c8860a] text-white"
-        onMouseDown={handleMouseDown}
-        style={{ cursor: window.innerWidth >= 768 ? 'grab' : undefined }}
-      >
-        {/* Row 1: Title + actions */}
-        <div className="flex items-center justify-between px-3 py-2">
-          <div className="flex items-center gap-2 min-w-0">
-            <Sparkles size={16} className="flex-shrink-0" />
-            <h3 className="font-bold text-sm tracking-wide truncate">ผู้ช่วย AI</h3>
-          </div>
-          <div className="flex items-center gap-1 flex-shrink-0">
-            <div className="flex bg-black/15 rounded-lg p-0.5 mr-1">
-              <button
-                onClick={() => setMode('fast')}
-                className={`flex items-center gap-1 px-2 py-1 text-[10px] font-bold uppercase rounded-md transition-all ${
-                  mode === 'fast' ? 'bg-white/20 text-white' : 'text-white/60 hover:text-white/90'
-                }`}
-              ><Zap size={10} /> เร็ว</button>
-              <button
-                onClick={() => setMode('reasoner')}
-                className={`flex items-center gap-1 px-2 py-1 text-[10px] font-bold uppercase rounded-md transition-all ${
-                  mode === 'reasoner' ? 'bg-white/20 text-white' : 'text-white/60 hover:text-white/90'
-                }`}
-              ><Brain size={10} /> คิดลึก</button>
-            </div>
-            <button onClick={clearHistory} className="p-1.5 hover:bg-white/20 rounded-lg transition-colors" title="ล้างการสนทนา" aria-label="ล้างการสนทนา"><Trash2 size={14} /></button>
-            <button onClick={toggleOpen} className="p-1.5 hover:bg-white/20 rounded-lg transition-colors" aria-label="ปิด"><X size={16} /></button>
-          </div>
-        </div>
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          {/* ═══════════ Focus Mode Overlay ═══════════ */}
+          <AnimatePresence>
+            {expandedIndex !== null && (
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 20 }}
+                className={`fixed inset-0 z-[100] flex flex-col ${s.focusBg} ${s.text}`}
+              >
+                {/* Focus Header */}
+                <div className="flex items-center justify-between px-4 py-3 md:px-8 border-b border-white/5 bg-black/10 backdrop-blur-md">
+                  <div className="flex items-center gap-3">
+                    <button 
+                      onClick={() => setExpandedIndex(null)}
+                      className="p-2 hover:bg-white/10 rounded-full transition-colors"
+                      aria-label="Back to chat"
+                    >
+                      <ChevronLeft size={24} />
+                    </button>
+                    <div className="flex items-center gap-2">
+                      <BookOpen size={20} className="text-[#c8860a]" />
+                      <h2 className="text-lg font-bold tracking-tight">โหมดการอ่าน</h2>
+                    </div>
+                  </div>
+                  <button 
+                    onClick={() => setExpandedIndex(null)}
+                    className="flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 rounded-xl transition-all border border-white/10"
+                  >
+                    <span className="hidden sm:inline text-sm font-medium">ปิดหน้าต่าง</span>
+                    <X size={20} />
+                  </button>
+                </div>
 
-        {/* Row 2: RAG toggle + Quick prompt toggle */}
-        <div className="flex items-center justify-between px-3 py-1 border-t border-white/10">
-          <button
-            onClick={() => setUseRag(!useRag)}
-            className="flex items-center gap-1.5 text-[10px] font-medium text-white/60 hover:text-white transition-colors"
-          >
-            <span className="flex items-center gap-1">
-              <span className={`inline-block w-1.5 h-1.5 rounded-full ${ragDot}`} title={
-                ragLoading ? 'RAG: กำลังโหลดโมเดล...' : ragReady ? 'RAG พร้อม' : 'RAG ไม่พร้อม'
-              } />
-              📚 ค้นเล่มอื่น
-            </span>
-            <span className={`inline-flex items-center px-0.5 w-7 h-3.5 rounded-full transition-colors ${
-              useRag ? 'bg-white/50 justify-end' : 'bg-white/20 justify-start'
-            }`}>
-              <span className="w-2.5 h-2.5 bg-white rounded-full shadow-xs" />
-            </span>
-          </button>
-          <button
-            onClick={() => setShowQuickPrompts(v => !v)}
-            className="text-[10px] font-bold text-white/50 hover:text-white transition-colors"
-          >{showQuickPrompts ? '▲ ซ่อนปุ่มลัด' : '▼ ปุ่มลัด'}</button>
-        </div>
-      </div>
+                {/* Focus Content */}
+                <div className="flex-1 overflow-y-auto px-4 py-8 md:px-0">
+                  <div className="max-w-3xl mx-auto space-y-6">
+                    {messages[expandedIndex]?.thinking && (
+                      <div className="p-4 rounded-2xl bg-white/5 border border-white/10 italic text-sm opacity-70">
+                        <div className="flex items-center gap-2 mb-2 not-italic text-[#c8860a] font-bold">
+                          <Brain size={16} /> กระบวนการคิด
+                        </div>
+                        {messages[expandedIndex].thinking}
+                      </div>
+                    )}
+                    <div className="text-lg md:text-xl leading-relaxed whitespace-pre-wrap font-serif">
+                      {messages[expandedIndex]?.content}
+                    </div>
+                    
+                    {/* Progress indicator or metadata if needed */}
+                    <div className="pt-12 pb-24 text-center opacity-30 text-xs flex flex-col items-center gap-2">
+                      <Sparkles size={16} />
+                      <p>จบเนื้อหาที่ AI ช่วยสรุป</p>
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
 
-      {/* ═══════════ Quick Prompt Buttons ═══════════ */}
-      <div className={`grid grid-cols-2 gap-1.5 px-3 overflow-hidden transition-all duration-200 ${
-        showQuickPrompts ? 'py-2 max-h-32 border-b opacity-100' : 'max-h-0 border-transparent opacity-0'
-      } ${showQuickPrompts ? s.border : ''}`}>
-        {[
-          { emoji: '💬', text: 'อธิบาย', prompt: 'ช่วยอธิบายเนื้อหานี้ให้เข้าใจง่ายขึ้น' },
-          { emoji: '📝', text: 'สรุป', prompt: 'ช่วยสรุปใจความสำคัญของเนื้อหานี้เป็นข้อๆ' },
-          { emoji: '⚖️', text: 'วิเคราะห์ธรรม', prompt: 'ช่วยวิเคราะห์หลักธรรมที่ปรากฏในเนื้อหานี้' },
-          { emoji: '💡', text: 'ประยุกต์ใช้', prompt: 'หลักธรรมนี้ประยุกต์ใช้ในชีวิตประจำวันได้อย่างไร' },
-        ].map(({ emoji, text, prompt }) => (
-          <button key={text} onClick={() => { const c = `เล่มที่ ${currentVolume} หน้าที่ ${currentPage}\nเนื้อหา:\n${currentContent}`; askAI(prompt, c); }}
-            disabled={isStreaming}
-            className={`flex items-center justify-center gap-1 px-2 py-1.5 text-[11px] font-medium rounded-xl border transition-all ${s.msgBg} ${s.border} hover:border-[#c8860a]/50 hover:text-[#c8860a] disabled:opacity-40`}
-          >{emoji} {text}</button>
-        ))}
-      </div>
+          {/* ═══════════ Main Chat Panel ═══════════ */}
+          <motion.div
+            ref={panelRef}
+            initial={{ opacity: 0, scale: 0.95, y: 20 }}
+            animate={{
+              opacity: 1, scale: 1, y: 0,
+              ...(pos && window.innerWidth >= 768
+                ? { left: pos.x, top: pos.y, right: 'auto', bottom: 'auto' }
+                : {}),
+            }}
+            exit={{ opacity: 0, scale: 0.95, y: 20 }}
+            className={`
+              fixed z-50 flex flex-col overflow-hidden rounded-2xl border shadow-2xl
+              ${s.bg} ${s.text} ${s.border}
+              bottom-24
+              ${pos && window.innerWidth >= 768 ? '' : 'left-1/2 -translate-x-1/2 md:left-auto md:right-14 md:translate-x-0'}
+              w-[calc(100vw-32px)] md:w-[400px]
+              h-[80vh] md:h-[550px]
+              ${isDragging ? 'cursor-grabbing select-none' : ''}
+              ${expandedIndex !== null ? 'pointer-events-none opacity-0' : ''}
+              transition-opacity duration-300
+            `}
+            style={pos && window.innerWidth >= 768 ? {
+              position: 'fixed',
+              left: pos.x,
+              top: pos.y,
+            } : undefined}
+          >
+            {/* ═══════════ Compact Header + Drag Handle ═══════════ */}
+            <div
+              className="flex flex-col flex-shrink-0 bg-[#c8860a] text-white"
+              onMouseDown={handleMouseDown}
+              style={{ cursor: window.innerWidth >= 768 ? 'grab' : undefined }}
+            >
+              {/* Row 1: Title + actions */}
+              <div className="flex items-center justify-between px-3 py-2">
+                <div className="flex items-center gap-2 min-w-0">
+                  <Sparkles size={16} className="flex-shrink-0" />
+                  <h3 className="font-bold text-sm tracking-wide truncate">ผู้ช่วย AI</h3>
+                </div>
+                <div className="flex items-center gap-1 flex-shrink-0">
+                  <div className="flex bg-black/15 rounded-lg p-0.5 mr-1">
+                    <button
+                      onClick={() => setMode('fast')}
+                      onMouseDown={e => e.stopPropagation()}
+                      className={`flex items-center gap-1 px-2 py-1 text-[10px] font-bold uppercase rounded-md transition-all ${
+                        mode === 'fast' ? 'bg-white/20 text-white' : 'text-white/60 hover:text-white/90'
+                      }`}
+                    ><Zap size={10} /> เร็ว</button>
+                    <button
+                      onClick={() => setMode('reasoner')}
+                      onMouseDown={e => e.stopPropagation()}
+                      className={`flex items-center gap-1 px-2 py-1 text-[10px] font-bold uppercase rounded-md transition-all ${
+                        mode === 'reasoner' ? 'bg-white/20 text-white' : 'text-white/60 hover:text-white/90'
+                      }`}
+                    ><Brain size={10} /> คิดลึก</button>
+                  </div>
+                  <button onClick={clearHistory} onMouseDown={e => e.stopPropagation()} className="p-1.5 hover:bg-white/20 rounded-lg transition-colors" title="ล้างการสนทนา" aria-label="ล้างการสนทนา"><Trash2 size={14} /></button>
+                  <button onClick={toggleOpen} onMouseDown={e => e.stopPropagation()} className="p-1.5 hover:bg-white/20 rounded-lg transition-colors" aria-label="ปิด"><X size={16} /></button>
+                </div>
+              </div>
 
-      {/* ═══════════ Messages ═══════════ */}
-      <div ref={scrollRef} className="flex-1 overflow-y-auto p-3 md:p-4 space-y-3">
-        {messages.length === 0 && (
-          <div className="h-full flex flex-col items-center justify-center text-center opacity-50 px-8 gap-3">
-            <div className={`w-12 h-12 rounded-full flex items-center justify-center ${s.msgBg}`}>
-              <Sparkles size={24} className="text-[#c8860a]" />
+              {/* Row 2: RAG toggle + Quick prompt toggle */}
+              <div className="flex items-center justify-between px-3 py-1 border-t border-white/10">
+                <button
+                  onClick={() => setUseRag(!useRag)}
+                  onMouseDown={e => e.stopPropagation()}
+                  className="flex items-center gap-1.5 text-[10px] font-medium text-white/60 hover:text-white transition-colors"
+                >
+                  <span className="flex items-center gap-1">
+                    <span className={`inline-block w-1.5 h-1.5 rounded-full ${ragDot}`} title={
+                      ragLoading ? 'RAG: กำลังโหลดโมเดล...' : ragReady ? 'RAG พร้อม' : 'RAG ไม่พร้อม'
+                    } />
+                    📚 ค้นเล่มอื่น
+                  </span>
+                  <span className={`inline-flex items-center px-0.5 w-7 h-3.5 rounded-full transition-colors ${
+                    useRag ? 'bg-white/50 justify-end' : 'bg-white/20 justify-start'
+                  }`}>
+                    <span className="w-2.5 h-2.5 bg-white rounded-full shadow-xs" />
+                  </span>
+                </button>
+                <button
+                  onClick={() => setShowQuickPrompts(v => !v)}
+                  onMouseDown={e => e.stopPropagation()}
+                  className="text-[10px] font-bold text-white/50 hover:text-white transition-colors"
+                >{showQuickPrompts ? '▲ ซ่อนปุ่มลัด' : '▼ ปุ่มลัด'}</button>
+              </div>
             </div>
-            <div>
-              <p className="text-sm font-bold mb-0.5">ยินดีต้อนรับ</p>
-              <p className="text-xs opacity-60">ลองถามเกี่ยวกับการสรุปหน้าปัจจุบัน หรือคำศัพท์บาลีที่สงสัยดูครับ</p>
+
+            {/* ═══════════ Quick Prompt / Disclaimer ═══════════ */}
+            <div className={`relative overflow-hidden transition-all duration-300 ${
+              (showQuickPrompts || showAiDisclaimer) ? 'max-h-40 border-b py-2' : 'max-h-0 border-transparent'
+            } ${s.border}`}>
+              <AnimatePresence mode="wait">
+                {showAiDisclaimer ? (
+                  <motion.div
+                    key="disclaimer"
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -10 }}
+                    className="px-4 py-1"
+                  >
+                    <div className="bg-[#c8860a]/10 border border-[#c8860a]/30 rounded-xl p-2.5 relative">
+                       <button 
+                         onClick={() => { setShowAiDisclaimer(false); setHasShownDisclaimer(true); }}
+                         className="absolute top-1 right-1 p-1 opacity-50 hover:opacity-100 transition-opacity"
+                       >
+                         <X size={12} />
+                       </button>
+                       <p className="text-[10.5px] leading-relaxed text-[#c8860a] font-medium pr-4">
+                         <span className="font-bold">⚠️ ข้อควรระวัง:</span> คำอธิบายนี้ใช้ผู้ช่วย AI ในการตอบคำถาม ผู้อ่านควรใช้พิจารณาในการอ่านและควรวางอยู่บน "ความไม่ปลงใจเชื่อ" ตามหลักกาลามสูตร
+                       </p>
+                    </div>
+                  </motion.div>
+                ) : showQuickPrompts && (
+                  <motion.div
+                    key="prompts"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="grid grid-cols-2 gap-1.5 px-3"
+                  >
+                    {[
+                      { emoji: '💬', text: 'อธิบาย', prompt: 'ช่วยอธิบายเนื้อหานี้ให้เข้าใจง่ายขึ้น' },
+                      { emoji: '📝', text: 'สรุป', prompt: 'ช่วยสรุปใจความสำคัญของเนื้อหานี้เป็นข้อๆ' },
+                      { emoji: '⚖️', text: 'วิเคราะห์ธรรม', prompt: 'ช่วยวิเคราะห์หลักธรรมที่ปรากฏในเนื้อหานี้' },
+                      { emoji: '💡', text: 'ประยุกต์ใช้', prompt: 'หลักธรรมนี้ประยุกต์ใช้ในชีวิตประจำวันได้อย่างไร' },
+                    ].map(({ emoji, text, prompt }) => (
+                      <button key={text} onClick={() => { const c = `เล่มที่ ${currentVolume} หน้าที่ ${currentPage}\nเนื้อหา:\n${currentContent}`; askAI(prompt, c); }}
+                        disabled={isStreaming}
+                        className={`flex items-center justify-center gap-1 px-2 py-1.5 text-[11px] font-medium rounded-xl border transition-all ${s.msgBg} ${s.border} hover:border-[#c8860a]/50 hover:text-[#c8860a] disabled:opacity-40`}
+                      >{emoji} {text}</button>
+                    ))}
+                  </motion.div>
+                )}
+              </AnimatePresence>
             </div>
-          </div>
-        )}
 
-        {messages.map((msg, i) => (
-          <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
-            <div className={`max-w-[85%] rounded-2xl p-2.5 text-sm ${
-              msg.role === 'user'
-                ? 'bg-[#c8860a] text-white rounded-tr-none'
-                : `${s.msgBg} border ${s.border} text-inherit rounded-tl-none`
-            }`}>
-              {msg.role === 'assistant' && msg.thinking && (
-                <div className={`mb-1.5 p-1.5 rounded-lg border-l-2 border-[#c8860a]/30 text-[10px] italic opacity-70 whitespace-pre-wrap ${s.msgBg}`}>
-                  <span className="font-bold flex items-center gap-1 mb-0.5 not-italic text-[#c8860a]/60">
-                    <Brain size={9} /> กำลังคิด...
-                  </span>
-                  {msg.thinking}
+            {/* ═══════════ Messages ═══════════ */}
+            <div className="relative flex-1 min-h-0 flex flex-col">
+              <div ref={scrollRef} className="flex-1 overflow-y-auto p-3 md:p-4 space-y-4">
+                {messages.length === 0 && (
+                  <div className="h-full flex flex-col items-center justify-center text-center opacity-50 px-8 gap-3">
+                    <div className={`w-12 h-12 rounded-full flex items-center justify-center ${s.msgBg}`}>
+                      <Sparkles size={24} className="text-[#c8860a]" />
+                    </div>
+                    <div>
+                      <p className="text-sm font-bold mb-0.5">ยินดีต้อนรับ</p>
+                      <p className="text-xs opacity-60">ลองถามเกี่ยวกับการสรุปหน้าปัจจุบัน หรือคำศัพท์บาลีที่สงสัยดูครับ</p>
+                    </div>
+                  </div>
+                )}
+
+                {messages.map((msg, i) => (
+                  <div key={i} className={`flex flex-col ${msg.role === 'user' ? 'items-end' : 'items-start'} group`}>
+                    <div className={`relative max-w-[90%] rounded-2xl p-3 text-sm ${
+                      msg.role === 'user'
+                        ? 'bg-[#c8860a] text-white rounded-tr-none'
+                        : `${s.msgBg} border ${s.border} text-inherit rounded-tl-none`
+                    }`}>
+                      {msg.role === 'assistant' && msg.thinking && (
+                        <div className={`mb-2 p-2 rounded-lg border-l-2 border-[#c8860a]/30 text-[10px] italic opacity-70 whitespace-pre-wrap ${s.msgBg}`}>
+                          <span className="font-bold flex items-center gap-1 mb-1 not-italic text-[#c8860a]/60">
+                            <Brain size={10} /> กำลังคิด...
+                          </span>
+                          {msg.thinking}
+                        </div>
+                      )}
+                      <div className="whitespace-pre-wrap leading-relaxed">
+                        {msg.content || (isStreaming && i === messages.length - 1 ? '...' : '')}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* Persistent Floating Maximize Button (Visible when scrolled) */}
+              {messages.some(m => m.role === 'assistant') && !isStreaming && (
+                <div className="absolute bottom-4 right-4 z-10">
+                  <button 
+                    onClick={() => {
+                      const lastAi = messages.findLastIndex(m => m.role === 'assistant');
+                      if (lastAi !== -1) setExpandedIndex(lastAi);
+                    }}
+                    className="p-3 bg-white/10 backdrop-blur-md hover:bg-[#c8860a] text-[#c8860a] hover:text-white rounded-2xl shadow-xl transition-all border border-[#c8860a]/20 hover:border-[#c8860a] active:scale-95"
+                    title="อ่านแบบเต็มจอ"
+                  >
+                    <Maximize2 size={20} />
+                  </button>
                 </div>
               )}
-              <div className="whitespace-pre-wrap leading-relaxed">
-                {msg.content || (isStreaming && i === messages.length - 1 ? '...' : '')}
-              </div>
             </div>
-          </div>
-        ))}
-      </div>
 
-      {/* ═══════════ Input ═══════════ */}
-      <form onSubmit={handleSubmit} className={`p-2 md:p-3 border-t ${s.border} flex gap-2 flex-shrink-0 ${s.bg}`}>
-        <input type="text" value={input} onChange={(e) => setInput(e.target.value)}
-          placeholder="ถาม AI ได้เลย..." disabled={isStreaming}
-          className={`flex-1 px-3 py-2 rounded-2xl outline-none text-sm disabled:opacity-50 border ${s.border} ${s.msgBg} ${s.text} focus:border-[#c8860a] transition-colors`}
-        />
-        <button type="submit" disabled={!input.trim() || isStreaming}
-          className="p-2 bg-[#c8860a] text-white rounded-full disabled:opacity-50 hover:bg-[#9a6307] transition-colors flex-shrink-0"
-        ><Send size={16} /></button>
-      </form>
-    </motion.div>
+            {/* ═══════════ Input ═══════════ */}
+            <form onSubmit={handleSubmit} className={`p-2 md:p-3 border-t ${s.border} flex gap-2 flex-shrink-0 ${s.bg}`}>
+              <input type="text" value={input} onChange={(e) => setInput(e.target.value)}
+                placeholder="ถาม AI ได้เลย..." disabled={isStreaming}
+                className={`flex-1 px-3 py-2 rounded-2xl outline-none text-sm disabled:opacity-50 border ${s.border} ${s.msgBg} ${s.text} focus:border-[#c8860a] transition-colors`}
+              />
+              <button type="submit" disabled={!input.trim() || isStreaming}
+                className="p-2 bg-[#c8860a] text-white rounded-full disabled:opacity-50 hover:bg-[#9a6307] transition-colors flex-shrink-0"
+              ><Send size={16} /></button>
+            </form>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
   );
 };