feat: normalize reference extraction and popup UI

webapp/tipitaka-api/app/database/sqlite_db.py

@@ -82,6 +82,24 @@ class SQLiteDB:
             conn.execute("CREATE INDEX IF NOT EXISTS idx_search_log_query ON search_log(query)")
             conn.commit()
 
+    def ensure_reference_tables(self) -> None:
+        """Create reference_markers table on disk if not exists."""
+        with sqlite3.connect(self.db_path) as conn:
+            conn.execute("""
+                CREATE TABLE IF NOT EXISTS reference_markers (
+                    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+                    volume_num  INTEGER NOT NULL,
+                    page_num    INTEGER NOT NULL,
+                    marker_id   TEXT NOT NULL,
+                    type        TEXT NOT NULL, -- 'footnote' | 'abbrev'
+                    content     TEXT NOT NULL,
+                    UNIQUE(volume_num, page_num, marker_id, type)
+                )
+            """)
+            conn.execute("CREATE INDEX IF NOT EXISTS idx_ref_vol_page ON reference_markers(volume_num, page_num)")
+            conn.execute("CREATE INDEX IF NOT EXISTS idx_ref_marker ON reference_markers(marker_id)")
+            conn.commit()
+
     @property
     def is_in_memory(self) -> bool:
         return self._mem_conn is not None
@@ -97,4 +115,6 @@ def get_db() -> SQLiteDB:
     if _db is None:
         settings = get_settings()
         _db = SQLiteDB(settings.DATABASE_PATH)
+        _db.ensure_search_log_table()
+        _db.ensure_reference_tables()
     return _db

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

@@ -18,8 +18,8 @@ class ReferenceLookupRequest(BaseModel):
 def get_page_service(db: SQLiteDB = Depends(get_db)) -> PageService:
     return PageService(db)
 
-def get_llm_service() -> LLMService:
-    return LLMService()
+def get_llm_service(db: SQLiteDB = Depends(get_db)) -> LLMService:
+    return LLMService(db)
 
 @router.get("/lookup")
 async def lookup_reference(
@@ -37,12 +37,11 @@ async def lookup_reference(
         return {"content": content, "found": True}
     
     elif type == "abbrev":
-        # Abbreviation expansion usually needs context
-        # We fetch the page text if not provided
+        # Fetch page text for LLM context if DB index fails
         page_data = service.get_page(vol, page)
         context = page_data["content_text"] if page_data else ""
         
-        expansion = await llm.expand_abbreviation(context, id)
+        expansion = await llm.expand_abbreviation(vol, page, id, context)
         return {"content": expansion, "found": True}
     
     else:

webapp/tipitaka-api/app/scripts/index_references.py

@@ -0,0 +1,98 @@
+import re
+import sqlite3
+import os
+import sys
+from pathlib import Path
+
+# Add app to path to import services/db
+sys.path.append(str(Path(__file__).parent.parent.parent))
+
+from app.database.sqlite_db import get_db
+
+def extract_references():
+    db = get_db()
+    print(f"Starting reference indexing on {db.db_path}...")
+    
+    # We use disk connection for writes
+    with db.get_disk_connection() as conn:
+        cursor = conn.cursor()
+        
+        # 1. Get all pages
+        cursor.execute("""
+            SELECT p.id, v.volume_number, p.page_number, p.content_html
+            FROM pages p
+            JOIN volumes v ON p.volume_id = v.id
+            WHERE p.content_html IS NOT NULL
+        """)
+        
+        pages = cursor.fetchall()
+        total = len(pages)
+        print(f"Processing {total} pages...")
+        
+        indexed_count = 0
+        for i, page in enumerate(pages):
+            vol_num = page["volume_number"]
+            page_num = page["page_number"]
+            raw_html = page["content_html"]
+            
+            # Extract footnotes (@ markers)
+            # Strip line numbers first
+            fn_html = re.sub(r'<span\s+class="LineNumber">.*?</span>', '', raw_html)
+            lines = fn_html.split('\n')
+            
+            current_fn = None
+            for line in lines:
+                line_strip = line.strip()
+                if line_strip.startswith('@'):
+                    line_plain = re.sub(r'<[^>]+>', '', line_strip)
+                    # Match @ marker content
+                    m = re.match(r'^@\s*([(\[]?[\u0E50-\u0E59\d]+[)\]-]?)\s*(.*)', line_plain)
+                    if m:
+                        marker = m.group(1).strip()
+                        text = m.group(2).strip()
+                        clean_marker = re.sub(r'[()\[\]-]', '', marker).strip()
+                        
+                        if clean_marker and not re.search(r'เชิงอรรถ', marker):
+                            # Save current if exists
+                            if current_fn:
+                                save_ref(cursor, vol_num, page_num, current_fn["id"], "footnote", current_fn["content"])
+                                indexed_count += 1
+                                
+                            current_fn = {"id": clean_marker, "content": text}
+                    elif current_fn:
+                        # Continuation line starting with @
+                        current_fn["content"] += " " + line_plain.lstrip('@').strip()
+                elif current_fn:
+                    # Non-@ line ends the footnote block
+                    save_ref(cursor, vol_num, page_num, current_fn["id"], "footnote", current_fn["content"])
+                    indexed_count += 1
+                    current_fn = None
+            
+            if current_fn:
+                save_ref(cursor, vol_num, page_num, current_fn["id"], "footnote", current_fn["content"])
+                indexed_count += 1
+
+            # Extract abbreviations (ย่อ) - this is harder as they are often just (ย่อ) in text
+            # For now, we can look for specific (ย่อ) patterns that might have been manually defined
+            # or common ones we want to pre-cache. 
+            # In the current DB, most (ย่อ) are in-line. 
+            # If there are any @(ย่อ) or similar, we catch them above.
+            
+            if i % 1000 == 0:
+                print(f"Processed {i}/{total} pages... Indexed {indexed_count} markers")
+                conn.commit()
+
+        conn.commit()
+        print(f"Finished! Total indexed: {indexed_count}")
+
+def save_ref(cursor, vol, page, marker_id, ref_type, content):
+    try:
+        cursor.execute("""
+            INSERT OR REPLACE INTO reference_markers (volume_num, page_num, marker_id, type, content)
+            VALUES (?, ?, ?, ?, ?)
+        """, (vol, page, marker_id, ref_type, content.strip()))
+    except Exception as e:
+        print(f"Error saving ref {vol}:{page} {marker_id}: {e}")
+
+if __name__ == "__main__":
+    extract_references()

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

@@ -39,8 +39,11 @@ SYSTEM_PROMPT = (
 )
 
 
+from app.database.sqlite_db import SQLiteDB, get_db
+from app.services.search_service import SearchService
+
 class LLMService:
-    def __init__(self):
+    def __init__(self, db: Optional[SQLiteDB] = None):
         settings = get_settings()
         self.client = AsyncOpenAI(
             api_key=settings.LLM_API_KEY,
@@ -52,6 +55,8 @@ class LLMService:
             "reasoner": settings.LLM_MODEL_REASONER,
         }
         self.rag_service = RAGService()
+        self.db = db or get_db()
+        self.search_service = SearchService(self.db)
 
     def _resolve_model(self, mode: str) -> str:
         return self.model_map.get(mode, self.model_map["fast"])
@@ -110,14 +115,30 @@ class LLMService:
 
         except Exception as e:
             yield {'data': json.dumps({'error': str(e)})}
-    async def expand_abbreviation(self, context: str, abbrev_text: str) -> str:
-        """Use LLM to expand abbreviation (ย่อ) based on context."""
+
+    async def expand_abbreviation(self, vol: int, page: int, abbrev_text: str, context: str = "") -> str:
+        """Expand abbreviation (ย่อ) using DB index or LLM as fallback."""
+        clean_id = re.sub(r'[()\[\]-]', '', abbrev_text).strip()
+        
+        # 1. Try DB Index
+        with self.db.get_connection() as conn:
+            cursor = conn.cursor()
+            cursor.execute("""
+                SELECT content FROM reference_markers
+                WHERE volume_num = ? AND page_num = ? AND marker_id = ? AND type = 'abbrev'
+            """, (vol, page, clean_id))
+            row = cursor.fetchone()
+            if row:
+                return row["content"]
+
+        # 2. LLM Fallback
+        clean_ctx = self.search_service.clean_text(context) if context else ""
         prompt = (
             f"คุณคือผู้เชี่ยวชาญพระไตรปิฎก มจร. "
             f"ในเนื้อหาต่อไปนี้มีคำว่า '{abbrev_text}' (เช่น (ย่อ), ฯลฯ) "
             f"กรุณาอธิบายหรือขยายความสิ่งที่ถูกย่อไว้ให้สมบูรณ์ที่สุดตามหลักฐานในพระไตรปิฎก "
             f"โดยพิจารณาจากบริบทแวดล้อมที่ให้มา:\n\n"
-            f"เนื้อหาบริบท:\n{context[:4000]}\n\n"
+            f"เนื้อหาบริบท:\n{clean_ctx[:4000]}\n\n"
             f"กรุณาตอบเป็นข้อความสั้นๆ ที่เป็นเนื้อหาที่ถูกย่อไว้ หรืออธิบายว่าส่วนนี้ย่อมาจากอะไร "
             f"ถ้าไม่แน่ใจให้บอกว่าเป็นการย่อเพื่อละเนื้อหาที่ซ้ำกัน"
         )

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

@@ -152,9 +152,16 @@ class PageService:
 
                 def apply_inline_refs(text: str) -> str:
                     """Wrap inline (Thai_digit) and (ย่อ) references as superscript."""
+                    # Use a counter or some logic if we need multiple unique refs on one page?
+                    # For now, just using the ID itself is usually enough unless the same ref appears twice.
+                    def _wrap_fn(m):
+                        val = m.group(1)
+                        clean = re.sub(r'[()\[\]-]', '', val).strip()
+                        return f'<sup id="ref-{clean}" class="footnote-ref">({val})</sup>'
+
                     text = re.sub(
                         r'(?<=\S)\s*\(([\u0E50-\u0E59]+|\d+)\)',
-                        r'<sup class="footnote-ref">(\1)</sup>',
+                        _wrap_fn,
                         text
                     )
                     text = re.sub(
@@ -178,11 +185,12 @@ class PageService:
                     if re.match(footnote_pattern, line):
                         flush_para()
                         marker = line.strip()
+                        clean = re.sub(r'[()\[\]-]', '', marker).strip()
                         # Attach inline to the previous <p> so it doesn't create a gap
                         if wrapped_parts and wrapped_parts[-1].startswith('<p') and wrapped_parts[-1].endswith('</p>'):
-                            wrapped_parts[-1] = wrapped_parts[-1][:-4] + f' <sup class="footnote-ref">{marker}</sup></p>'
+                            wrapped_parts[-1] = wrapped_parts[-1][:-4] + f' <sup id="ref-{clean}" class="footnote-ref">{marker}</sup></p>'
                         else:
-                            wrapped_parts.append(f'<p class="footnote-ref">{marker}</p>')
+                            wrapped_parts.append(f'<p class="footnote-ref"><sup id="ref-{clean}">{marker}</sup></p>')
                     elif re.match(abbrev_pattern, line):
                         # (ย่อ) / ๓ (ย่อ) / (๓) (ย่อ) — split into separate sups:
                         # number part → footnote-ref, (ย่อ) → abbrev-ref
@@ -372,59 +380,38 @@ class PageService:
             columns = [c[0] for c in cursor.description]
             return [dict(zip(columns, row)) for row in cursor.fetchall()]
     def get_footnote(self, volume_number: int, page_number: int, footnote_id: str) -> Optional[str]:
-        """Extract footnote definition from raw HTML based on footnote_id."""
+        """Lookup footnote from indexed reference_markers table."""
+        # Clean footnote_id (e.g. "(๑)" -> "๑", "๑-" -> "๑")
+        clean_id = re.sub(r'[()\[\]-]', '', footnote_id).strip()
+        if not clean_id:
+            return None
+
         with self.db.get_connection() as conn:
             cursor = conn.cursor()
+            
+            # 1. Try exact page first
             cursor.execute("""
-                SELECT p.content_html
-                FROM pages p
-                JOIN volumes v ON p.volume_id = v.id
-                WHERE v.volume_number = ? AND p.page_number = ?
-            """, (volume_number, page_number))
+                SELECT content FROM reference_markers
+                WHERE volume_num = ? AND page_num = ? AND marker_id = ? AND type = 'footnote'
+            """, (volume_number, page_number, clean_id))
             row = cursor.fetchone()
-            if not row or not row["content_html"]:
-                return None
-            
-            raw_html = row["content_html"]
-            lines = raw_html.split('\n')
+            if row:
+                return row["content"]
             
-            # Clean footnote_id (e.g. "(๑)" -> "๑", "๑-" -> "๑")
-            clean_id = re.sub(r'[()\[\]-]', '', footnote_id).strip()
-            
-            # Patterns to match definition start: @๑, @(๑), @[๑]
-            # or just ๑ at the bottom (though @ is more reliable in MCU)
-            found_lines = []
-            capturing = False
-            
-            for line in lines:
-                line_strip = line.strip()
-                # Remove tags for matching to handle @<I>๑</I>
-                line_plain = re.sub(r'<[^>]+>', '', line_strip)
-                
-                # Definition start pattern: matches @ followed by optional bracket/paren and the id
-                # e.g. @๑, @(๑), @[๑], @๑-
-                start_pattern = rf'^@\s*[(\[]?{re.escape(clean_id)}[)\]-]?.*'
+            # 2. Try window search (+/- 2 pages) to handle markers defined nearby
+            # This is common in MCU where a footnote ref on page X might be defined at the start of page X+1
+            # or end of page X-1.
+            cursor.execute("""
+                SELECT content, page_num FROM reference_markers
+                WHERE volume_num = ? 
+                  AND page_num BETWEEN ? AND ? 
+                  AND marker_id = ? 
+                  AND type = 'footnote'
+                ORDER BY ABS(page_num - ?) ASC
+                LIMIT 1
+            """, (volume_number, page_number - 2, page_number + 2, clean_id, page_number))
+            row = cursor.fetchone()
+            if row:
+                return row["content"]
                 
-                if re.match(start_pattern, line_plain):
-                    capturing = True
-                    # Strip the @ and marker part from the plain text to get content
-                    content = re.sub(rf'^@\s*[(\[]?{re.escape(clean_id)}[)\]-]?\s*', '', line_plain)
-                    if content:
-                        found_lines.append(content)
-                elif capturing:
-                    if line_strip.startswith('@'):
-                        # Check if it's the next footnote or just a continuation line
-                        # Continuation lines also start with @ but usually don't have a new marker immediately
-                        next_marker = re.match(r'^@\s*[(\[]?[\u0E50-\u0E59\d]+[)\]-]?\s+\S', line_strip)
-                        if next_marker:
-                            break # Found next footnote
-                        else:
-                            # Continuation line
-                            found_lines.append(line_strip.lstrip('@').strip())
-                    else:
-                        # Non-@ line ends the footnote block
-                        break
-            
-            if found_lines:
-                return " ".join(found_lines)
             return None

webapp/tipitaka-web/src/components/common/ErrorBoundary.tsx

@@ -0,0 +1,61 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  componentName?: string;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error(`Uncaught error in ${this.props.componentName || 'component'}:`, error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-200 text-sm">
+          <div className="flex items-center gap-2 mb-2">
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            <span className="font-bold">เกิดข้อผิดพลาดในการแสดงผล</span>
+          </div>
+          <p className="opacity-80 leading-relaxed">
+            มีบางอย่างผิดพลาดในส่วนนี้ของแอปพลิเคชัน 
+            {this.props.componentName && ` (${this.props.componentName})`}
+          </p>
+          <button 
+            onClick={() => this.setState({ hasError: false, error: null })}
+            className="mt-3 text-xs font-medium underline hover:no-underline opacity-60 hover:opacity-100"
+          >
+            ลองใหม่อีกครั้ง
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

webapp/tipitaka-web/src/components/layout/AppShell.tsx

@@ -4,6 +4,7 @@ import ReaderPanel from './ReaderPanel';
 import RightToolbar from '../toolbar/RightToolbar';
 import MobileBottomBar from './MobileBottomBar';
 import AIPopup from '../ai/AIPopup';
+import ErrorBoundary from '../common/ErrorBoundary';
 import { Menu } from 'lucide-react';
 import { useUIStore, useThemeStore } from '../../stores/appStore';
 import { useAIStore } from '../../stores/aiStore';
@@ -79,7 +80,9 @@ const AppShell: React.FC = () => {
 
         {/* Scrollable reader — id is referenced by RightToolbar scroll-to-top */}
         <div id="reader-scroll-container" className="flex-1 overflow-y-auto scroll-smooth">
-          <ReaderPanel />
+          <ErrorBoundary componentName="ReaderPanel">
+            <ReaderPanel />
+          </ErrorBoundary>
         </div>
       </div>
 
@@ -102,7 +105,11 @@ const AppShell: React.FC = () => {
 
       {/* AI Popup */}
       <AnimatePresence>
-        {isOpen && <AIPopup />}
+        {isOpen && (
+          <ErrorBoundary componentName="AIPopup">
+            <AIPopup />
+          </ErrorBoundary>
+        )}
       </AnimatePresence>
     </div>
   );

webapp/tipitaka-web/src/components/layout/ReaderPanel.tsx

@@ -4,6 +4,7 @@ import api from '../../lib/api';
 import { motion, AnimatePresence } from 'framer-motion';
 import SelectionPopup from '../reader/SelectionPopup';
 import ReferencePopup, { type RefPopupPos } from '../reader/ReferencePopup';
+import ErrorBoundary from '../common/ErrorBoundary';
 import { useSwipeNav } from '../../hooks/useSwipeNav';
 
 const THEME_STYLES: Record<string, { reader: string; muted: string }> = {
@@ -160,10 +161,31 @@ const ReaderPanel: React.FC = () => {
     }
   };
 
+  const scrollToElement = (id: string) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      element.classList.add('bg-[#c8860a]/20');
+      setTimeout(() => element.classList.remove('bg-[#c8860a]/20'), 2000);
+    }
+  };
+
+  const scrollToFootnote = (fnId: string) => {
+    const cleanId = fnId.replace(/[()\[\]-]/g, '').trim();
+    scrollToElement(`fn-item-${cleanId}`);
+    setRefPos(null); // Close popup after jump
+  };
+
   return (
     <div ref={swipeRef} className={`flex-1 min-h-screen transition-colors duration-300 ${shellCls}`}>
       <SelectionPopup />
-      <ReferencePopup pos={refPos} onClose={() => setRefPos(null)} />
+      <ErrorBoundary componentName="ReferencePopup">
+        <ReferencePopup 
+          pos={refPos} 
+          onClose={() => setRefPos(null)} 
+          onJump={scrollToFootnote}
+        />
+      </ErrorBoundary>
       <div className="max-w-3xl mx-auto px-4 py-10 lg:py-16">
         <AnimatePresence mode="wait">
           {loading ? (
@@ -222,12 +244,21 @@ const ReaderPanel: React.FC = () => {
                     เชิงอรรถ (Footnotes)
                   </h5>
                   <div className="space-y-4">
-                    {content.footnotes.map((fn: any, idx: number) => (
-                      <div key={idx} className="flex gap-3 text-[13px] leading-relaxed text-white/50 hover:text-white/80 transition-colors">
-                        <span className="text-[#c8860a] font-bold min-w-[24px] text-right shrink-0">{fn.id}</span>
-                        <span className="font-light">{fn.content}</span>
-                      </div>
-                    ))}
+                    {content.footnotes.map((fn: any, idx: number) => {
+                      const cleanId = fn.id.replace(/[()\[\]-]/g, '').trim();
+                      return (
+                        <div 
+                          key={idx} 
+                          id={`fn-item-${cleanId}`}
+                          className="flex gap-3 text-[13px] leading-relaxed text-white/50 hover:text-white/80 transition-all p-2 -m-2 rounded-lg cursor-pointer group"
+                          onClick={() => scrollToElement(`ref-${cleanId}`)}
+                          title="คลิกเพื่อกลับไปยังเนื้อหา"
+                        >
+                          <span className="text-[#c8860a] font-bold min-w-[24px] text-right shrink-0 group-hover:scale-110 transition-transform">{fn.id}</span>
+                          <span className="font-light">{fn.content}</span>
+                        </div>
+                      );
+                    })}
                   </div>
                 </div>
               )}

webapp/tipitaka-web/src/components/reader/ReferencePopup.tsx

@@ -13,9 +13,10 @@ export interface RefPopupPos {
 interface Props {
   pos: RefPopupPos | null;
   onClose: () => void;
+  onJump?: (id: string) => void;
 }
 
-const ReferencePopup: React.FC<Props> = ({ pos, onClose }) => {
+const ReferencePopup: React.FC<Props> = ({ pos, onClose, onJump }) => {
   const popupRef = useRef<HTMLDivElement>(null);
 
   const [content, setContent] = React.useState<string | null>(null);
@@ -131,6 +132,20 @@ const ReferencePopup: React.FC<Props> = ({ pos, onClose }) => {
                 <span className="text-[10px] text-white/30 uppercase tracking-tighter">AI Expanded</span>
               </div>
             )}
+
+            {pos.type === 'footnote' && !isLoading && onJump && (
+              <div className="mt-4 pt-3 border-t border-white/5">
+                <button
+                  onClick={() => onJump(pos.id)}
+                  className="w-full py-2 px-3 rounded-xl bg-white/5 hover:bg-white/10 text-[#c8860a] text-xs font-bold transition-all flex items-center justify-center gap-2 group"
+                >
+                  <svg className="w-3.5 h-3.5 transform group-hover:translate-y-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+                  </svg>
+                  ดูเนื้อหาเต็มด้านล่าง
+                </button>
+              </div>
+            )}
           </div>
 
           {/* Tail arrow */}