kiku-agent 1.2.0 → 1.3.0

package/server/web-chat/ui/templates/body.html

@@ -25,7 +25,7 @@
           <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.4-3.4"/></svg>
           <span data-sidebar-i18n="search">Search Chat</span>
         </button>
-        <button type="button" class="sidebar-nav-item" id="sidebar-music-button" onclick="openMusicModal()" title="คลังเพลงและ Jukebox">
+        <button type="button" class="sidebar-nav-item" id="sidebar-music-button" onclick="openMusicModal()" title="คลังเพลงและ Jukebox">
           <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
           <span data-sidebar-i18n="music">Music Jukebox</span>
         </button>
@@ -91,8 +91,8 @@
         <div class="sidebar-section-heading static">
           <span data-sidebar-i18n="controlsHeading">System Controls</span>
         </div>
-        <button type="button" class="sidebar-nav-item" onclick="exportChat()" title="ส่งออกบทสนทนาเป็นไฟล์ Markdown">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+        <button type="button" class="sidebar-nav-item" onclick="exportChat()" title="ส่งออกบทสนทนาเป็นไฟล์ Markdown">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
           <span data-sidebar-i18n="export">Export Chat</span>
         </button>
         <button type="button" class="sidebar-nav-item" onclick="togglePetals()" title="เปิด/ปิด กลีบดอกซากุระ">
@@ -111,6 +111,10 @@
           <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
           <span id="sidebar-lang-label" data-sidebar-i18n="lang">Language (TH)</span>
         </button>
+        <button type="button" class="sidebar-nav-item" id="btn-settings-toggle" onclick="openSettingsModal()" title="ตั้งค่าโมเดลและ AI Provider">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+          <span id="sidebar-settings-label" data-sidebar-i18n="settings">AI Settings (Model)</span>
+        </button>
       </section>
     </div>
   </aside>
@@ -120,98 +124,14 @@
       <button type="button" class="toolbar-sidebar-button" id="toolbar-sidebar-button" onclick="toggleAppSidebar()" title="เปิด/ปิดแถบเมนู (Sidebar)" aria-label="เปิดแถบเมนู" aria-expanded="false">
         <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
       </button>
+      <span class="toolbar-title" style="font-weight: 700; font-size: 13px; color: var(--text);">KIKU AGENT</span>
     </div>
-  </header>
-
-  <div class="settings-drawer" id="settings-drawer">
-    <div class="settings-container">
-      <div class="settings-header-row">
-        <div class="settings-title-group">
-          <span class="settings-title-icon">⚙️</span>
-          <div>
-            <h4 class="settings-title">AI Engine &amp; Model Configuration</h4>
-            <p class="settings-subtitle">กำหนดค่า AI Provider, Model ID, และพารามิเตอร์การประมวลผล</p>
-          </div>
-        </div>
-        <div class="settings-status-pill" id="settings-status-pill">
-          <span class="status-dot-pulse"></span>
-          <span id="settings-provider-badge">LM Studio (Local)</span>
-        </div>
-      </div>
-
-      <div class="settings-grid-cards">
-        
-        <div class="settings-card">
-          <div class="settings-card-label">
-            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
-            <span>โมเดลและผู้ให้บริการ (AI Provider &amp; Model)</span>
-          </div>
-          <div class="settings-card-body">
-            <div class="form-group">
-              <label for="cfg-provider" id="lbl-cfg-provider">AI Provider</label>
-              <div class="form-control-wrap">
-                <select id="cfg-provider" class="form-control" onchange="onProviderChange()">
-                  <option value="lmstudio">LM Studio (Local gemma-4-e4b / Qwen)</option>
-                  <option value="gemini">Google Gemini (Gemini 3.7 Flash / Pro)</option>
-                  <option value="openai">OpenAI (GPT-4o / o1 / o3)</option>
-                  <option value="groq">Groq (Llama 3.3 70B Fast)</option>
-                  <option value="deepseek">DeepSeek AI (V3 / R1)</option>
-                  <option value="openrouter">OpenRouter (Unified Gateway)</option>
-                </select>
-              </div>
-            </div>
-            <div class="form-group">
-              <label for="cfg-model" id="lbl-cfg-model">Model Name / ID</label>
-              <div class="form-control-wrap">
-                <input type="text" id="cfg-model" class="form-control" placeholder="google/gemma-4-e4b" value="google/gemma-4-e4b" onchange="autoSaveSettings()">
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="settings-card">
-          <div class="settings-card-label">
-            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
-            <span>คีย์และการประมวลผล (Security &amp; Inference)</span>
-          </div>
-          <div class="settings-card-body">
-            <div class="form-group" id="group-cfg-apikey">
-              <label for="cfg-apikey" id="lbl-cfg-apikey">Cloud API Key</label>
-              <div class="form-control-wrap with-toggle">
-                <input type="password" id="cfg-apikey" class="form-control" placeholder="sk-... / AIza... (เว้นว่างหากใช้ LM Studio)" onchange="autoSaveSettings()">
-                <button type="button" id="btn-toggle-apikey-vis" class="btn-input-icon" onclick="toggleApiKeyVisibility()" title="แสดง/ซ่อน API Key">
-                  <svg aria-hidden="true" id="eye-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-                </button>
-              </div>
-              <div id="cfg-apikey-help" class="form-help-text">🔒 ไม่จำเป็นต้องใส่หากใช้ Local LM Studio</div>
-            </div>
-
-            <div class="form-row-dual">
-              <div class="form-group" style="flex: 1;">
-                <label for="cfg-thinking" id="lbl-cfg-thinking">Thinking Mode</label>
-                <div class="form-control-wrap">
-                  <select id="cfg-thinking" class="form-control" onchange="autoSaveSettings()">
-                    <option value="show">แสดงทั้งหมด (Deep Thinking)</option>
-                    <option value="collapse">ย่อเริ่มต้น (Auto Collapse)</option>
-                    <option value="hide">ซ่อนทั้งหมด (Direct Answer)</option>
-                  </select>
-                </div>
-              </div>
-              <div class="form-group" style="flex: 1;">
-                <div class="label-with-badge">
-                  <label for="cfg-temperature" id="lbl-cfg-temp">Creativity</label>
-                  <span class="temp-badge" id="temp-val">0.7</span>
-                </div>
-                <div class="form-control-wrap slider-wrap">
-                  <input type="range" id="cfg-temperature" min="0" max="1" step="0.05" value="0.7" class="form-slider" oninput="document.getElementById('temp-val').textContent = this.value; autoSaveSettings();">
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div class="toolbar-trailing" style="display: flex; align-items: center; gap: 8px;">
+      <button type="button" class="toolbar-sidebar-button" id="btn-mobile-settings-toggle" onclick="openSettingsModal()" title="ตั้งค่าโมเดลและ AI Provider" aria-label="ตั้งค่าโมเดล">
+        <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+      </button>
     </div>
-  </div>
+  </header>
 
   <main class="main-chat-workspace" id="main-chat-workspace">
     <div class="main-inner">
@@ -244,11 +164,6 @@
         </div>
       </div>
 
-      <button type="button" id="btn-scroll-bottom" class="btn-scroll-bottom" onclick="scrollToBottomSmooth(true)" title="เลื่อนลงล่างสุด">
-        <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
-        <span>เลื่อนลงล่างสุด</span>
-      </button>
-
       <div class="suggestions-drawer" id="suggestions-drawer">
         <div class="suggestions-header-bar">
           <span class="suggestions-title">
@@ -269,79 +184,6 @@
         <div class="chips-container" id="chips-container"></div>
       </div>
 
-      <div id="attachment-tray" class="attachment-tray" style="display: none;"></div>
-
-      <!-- Futuristic Glassmorphic Voice HUD (การรับฟังเสียง AI โฉมใหม่) -->
-      <div id="voice-hud" class="voice-hud luxury-voice-hud" style="display: none;" role="region" aria-label="อินเทอร์เฟซการรับฟังเสียง">
-        <div class="voice-hud-inner">
-          <!-- Top Row: Status, Dynamic Orb, Language Controls -->
-          <div class="voice-hud-header">
-            <div class="voice-hud-identity">
-              <div class="voice-live-orb" title="ไมโครโฟนทำงานอยู่">
-                <span class="voice-orb-ring ring-1"></span>
-                <span class="voice-orb-ring ring-2"></span>
-                <span class="voice-orb-core">
-                  <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
-                </span>
-              </div>
-              <div class="voice-identity-meta">
-                <div class="voice-identity-title-row">
-                  <span class="voice-live-title">กำลังรับฟังเสียงสด...</span>
-                  <span id="voice-lang-badge" class="voice-lang-badge" title="ภาษาที่ตรวจพบขณะนี้">🇹🇭 ภาษาไทย</span>
-                </div>
-                <span class="voice-live-sub">พูดคำถามหรือเรื่องที่ต้องการค้นหาเกี่ยวกับจวีจิ้งอี</span>
-              </div>
-            </div>
-
-            <!-- Language Pills Bar -->
-            <div class="voice-lang-pills">
-              <button type="button" class="voice-pill active" id="vpill-th" onclick="setVoiceRecognitionLang('th-TH')" title="ภาษาไทย">🇹🇭 ไทย</button>
-              <button type="button" class="voice-pill" id="vpill-zh" onclick="setVoiceRecognitionLang('zh-CN')" title="ภาษาจีน (中文)">🇨🇳 中文</button>
-              <button type="button" class="voice-pill" id="vpill-en" onclick="setVoiceRecognitionLang('en-US')" title="English">🇺🇸 EN</button>
-            </div>
-          </div>
-
-          <!-- Middle Row: Interactive Waveform Canvas + Live Transcript Bubble -->
-          <div class="voice-hud-body">
-            <div class="voice-visualizer-wrap">
-              <canvas id="voice-canvas" class="voice-canvas" width="540" height="42" aria-hidden="true"></canvas>
-            </div>
-
-            <div class="voice-transcript-card" id="voice-transcript-card">
-              <div class="voice-transcript-content">
-                <span id="voice-hud-text" class="voice-transcript-text">“กำลังรับฟังเสียงสด... กรุณาพูดคำถามของคุณ”</span>
-                <span class="voice-streaming-cursor" aria-hidden="true"></span>
-              </div>
-            </div>
-          </div>
-
-          <!-- Bottom Row: Quick Actions -->
-          <div class="voice-hud-footer">
-            <div class="voice-hud-hint">
-              <span class="voice-hint-bullet">●</span>
-              <span>พูดเสร็จแล้วคลิกนำไปใช้ หรือส่งคำถามทันที</span>
-            </div>
-
-            <div class="voice-hud-actions">
-              <button type="button" class="btn-voice-action btn-voice-discard" onclick="cancelSpeechRecognition()" title="ยกเลิกการบันทึกเสียง">
-                <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-                <span>ยกเลิก</span>
-              </button>
-
-              <button type="button" class="btn-voice-action btn-voice-finish" onclick="toggleSpeechRecognition()" title="เสร็จสิ้น นำข้อความลงในช่องพิมพ์">
-                <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="20 6 9 17 4 12"/></svg>
-                <span>นำไปใช้</span>
-              </button>
-
-              <button type="button" class="btn-voice-action btn-voice-send" id="btn-voice-send" onclick="sendVoiceQueryDirectly()" title="ส่งคำถามนี้ไปยัง AI ทันที">
-                <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"/></svg>
-                <span>ส่งคำถามทันที</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
       <!-- Chat-Integrated Mini Player Dock (ผนวกเข้ากับ UX/UI ช่องแชท) -->
       <aside id="mini-player-dock" class="mini-player-draggable-dock chat-integrated-dock" aria-label="Ju Jingyi Mini Player">
         <div class="mini-player-card" id="mini-player-card">
@@ -454,9 +296,55 @@
         </button>
       </aside>
 
+      <!-- Slash Commands Autocomplete Menu -->
+      <div class="slash-commands-menu" id="slash-commands-menu" role="menu" aria-label="เมนูคำสั่งลัด" style="display: none;"></div>
+
       <div class="input-box" id="input-box-container">
+        <!-- Integrated Voice HUD (แถบสั่งงานด้วยเสียง ผสานรวมในกรอบ input) -->
+        <div id="voice-hud" class="voice-hud voice-hud-integrated" style="display: none;" role="region" aria-label="อินเทอร์เฟซการรับฟังเสียง">
+          <div class="voice-hud-inner">
+            <div class="voice-hud-left">
+              <div class="voice-live-orb" title="ไมโครโฟนทำงานอยู่">
+                <span class="voice-orb-ring ring-1"></span>
+                <span class="voice-orb-core">
+                  <svg aria-hidden="true" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
+                </span>
+              </div>
+              <span class="voice-live-title">กำลังฟัง...</span>
+              <span id="voice-lang-badge" class="voice-lang-badge" title="ภาษาที่กำลังรับฟัง — คลิกปุ่มด้านขวาเพื่อสลับภาษา">🇹🇭 ฟังภาษาไทย (TH)</span>
+              <button type="button" id="voice-mismatch-hint" class="voice-mismatch-hint" style="display: none;" onclick="switchVoiceToDetectedLang()" title="สลับภาษาไมโครโฟนตามข้อความที่ตรวจพบ"></button>
+              <div class="voice-visualizer-wrap">
+                <canvas id="voice-canvas" class="voice-canvas" width="130" height="20" aria-hidden="true"></canvas>
+              </div>
+              <!-- Preserved for JS and test inspection -->
+              <span id="voice-hud-text" class="voice-transcript-text" style="display: none;">“กำลังรับฟังเสียงสด... กรุณาพูดคำถามของคุณ”</span>
+            </div>
+
+            <div class="voice-hud-right">
+              <div class="voice-lang-pills" role="radiogroup" aria-label="เลือกภาษาไมโครโฟน">
+                <button type="button" id="vpill-th" class="voice-pill active" onclick="setVoiceRecognitionLang('th-TH')" title="สลับฟังภาษาไทย (Thai Speech Recognition)">🇹🇭 ไทย</button>
+                <button type="button" id="vpill-zh" class="voice-pill" onclick="setVoiceRecognitionLang('zh-CN')" title="切换中文语音识别 (Chinese Speech Recognition)">🇨🇳 中文</button>
+                <button type="button" id="vpill-en" class="voice-pill" onclick="setVoiceRecognitionLang('en-US')" title="Switch to English Speech (English Speech Recognition)">🇺🇸 EN</button>
+              </div>
+              <div class="voice-hud-actions">
+                <button type="button" class="btn-voice-mini btn-voice-discard" onclick="cancelSpeechRecognition()" title="ยกเลิกการบันทึกเสียง">
+                  <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                  <span>ยกเลิก</span>
+                </button>
+                <button type="button" class="btn-voice-mini btn-voice-send" id="btn-voice-send" onclick="sendVoiceQueryDirectly()" title="ส่งคำถามนี้ไปยัง AI ทันที">
+                  <svg aria-hidden="true" width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"/></svg>
+                  <span>ส่งให้ AI</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Attached Files & Images Tray (วางติดกับช่องพิมพ์ข้อความ) -->
+        <div id="attachment-tray" class="attachment-tray" style="display: none;"></div>
+
         <div class="input-box-top">
-          <textarea id="prompt-input" rows="1" placeholder="ถามอะไรเกี่ยวกับจวีจิ้งอีก็ได้... (กด Enter เพื่อส่ง, Shift + Enter เพื่อขึ้นบรรทัดใหม่)" onkeydown="handleInputKeyDown(event)" oninput="autoGrowTextarea(this)" aria-label="พิมพ์ข้อความถาม AI"></textarea>
+          <textarea id="prompt-input" rows="1" placeholder="ถามอะไรเกี่ยวกับจวีจิ้งอีก็ได้... (กด Enter เพื่อส่ง, Shift + Enter เพื่อขึ้นบรรทัดใหม่, พิมพ์ / เพื่อดูคำสั่ง)" onkeydown="handleInputKeyDown(event)" oninput="autoGrowTextarea(this)" aria-label="พิมพ์ข้อความถาม AI"></textarea>
         </div>
 
         <div class="input-box-bottom">
@@ -467,10 +355,11 @@
               </span>
             </button>
             <div class="quick-action-menu" id="quick-action-menu" role="menu" aria-label="เครื่องมือด่วน">
-              <button type="button" role="menuitem" onclick="handleImageUpload(); closeQuickActions()"><span class="quick-item-icon"></span><span>แนบรูปภาพ / ไฟล์</span></button>
-              <button type="button" role="menuitem" onclick="toggleSpeechRecognition(); closeQuickActions()"><span class="quick-item-icon"></span><span>สั่งงานด้วยเสียง</span></button>
-              <button type="button" role="menuitem" onclick="openQuizModal(); closeQuickActions()"><span class="quick-item-icon"></span><span>Fan Quiz Challenge</span></button>
-              <button type="button" role="menuitem" onclick="openMusicModal(); closeQuickActions()"><span class="quick-item-icon"></span><span>คลังเพลง Jukebox</span></button>
+              <button type="button" role="menuitem" onclick="handleImageUpload(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></span><span>แนบรูปภาพ / ไฟล์</span></button>
+              <button type="button" role="menuitem" onclick="toggleSpeechRecognition(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg></span><span>สั่งงานด้วยเสียง</span></button>
+              <button type="button" role="menuitem" onclick="openQuizModal(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg></span><span>Fan Quiz Challenge</span></button>
+              <button type="button" role="menuitem" onclick="openMusicModal(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></span><span>คลังเพลง Jukebox</span></button>
+              <button type="button" role="menuitem" onclick="openSettingsModal(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M7 14v6"/></svg></span><span>ตั้งค่าโมเดล AI (Model Settings)</span></button>
             </div>
 
             <button type="button" id="btn-attach" class="btn-input-tool" title="แนบรูปภาพ" onclick="handleImageUpload()">
@@ -479,6 +368,13 @@
             <button type="button" id="btn-mic" class="btn-input-tool btn-mic" title="สั่งงานด้วยเสียง" onclick="toggleSpeechRecognition()">
               <svg aria-hidden="true" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg>
             </button>
+
+            <!-- Active Model Status Chip -->
+            <button type="button" id="input-model-chip" class="input-model-chip" onclick="openSettingsModal()" title="คลิกเพื่อเปลี่ยนโมเดล AI หรือตั้งค่า">
+              <span class="model-chip-dot" id="input-model-chip-dot" aria-hidden="true"></span>
+              <span id="input-model-chip-icon" class="model-chip-icon">🌸</span>
+              <span id="input-model-chip-label" class="model-chip-label">Gemma 4 E4B</span>
+            </button>
           </div>
 
           <div class="input-actions-right">
@@ -487,7 +383,7 @@
                 <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="3"/></svg>
               </span>
             </button>
-            <button type="button" id="btn-send" class="btn-send" title="ส่งข้อความ (Enter)" onclick="submitQuery()" aria-label="ส่งข้อความ">
+            <button type="button" id="btn-send" class="btn-send btn-send-muted" title="ส่งข้อความ (Enter)" onclick="submitQuery()" aria-label="ส่งข้อความ">
               <span class="btn-send-icon">
                 <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
               </span>
@@ -528,7 +424,7 @@
           <button type="button" class="jukebox-search-clear" id="music-search-clear" onclick="clearMusicSearch()" title="ล้างการค้นหา">✕</button>
         </div>
         <div class="music-tabs">
-          <button type="button" class="music-tab-pill active" id="pill-music-all" onclick="setJukeboxCategory('all')">ทั้งหมด</button>
+          <button type="button" class="music-tab-pill active" id="pill-music-all" onclick="setJukeboxCategory('all')">ทั้งหมด</button>
           <button type="button" class="music-tab-pill" id="pill-music-new" onclick="setJukeboxCategory('new')"> New 2026-2024</button>
           <button type="button" class="music-tab-pill" id="pill-music-ost" onclick="setJukeboxCategory('ost')"> เพลงซีรีส์ (OST)</button>
           <button type="button" class="music-tab-pill" id="pill-music-single" onclick="setJukeboxCategory('single')"> ซิงเกิลเดี่ยว</button>
@@ -793,4 +689,234 @@
         <button type="button" class="btn-msg-action" onclick="closeSponsorsModal()" style="padding:6px 14px; border-radius:8px;">ปิด</button>
       </div>
     </div>
-  </div>
+  </div>
+
+  <!-- AI Engine & Model Configuration Modal Popup -->
+  <div class="modal-backdrop" id="settings-modal" onclick="if(event.target===this) closeSettingsModal()" onkeydown="if(event.key==='Escape') closeSettingsModal()" style="display:none;" role="dialog" aria-modal="true" aria-label="AI Engine & Model Configuration" tabindex="-1">
+    <div class="modal-dialog settings-modal-dialog">
+      <div class="modal-header settings-modal-header">
+        <div class="modal-title-wrap settings-heading-block">
+          <span class="settings-kicker">Inference control</span>
+          <h3 class="settings-modal-title">AI Engine &amp; Model Configuration</h3>
+          <p class="settings-modal-desc">กำหนดเส้นทางโมเดล การตอบสนอง และทรัพยากรของเครื่องในที่เดียว</p>
+        </div>
+        <div class="settings-modal-header-actions">
+          <button type="button" class="settings-status-pill" id="settings-status-pill" title="คลิกเพื่อซิงก์ตาม CLI / Server" onclick="resetToCliProvider()">
+            <span class="settings-status-mark" aria-hidden="true"></span>
+            <span id="settings-provider-badge">Auto (CLI Sync)</span>
+          </button>
+          <button type="button" class="btn-close-drawer settings-close-button" onclick="closeSettingsModal()" aria-label="ปิดหน้าต่าง"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+        </div>
+      </div>
+
+      <div class="modal-body settings-modal-body">
+        <!-- Card 1: AI Provider & Model -->
+        <div class="settings-glass-panel">
+          <div class="settings-panel-header">
+            <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
+            <span>ผู้ให้บริการและโมเดล (AI Provider &amp; Model)</span>
+          </div>
+          <div class="settings-panel-content">
+            <div class="form-group">
+              <label for="cfg-provider" id="lbl-cfg-provider">AI Provider</label>
+              <div class="form-control-wrap">
+                <select id="cfg-provider" class="form-control" onchange="onProviderChange()">
+                  <option value="auto">ตาม CLI / Server (Auto Sync)</option>
+                  <option value="lmstudio">LM Studio (Local gemma-4-e4b / Qwen)</option>
+                  <option value="vllm">vLLM (Local / WSL - Port 8000)</option>
+                  <option value="custom">Custom / LAN Server (Ollama, llama.cpp, gateway)</option>
+                  <option value="gemini">Google Gemini (Gemini 3.7 Flash / Pro)</option>
+                  <option value="openai">OpenAI (GPT-4o / o1 / o3)</option>
+                  <option value="groq">Groq (Llama 3.3 70B Fast)</option>
+                  <option value="deepseek">DeepSeek AI (V3 / R1)</option>
+                  <option value="openrouter">OpenRouter (Unified Gateway)</option>
+                </select>
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="cfg-model" id="lbl-cfg-model">Model Name / ID</label>
+              <div class="form-control-wrap">
+                <input type="text" id="cfg-model" class="form-control" placeholder="google/gemma-4-e4b" value="google/gemma-4-e4b" onchange="autoSaveSettings()">
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="cfg-baseurl" id="lbl-cfg-baseurl">API Base URL</label>
+              <div class="form-control-wrap">
+                <input type="text" id="cfg-baseurl" class="form-control" placeholder="http://127.0.0.1:8000/v1" onchange="autoSaveSettings()">
+              </div>
+              <small class="form-hint" id="cfg-baseurl-help">LM Studio: :1234, vLLM: :8000 หรือ URL สำหรับ WSL/Network</small>
+            </div>
+            <div class="form-group lan-scan-group">
+              <label for="lan-scan-results" id="lbl-lan-scan">LAN Discovery — ค้นหา LM Server ในเครือข่าย</label>
+              <div class="lan-scan-row">
+                <button type="button" id="btn-lan-scan" class="btn-sync-cli" onclick="scanLanEndpoints()" title="สแกนหา LM Studio / vLLM / Ollama ในเครือข่ายและแสดงรายชื่อโมเดล">
+                  <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg>
+                  <span id="lan-scan-label">Scan LAN</span>
+                </button>
+                <small class="form-hint lan-scan-status" id="lan-scan-status"></small>
+              </div>
+              <input type="text" id="lan-scan-targets" class="form-control lan-scan-targets" placeholder="ระบุวงเอง (เว้นว่าง = อัตโนมัติ) เช่น 192.168.0.0/24, 10.0.0.1-10.0.0.50" onkeydown="if(event.key==='Enter'){event.preventDefault();scanLanEndpoints();}">
+              <small class="form-hint">รองรับ CIDR (192.168.0.0/24), ช่วง IP (10.0.0.1-10.0.0.50), IP เดี่ยว — คั่นด้วยเครื่องหมายจุลภาค</small>
+              <div id="lan-scan-results" class="lan-scan-results" hidden></div>
+            </div>
+            <div class="settings-quick-sync-row">
+              <button type="button" class="btn-sync-cli" onclick="resetToCliProvider()" title="รีเซ็ตกลับไปใช้โมเดลตามที่ CLI / Server กำหนด">
+                <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 11a8.1 8.1 0 0 0-15.5-2M4 4v5h5M4 13a8.1 8.1 0 0 0 15.5 2M20 20v-5h-5"/></svg>
+                <span>Use CLI defaults</span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Card 2: Security & Inference Parameters -->
+        <div class="settings-glass-panel">
+          <div class="settings-panel-header">
+            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+            <span>ความปลอดภัยและพารามิเตอร์ (Security &amp; Inference)</span>
+          </div>
+          <div class="settings-panel-content">
+            <div class="form-group" id="group-cfg-apikey">
+              <label for="cfg-apikey" id="lbl-cfg-apikey">Cloud API Key</label>
+              <form class="form-control-wrap with-toggle" autocomplete="off" onsubmit="return false;" style="margin:0;">
+                <input type="text" id="cfg-apikey-username" name="username" autocomplete="username" value="kiku-cloud-user" hidden readonly tabindex="-1" aria-hidden="true" style="display:none;">
+                <input type="password" id="cfg-apikey" name="kiku-cloud-apikey" class="form-control" placeholder="ระบุ API Key (เว้นว่างหากใช้ตาม CLI / Local)" autocomplete="new-password" spellcheck="false" autocapitalize="off" onchange="autoSaveSettings()">
+                <button type="button" id="btn-toggle-apikey-vis" class="btn-input-icon" onclick="toggleApiKeyVisibility()" title="แสดง/ซ่อน API Key">
+                  <svg aria-hidden="true" id="eye-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+                </button>
+              </form>
+              <div id="cfg-apikey-help" class="form-help-text">เก็บไว้ในหน่วยความจำของเบราว์เซอร์สำหรับเซสชันนี้เท่านั้น</div>
+            </div>
+
+            <div class="form-group">
+              <label for="cfg-thinking" id="lbl-cfg-thinking">Thinking Mode</label>
+              <div class="form-control-wrap">
+                <select id="cfg-thinking" class="form-control" onchange="autoSaveSettings()">
+                  <option value="show">แสดงทั้งหมด (Deep Thinking)</option>
+                  <option value="collapse">ย่อเริ่มต้น (Auto Collapse)</option>
+                  <option value="hide">ซ่อนทั้งหมด (Direct Answer)</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="form-group">
+              <div class="label-with-badge">
+                <label for="cfg-temperature" id="lbl-cfg-temp">Creativity (Temp)</label>
+                <span class="temp-badge" id="temp-val">0.7</span>
+              </div>
+              <div class="form-control-wrap slider-wrap">
+                <input type="range" id="cfg-temperature" min="0" max="1" step="0.05" value="0.7" class="form-slider" oninput="onTemperatureInput(this)">
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Card 3: Model Memory Footprint Calculator (Predictive VRAM Analyzer) -->
+        <div class="settings-glass-panel settings-vram-panel">
+          <div class="settings-panel-header">
+            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v-2"/><path d="M9 13v-2"/></svg>
+            <span>โมเดลและหน่วยความจำ (Model Memory Footprint Calculator)</span>
+          </div>
+          <div class="settings-panel-content" id="vram-calc">
+            <div id="vram-cloud-notice" class="vram-cloud-notice" style="display:none;">
+              <div class="vram-cloud-text">
+                <strong>โหมดแชท Cloud (<span id="vram-cloud-prov-name">Gemini</span>):</strong>
+                <span>ประมวลผลบนเซิร์ฟเวอร์ผู้ให้บริการ ไม่ใช้ VRAM ของการ์ดจอในเครื่อง | ตารางคำนวณด้านล่างใช้สำหรับจำลอง/ประเมินโมเดล Local</span>
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="vram-model">โมเดลเป้าหมายสำหรับคำนวณ (Target Model)</label>
+              <div class="form-control-wrap">
+                <select id="vram-model" class="form-control" onchange="onVramModelChange()">
+                  <option value="auto" selected>Auto: active local model</option>
+                </select>
+              </div>
+              <div id="vram-model-custom-wrap" style="display:none; margin-top: 8px;">
+                <input type="text" id="vram-model-custom" class="form-control" placeholder="พิมพ์ชื่อโมเดล HuggingFace หรือ path ไฟล์ .gguf" oninput="scheduleVramEstimate()">
+              </div>
+              <div id="vram-model-note" class="form-help-text">เลือกโมเดล Local / Preset ที่ต้องการประเมิน VRAM</div>
+            </div>
+            <div class="form-group">
+              <label for="vram-hardware">Hardware Target</label>
+              <div class="form-control-wrap">
+                <select id="vram-hardware" class="form-control" onchange="updateVramEstimate()">
+                  <option value="auto">Auto-detect hardware</option>
+                </select>
+              </div>
+              <div id="vram-hardware-note" class="form-help-text">กำลังตรวจจับ GPU…</div>
+            </div>
+            <div class="form-group">
+              <div class="label-with-badge">
+                <label for="vram-ctx">Context Length</label>
+                <div class="vram-ctx-badge-group" style="display: inline-flex; align-items: center; gap: 6px;">
+                  <button type="button" id="btn-vram-ctx-auto" class="btn-sync-inline" onclick="resetVramCtxToAuto()" style="display: none;" title="รีเซ็ตกลับเป็นโหมด Auto">
+                    <svg aria-hidden="true" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 11a8.1 8.1 0 0 0-15.5-2M4 4v5h5M4 13a8.1 8.1 0 0 0 15.5 2M20 20v-5h-5"/></svg>
+                    <span>Auto</span>
+                  </button>
+                  <span class="temp-badge" id="vram-ctx-val">Auto (16,384)</span>
+                </div>
+              </div>
+              <div class="form-control-wrap slider-wrap">
+                <input type="range" id="vram-ctx" min="1024" max="131072" step="1024" value="16384" class="form-slider" oninput="onVramCtxInput(this)">
+              </div>
+            </div>
+            <div class="vram-calc-grid">
+              <div class="form-group">
+                <label for="vram-quant">Quantization</label>
+                <div class="form-control-wrap">
+                  <select id="vram-quant" class="form-control" onchange="updateVramEstimate()">
+                    <option value="fp16">FP16 / BF16 (16.0 bpw)</option>
+                    <option value="q8_0">Q8_0 / INT8 (8.0 bpw)</option>
+                    <option value="q6_k">Q6_K (6.56 bpw)</option>
+                    <option value="q5_k_m">Q5_K_M (5.5 bpw)</option>
+                    <option value="q4_k_m" selected>Q4_K_M (4.5 bpw)</option>
+                    <option value="q4_0">Q4_0 / Q4_K_S (4.2 bpw)</option>
+                    <option value="q3_k_m">Q3_K_M (3.4 bpw)</option>
+                    <option value="q2_k">Q2_K (2.6 bpw)</option>
+                  </select>
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="vram-cache">Cache Precision</label>
+                <div class="form-control-wrap">
+                  <select id="vram-cache" class="form-control" onchange="updateVramEstimate()">
+                    <option value="16" selected>FP16 (16-bit)</option>
+                    <option value="8">Q8_0 (8-bit)</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="vram-breakdown" id="vram-breakdown">
+              <div class="vram-row"><span>Model Weights</span><b id="vram-weights">—</b></div>
+              <div class="vram-row"><span>KV Cache Memory</span><b id="vram-kv">—</b></div>
+              <div class="vram-row"><span>Static Overhead</span><b id="vram-overhead">—</b></div>
+              <div class="vram-row vram-total"><span>Total VRAM Required</span><b id="vram-total">—</b></div>
+            </div>
+            <div class="vram-gauge-wrap">
+              <div class="vram-gauge"><div class="vram-gauge-fill" id="vram-gauge-fill" style="width:0%"></div></div>
+              <div class="vram-gauge-meta">
+                <span id="vram-gauge-pct">—</span>
+                <span class="vram-status-pill vram-zone-unknown" id="vram-status-pill">UNVERIFIED</span>
+              </div>
+            </div>
+            <div id="vram-remediation" class="form-help-text vram-remediation"></div>
+            <label class="vram-override-row" id="vram-override-row" style="display:none;">
+              <input type="checkbox" id="vram-override" onchange="onVramOverrideChange()">
+              <span>Allow CPU offloading. This avoids an out-of-memory stop but adds substantial latency.</span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-footer settings-modal-footer">
+        <div class="settings-modal-footer-hint">
+          <span>Changes apply immediately and save automatically.</span>
+        </div>
+        <div style="display: flex; gap: 8px;">
+          <button type="button" class="btn-primary-pill" id="settings-done-btn" onclick="closeSettingsModal()" style="min-width: 120px; justify-content: center;">
+            <span>Close configuration</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+