fix: RAG Qwen embedding function for ChromaDB 1.5.7; feat: draggable AI popup + RAG status indicator (green/yellow/red)

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

@@ -3,6 +3,11 @@ from fastapi import APIRouter, Depends
 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 logging
+
+logger = logging.getLogger(__name__)
 
 router = APIRouter(prefix="/ask", tags=["AI"])
 
@@ -17,7 +22,35 @@ async def ask_stream(request: AskRequest, service: LLMService = Depends(get_llm_
 
 
 @router.get("/rag-status")
-async def rag_status(service: LLMService = Depends(get_llm_service)):
-    """Check whether RAG (Qwen embedding + ChromaDB) is loaded and ready."""
-    ready = service.rag_service.collection is not None if service.rag_service else False
-    return {"ready": ready, "model": "Qwen3-Embedding-0.6B"}
+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.
+    """
+    # 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"}
+        else:
+            return {"ready": False, "loading": False,
+                    "message": "No ChromaDB collection 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/services/rag_service.py

@@ -8,48 +8,61 @@ 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 __call__(self, input: list[str]) -> list[list[float]]:
+
+    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
+            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)
+
+    def __call__(self, input: list[str]) -> list[list[float]]:
+        return self._encode(input)
+
 class RAGService:
     def __init__(self):
         settings = get_settings()
         self.persist_path = settings.CHROMA_PERSIST_PATH
-        
+
         # Initialize ChromaDB client
         self.client = chromadb.PersistentClient(path=self.persist_path)
-        
-        # Use Qwen embedding model as in v2.1
+
         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
+                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
 
     async def query(self, text: str, n_results: int = 3, threshold: float = 0.55) -> str:
         """
         Query ChromaDB for relevant chunks and return formatted context.
         Uses the distance threshold logic from tipitaka_app_v2.1.py
         """
-        if not self.collection:
+        if not self.collection or not self.embedding_fn:
             return ""
 
         results = self.collection.query(
             query_texts=[text],
             n_results=n_results,
-            include=["documents", "metadatas", "distances"]
+            include=["documents", "metadatas", "distances"],
         )
 
         context_parts = []

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

@@ -1,10 +1,9 @@
-import React, { useState, useRef, useEffect } from 'react';
+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, Loader2 } from 'lucide-react';
 import { motion } from 'framer-motion';
 
-// ── AI Panel theme ────────────────────────────────────────────
 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]' },
@@ -15,7 +14,8 @@ const AIPopup: React.FC = () => {
   const {
     isOpen, toggleOpen, messages, isStreaming,
     askAI, clearHistory, mode, setMode,
-    useRag, setUseRag, checkRagStatus, ragReady, ragChecking
+    useRag, setUseRag, checkRagStatus, ragReady, ragChecking, ragLoading,
+    dragPos, setDragPos,
   } = useAIStore();
 
   const { currentVolume, currentPage, currentContent } = useReaderStore();
@@ -23,6 +23,54 @@ const AIPopup: React.FC = () => {
   const [input, setInput] = useState('');
   const [showQuickPrompts, setShowQuickPrompts] = useState(true);
   const scrollRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // ── Drag state ──────────────────────────────────────────────
+  const [isDragging, setIsDragging] = useState(false);
+  const dragOffset = useRef({ x: 0, y: 0 });
+  const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
+
+  // Restore saved position on mount
+  useEffect(() => {
+    if (dragPos) setPos(dragPos);
+  }, []);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    // Only desktop — ignore if touch device or small screen
+    if (window.innerWidth < 768) return;
+
+    setIsDragging(true);
+    const rect = panelRef.current?.getBoundingClientRect();
+    if (rect) {
+      dragOffset.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    }
+    e.preventDefault();
+  }, []);
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const onMove = (e: MouseEvent) => {
+      const x = e.clientX - dragOffset.current.x;
+      const y = e.clientY - dragOffset.current.y;
+      // Clamp to viewport
+      const clampedX = Math.max(0, Math.min(x, window.innerWidth - 320));
+      const clampedY = Math.max(0, Math.min(y, window.innerHeight - 200));
+      setPos({ x: clampedX, y: clampedY });
+    };
+
+    const onUp = () => {
+      setIsDragging(false);
+      if (pos) setDragPos(pos);
+    };
+
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+    return () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+  }, [isDragging, pos, setDragPos]);
 
   const s = PANEL_STYLES[theme] ?? PANEL_STYLES.dark;
 
@@ -47,22 +95,48 @@ const AIPopup: React.FC = () => {
 
   if (!isOpen) return null;
 
+  // RAG status dot color
+  const ragDot = ragChecking
+    ? 'bg-yellow-400 animate-pulse'        // ⏳ กำลังตรวจสอบ
+    : ragLoading
+    ? 'bg-yellow-400'                       // 🟡 DB พร้อม รอโมเดล
+    : ragReady
+    ? 'bg-green-400'                        // 🟢 พร้อม
+    : 'bg-red-400';                         // 🔴 ไม่พร้อม
+
   return (
     <motion.div
+      ref={panelRef}
       initial={{ opacity: 0, scale: 0.95, y: 20 }}
-      animate={{ opacity: 1, scale: 1, y: 0 }}
+      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: centered via left-1/2 -translate-x-1/2
-      // Desktop (md+): right-6, fixed 400px
-      className={`fixed bottom-24 left-1/2 -translate-x-1/2
-                  md:left-auto md:right-14 md:translate-x-0
-                  w-[calc(100vw-32px)] md:w-[400px]
-                  max-h-[80vh] md:h-[550px]
-                  z-50 flex flex-col overflow-hidden rounded-2xl border
-                  shadow-2xl ${s.bg} ${s.text} ${s.border}`}
+      // Mobile: 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}
+        ${pos || window.innerWidth >= 768 ? '' : 'bottom-24 left-1/2 -translate-x-1/2'}
+        ${pos ? '' : 'md:left-auto md:right-14 md:translate-x-0'}
+        w-[calc(100vw-32px)] md:w-[400px]
+        max-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 + Mode Pills ═══════════ */}
-      <div className="flex flex-col flex-shrink-0 bg-[#c8860a] text-white">
+      {/* ═══════════ 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">
@@ -70,107 +144,65 @@ const AIPopup: React.FC = () => {
             <h3 className="font-bold text-sm tracking-wide truncate">ผู้ช่วย AI</h3>
           </div>
           <div className="flex items-center gap-1 flex-shrink-0">
-            {/* Mode pills inline */}
             <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>
+              ><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>
+              ><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>
+            <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>
 
-        {/* Row 2: RAG toggle + Quick prompt toggle — merged thin bar */}
-        <div className={`flex items-center justify-between px-3 py-1 border-t border-white/10`}>
-          {/* RAG Toggle */}
+        {/* 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">
-              {/* Status dot */}
-              {ragChecking ? (
-                <Loader2 size={8} className="animate-spin text-white/40" />
-              ) : (
-                <span
-                  className={`inline-block w-1.5 h-1.5 rounded-full ${
-                    ragReady ? 'bg-green-400' : 'bg-red-400'
-                  }`}
-                  title={ragReady ? 'RAG พร้อมใช้งาน' : 'RAG ไม่พร้อม — Qwen model อาจโหลดไม่สำเร็จ'}
-                />
-              )}
+              <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={`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>
-
-          {/* Quick Prompt toggle */}
           <button
             onClick={() => setShowQuickPrompts(v => !v)}
             className="text-[10px] font-bold text-white/50 hover:text-white transition-colors"
-          >
-            {showQuickPrompts ? '▲ ซ่อนปุ่มลัด' : '▼ ปุ่มลัด'}
-          </button>
+          >{showQuickPrompts ? '▲ ซ่อนปุ่มลัด' : '▼ ปุ่มลัด'}</button>
         </div>
       </div>
 
-      {/* ═══════════ Quick Prompt Buttons (collapsible) ═══════════ */}
+      {/* ═══════════ 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 : ''}`}>
-        <button
-          onClick={() => { const c = `เล่มที่ ${currentVolume} หน้าที่ ${currentPage}\nเนื้อหา:\n${currentContent}`; askAI('ช่วยอธิบายเนื้อหานี้ให้เข้าใจง่ายขึ้น', 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`}
-        >💬 อธิบาย</button>
-        <button
-          onClick={() => { const c = `เล่มที่ ${currentVolume} หน้าที่ ${currentPage}\nเนื้อหา:\n${currentContent}`; askAI('ช่วยสรุปใจความสำคัญของเนื้อหานี้เป็นข้อๆ', 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`}
-        >📝 สรุป</button>
-        <button
-          onClick={() => { const c = `เล่มที่ ${currentVolume} หน้าที่ ${currentPage}\nเนื้อหา:\n${currentContent}`; askAI('ช่วยวิเคราะห์หลักธรรมที่ปรากฏในเนื้อหานี้', 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`}
-        >⚖️ วิเคราะห์ธรรม</button>
-        <button
-          onClick={() => { const c = `เล่มที่ ${currentVolume} หน้าที่ ${currentPage}\nเนื้อหา:\n${currentContent}`; askAI('หลักธรรมนี้ประยุกต์ใช้ในชีวิตประจำวันได้อย่างไร', 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`}
-        >💡 ประยุกต์ใช้</button>
+        {[
+          { 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>
 
       {/* ═══════════ Messages ══════════�� */}
@@ -211,25 +243,14 @@ const AIPopup: React.FC = () => {
       </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}
+      <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}
+        <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>
+        ><Send size={16} /></button>
       </form>
     </motion.div>
   );

webapp/tipitaka-web/src/stores/aiStore.ts

@@ -14,6 +14,8 @@ interface AIState {
   useRag: boolean;
   ragReady: boolean;       // true when Qwen + ChromaDB loaded
   ragChecking: boolean;    // true while checking status
+  ragLoading: boolean;     // true when ChromaDB exists but model still loading
+  dragPos: { x: number; y: number } | null;  // saved drag position (desktop)
 
   // Actions
   toggleOpen: () => void;
@@ -21,6 +23,7 @@ interface AIState {
   setUseRag: (use: boolean) => void;
   addMessage: (msg: Message) => void;
   clearHistory: () => void;
+  setDragPos: (pos: { x: number; y: number }) => void;
 
   // SSE Streaming logic
   askAI: (question: string, context: string) => Promise<void>;
@@ -35,6 +38,8 @@ export const useAIStore = create<AIState>((set, get) => ({
   useRag: false,
   ragReady: false,
   ragChecking: false,
+  ragLoading: false,
+  dragPos: null,
 
   toggleOpen: () => set((state) => ({ isOpen: !state.isOpen })),
   setMode: (mode) => set({ mode }),
@@ -42,14 +47,19 @@ export const useAIStore = create<AIState>((set, get) => ({
   addMessage: (msg) => set((state) => ({ messages: [...state.messages, msg] })),
   clearHistory: () => set({ messages: [] }),
 
+  setDragPos: (pos) => {
+    set({ dragPos: pos });
+    try { localStorage.setItem('tipitaka-ai-drag-pos', JSON.stringify(pos)); } catch {}
+  },
+
   checkRagStatus: async () => {
     set({ ragChecking: true });
     try {
       const res = await fetch('/api/ask/rag-status');
       const data = await res.json();
-      set({ ragReady: data.ready ?? false });
+      set({ ragReady: data.ready ?? false, ragLoading: data.loading ?? false });
     } catch {
-      set({ ragReady: false });
+      set({ ragReady: false, ragLoading: false });
     } finally {
       set({ ragChecking: false });
     }