feat(ai): design improvements for chat popup, speeddial menu, resizable answer card, and centered header disclaimer

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

@@ -0,0 +1,170 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence, type Variants } from 'framer-motion';
+import { Sparkles, X, MessageSquareText, FileText, Scale, Lightbulb, MessageSquare } from 'lucide-react';
+import { useAIStore } from '../../stores/aiStore';
+import { useReaderStore, useThemeStore } from '../../stores/appStore';
+
+const MENU_STYLES: Record<string, { btnBg: string; text: string; border: string; labelBg: string }> = {
+  dark:    { btnBg: 'bg-[#1a1a2e]/90', text: 'text-white', border: 'border-[#3a3a5e]/60', labelBg: 'bg-[#0f0f1e]/95 text-white/90 border-[#3a3a5e]' },
+  light:   { btnBg: 'bg-[#fdfaf5]/90', text: 'text-[#1a1a1a]', border: 'border-[#e0d0b0]/60', labelBg: 'bg-[#f5edd8]/95 text-[#1a1a1a] border-[#e0d0b0]' },
+  classic: { btnBg: 'bg-[#faf7f2]/90', text: 'text-[#1a1a1a]', border: 'border-[#d4c4a0]/60', labelBg: 'bg-[#fdfaf5]/95 text-[#1a1a1a] border-[#d4c4a0]' },
+};
+
+const AIFloatingMenu: React.FC = () => {
+  const [isOpenMenu, setIsOpenMenu] = useState(false);
+  const { theme } = useThemeStore();
+  const { currentVolume, currentPage, currentContent } = useReaderStore();
+  const { askAI, setViewMode, isOpen, toggleOpen, isStreaming } = useAIStore();
+
+  const s = MENU_STYLES[theme] ?? MENU_STYLES.dark;
+
+  const actions = [
+    {
+      icon: <MessageSquareText size={18} />,
+      label: 'อธิบาย',
+      prompt: 'ช่วยอธิบายเนื้อหานี้ให้เข้าใจง่ายขึ้น',
+      isPrompt: true,
+    },
+    {
+      icon: <FileText size={18} />,
+      label: 'สรุป',
+      prompt: 'ช่วยสรุปใจความสำคัญของเนื้อหานี้เป็นข้อๆ',
+      isPrompt: true,
+    },
+    {
+      icon: <Scale size={18} />,
+      label: 'วิเคราะห์ธรรม',
+      prompt: 'ช่วยวิเคราะห์หลักธรรมที่ปรากฏในเนื้อหานี้',
+      isPrompt: true,
+    },
+    {
+      icon: <Lightbulb size={18} />,
+      label: 'ประยุกต์ใช้',
+      prompt: 'หลักธรรมนี้ประยุกต์ใช้ในชีวิตประจำวันได้อย่างไร',
+      isPrompt: true,
+    },
+    {
+      icon: <MessageSquare size={18} />,
+      label: 'แชทสอบถาม',
+      prompt: null,
+      isPrompt: false,
+    },
+  ];
+
+  const handleAction = async (prompt: string | null, isPrompt: boolean) => {
+    setIsOpenMenu(false);
+    
+    if (isPrompt && prompt) {
+      setViewMode('answer');
+      const context = `เล่มที่ ${currentVolume} หน้าที่ ${currentPage}\nเนื้อหา:\n${currentContent}`;
+      await askAI(prompt, context);
+    } else {
+      setViewMode('chat');
+      // If not open, open it
+      if (!isOpen) {
+        toggleOpen();
+      }
+    }
+  };
+
+  const containerVariants: Variants = {
+    open: {
+      transition: {
+        staggerChildren: 0.05,
+      },
+    },
+    closed: {
+      transition: {
+        staggerChildren: 0.05,
+        staggerDirection: -1,
+      },
+    },
+  };
+
+  const itemVariants: Variants = {
+    open: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { type: 'spring', stiffness: 300, damping: 25 },
+    },
+    closed: {
+      opacity: 0,
+      y: 20,
+      scale: 0.8,
+      transition: { duration: 0.15 },
+    },
+  };
+
+  // If the main AI Chat/Answer window is open, hide the Speed Dial menu
+  if (isOpen) return null;
+
+  return (
+    <>
+      {/* Background Overlay (Click outside to close) */}
+      <AnimatePresence>
+        {isOpenMenu && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={() => setIsOpenMenu(false)}
+            className="fixed inset-0 z-30 bg-black/10 backdrop-blur-[2px]"
+          />
+        )}
+      </AnimatePresence>
+
+      <div className="fixed right-14 bottom-14 lg:bottom-6 z-40 flex flex-col items-end">
+        {/* Speed Dial Menu Items */}
+        <AnimatePresence>
+          {isOpenMenu && (
+            <motion.div
+              variants={containerVariants}
+              initial="closed"
+              animate="open"
+              exit="closed"
+              className="flex flex-col items-end gap-3 mb-4 pointer-events-auto"
+            >
+              {actions.map((act, idx) => (
+                <motion.div
+                  key={idx}
+                  variants={itemVariants}
+                  className="flex items-center group cursor-pointer"
+                  onClick={() => handleAction(act.prompt, act.isPrompt)}
+                >
+                  {/* Label Pill */}
+                  <span className={`mr-3 px-3 py-1.5 rounded-xl text-[11px] font-bold border shadow-md whitespace-nowrap transition-transform duration-200 group-hover:scale-105 ${s.labelBg}`}>
+                    {act.label}
+                  </span>
+                  
+                  {/* Action Button */}
+                  <button
+                    disabled={isStreaming}
+                    className={`w-11 h-11 rounded-full flex items-center justify-center border shadow-lg backdrop-blur-md transition-all duration-200 group-hover:scale-110 active:scale-95 disabled:opacity-50 ${s.btnBg} ${s.text} ${s.border} hover:bg-[#c8860a] hover:text-white hover:border-[#c8860a]`}
+                    title={act.label}
+                  >
+                    {act.icon}
+                  </button>
+                </motion.div>
+              ))}
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* Main Floating Action Button (FAB) */}
+        <motion.button
+          onClick={() => setIsOpenMenu(v => !v)}
+          className="w-14 h-14 rounded-full bg-[#c8860a] text-white flex items-center justify-center shadow-xl hover:bg-[#9a6307] transition-all duration-200 active:scale-95"
+          style={{ transformOrigin: 'center' }}
+          animate={{ rotate: isOpenMenu ? 135 : 0 }}
+          transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+          title="ผู้ช่วย AI"
+        >
+          {isOpenMenu ? <X size={24} /> : <Sparkles size={24} />}
+        </motion.button>
+      </div>
+    </>
+  );
+};
+
+export default AIFloatingMenu;

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

@@ -12,20 +12,24 @@ const PANEL_STYLES: Record<string, { bg: string; text: string; border: string; m
   classic: { bg: 'bg-[#fdfaf5]', text: 'text-[#1a1a1a]', border: 'border-[#d4c4a0]', msgBg: 'bg-[#faf7f2]', focusBg: 'bg-[#f8f4ed]' },
 };
 
+const ANSWER_CARD_STYLES: Record<string, { bg: string; border: string; text: string; btnBg: string; titleBg: string }> = {
+  dark:    { bg: 'bg-[#0f0f1e]/80 backdrop-blur-md', border: 'border-[#3a3a5e]/80', text: 'text-[#e0e0e0]', btnBg: 'bg-white/10 hover:bg-[#c8860a] text-white border-white/10 hover:border-[#c8860a]', titleBg: 'bg-black/20' },
+  light:   { bg: 'bg-[#f5edd8]/85 backdrop-blur-md', border: 'border-[#e0d0b0]/80', text: 'text-[#1a1a1a]', btnBg: 'bg-black/5 hover:bg-[#c8860a] text-neutral-800 hover:text-white border-black/10 hover:border-[#c8860a]', titleBg: 'bg-black/5' },
+  classic: { bg: 'bg-[#fdfaf5]/85 backdrop-blur-md', border: 'border-[#d4c4a0]/80', text: 'text-[#1a1a1a]', btnBg: 'bg-black/5 hover:bg-[#c8860a] text-neutral-800 hover:text-white border-black/10 hover:border-[#c8860a]', titleBg: 'bg-black/5' },
+};
+
 const AIPopup: React.FC = () => {
   const {
     isOpen, toggleOpen, messages, isStreaming,
     askAI, clearHistory, mode, setMode,
     useRag, setUseRag, checkRagStatus, ragReady, ragChecking, ragLoading,
-    dragPos, setDragPos,
+    dragPos, setDragPos, viewMode, setViewMode,
   } = useAIStore();
 
   const { currentVolume, currentPage, currentContent } = useReaderStore();
   const { theme } = useThemeStore();
+  const ac = ANSWER_CARD_STYLES[theme] ?? ANSWER_CARD_STYLES.dark;
   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);
@@ -69,23 +73,25 @@ const AIPopup: React.FC = () => {
     }
   }, []);
 
-  // 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
 
+    // Check if the click was on interactive elements
+    const target = e.target as HTMLElement;
+    if (
+      target.closest('button') || 
+      target.closest('input') || 
+      target.closest('select') || 
+      target.closest('a') ||
+      target.closest('[role="button"]')
+    ) {
+      return;
+    }
+
     setIsDragging(true);
     const rect = panelRef.current?.getBoundingClientRect();
     if (rect) {
@@ -297,7 +303,7 @@ const AIPopup: React.FC = () => {
             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}
+              ${viewMode === 'answer' ? `${ac.bg} ${ac.text} ${ac.border}` : `${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'}
               md:w-auto
@@ -306,7 +312,7 @@ const AIPopup: React.FC = () => {
               ${isDragging ? 'cursor-grabbing select-none' : ''}
               ${resizeDir ? 'select-none' : ''}
               ${expandedIndex !== null ? 'pointer-events-none opacity-0' : ''}
-              transition-opacity duration-300
+              transition-all duration-300
             `}
             style={{
               width: window.innerWidth >= 768 ? width : undefined,
@@ -336,198 +342,282 @@ const AIPopup: React.FC = () => {
                 </div>
               </>
             )}
-            {/* ═══════════ Compact Header + Drag Handle ═══════════ */}
-            <div
-              className="flex flex-col flex-shrink-0 relative overflow-hidden"
-              onMouseDown={handleMouseDown}
-              style={{ cursor: window.innerWidth >= 768 ? 'grab' : undefined }}
-            >
-              {/* Glass background layer */}
-              <div className="absolute inset-0 bg-[#c8860a] opacity-90" />
-              <div className="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent pointer-events-none" />
-              
-              {/* Row 1: Title + actions */}
-              <div className="relative flex items-center justify-between px-3 py-2.5 z-10">
-                <div className="flex items-center gap-2.5 min-w-0">
-                  <div className="w-7 h-7 rounded-lg bg-white/20 flex items-center justify-center shadow-inner">
-                    <Sparkles size={16} className="text-white" />
-                  </div>
-                  <div>
-                    <h3 className="font-bold text-sm tracking-wide text-white">ผู้ช่วย AI</h3>
-                    <p className="text-[9px] text-white/70 font-medium uppercase tracking-tighter">Dhamma Assistant</p>
+
+            {viewMode === 'answer' ? (
+              <>
+                {/* ═══════════ Compact Answer Card Header ═══════════ */}
+                <div
+                  className={`flex flex-col flex-shrink-0 relative overflow-hidden border-b ${ac.border}`}
+                  onMouseDown={handleMouseDown}
+                  style={{ cursor: window.innerWidth >= 768 ? 'grab' : undefined }}
+                >
+                  <div className={`absolute inset-0 ${ac.titleBg}`} />
+                  <div className="relative flex items-center justify-between px-3 py-2.5 z-10">
+                    <div className="flex items-center gap-2.5 min-w-0">
+                      <div className="w-7 h-7 rounded-lg bg-[#c8860a] flex items-center justify-center shadow-inner">
+                        <Sparkles size={15} className="text-white animate-pulse" />
+                      </div>
+                      <div>
+                        <h3 className="font-bold text-xs tracking-wide uppercase text-[#c8860a]">
+                          {isStreaming ? 'กำลังประมวลผลด้วย AI...' : 'บทวิเคราะห์ธรรมจาก AI'}
+                        </h3>
+                      </div>
+                    </div>
+
+                    {/* Disclaimer in the middle of title bar (Desktop only) */}
+                    <div className="hidden md:block absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[9.5px] font-semibold text-[#c8860a] max-w-[50%] text-center leading-normal select-none pointer-events-none animate-pulse">
+                      💡 บทวิเคราะห์นี้ประมวลผลโดย AI ผู้อ่านพึงใช้วิจารณญาณและสอบทานข้อมูลอย่างรอบด้านตามหลักกาลามสูตร
+                    </div>
+
+                    <button 
+                      onClick={toggleOpen} 
+                      onMouseDown={e => e.stopPropagation()} 
+                      className="p-1.5 hover:bg-white/10 rounded-lg transition-colors" 
+                      aria-label="ปิด"
+                    >
+                      <X size={16} />
+                    </button>
                   </div>
                 </div>
-                <div className="flex items-center gap-1 flex-shrink-0">
-                  <div className="flex bg-black/15 rounded-lg p-0.5 mr-1">
+
+                {/* ═══════════ Answer Card Body (Prose with transparent styles) ═══════════ */}
+                <div ref={scrollRef} className="flex-1 overflow-y-auto p-4 space-y-4">
+                  {(() => {
+                    const lastAiIndex = messages.findLastIndex(m => m.role === 'assistant');
+                    const lastAi = lastAiIndex !== -1 ? messages[lastAiIndex] : null;
+
+                    if (!lastAi) {
+                      return (
+                        <div className="h-full flex flex-col items-center justify-center text-center opacity-50 gap-2">
+                          <Sparkles size={20} className="animate-pulse text-[#c8860a]" />
+                          <p className="text-xs">กำลังเตรียมคำตอบ...</p>
+                        </div>
+                      );
+                    }
+
+                    return (
+                      <div className="flex flex-col items-start w-full">
+                        {lastAi.thinking && (
+                          <div className="w-full mb-3 p-3 rounded-xl border-l-2 border-[#c8860a]/30 text-[10.5px] italic opacity-70 bg-black/15 whitespace-pre-wrap">
+                            <span className="font-bold flex items-center gap-1 mb-1 not-italic text-[#c8860a]/85">
+                              <Brain size={11} /> กระบวนการคิด...
+                            </span>
+                            {lastAi.thinking}
+                          </div>
+                        )}
+                        <div className={`prose prose-sm max-w-none w-full ${proseTheme} prose-headings:text-inherit prose-headings:font-bold prose-headings:mt-3 prose-headings:mb-1 prose-p:my-1.5 prose-ul:my-1.5 prose-li:my-0.5 prose-table:text-xs prose-table:border-collapse prose-th:border prose-th:border-[#c8860a]/30 prose-th:bg-[#c8860a]/10 prose-th:px-2 prose-th:py-1 prose-td:border prose-td:border-[#c8860a]/20 prose-td:px-2 prose-td:py-1 prose-code:bg-[#c8860a]/10 prose-code:px-1 prose-code:rounded prose-pre:bg-black/20 prose-pre:rounded-xl prose-pre:p-3 prose-pre:text-xs prose-strong:text-inherit prose-a:text-[#c8860a] leading-relaxed`}>
+                          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                            {lastAi.content || (isStreaming ? '...' : '')}
+                          </ReactMarkdown>
+                        </div>
+                      </div>
+                    );
+                  })()}
+                </div>
+
+                {/* ═══════════ Answer Card Footer ═══════════ */}
+                <div className={`p-3 border-t flex flex-col gap-2.5 flex-shrink-0 ${ac.border}`}>
+                  {/* Action Buttons */}
+                  <div className="flex gap-2 justify-end">
+                    {(() => {
+                      const lastAiIdx = messages.findLastIndex(m => m.role === 'assistant');
+                      return (
+                        <button
+                          onClick={() => {
+                            if (lastAiIdx !== -1) setExpandedIndex(lastAiIdx);
+                          }}
+                          disabled={isStreaming || lastAiIdx === -1}
+                          className={`flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs font-bold border transition-all active:scale-95 disabled:opacity-40 ${ac.btnBg}`}
+                        >
+                          <Maximize2 size={13} />
+                          อ่านเต็มจอ
+                        </button>
+                      );
+                    })()}
                     <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>
+                      onClick={() => setViewMode('chat')}
+                      disabled={isStreaming}
+                      className={`flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs font-bold border transition-all active:scale-95 disabled:opacity-40 ${ac.btnBg}`}
+                    >
+                      <Send size={13} />
+                      คุยต่อ
+                    </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>
+                      onClick={toggleOpen}
+                      className={`flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs font-bold border transition-all active:scale-95 ${ac.btnBg}`}
+                    >
+                      <X size={13} />
+                      ปิด
+                    </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>
-
-              {/* 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"
+              </>
+            ) : (
+              <>
+                {/* ═══════════ Compact Chat Header ═══════════ */}
+                <div
+                  className="flex flex-col flex-shrink-0 relative overflow-hidden"
+                  onMouseDown={handleMouseDown}
+                  style={{ cursor: window.innerWidth >= 768 ? 'grab' : undefined }}
                 >
-                  <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>
-
-            {/* ═══════════ 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>
+                  {/* Glass background layer */}
+                  <div className="absolute inset-0 bg-[#c8860a] opacity-90" />
+                  <div className="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent pointer-events-none" />
+                  
+                  {/* Row 1: Title + actions */}
+                  <div className="relative flex items-center justify-between px-3 py-2.5 z-10">
+                    <div className="flex items-center gap-2.5 min-w-0">
+                      <div className="w-7 h-7 rounded-lg bg-white/20 flex items-center justify-center shadow-inner">
+                        <Sparkles size={16} className="text-white" />
+                      </div>
+                      <div>
+                        <h3 className="font-bold text-sm tracking-wide text-white">ผู้ช่วย AI</h3>
+                        <p className="text-[9px] text-white/70 font-medium uppercase tracking-tighter">Dhamma Assistant</p>
+                      </div>
                     </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>
-
-            {/* ═══════════ 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]" />
+
+                    {/* Disclaimer in the middle of title bar (Desktop only) */}
+                    <div className="hidden md:block absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[9.5px] font-semibold text-[#ffe0a0] max-w-[50%] text-center leading-normal select-none pointer-events-none">
+                      💡 บทวิเคราะห์นี้ประมวลผลโดย AI ผู้อ่านพึงใช้วิจารณญาณและสอบทานข้อมูลอย่างรอบด้านตามหลักกาลามสูตร
                     </div>
-                    <div>
-                      <p className="text-sm font-bold mb-0.5">ยินดีต้อนรับ</p>
-                      <p className="text-xs opacity-60">ลองถามเกี่ยวกับการสรุปหน้าปัจจุบัน หรือคำศัพท์บาลีที่สงสัยดูครับ</p>
+
+                    <div className="flex items-center gap-1 flex-shrink-0">
+                      <button onClick={clearHistory} onMouseDown={e => e.stopPropagation()} className="p-1.5 hover:bg-white/20 rounded-lg transition-colors text-white" 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 text-white" aria-label="ปิด"><X size={16} /></button>
                     </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={`prose prose-sm max-w-none ${proseTheme} prose-headings:text-inherit prose-headings:font-bold prose-headings:mt-3 prose-headings:mb-1 prose-p:my-1 prose-ul:my-1 prose-li:my-0.5 prose-table:text-xs prose-table:border-collapse prose-th:border prose-th:border-[#c8860a]/30 prose-th:bg-[#c8860a]/10 prose-th:px-2 prose-th:py-1 prose-td:border prose-td:border-[#c8860a]/20 prose-td:px-2 prose-td:py-1 prose-code:bg-[#c8860a]/10 prose-code:px-1 prose-code:rounded prose-pre:bg-black/20 prose-pre:rounded-xl prose-pre:p-3 prose-pre:text-xs prose-strong:text-inherit prose-a:text-[#c8860a] leading-relaxed`}>
-                        {msg.content || (isStreaming && i === messages.length - 1 ? '...' : '') ? (
-                          <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                            {msg.content || (isStreaming && i === messages.length - 1 ? '...' : '')}
-                          </ReactMarkdown>
-                        ) : null}
+                </div>
+
+                {/* ═══════════ Settings Bar (Row 2) with high contrast ═══════════ */}
+                {(() => {
+                  const settingsBg = theme === 'dark' ? 'bg-[#15152a]' : theme === 'classic' ? 'bg-[#f4ebe0]' : 'bg-[#ece4cf]';
+                  const settingsBorder = theme === 'dark' ? 'border-[#3a3a5e]/50' : theme === 'classic' ? 'border-[#d4c4a0]/50' : 'border-[#e0d0b0]/50';
+                  const settingsText = theme === 'dark' ? 'text-white/80 hover:text-white' : 'text-neutral-700 hover:text-neutral-900';
+                  return (
+                    <div className={`flex items-center justify-between px-3 py-1.5 border-b ${settingsBorder} ${settingsBg} ${settingsText} z-10`}>
+                      {/* RAG Toggle */}
+                      <button
+                        onClick={() => setUseRag(!useRag)}
+                        onMouseDown={e => e.stopPropagation()}
+                        className="flex items-center gap-1.5 text-[10px] font-semibold transition-colors"
+                      >
+                        <span className="flex items-center gap-1.5">
+                          <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-[#c8860a] justify-end' 
+                            : (theme === 'dark' ? 'bg-white/10 justify-start' : 'bg-black/10 justify-start')
+                        }`}>
+                          <span className="w-2.5 h-2.5 bg-white rounded-full shadow-xs" />
+                        </span>
+                      </button>
+
+                      {/* Model switcher */}
+                      <div className="flex bg-black/10 rounded-lg p-0.5 border border-white/5">
+                        <button
+                          onClick={() => setMode('fast')}
+                          onMouseDown={e => e.stopPropagation()}
+                          className={`flex items-center gap-1 px-2 py-0.5 text-[10px] font-bold uppercase rounded-md transition-all ${
+                            mode === 'fast' ? 'bg-[#c8860a] text-white shadow-sm' : 'opacity-60 hover:opacity-100'
+                          }`}
+                        >
+                          <Zap size={9} /> เร็ว
+                        </button>
+                        <button
+                          onClick={() => setMode('reasoner')}
+                          onMouseDown={e => e.stopPropagation()}
+                          className={`flex items-center gap-1 px-2 py-0.5 text-[10px] font-bold uppercase rounded-md transition-all ${
+                            mode === 'reasoner' ? 'bg-[#c8860a] text-white shadow-sm' : 'opacity-60 hover:opacity-100'
+                          }`}
+                        >
+                          <Brain size={9} /> คิดลึก
+                        </button>
                       </div>
                     </div>
+                  );
+                })()}
+
+
+
+                {/* ═══════════ Messages Area ═══════════ */}
+                <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={`prose prose-sm max-w-none ${proseTheme} prose-headings:text-inherit prose-headings:font-bold prose-headings:mt-3 prose-headings:mb-1 prose-p:my-1 prose-ul:my-1 prose-li:my-0.5 prose-table:text-xs prose-table:border-collapse prose-th:border prose-th:border-[#c8860a]/30 prose-th:bg-[#c8860a]/10 prose-th:px-2 prose-th:py-1 prose-td:border prose-td:border-[#c8860a]/20 prose-td:px-2 prose-td:py-1 prose-code:bg-[#c8860a]/10 prose-code:px-1 prose-code:rounded prose-pre:bg-black/20 prose-pre:rounded-xl prose-pre:p-3 prose-pre:text-xs prose-strong:text-inherit prose-a:text-[#c8860a] leading-relaxed`}>
+                            {msg.content || (isStreaming && i === messages.length - 1 ? '...' : '') ? (
+                              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                                {msg.content || (isStreaming && i === messages.length - 1 ? '...' : '')}
+                              </ReactMarkdown>
+                            ) : null}
+                          </div>
+                        </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>
+                  {/* 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>
-              )}
-            </div>
-
-            {/* ═══════════ Input ═══════════ */}
-            <form onSubmit={handleSubmit} className={`p-3 md:p-4 border-t ${s.border} flex gap-2 flex-shrink-0 ${s.bg}`}>
-              <div className="relative flex-1">
-                <input type="text" value={input} onChange={(e) => setInput(e.target.value)}
-                  placeholder="ถามเกี่ยวกับพระธรรมในหน้านี้..." disabled={isStreaming}
-                  className={`w-full pl-4 pr-12 py-2.5 rounded-2xl outline-none text-sm disabled:opacity-50 border shadow-inner transition-all ${s.border} ${s.msgBg} ${s.text} focus:border-[#c8860a] focus:ring-2 focus:ring-[#c8860a]/20`}
-                />
-                <button type="submit" disabled={!input.trim() || isStreaming}
-                  className="absolute right-1.5 top-1.5 p-2 bg-[#c8860a] text-white rounded-xl disabled:opacity-50 hover:bg-[#9a6307] transition-all shadow-md active:scale-95"
-                >
-                  <Send size={14} />
-                </button>
-              </div>
-            </form>
+
+                {/* ═══════════ Input ═══════════ */}
+                <form onSubmit={handleSubmit} className={`p-3 md:p-4 border-t ${s.border} flex gap-2 flex-shrink-0 ${s.bg}`}>
+                  <div className="relative flex-1">
+                    <input type="text" value={input} onChange={(e) => setInput(e.target.value)}
+                      placeholder="ถามเกี่ยวกับพระธรรมในหน้านี้..." disabled={isStreaming}
+                      className={`w-full pl-4 pr-12 py-2.5 rounded-2xl outline-none text-sm disabled:opacity-50 border shadow-inner transition-all ${s.border} ${s.msgBg} ${s.text} focus:border-[#c8860a] focus:ring-2 focus:ring-[#c8860a]/20`}
+                    />
+                    <button type="submit" disabled={!input.trim() || isStreaming}
+                      className="absolute right-1.5 top-1.5 p-2 bg-[#c8860a] text-white rounded-xl disabled:opacity-50 hover:bg-[#9a6307] transition-all shadow-md active:scale-95"
+                    >
+                      <Send size={14} />
+                    </button>
+                  </div>
+                </form>
+              </>
+            )}
           </motion.div>
         </>
       )}

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 AIFloatingMenu from '../ai/AIFloatingMenu';
 import ErrorBoundary from '../common/ErrorBoundary';
 import { Menu } from 'lucide-react';
 import { useUIStore, useThemeStore } from '../../stores/appStore';
@@ -27,7 +28,7 @@ const MENU_BTN: Record<string, string> = {
 
 const AppShell: React.FC = () => {
   const { toggleNav, isNavOpen } = useUIStore();
-  const { toggleOpen, isOpen } = useAIStore();
+  const { isOpen } = useAIStore();
   const { theme } = useThemeStore();
 
   // Keyboard shortcut: ← →  PgUp PgDown Space for page navigation
@@ -93,16 +94,10 @@ const AppShell: React.FC = () => {
       {/* Mobile: bottom navigation bar (hidden on desktop) */}
       <MobileBottomBar />
 
-      {/* AI FAB — raised on mobile to clear bottom bar */}
-      <button
-        onClick={toggleOpen}
-        className={`fixed right-14 bottom-14 lg:bottom-6 z-40 w-14 h-14 rounded-full bg-[#c8860a] text-white flex items-center justify-center text-xl shadow-lg hover:bg-[#9a6307] transition-all duration-200 ${
-          isOpen ? 'scale-0 opacity-0 pointer-events-none' : 'scale-100 opacity-100'
-        }`}
-        title="ผู้ช่วย AI"
-      >
-        ✨
-      </button>
+      {/* AI Floating Menu */}
+      <ErrorBoundary componentName="AIFloatingMenu">
+        <AIFloatingMenu />
+      </ErrorBoundary>
 
       {/* AI Popup */}
       <AnimatePresence>

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

@@ -16,11 +16,13 @@ interface AIState {
   ragChecking: boolean;    // true while checking status
   ragLoading: boolean;     // true when Qdrant exists but Reranker still loading
   dragPos: { x: number; y: number } | null;  // saved drag position (desktop)
+  viewMode: 'chat' | 'answer';
   panelWidth: number;                         // saved panel width (desktop)
   panelHeight: number;                        // saved panel height (desktop)
 
   // Actions
   toggleOpen: () => void;
+  setViewMode: (mode: 'chat' | 'answer') => void;
   setMode: (mode: 'fast' | 'reasoner') => void;
   setUseRag: (use: boolean) => void;
   addMessage: (msg: Message) => void;
@@ -44,10 +46,12 @@ export const useAIStore = create<AIState>((set, get) => ({
   ragChecking: false,
   ragLoading: false,
   dragPos: null,
+  viewMode: 'chat',
   panelWidth: 400,
   panelHeight: 550,
 
   toggleOpen: () => set((state) => ({ isOpen: !state.isOpen })),
+  setViewMode: (viewMode) => set({ viewMode }),
   setMode: (mode) => set({ mode }),
   setUseRag: (useRag) => set({ useRag }),
   addMessage: (msg) => set((state) => ({ messages: [...state.messages, msg] })),