PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 3.2.9
MxChat – AI Chatbot & Content Generation for WordPress v3.2.9
3.2.21 3.2.20 3.2.19 3.2.18 3.2.17 3.2.16 3.2.15 3.2.14 3.2.12 3.2.13 3.2.11 3.2.10 3.2.9 3.2.8 3.2.7 3.2.6 3.2.5 3.2.4 3.2.3 3.2.2 3.2.1 2.0.3 2.0.4 2.0.5 2.0.6 All 152 releases
mxchat-basic / includes / admin-settings-page.php

admin-settings-page.php in MxChat – AI Chatbot & Content Generation for WordPress 3.2.9, at includes/admin-settings-page.php

1,823 lines 126.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 /**
3 * MxChat Admin Settings Page - Redesigned with Sidebar Navigation
4 *
5 * @package MxChat
6 * @since 2.7.0
7 */
8
9 if (!defined('ABSPATH')) {
10 exit;
11 }
12
13 /**
14 * Render the new sidebar-based admin settings page
15 */
16 function mxchat_render_settings_page($admin_instance) {
17 $is_activated = $admin_instance->is_activated();
18 $options = get_option('mxchat_options', array());
19 $plugin_url = plugin_dir_url(dirname(__FILE__));
20 ?>
21 <div class="mxch-admin-wrapper">
22 <!-- Mobile Header -->
23 <header class="mxch-mobile-header">
24 <a href="#" class="mxch-mobile-logo">
25 <div class="mxch-mobile-logo-icon">
26 <img src="<?php echo esc_url($plugin_url . 'images/icon-128x128.png'); ?>" alt="MxChat">
27 </div>
28 <span class="mxch-mobile-logo-text">MxChat</span>
29 </a>
30 <button type="button" class="mxch-mobile-menu-btn" aria-label="<?php esc_attr_e('Open menu', 'mxchat'); ?>">
31 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
32 </button>
33 </header>
34
35 <!-- Mobile Menu Overlay -->
36 <div class="mxch-mobile-overlay"></div>
37
38 <!-- Mobile Menu Modal -->
39 <div class="mxch-mobile-menu">
40 <div class="mxch-mobile-menu-header">
41 <span class="mxch-mobile-menu-title"><?php esc_html_e('Settings', 'mxchat'); ?></span>
42 <button type="button" class="mxch-mobile-menu-close" aria-label="<?php esc_attr_e('Close menu', 'mxchat'); ?>">
43 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
44 </button>
45 </div>
46 <nav class="mxch-mobile-menu-nav">
47 <!-- Configuration Section -->
48 <div class="mxch-mobile-nav-section">
49 <div class="mxch-mobile-nav-section-title"><?php esc_html_e('Configuration', 'mxchat'); ?></div>
50 <button class="mxch-mobile-nav-link" data-parent="chatbot">
51 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="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 13v2"/><path d="M9 13v2"/></svg>
52 <span><?php esc_html_e('Chatbot', 'mxchat'); ?></span>
53 <svg class="mxch-mobile-nav-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
54 </button>
55 <div class="mxch-mobile-nav-sub" data-parent="chatbot">
56 <button class="mxch-mobile-nav-sub-link active" data-target="chatbot-ai-models"><?php esc_html_e('AI Models', 'mxchat'); ?></button>
57 <button class="mxch-mobile-nav-sub-link" data-target="chatbot-behavior"><?php esc_html_e('Behavior', 'mxchat'); ?></button>
58 <button class="mxch-mobile-nav-sub-link" data-target="chatbot-display"><?php esc_html_e('Display', 'mxchat'); ?></button>
59 <button class="mxch-mobile-nav-sub-link" data-target="chatbot-lead-capture"><?php esc_html_e('Lead Capture', 'mxchat'); ?></button>
60 <button class="mxch-mobile-nav-sub-link" data-target="chatbot-quick-questions"><?php esc_html_e('Quick Questions', 'mxchat'); ?></button>
61 <button class="mxch-mobile-nav-sub-link" data-target="chatbot-rate-limits"><?php esc_html_e('Rate Limits', 'mxchat'); ?></button>
62 </div>
63 <button class="mxch-mobile-nav-link" data-target="api-keys">
64 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 2-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
65 <span><?php esc_html_e('API Keys', 'mxchat'); ?></span>
66 </button>
67 <button class="mxch-mobile-nav-link" data-target="optimization">
68 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
69 <span><?php esc_html_e('Optimization', 'mxchat'); ?></span>
70 </button>
71 <button class="mxch-mobile-nav-link" data-target="testing">
72 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2v6"/><path d="M15 2v6"/><path d="M12 17v5"/><path d="M5 8h14"/><path d="M6 11v-1a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"/><path d="m9 14 3 3 3-3"/></svg>
73 <span><?php esc_html_e('Testing', 'mxchat'); ?></span>
74 </button>
75 </div>
76 <!-- Integrations Section -->
77 <div class="mxch-mobile-nav-section">
78 <div class="mxch-mobile-nav-section-title"><?php esc_html_e('Integrations', 'mxchat'); ?></div>
79 <button class="mxch-mobile-nav-link" data-parent="integrations">
80 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
81 <span><?php esc_html_e('Integrations', 'mxchat'); ?></span>
82 <svg class="mxch-mobile-nav-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
83 </button>
84 <div class="mxch-mobile-nav-sub" data-parent="integrations">
85 <button class="mxch-mobile-nav-sub-link" data-target="integrations-toolbar"><?php esc_html_e('Toolbar', 'mxchat'); ?></button>
86 <button class="mxch-mobile-nav-sub-link" data-target="integrations-loops"><?php esc_html_e('Loops', 'mxchat'); ?></button>
87 <button class="mxch-mobile-nav-sub-link" data-target="integrations-brave"><?php esc_html_e('Brave Search', 'mxchat'); ?></button>
88 <button class="mxch-mobile-nav-sub-link" data-target="integrations-slack"><?php esc_html_e('Slack', 'mxchat'); ?></button>
89 <button class="mxch-mobile-nav-sub-link" data-target="integrations-telegram"><?php esc_html_e('Telegram', 'mxchat'); ?></button>
90 </div>
91 </div>
92 <!-- Resources Section -->
93 <div class="mxch-mobile-nav-section">
94 <div class="mxch-mobile-nav-section-title"><?php esc_html_e('Resources', 'mxchat'); ?></div>
95 <button class="mxch-mobile-nav-link" data-target="tutorials">
96 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
97 <span><?php esc_html_e('Tutorials', 'mxchat'); ?></span>
98 </button>
99 </div>
100 <?php if (!$is_activated): ?>
101 <div class="mxch-mobile-menu-footer">
102 <a href="https://mxchat.ai/" target="_blank" class="mxch-mobile-upgrade-btn">
103 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" 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>
104 <?php esc_html_e('Upgrade to Pro', 'mxchat'); ?>
105 </a>
106 </div>
107 <?php endif; ?>
108 </nav>
109 </div>
110
111 <!-- Sidebar Navigation -->
112 <aside class="mxch-sidebar">
113 <div class="mxch-sidebar-header">
114 <a href="#" class="mxch-sidebar-logo">
115 <div class="mxch-sidebar-logo-icon">
116 <img src="<?php echo esc_url($plugin_url . 'images/icon-128x128.png'); ?>" alt="MxChat">
117 </div>
118 <span class="mxch-sidebar-logo-text">MxChat</span>
119 <span class="mxch-sidebar-version">v<?php echo esc_html(MXCHAT_VERSION ?? '2.7.0'); ?></span>
120 </a>
121 </div>
122
123 <nav class="mxch-sidebar-nav">
124 <!-- Chatbot Section -->
125 <div class="mxch-nav-section">
126 <div class="mxch-nav-section-title"><?php esc_html_e('Configuration', 'mxchat'); ?></div>
127
128 <div class="mxch-nav-item expanded" data-section="chatbot">
129 <button class="mxch-nav-link active">
130 <span class="mxch-nav-link-icon">
131 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="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 13v2"/><path d="M9 13v2"/></svg>
132 </span>
133 <span class="mxch-nav-link-text"><?php esc_html_e('Chatbot', 'mxchat'); ?></span>
134 <svg class="mxch-nav-link-arrow" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
135 </button>
136 <div class="mxch-nav-sub">
137 <button class="mxch-nav-sub-link active" data-target="chatbot-ai-models"><?php esc_html_e('AI Models', 'mxchat'); ?></button>
138 <button class="mxch-nav-sub-link" data-target="chatbot-behavior"><?php esc_html_e('Behavior', 'mxchat'); ?></button>
139 <button class="mxch-nav-sub-link" data-target="chatbot-display"><?php esc_html_e('Display', 'mxchat'); ?></button>
140 <button class="mxch-nav-sub-link" data-target="chatbot-lead-capture"><?php esc_html_e('Lead Capture', 'mxchat'); ?></button>
141 <button class="mxch-nav-sub-link" data-target="chatbot-quick-questions"><?php esc_html_e('Quick Questions', 'mxchat'); ?></button>
142 <button class="mxch-nav-sub-link" data-target="chatbot-rate-limits"><?php esc_html_e('Rate Limits', 'mxchat'); ?></button>
143 </div>
144 </div>
145
146 <div class="mxch-nav-item" data-section="api-keys">
147 <button class="mxch-nav-link" data-target="api-keys">
148 <span class="mxch-nav-link-icon">
149 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 2-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
150 </span>
151 <span class="mxch-nav-link-text"><?php esc_html_e('API Keys', 'mxchat'); ?></span>
152 </button>
153 </div>
154
155 <div class="mxch-nav-item" data-section="optimization">
156 <button class="mxch-nav-link" data-target="optimization">
157 <span class="mxch-nav-link-icon">
158 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
159 </span>
160 <span class="mxch-nav-link-text"><?php esc_html_e('Optimization', 'mxchat'); ?></span>
161 </button>
162 </div>
163
164 <div class="mxch-nav-item" data-section="testing">
165 <button class="mxch-nav-link" data-target="testing">
166 <span class="mxch-nav-link-icon">
167 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2v6"/><path d="M15 2v6"/><path d="M12 17v5"/><path d="M5 8h14"/><path d="M6 11v-1a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"/><path d="m9 14 3 3 3-3"/></svg>
168 </span>
169 <span class="mxch-nav-link-text"><?php esc_html_e('Testing', 'mxchat'); ?></span>
170 </button>
171 </div>
172 </div>
173
174 <!-- Integrations Section -->
175 <div class="mxch-nav-section">
176 <div class="mxch-nav-section-title"><?php esc_html_e('Integrations', 'mxchat'); ?></div>
177
178 <div class="mxch-nav-item" data-section="integrations">
179 <button class="mxch-nav-link">
180 <span class="mxch-nav-link-icon">
181 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
182 </span>
183 <span class="mxch-nav-link-text"><?php esc_html_e('Integrations', 'mxchat'); ?></span>
184 <svg class="mxch-nav-link-arrow" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
185 </button>
186 <div class="mxch-nav-sub">
187 <button class="mxch-nav-sub-link" data-target="integrations-toolbar"><?php esc_html_e('Toolbar', 'mxchat'); ?></button>
188 <button class="mxch-nav-sub-link" data-target="integrations-loops"><?php esc_html_e('Loops', 'mxchat'); ?></button>
189 <button class="mxch-nav-sub-link" data-target="integrations-brave"><?php esc_html_e('Brave Search', 'mxchat'); ?></button>
190 <button class="mxch-nav-sub-link" data-target="integrations-slack"><?php esc_html_e('Slack', 'mxchat'); ?></button>
191 <button class="mxch-nav-sub-link" data-target="integrations-telegram"><?php esc_html_e('Telegram', 'mxchat'); ?></button>
192 </div>
193 </div>
194 </div>
195
196 <!-- Resources Section -->
197 <div class="mxch-nav-section">
198 <div class="mxch-nav-section-title"><?php esc_html_e('Resources', 'mxchat'); ?></div>
199
200 <div class="mxch-nav-item" data-section="tutorials">
201 <button class="mxch-nav-link" data-target="tutorials">
202 <span class="mxch-nav-link-icon">
203 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
204 </span>
205 <span class="mxch-nav-link-text"><?php esc_html_e('Tutorials', 'mxchat'); ?></span>
206 </button>
207 </div>
208 </div>
209
210 </nav>
211
212 <?php if (!$is_activated): ?>
213 <div class="mxch-sidebar-footer">
214 <a href="https://mxchat.ai/" target="_blank" class="mxch-sidebar-upgrade-v2">
215 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
216 <?php esc_html_e('Pro Upgrade', 'mxchat'); ?>
217 </a>
218 </div>
219 <?php endif; ?>
220 </aside>
221
222 <!-- Main Content Area -->
223 <main class="mxch-content">
224 <?php if (!$is_activated): ?>
225 <div class="mxch-pro-banner">
226 <div class="mxch-pro-banner-content">
227 <h3 class="mxch-pro-banner-title"><?php esc_html_e('Stop paying $50–200/month for AI chatbot tools.', 'mxchat'); ?></h3>
228 <p class="mxch-pro-banner-text"><?php esc_html_e('One payment unlocks every MxChat Pro add-on for life — MCP server access for Claude / ChatGPT / Claude Code, WooCommerce sales, Google Search Console insights, AI-generated chatbot themes, lead-capture forms, unlimited bots, image analysis, and more. No renewals. No surprise bills.', 'mxchat'); ?></p>
229 </div>
230 <a href="https://mxchat.ai/" target="_blank" class="mxch-pro-banner-btn"><span><?php esc_html_e('Get Lifetime Access →', 'mxchat'); ?></span></a>
231 </div>
232 <?php endif; ?>
233
234 <?php
235 // Show theme migration notice for Pro users
236 $admin_instance->show_theme_migration_banner();
237 ?>
238
239 <!-- ========================================
240 CHATBOT - AI MODELS
241 ======================================== -->
242 <div id="chatbot-ai-models" class="mxch-section active">
243 <div class="mxch-content-header">
244 <h1 class="mxch-content-title"><?php esc_html_e('AI Models', 'mxchat'); ?></h1>
245 <p class="mxch-content-subtitle"><?php esc_html_e('Configure the AI models your chatbot will use for conversations and embeddings.', 'mxchat'); ?></p>
246 </div>
247
248 <div class="mxch-card">
249 <div class="mxch-card-body mxchat-autosave-section">
250 <?php
251 // Chat Model
252 mxchat_render_field_wrapper('model', __('Chat Model', 'mxchat'), function() use ($admin_instance) {
253 $admin_instance->mxchat_model_callback();
254 }, __('Select the AI model your chatbot will use for conversations.', 'mxchat'));
255
256 // Embedding Model
257 mxchat_render_field_wrapper('embedding_model', __('Embedding Model', 'mxchat'), function() use ($admin_instance) {
258 $admin_instance->embedding_model_callback();
259 }, __('Vector embedding model for knowledge base matching. Changing models requires reconfiguring knowledge data.', 'mxchat'));
260
261 // Enable Streaming
262 mxchat_render_field_wrapper('enable_streaming', __('Enable Streaming', 'mxchat'), function() use ($admin_instance) {
263 $admin_instance->enable_streaming_toggle_callback();
264 }, __('Enable real-time streaming responses for supported models (OpenAI, Claude, DeepSeek, Grok).', 'mxchat'));
265
266 // Enable Web Search (OpenAI only)
267 mxchat_render_field_wrapper('enable_web_search', __('Enable Web Search', 'mxchat'), function() use ($admin_instance) {
268 $admin_instance->enable_web_search_toggle_callback();
269 }, __('Allow the chatbot to search the web for current information (OpenAI models only).', 'mxchat'));
270 ?>
271 </div>
272 </div>
273 </div>
274
275 <!-- ========================================
276 CHATBOT - BEHAVIOR
277 ======================================== -->
278 <div id="chatbot-behavior" class="mxch-section">
279 <div class="mxch-content-header">
280 <h1 class="mxch-content-title"><?php esc_html_e('Behavior', 'mxchat'); ?></h1>
281 <p class="mxch-content-subtitle"><?php esc_html_e('Control how your AI chatbot responds and processes queries.', 'mxchat'); ?></p>
282 </div>
283
284 <div class="mxch-card">
285 <div class="mxch-card-body mxchat-autosave-section">
286 <?php
287 // AI Instructions
288 mxchat_render_field_wrapper('system_prompt_instructions', __('AI Instructions (Behavior)', 'mxchat'), function() use ($admin_instance) {
289 $admin_instance->system_prompt_instructions_callback();
290 }, __('Provide system-level instructions to guide the AI\'s behavior and responses.', 'mxchat'));
291
292 // Similarity Threshold
293 mxchat_render_field_wrapper('similarity_threshold', __('Similarity Threshold', 'mxchat'), function() use ($admin_instance) {
294 $admin_instance->mxchat_similarity_threshold_callback();
295 }, __('Adjust threshold for content matching. Lower values = more matches, higher values = stricter matching.', 'mxchat'));
296
297 // RAG Sources Limit
298 mxchat_render_field_wrapper('rag_sources_limit', __('RAG Sources Limit', 'mxchat'), function() use ($admin_instance) {
299 $admin_instance->mxchat_rag_sources_limit_callback();
300 }, __('Number of knowledge base sources (pages/documents) to include in AI context. Higher values provide more context but use more tokens.', 'mxchat'));
301
302 // RAG Chunks Limit
303 mxchat_render_field_wrapper('rag_chunks_limit', __('RAG Chunks Limit', 'mxchat'), function() use ($admin_instance) {
304 $admin_instance->mxchat_rag_chunks_limit_callback();
305 }, __('Maximum total content chunks sent to the AI across all sources. Higher values provide more context but increase token usage and cost.', 'mxchat'));
306
307 // Contextual Awareness
308 mxchat_render_field_wrapper('contextual_awareness', __('Contextual Awareness', 'mxchat'), function() use ($admin_instance) {
309 $admin_instance->mxchat_contextual_awareness_callback();
310 }, __('Allow the chatbot to understand and reference the current page content for more relevant responses.', 'mxchat'));
311
312 // Citation Links
313 mxchat_render_field_wrapper('citation_links', __('Citation Links', 'mxchat'), function() use ($admin_instance) {
314 $admin_instance->mxchat_citation_links_toggle_callback();
315 }, __('Allow the AI to include citation links from your knowledge database in responses. If disabled, ensure your AI Behavior settings do not mention links or the AI may fabricate URLs.', 'mxchat'));
316
317 // Satisfaction Rating Prompt
318 // The toggle callback inline-renders the 5 customization
319 // fields inside a single sub-options wrapper (plan-29caac).
320 // No separate customization group needed — the wrapper handles
321 // its own server-side display state based on the toggle value.
322 mxchat_render_field_wrapper('satisfaction_rating', __('Satisfaction Rating Prompt', 'mxchat'), function() use ($admin_instance) {
323 $admin_instance->mxchat_satisfaction_rating_toggle_callback();
324 }, __('Show a 👍 / 👎 prompt after a conversation has had a couple of bot replies and the visitor has been idle for a moment. Disable to hide the prompt site-wide.', 'mxchat'));
325 ?>
326 </div>
327 </div>
328 </div>
329
330 <!-- ========================================
331 CHATBOT - DISPLAY
332 ======================================== -->
333 <div id="chatbot-display" class="mxch-section">
334 <div class="mxch-content-header">
335 <h1 class="mxch-content-title"><?php esc_html_e('Display Settings', 'mxchat'); ?></h1>
336 <p class="mxch-content-subtitle"><?php esc_html_e('Customize how and where your chatbot appears on your website.', 'mxchat'); ?></p>
337 </div>
338
339 <div class="mxch-card">
340 <div class="mxch-card-header">
341 <h3 class="mxch-card-title">
342 <svg class="mxch-card-title-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
343 <?php esc_html_e('Visibility', 'mxchat'); ?>
344 </h3>
345 </div>
346 <div class="mxch-card-body mxchat-autosave-section">
347 <?php
348 // Auto-Display
349 mxchat_render_field_wrapper('auto_display', __('Auto-Display Chatbot', 'mxchat'), function() use ($admin_instance) {
350 $admin_instance->mxchat_append_to_body_callback();
351 }, __('Show chatbot automatically on all pages. Disable to use shortcode [mxchat_chatbot floating="yes"] for floating widget or [mxchat_chatbot floating="no"] for embedded chat.', 'mxchat'));
352
353 // Open Links in New Tab
354 mxchat_render_field_wrapper('link_target', __('Open Links in New Tab', 'mxchat'), function() use ($admin_instance) {
355 $admin_instance->mxchat_link_target_toggle_callback();
356 }, __('Open links clicked in chat responses in a new browser tab.', 'mxchat'));
357
358 // Chat Persistence
359 mxchat_render_field_wrapper('chat_persistence', __('Chat Persistence', 'mxchat'), function() use ($admin_instance) {
360 $admin_instance->mxchat_chat_persistence_toggle_callback();
361 }, __('Keep chat history when users navigate or return within 24 hours.', 'mxchat'));
362
363 // Download Transcript button
364 mxchat_render_field_wrapper('print_button', __('Show Download Transcript Button', 'mxchat'), function() use ($admin_instance) {
365 $admin_instance->mxchat_print_button_toggle_callback();
366 }, __('Show the "Download Transcript" item in the chat window menu.', 'mxchat'));
367 ?>
368 </div>
369 </div>
370
371 <div class="mxch-card">
372 <div class="mxch-card-header">
373 <h3 class="mxch-card-title">
374 <svg class="mxch-card-title-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
375 <?php esc_html_e('Text & Labels', 'mxchat'); ?>
376 </h3>
377 </div>
378 <div class="mxch-card-body mxchat-autosave-section">
379 <?php
380 // Top Bar Title
381 mxchat_render_field_wrapper('top_bar_title', __('Top Bar Title', 'mxchat'), function() use ($admin_instance) {
382 $admin_instance->mxchat_top_bar_title_callback();
383 }, __('Title text shown in the chatbot header.', 'mxchat'));
384
385 // AI Agent Text
386 mxchat_render_field_wrapper('ai_agent_text', __('AI Agent Text', 'mxchat'), function() use ($admin_instance) {
387 $admin_instance->mxchat_ai_agent_text_callback();
388 }, __('Text shown for AI agents in the status indicator.', 'mxchat'));
389
390 // Intro Message
391 mxchat_render_field_wrapper('intro_message', __('Introductory Message', 'mxchat'), function() use ($admin_instance) {
392 $admin_instance->mxchat_intro_message_callback();
393 }, __('First message shown when chat opens. HTML allowed.', 'mxchat'));
394
395 // Input Placeholder
396 mxchat_render_field_wrapper('input_copy', __('Input Placeholder', 'mxchat'), function() use ($admin_instance) {
397 $admin_instance->mxchat_input_copy_callback();
398 }, __('Placeholder text in the chat input field.', 'mxchat'));
399
400 // Chat Teaser
401 mxchat_render_field_wrapper('pre_chat_message', __('Chat Teaser Pop-up', 'mxchat'), function() use ($admin_instance) {
402 $admin_instance->mxchat_pre_chat_message_callback();
403 }, __('Message shown before users start chatting.', 'mxchat'));
404 ?>
405 </div>
406 </div>
407 </div>
408
409 <!-- ========================================
410 CHATBOT - LEAD CAPTURE
411 ======================================== -->
412 <div id="chatbot-lead-capture" class="mxch-section">
413 <div class="mxch-content-header">
414 <h1 class="mxch-content-title"><?php esc_html_e('Lead Capture', 'mxchat'); ?></h1>
415 <p class="mxch-content-subtitle"><?php esc_html_e('Collect user information and manage privacy settings.', 'mxchat'); ?></p>
416 </div>
417
418 <div class="mxch-card">
419 <div class="mxch-card-header">
420 <h3 class="mxch-card-title">
421 <svg class="mxch-card-title-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
422 <?php esc_html_e('Email Capture', 'mxchat'); ?>
423 </h3>
424 </div>
425 <div class="mxch-card-body mxchat-autosave-section">
426 <?php
427 // Require Email
428 mxchat_render_field_wrapper('enable_email_block', __('Require Email to Chat', 'mxchat'), function() use ($admin_instance) {
429 $admin_instance->enable_email_block_callback();
430 }, __('Require users to enter their email before chatting. Shows for non-logged-in users.', 'mxchat'));
431
432 // Email Form Content
433 mxchat_render_field_wrapper('email_blocker_header', __('Email Form Content', 'mxchat'), function() use ($admin_instance) {
434 $admin_instance->email_blocker_header_content_callback();
435 }, __('HTML content shown above the email form.', 'mxchat'));
436
437 // Email Button Text
438 mxchat_render_field_wrapper('email_blocker_button', __('Submit Button Text', 'mxchat'), function() use ($admin_instance) {
439 $admin_instance->email_blocker_button_text_callback();
440 }, __('Text for the email form submit button.', 'mxchat'));
441
442 // Require Name
443 mxchat_render_field_wrapper('enable_name_field', __('Also Require Name', 'mxchat'), function() use ($admin_instance) {
444 $admin_instance->enable_name_field_callback();
445 }, __('Also require users to enter their name with email.', 'mxchat'));
446
447 // Name Placeholder
448 mxchat_render_field_wrapper('name_placeholder', __('Name Field Placeholder', 'mxchat'), function() use ($admin_instance) {
449 $admin_instance->name_field_placeholder_callback();
450 }, __('Placeholder text for the name input field.', 'mxchat'));
451 ?>
452 </div>
453 </div>
454
455 <div class="mxch-card">
456 <div class="mxch-card-header">
457 <h3 class="mxch-card-title">
458 <svg class="mxch-card-title-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
459 <?php esc_html_e('Privacy & Compliance', 'mxchat'); ?>
460 </h3>
461 </div>
462 <div class="mxch-card-body mxchat-autosave-section">
463 <?php
464 // Privacy Notice
465 mxchat_render_field_wrapper('privacy_toggle', __('Privacy Notice', 'mxchat'), function() use ($admin_instance) {
466 $admin_instance->mxchat_privacy_toggle_callback();
467 }, __('Show privacy notice below the chat widget.', 'mxchat'));
468
469 // Complianz
470 mxchat_render_field_wrapper('complianz_toggle', __('Complianz Integration', 'mxchat'), function() use ($admin_instance) {
471 $admin_instance->mxchat_complianz_toggle_callback();
472 }, __('Apply Complianz consent logic to the chatbot (requires Complianz plugin).', 'mxchat'));
473 ?>
474 </div>
475 </div>
476 </div>
477
478 <!-- ========================================
479 CHATBOT - QUICK QUESTIONS
480 ======================================== -->
481 <div id="chatbot-quick-questions" class="mxch-section">
482 <div class="mxch-content-header">
483 <h1 class="mxch-content-title"><?php esc_html_e('Quick Questions', 'mxchat'); ?></h1>
484 <p class="mxch-content-subtitle"><?php esc_html_e('Pre-defined questions displayed above the chat input to help users get started.', 'mxchat'); ?></p>
485 </div>
486
487 <div class="mxch-card">
488 <div class="mxch-card-body mxchat-autosave-section">
489 <?php
490 // Quick Question 1
491 mxchat_render_field_wrapper('popular_question_1', __('Quick Question 1', 'mxchat'), function() use ($admin_instance) {
492 $admin_instance->mxchat_popular_question_1_callback();
493 });
494
495 // Quick Question 2
496 mxchat_render_field_wrapper('popular_question_2', __('Quick Question 2', 'mxchat'), function() use ($admin_instance) {
497 $admin_instance->mxchat_popular_question_2_callback();
498 });
499
500 // Quick Question 3
501 mxchat_render_field_wrapper('popular_question_3', __('Quick Question 3', 'mxchat'), function() use ($admin_instance) {
502 $admin_instance->mxchat_popular_question_3_callback();
503 });
504
505 // Additional Questions
506 mxchat_render_field_wrapper('additional_questions', __('Additional Questions', 'mxchat'), function() use ($admin_instance) {
507 $admin_instance->mxchat_additional_popular_questions_callback();
508 }, __('Add as many quick questions as you need.', 'mxchat'));
509 ?>
510 </div>
511 </div>
512 </div>
513
514 <!-- ========================================
515 CHATBOT - RATE LIMITS
516 ======================================== -->
517 <div id="chatbot-rate-limits" class="mxch-section">
518 <div class="mxch-content-header">
519 <h1 class="mxch-content-title"><?php esc_html_e('Rate Limits', 'mxchat'); ?></h1>
520 <p class="mxch-content-subtitle"><?php esc_html_e('Set message limits for each user role to manage API usage.', 'mxchat'); ?></p>
521 </div>
522
523 <div class="mxch-notice mxch-notice-info" style="margin-bottom: 24px;">
524 <svg class="mxch-notice-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
525 <div>
526 <strong><?php esc_html_e('Placeholders available:', 'mxchat'); ?></strong>
527 <code>{limit}</code>, <code>{timeframe}</code>, <code>{count}</code>, <code>{remaining}</code>
528 <br>
529 <strong><?php esc_html_e('Markdown links supported:', 'mxchat'); ?></strong>
530 <code>[Link text](https://example.com)</code>
531 </div>
532 </div>
533
534 <div class="mxch-card">
535 <div class="mxch-card-body mxchat-autosave-section">
536 <?php
537 // Render rate limits with accordion
538 mxchat_render_rate_limits_accordion($admin_instance);
539 ?>
540 </div>
541 </div>
542 </div>
543
544 <!-- ========================================
545 API KEYS
546 ======================================== -->
547 <div id="api-keys" class="mxch-section">
548 <div class="mxch-content-header">
549 <h1 class="mxch-content-title"><?php esc_html_e('API Keys', 'mxchat'); ?></h1>
550 <p class="mxch-content-subtitle"><?php esc_html_e('Manage API keys for AI providers and integrations.', 'mxchat'); ?></p>
551 </div>
552
553 <div class="mxch-card">
554 <div class="mxch-card-header">
555 <h3 class="mxch-card-title">
556 <svg class="mxch-card-title-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="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 13v2"/><path d="M9 13v2"/></svg>
557 <?php esc_html_e('AI Providers', 'mxchat'); ?>
558 </h3>
559 </div>
560 <div class="mxch-card-body mxchat-autosave-section">
561 <table class="form-table">
562 <?php do_settings_fields('mxchat-api-keys', 'mxchat_api_keys_section'); ?>
563 </table>
564 </div>
565 </div>
566 </div>
567
568 <!-- ========================================
569 OPTIMIZATION
570 ======================================== -->
571 <div id="optimization" class="mxch-section">
572 <div class="mxch-content-header">
573 <h1 class="mxch-content-title"><?php esc_html_e('Optimization & Diagnostics', 'mxchat'); ?></h1>
574 <p class="mxch-content-subtitle"><?php esc_html_e('Optimize performance, debug issues, and manage plugin settings.', 'mxchat'); ?></p>
575 </div>
576
577 <!-- Script Loading Card -->
578 <div class="mxch-card">
579 <div class="mxch-card-header">
580 <h3 class="mxch-card-title">
581 <svg class="mxch-card-title-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
582 <?php esc_html_e('Script Loading', 'mxchat'); ?>
583 </h3>
584 </div>
585 <div class="mxch-card-body mxchat-autosave-section">
586 <?php
587 $script_loading_strategy = isset($options['script_loading_strategy']) ? $options['script_loading_strategy'] : 'default';
588 ?>
589 <div class="mxch-field">
590 <label class="mxch-field-label"><?php esc_html_e('Script Loading Strategy', 'mxchat'); ?></label>
591 <div class="mxch-field-control">
592 <select name="mxchat_options[script_loading_strategy]" id="script_loading_strategy" class="mxch-select mxchat-autosave-field">
593 <option value="default" <?php selected($script_loading_strategy, 'default'); ?>><?php esc_html_e('Default (Immediate)', 'mxchat'); ?></option>
594 <option value="defer" <?php selected($script_loading_strategy, 'defer'); ?>><?php esc_html_e('Deferred', 'mxchat'); ?></option>
595 <option value="delay_1s" <?php selected($script_loading_strategy, 'delay_1s'); ?>><?php esc_html_e('Delay 1 Second', 'mxchat'); ?></option>
596 <option value="delay_3s" <?php selected($script_loading_strategy, 'delay_3s'); ?>><?php esc_html_e('Delay 3 Seconds', 'mxchat'); ?></option>
597 <option value="delay_5s" <?php selected($script_loading_strategy, 'delay_5s'); ?>><?php esc_html_e('Delay 5 Seconds', 'mxchat'); ?></option>
598 <option value="on_interaction" <?php selected($script_loading_strategy, 'on_interaction'); ?>><?php esc_html_e('On User Interaction', 'mxchat'); ?></option>
599 </select>
600 </div>
601 <p class="mxch-field-description"><?php esc_html_e('Control when the chatbot script loads to improve page performance.', 'mxchat'); ?></p>
602 </div>
603
604 <div class="mxch-notice mxch-notice-info" style="margin-top: 16px;">
605 <svg class="mxch-notice-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
606 <div>
607 <strong><?php esc_html_e('Loading Strategies:', 'mxchat'); ?></strong>
608 <ul style="margin: 8px 0 0 0; padding-left: 20px;">
609 <li><strong><?php esc_html_e('Default:', 'mxchat'); ?></strong> <?php esc_html_e('Script loads immediately in the footer. Best for sites where chat is critical.', 'mxchat'); ?></li>
610 <li><strong><?php esc_html_e('Deferred:', 'mxchat'); ?></strong> <?php esc_html_e('Script loads after HTML parsing completes. Good balance of performance and availability.', 'mxchat'); ?></li>
611 <li><strong><?php esc_html_e('Delay:', 'mxchat'); ?></strong> <?php esc_html_e('Script loads after a set delay. Helps improve LCP scores.', 'mxchat'); ?></li>
612 <li><strong><?php esc_html_e('On User Interaction:', 'mxchat'); ?></strong> <?php esc_html_e('Script loads when user scrolls, moves mouse, or touches screen. Best for Core Web Vitals but chat appears with slight delay.', 'mxchat'); ?></li>
613 </ul>
614 </div>
615 </div>
616 </div>
617 </div>
618
619 <!-- Page Cache Compatibility Card -->
620 <div class="mxch-card">
621 <div class="mxch-card-header">
622 <h3 class="mxch-card-title">
623 <svg class="mxch-card-title-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
624 <?php esc_html_e('Page Cache Compatibility', 'mxchat'); ?>
625 </h3>
626 </div>
627 <div class="mxch-card-body">
628 <p class="mxch-field-description" style="margin-top: 0;"><?php esc_html_e('MxChat\'s chat send (and stream send, plus PDF / Word upload) all POST to /wp-admin/admin-ajax.php. Page-cache plugins occasionally cache those responses, which breaks the per-session nonce flow on the first message. MxChat auto-tells the five most common cache plugins to never cache chat AJAX via their own filter APIs — no setup needed for those. For other cache plugins (or Cloudflare APO), copy the manual exclusion string into your cache plugin\'s exclusion list.', 'mxchat'); ?></p>
629
630 <?php
631 $mxch_cache_rows = array(
632 array('name' => 'WP Rocket', 'state' => 'auto', 'exclusion' => '/wp-admin/admin-ajax\\.php\\?action=mxchat_.*'),
633 array('name' => 'LiteSpeed Cache', 'state' => 'auto', 'exclusion' => '/wp-admin/admin-ajax.php?action=mxchat_*'),
634 array('name' => 'W3 Total Cache', 'state' => 'auto', 'exclusion' => '/wp-admin/admin-ajax.php?action=mxchat_*'),
635 array('name' => 'FlyingPress', 'state' => 'auto', 'exclusion' => '/wp-admin/admin-ajax.php?action=mxchat_*'),
636 array('name' => 'WP Super Cache', 'state' => 'auto', 'exclusion' => 'wp-admin/admin-ajax.php'),
637 array('name' => 'Cloudflare APO', 'state' => 'manual', 'exclusion' => 'Page Rule / Cache Rule: URI Path contains "/wp-admin/admin-ajax.php" → Bypass Cache'),
638 );
639 ?>
640
641 <div class="mxch-cache-compat-grid" style="display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px;">
642 <?php foreach ($mxch_cache_rows as $row) :
643 $is_auto = ($row['state'] === 'auto');
644 $pill_class = $is_auto ? 'mxch-status-pill-active' : 'mxch-status-pill-warning';
645 $pill_label = $is_auto ? __('Auto-handled', 'mxchat') : __('Manual', 'mxchat');
646 ?>
647 <div class="mxch-cache-compat-row" style="display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #f8fafc; border: 1px solid var(--mxch-card-border); border-radius: var(--mxch-radius-md);">
648 <div style="display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 0 auto;">
649 <span style="font-weight: 500;"><?php echo esc_html($row['name']); ?></span>
650 <span class="mxch-status-pill <?php echo esc_attr($pill_class); ?>">
651 <span class="mxch-status-dot"></span>
652 <?php echo esc_html($pill_label); ?>
653 </span>
654 </div>
655 <div style="display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;">
656 <code style="background: #fff; border: 1px solid var(--mxch-card-border); padding: 4px 8px; border-radius: var(--mxch-radius-sm); font-size: 12px; color: var(--mxch-text-secondary); flex: 1 1 auto; overflow-x: auto; white-space: nowrap; min-width: 0;"><?php echo esc_html($row['exclusion']); ?></code>
657 <button type="button" class="mxch-btn mxch-btn-secondary mxch-btn-sm" data-mxch-copy="<?php echo esc_attr($row['exclusion']); ?>" style="flex: 0 0 auto;">
658 <?php esc_html_e('Copy', 'mxchat'); ?>
659 </button>
660 </div>
661 </div>
662 <?php endforeach; ?>
663 </div>
664
665 <div class="mxch-notice mxch-notice-info" style="margin-top: 16px;">
666 <svg class="mxch-notice-icon" xmlns="http://www.w3.org/2000/svg" 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="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
667 <span><?php esc_html_e('Auto-handled plugins receive a filter from MxChat that excludes chat AJAX from their cache. Even so, having the exclusion in your own exclusion list is harmless and acts as a belt-and-suspenders guarantee.', 'mxchat'); ?></span>
668 </div>
669 </div>
670 </div>
671
672 <!-- Provider Reliability Card -->
673 <?php
674 $auto_retry_enabled = !isset($options['auto_retry_on_transient_error']) ||
675 (string) $options['auto_retry_on_transient_error'] !== '0';
676 ?>
677 <div class="mxch-card">
678 <div class="mxch-card-header">
679 <h3 class="mxch-card-title">
680 <svg class="mxch-card-title-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/><polyline points="21 4 21 10 15 10"/></svg>
681 <?php esc_html_e('Provider Reliability', 'mxchat'); ?>
682 </h3>
683 <span class="mxch-status-pill <?php echo $auto_retry_enabled ? 'mxch-status-pill-active' : 'mxch-status-pill-disabled'; ?>">
684 <span class="mxch-status-dot"></span>
685 <?php echo $auto_retry_enabled ? esc_html__('Active', 'mxchat') : esc_html__('Disabled', 'mxchat'); ?>
686 </span>
687 </div>
688 <div class="mxch-card-body mxchat-autosave-section">
689 <div class="mxch-field">
690 <label class="mxch-field-label" for="auto_retry_on_transient_error">
691 <?php esc_html_e('Auto-retry on provider overload', 'mxchat'); ?>
692 </label>
693 <div class="mxch-field-control">
694 <label class="mxch-toggle">
695 <input type="checkbox"
696 id="auto_retry_on_transient_error"
697 name="mxchat_options[auto_retry_on_transient_error]"
698 class="mxchat-autosave-field"
699 value="1"
700 <?php checked($auto_retry_enabled); ?> />
701 <span class="mxch-toggle-slider"></span>
702 </label>
703 </div>
704 <p class="mxch-field-description"><?php esc_html_e('When the AI provider returns a transient error (rate-limit / overload / 429 / 503 / Gemini "model overloaded"), MxChat retries the chat-send up to twice before surfacing the error. Visitors see a brief pause instead of a raw provider error in the bot bubble.', 'mxchat'); ?></p>
705 <p class="mxch-field-hint"><?php esc_html_e('Configuration errors (invalid API key, 401/403/404/422) still surface immediately — never retried.', 'mxchat'); ?></p>
706 </div>
707 </div>
708 </div>
709
710 <!-- Debug Mode Card -->
711 <?php
712 $debug_mode = isset($options['debug_mode']) ? $options['debug_mode'] : 'off';
713 $debug_active = ($debug_mode === 'on');
714 ?>
715 <div class="mxch-card">
716 <div class="mxch-card-header">
717 <h3 class="mxch-card-title">
718 <svg class="mxch-card-title-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
719 <?php esc_html_e('Debug Mode', 'mxchat'); ?>
720 </h3>
721 </div>
722 <div class="mxch-card-body">
723 <div class="mxch-field">
724 <label class="mxch-toggle">
725 <input type="checkbox" class="mxch-toggle-input" id="mxchat_debug_mode" name="mxchat_options[debug_mode]" value="on" <?php checked($debug_active); ?>>
726 <span class="mxch-toggle-switch"></span>
727 <span class="mxch-toggle-label"><?php esc_html_e('Enable Debug Logging', 'mxchat'); ?></span>
728 </label>
729 <p class="mxch-field-description"><?php esc_html_e('Tracks settings changes, knowledge base errors, API issues, and embedding failures. Enable only when troubleshooting. Max 100 entries stored.', 'mxchat'); ?></p>
730 </div>
731 </div>
732 </div>
733
734 <!-- Debug Log Viewer Card -->
735 <div class="mxch-card">
736 <div class="mxch-card-header" style="display: flex; justify-content: space-between; align-items: center;">
737 <h3 class="mxch-card-title">
738 <svg class="mxch-card-title-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
739 <?php esc_html_e('Debug Log', 'mxchat'); ?>
740 </h3>
741 <div style="display: flex; gap: 8px; align-items: center;">
742 <span id="mxchat-log-count" class="mxch-badge" style="display: none;"></span>
743 <button type="button" class="mxch-btn mxch-btn-secondary mxch-btn-sm" id="mxchat-refresh-log">
744 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/></svg>
745 <?php esc_html_e('Refresh', 'mxchat'); ?>
746 </button>
747 <button type="button" class="mxch-btn mxch-btn-secondary mxch-btn-sm" id="mxchat-clear-log">
748 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
749 <?php esc_html_e('Clear', 'mxchat'); ?>
750 </button>
751 </div>
752 </div>
753 <div class="mxch-card-body">
754 <div id="mxchat-debug-log" class="mxchat-debug-log-viewer">
755 <div class="mxchat-debug-log-empty">
756 <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.3;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
757 <p><?php esc_html_e('No log entries yet. Enable debug mode to start logging.', 'mxchat'); ?></p>
758 </div>
759 </div>
760 </div>
761 </div>
762
763 <!-- Settings Tools Card -->
764 <div class="mxch-card">
765 <div class="mxch-card-header">
766 <h3 class="mxch-card-title">
767 <svg class="mxch-card-title-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
768 <?php esc_html_e('Settings Tools', 'mxchat'); ?>
769 </h3>
770 </div>
771 <div class="mxch-card-body">
772 <div class="mxch-tools-grid">
773 <!-- Export Settings -->
774 <div class="mxch-tool-item">
775 <div class="mxch-tool-icon">
776 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
777 </div>
778 <div class="mxch-tool-content">
779 <h4><?php esc_html_e('Export Settings', 'mxchat'); ?></h4>
780 <p><?php esc_html_e('Download a JSON file of your current settings for backup or support. API keys are masked for security.', 'mxchat'); ?></p>
781 <button type="button" class="mxch-btn mxch-btn-secondary" id="mxchat-export-settings">
782 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
783 <?php esc_html_e('Export Settings', 'mxchat'); ?>
784 </button>
785 </div>
786 </div>
787
788 <!-- Reset All Settings -->
789 <div class="mxch-tool-item mxch-tool-item-danger">
790 <div class="mxch-tool-icon">
791 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
792 </div>
793 <div class="mxch-tool-content">
794 <h4><?php esc_html_e('Reset All Settings', 'mxchat'); ?></h4>
795 <p><?php esc_html_e('Reset all MxChat settings to their default values. This action cannot be undone.', 'mxchat'); ?></p>
796 <button type="button" class="mxch-btn mxch-btn-danger" id="mxchat-reset-settings">
797 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/></svg>
798 <?php esc_html_e('Reset All Settings', 'mxchat'); ?>
799 </button>
800 </div>
801 </div>
802 </div>
803 </div>
804 </div>
805
806 <!-- Reset Confirmation Modal -->
807 <div id="mxchat-reset-modal" class="mxch-modal" style="display: none;">
808 <div class="mxch-modal-backdrop"></div>
809 <div class="mxch-modal-content">
810 <div class="mxch-modal-header">
811 <h3><?php esc_html_e('Reset All Settings', 'mxchat'); ?></h3>
812 <button type="button" class="mxch-modal-close" id="mxchat-reset-modal-close">&times;</button>
813 </div>
814 <div class="mxch-modal-body">
815 <div class="mxch-notice mxch-notice-warning">
816 <svg class="mxch-notice-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
817 <div>
818 <strong><?php esc_html_e('Warning: This action cannot be undone!', 'mxchat'); ?></strong>
819 <p><?php esc_html_e('All your MxChat settings including API keys, customizations, and configurations will be permanently deleted.', 'mxchat'); ?></p>
820 </div>
821 </div>
822 <div class="mxch-field" style="margin-top: 20px;">
823 <label class="mxch-field-label"><?php esc_html_e('Type RESET to confirm:', 'mxchat'); ?></label>
824 <input type="text" id="mxchat-reset-confirmation" class="mxch-input" placeholder="RESET" autocomplete="off">
825 </div>
826 </div>
827 <div class="mxch-modal-footer">
828 <button type="button" class="mxch-btn mxch-btn-secondary" id="mxchat-reset-cancel"><?php esc_html_e('Cancel', 'mxchat'); ?></button>
829 <button type="button" class="mxch-btn mxch-btn-danger" id="mxchat-reset-confirm" disabled><?php esc_html_e('Reset All Settings', 'mxchat'); ?></button>
830 </div>
831 </div>
832 </div>
833 </div>
834
835 <!-- ========================================
836 INTEGRATIONS - TOOLBAR
837 ======================================== -->
838 <div id="integrations-toolbar" class="mxch-section">
839 <div class="mxch-content-header">
840 <h1 class="mxch-content-title"><?php esc_html_e('Toolbar Settings', 'mxchat'); ?></h1>
841 <p class="mxch-content-subtitle"><?php esc_html_e('Configure the chat toolbar and document upload features.', 'mxchat'); ?></p>
842 </div>
843
844 <div class="mxch-card">
845 <div class="mxch-card-body mxchat-autosave-section">
846 <table class="form-table">
847 <?php do_settings_fields('mxchat-embed', 'mxchat_pdf_intent_section'); ?>
848 </table>
849 </div>
850 </div>
851 </div>
852
853 <!-- ========================================
854 INTEGRATIONS - LOOPS
855 ======================================== -->
856 <div id="integrations-loops" class="mxch-section">
857 <div class="mxch-content-header">
858 <h1 class="mxch-content-title"><?php esc_html_e('Loops Integration', 'mxchat'); ?></h1>
859 <p class="mxch-content-subtitle"><?php esc_html_e('Configure email capture with Loops for mailing list growth.', 'mxchat'); ?></p>
860 </div>
861
862 <div class="mxch-card">
863 <div class="mxch-card-body mxchat-autosave-section">
864 <table class="form-table">
865 <?php do_settings_fields('mxchat-embed', 'mxchat_loops_section'); ?>
866 </table>
867 </div>
868 </div>
869 </div>
870
871 <!-- ========================================
872 INTEGRATIONS - BRAVE SEARCH
873 ======================================== -->
874 <div id="integrations-brave" class="mxch-section">
875 <div class="mxch-content-header">
876 <h1 class="mxch-content-title"><?php esc_html_e('Brave Search', 'mxchat'); ?></h1>
877 <p class="mxch-content-subtitle"><?php esc_html_e('Configure Brave Search API for web search capabilities.', 'mxchat'); ?></p>
878 </div>
879
880 <div class="mxch-card">
881 <div class="mxch-card-body mxchat-autosave-section">
882 <table class="form-table">
883 <?php do_settings_fields('mxchat-embed', 'mxchat_brave_section'); ?>
884 </table>
885 </div>
886 </div>
887 </div>
888
889 <!-- ========================================
890 INTEGRATIONS - SLACK
891 ======================================== -->
892 <div id="integrations-slack" class="mxch-section">
893 <div class="mxch-content-header">
894 <h1 class="mxch-content-title"><?php esc_html_e('Slack', 'mxchat'); ?></h1>
895 <p class="mxch-content-subtitle"><?php esc_html_e('Connect your chatbot to Slack for live human support.', 'mxchat'); ?></p>
896 </div>
897
898 <div class="mxch-notice mxch-notice-info" style="margin-bottom: 24px;">
899 <svg class="mxch-notice-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
900 <div>
901 <?php printf(
902 esc_html__('Visit our %s for setup instructions.', 'mxchat'),
903 '<a href="https://mxchat.ai/documentation/#slack_integration" target="_blank">' . esc_html__('documentation page', 'mxchat') . '</a>'
904 ); ?>
905 </div>
906 </div>
907
908 <div class="mxch-card">
909 <div class="mxch-card-body mxchat-autosave-section">
910 <table class="form-table">
911 <?php do_settings_fields('mxchat-embed', 'mxchat_live_agent_section'); ?>
912 </table>
913 </div>
914 </div>
915
916 <div class="mxch-card" style="margin-top: 24px;">
917 <div class="mxch-card-header">
918 <h3 class="mxch-card-title">
919 <svg class="mxch-card-title-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
920 <?php esc_html_e('Test Connection', 'mxchat'); ?>
921 </h3>
922 </div>
923 <div class="mxch-card-body">
924 <p class="mxch-field-description" style="margin-bottom: 16px;">
925 <?php esc_html_e('Test your Slack bot token to verify it has the required permissions. This will check if the bot can authenticate and create channels.', 'mxchat'); ?>
926 </p>
927 <button type="button" id="mxchat-test-slack-connection" class="mxch-btn mxch-btn-secondary">
928 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
929 <?php esc_html_e('Test Slack Connection', 'mxchat'); ?>
930 </button>
931 <div id="mxchat-slack-test-result" style="margin-top: 16px; display: none;"></div>
932 </div>
933 </div>
934
935 <div class="mxch-card" style="margin-top: 24px;">
936 <div class="mxch-card-header">
937 <h3 class="mxch-card-title">
938 <svg class="mxch-card-title-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
939 <?php esc_html_e('Required OAuth Scopes', 'mxchat'); ?>
940 </h3>
941 </div>
942 <div class="mxch-card-body">
943 <p class="mxch-field-description" style="margin-bottom: 12px;">
944 <?php esc_html_e('Your Slack app needs these Bot Token Scopes (OAuth & Permissions > Scopes):', 'mxchat'); ?>
945 </p>
946 <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; background: #f8f9fa; padding: 16px; border-radius: 8px; font-family: monospace; font-size: 13px;">
947 <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">channels:manage</code>
948 <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">channels:read</code>
949 <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">chat:write</code>
950 <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">chat:write.public</code>
951 <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">groups:write</code>
952 <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">users:read</code>
953 </div>
954 <p class="mxch-field-description" style="margin-top: 12px;">
955 <?php esc_html_e('After adding scopes, reinstall the app to your workspace.', 'mxchat'); ?>
956 </p>
957 </div>
958 </div>
959 </div>
960
961 <!-- ========================================
962 INTEGRATIONS - TELEGRAM
963 ======================================== -->
964 <div id="integrations-telegram" class="mxch-section">
965 <div class="mxch-content-header">
966 <h1 class="mxch-content-title"><?php esc_html_e('Telegram', 'mxchat'); ?></h1>
967 <p class="mxch-content-subtitle"><?php esc_html_e('Connect your chatbot to Telegram for live human support.', 'mxchat'); ?></p>
968 </div>
969
970 <div class="mxch-notice mxch-notice-info" style="margin-bottom: 24px;">
971 <svg class="mxch-notice-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
972 <div>
973 <?php esc_html_e('Telegram Live Agent requires a Telegram bot and a supergroup with forum topics enabled.', 'mxchat'); ?>
974 <a href="https://mxchat.ai/documentation-bot/" target="_blank" style="margin-left: 5px;"><?php esc_html_e('Chat with our advanced doc bot for assistance setting up.', 'mxchat'); ?></a>
975 </div>
976 </div>
977
978 <div class="mxch-card">
979 <div class="mxch-card-body mxchat-autosave-section">
980 <table class="form-table">
981 <?php do_settings_fields('mxchat-embed', 'mxchat_telegram_section'); ?>
982 </table>
983 </div>
984 </div>
985
986 <div class="mxch-card" style="margin-top: 24px;">
987 <div class="mxch-card-header">
988 <h3 class="mxch-card-title">
989 <svg class="mxch-card-title-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
990 <?php esc_html_e('Webhook Setup', 'mxchat'); ?>
991 </h3>
992 </div>
993 <div class="mxch-card-body">
994 <?php
995 $telegram_bot_token = $options['telegram_bot_token'] ?? '';
996 $telegram_webhook_secret = $options['telegram_webhook_secret'] ?? '';
997 $webhook_url = rest_url('mxchat/v1/telegram-webhook');
998 ?>
999
1000 <p class="mxch-field-description" style="margin-bottom: 8px;">
1001 <strong><?php esc_html_e('Your Webhook URL:', 'mxchat'); ?></strong>
1002 </p>
1003 <div class="mxch-webhook-url-display" style="margin-bottom: 20px;">
1004 <code id="mxch-telegram-webhook-url"><?php echo esc_url($webhook_url); ?></code>
1005 <button type="button" class="mxch-btn mxch-btn-secondary mxch-btn-sm" onclick="navigator.clipboard.writeText(document.getElementById('mxch-telegram-webhook-url').textContent); this.textContent='Copied!'; setTimeout(() => this.textContent='Copy', 2000);">
1006 <?php esc_html_e('Copy', 'mxchat'); ?>
1007 </button>
1008 </div>
1009
1010 <?php if (!empty($telegram_bot_token)) : ?>
1011 <p class="mxch-field-description" style="margin-bottom: 8px;">
1012 <strong><?php esc_html_e('Register Webhook URL:', 'mxchat'); ?></strong><br>
1013 <?php esc_html_e('Copy and paste this URL into your browser to register the webhook with Telegram:', 'mxchat'); ?>
1014 </p>
1015 <?php
1016 $registration_url = 'https://api.telegram.org/bot' . $telegram_bot_token . '/setWebhook?url=' . urlencode($webhook_url);
1017 if (!empty($telegram_webhook_secret)) {
1018 $registration_url .= '&secret_token=' . urlencode($telegram_webhook_secret);
1019 }
1020 ?>
1021 <div class="mxch-webhook-url-display" style="margin-bottom: 12px;">
1022 <code id="mxch-telegram-registration-url" style="word-break: break-all; font-size: 12px;"><?php echo esc_url($registration_url); ?></code>
1023 <button type="button" class="mxch-btn mxch-btn-secondary mxch-btn-sm" onclick="navigator.clipboard.writeText(document.getElementById('mxch-telegram-registration-url').textContent); this.textContent='Copied!'; setTimeout(() => this.textContent='Copy', 2000);">
1024 <?php esc_html_e('Copy', 'mxchat'); ?>
1025 </button>
1026 </div>
1027 <p class="mxch-field-description" style="color: #22c55e;">
1028 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle; margin-right: 4px;"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
1029 <?php esc_html_e('You should see {"ok":true,"result":true,"description":"Webhook was set"} after visiting the URL.', 'mxchat'); ?>
1030 </p>
1031 <?php else : ?>
1032 <p class="mxch-field-description" style="color: #f59e0b;">
1033 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle; margin-right: 4px;"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
1034 <?php esc_html_e('Enter your Bot Token above and save to generate the registration URL.', 'mxchat'); ?>
1035 </p>
1036 <?php endif; ?>
1037 </div>
1038 </div>
1039 </div>
1040
1041 <!-- ========================================
1042 TUTORIALS
1043 ======================================== -->
1044 <div id="tutorials" class="mxch-section">
1045 <div class="mxch-content-header">
1046 <h1 class="mxch-content-title"><?php esc_html_e('Video Tutorials', 'mxchat'); ?></h1>
1047 <p class="mxch-content-subtitle"><?php esc_html_e('Learn how to get the most out of MxChat with our video guides.', 'mxchat'); ?></p>
1048 </div>
1049
1050 <?php
1051 // Setup Guide — reopen the onboarding wizard (plan-347916, moved here from Display tab).
1052 // Only shows once the user has dismissed/graduated from the Onboarding page.
1053 if (function_exists('mxchat_onboarding_is_dismissed') && mxchat_onboarding_is_dismissed()):
1054 $auto_grad = function_exists('mxchat_onboarding_is_auto_graduated') && mxchat_onboarding_is_auto_graduated();
1055 ?>
1056 <div class="mxch-card mxch-onboarding-unhide-card" style="margin-bottom: 24px;">
1057 <div class="mxch-card-header">
1058 <h3 class="mxch-card-title">
1059 <svg class="mxch-card-title-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c0 2 3 3 6 3s6-1 6-3v-5"/></svg>
1060 <?php esc_html_e('Setup Guide', 'mxchat'); ?>
1061 </h3>
1062 </div>
1063 <div class="mxch-card-body">
1064 <p style="margin:0 0 12px;color:var(--mxch-text-secondary);font-size:13px;line-height:1.5;">
1065 <?php if ($auto_grad): ?>
1066 <?php esc_html_e('You finished the setup guide. Reopen it any time to revisit the steps or change a setup choice.', 'mxchat'); ?>
1067 <?php else: ?>
1068 <?php esc_html_e('You hid the setup guide from the MxChat menu. Reopen it any time to revisit the steps.', 'mxchat'); ?>
1069 <?php endif; ?>
1070 </p>
1071 <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" style="margin:0;">
1072 <?php wp_nonce_field('mxchat_unhide_onboarding'); ?>
1073 <input type="hidden" name="action" value="mxchat_unhide_onboarding" />
1074 <button type="submit" class="mxch-btn mxch-btn-secondary mxch-btn-sm">
1075 <?php esc_html_e('Reopen setup guide', 'mxchat'); ?>
1076 </button>
1077 </form>
1078 </div>
1079 </div>
1080 <?php endif; ?>
1081
1082 <div class="mxch-card" style="margin-bottom: 24px;">
1083 <div class="mxch-card-body">
1084 <div style="display: flex; align-items: flex-start; gap: 16px;">
1085 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--mxch-warning); flex-shrink: 0;"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
1086 <div>
1087 <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 600;"><?php esc_html_e('Need Help?', 'mxchat'); ?></h3>
1088 <p style="margin: 0 0 12px 0; color: var(--mxch-text-secondary);"><?php esc_html_e('If you\'re having trouble or believe something is not working as expected, please submit a support ticket.', 'mxchat'); ?></p>
1089 <a href="https://wordpress.org/support/plugin/mxchat-basic/" target="_blank" class="mxch-btn mxch-btn-secondary mxch-btn-sm">
1090 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg>
1091 <?php esc_html_e('Submit Support Ticket', 'mxchat'); ?>
1092 </a>
1093 </div>
1094 </div>
1095 </div>
1096 </div>
1097
1098 <div class="mxch-tutorials-grid">
1099 <?php
1100 $tutorials = array(
1101 array(
1102 'title' => __('Quick Setup with MxChat', 'mxchat'),
1103 'description' => __('Learn how to quickly setup and understand how your chatbot works.', 'mxchat'),
1104 'url' => 'https://www.youtube.com/watch?v=3BqoiyWaQiM&t'
1105 ),
1106 array(
1107 'title' => __('AI Content Generation', 'mxchat'),
1108 'description' => __('Generate full blog posts and landing pages with AI—from prompt to publish in minutes.', 'mxchat'),
1109 'url' => 'https://www.youtube.com/watch?v=n8TeEeHpxs4'
1110 ),
1111 array(
1112 'title' => __('Chat With Your GSC Data', 'mxchat'),
1113 'description' => __('Find content gaps, quick win keywords, and SEO opportunities by chatting with your Google Search Console data using the Admin Assistant add-on.', 'mxchat'),
1114 'url' => 'https://www.youtube.com/watch?v=ytgMou_7SZA&t=2s'
1115 ),
1116 array(
1117 'title' => __('AI Theme Generator', 'mxchat'),
1118 'description' => __('Learn how to instantly restyle your chatbot using plain English prompts with real-time previews.', 'mxchat'),
1119 'url' => 'https://www.youtube.com/watch?v=rSQDW2qbtRU&t'
1120 ),
1121 array(
1122 'title' => __('MxChat Forms', 'mxchat'),
1123 'description' => __('Create and manage smart forms that automatically trigger during chat conversations.', 'mxchat'),
1124 'url' => 'https://www.youtube.com/watch?v=3MrWy5dRalA'
1125 ),
1126 array(
1127 'title' => __('Admin Assistant Add-on', 'mxchat'),
1128 'description' => __('Bring a ChatGPT-like experience directly inside your WordPress dashboard.', 'mxchat'),
1129 'url' => 'https://youtu.be/AdEA1k-UCFM'
1130 ),
1131 array(
1132 'title' => __('Chat Themes', 'mxchat'),
1133 'description' => __('Customize appearance with real-time previews to match your brand.', 'mxchat'),
1134 'url' => 'https://youtu.be/MfbB9mZi6ag'
1135 ),
1136 array(
1137 'title' => __('WooCommerce Integration', 'mxchat'),
1138 'description' => __('Provide product recommendations and shopping assistance to customers.', 'mxchat'),
1139 'url' => 'https://www.youtube.com/watch?v=WsqAppHRGdA'
1140 ),
1141 array(
1142 'title' => __('Knowledge Base Setup', 'mxchat'),
1143 'description' => __('Set up your knowledge base using PDFs, sitemaps, and manual entries.', 'mxchat'),
1144 'url' => 'https://www.youtube.com/watch?v=8Ztjs66-VTo'
1145 ),
1146 array(
1147 'title' => __('Document Chat', 'mxchat'),
1148 'description' => __('Chat with PDF and Word documents for enhanced document analysis.', 'mxchat'),
1149 'url' => 'https://www.youtube.com/watch?v=j_c45WWCTG0'
1150 ),
1151 array(
1152 'title' => __('Perplexity Integration', 'mxchat'),
1153 'description' => __('Enable real-time web search capabilities for your chatbot.', 'mxchat'),
1154 'url' => 'https://youtu.be/wpKkbt24-bo'
1155 ),
1156 array(
1157 'title' => __('Brave Search Intent', 'mxchat'),
1158 'description' => __('Leverage Brave Search for improved query understanding.', 'mxchat'),
1159 'url' => 'https://www.youtube.com/watch?v=7vDL5H7vToc'
1160 ),
1161 array(
1162 'title' => __('Loops Email Capture', 'mxchat'),
1163 'description' => __('Set up email capture with Loops to grow your mailing list.', 'mxchat'),
1164 'url' => 'https://www.youtube.com/watch?v=CNgm5TYDyTc'
1165 ),
1166 array(
1167 'title' => __('AI Agent Testing', 'mxchat'),
1168 'description' => __('Evaluate and improve your chatbot\'s performance and accuracy.', 'mxchat'),
1169 'url' => 'https://www.youtube.com/watch?v=A0jowbpyX54'
1170 ),
1171 );
1172
1173 foreach ($tutorials as $tutorial): ?>
1174 <div class="mxch-tutorial-card">
1175 <div class="mxch-tutorial-content">
1176 <h3 class="mxch-tutorial-title"><?php echo esc_html($tutorial['title']); ?></h3>
1177 <p class="mxch-tutorial-description"><?php echo esc_html($tutorial['description']); ?></p>
1178 <a href="<?php echo esc_url($tutorial['url']); ?>" target="_blank" rel="noopener" class="mxch-tutorial-link">
1179 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
1180 <?php esc_html_e('Watch Tutorial', 'mxchat'); ?>
1181 </a>
1182 </div>
1183 </div>
1184 <?php endforeach; ?>
1185 </div>
1186 </div>
1187
1188 <!-- =====================================================
1189 TESTING SECTION
1190 ===================================================== -->
1191 <div id="testing" class="mxch-section">
1192 <div class="mxch-content-header">
1193 <h1 class="mxch-content-title"><?php esc_html_e('Testing', 'mxchat'); ?></h1>
1194 <p class="mxch-content-subtitle"><?php esc_html_e('Test your chatbot and inspect debug data in real time.', 'mxchat'); ?></p>
1195 </div>
1196
1197 <div class="mxch-testing-layout">
1198 <!-- Left Column: Debug Panel -->
1199 <div class="mxch-testing-debug-panel">
1200 <!-- Quick Actions -->
1201 <div class="mxch-card">
1202 <div class="mxch-card-body">
1203 <h3 class="mxch-testing-section-title"><?php esc_html_e('Quick Actions', 'mxchat'); ?></h3>
1204 <div class="mxch-testing-actions-row">
1205 <button type="button" class="mxch-testing-btn mxch-testing-btn-danger" id="mxch-testing-clear-session">
1206 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
1207 <?php esc_html_e('Clear Chat Session', 'mxchat'); ?>
1208 </button>
1209 <button type="button" class="mxch-testing-btn mxch-testing-btn-secondary" id="mxch-testing-clear-debug">
1210 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M2 12h20"/></svg>
1211 <?php esc_html_e('Clear Debug Log', 'mxchat'); ?>
1212 </button>
1213 </div>
1214 </div>
1215 </div>
1216
1217 <!-- Last Query Analysis -->
1218 <div class="mxch-card">
1219 <div class="mxch-card-body">
1220 <h3 class="mxch-testing-section-title"><?php esc_html_e('Last Query Analysis', 'mxchat'); ?></h3>
1221
1222 <div class="mxch-testing-field">
1223 <label><?php esc_html_e('Similarity Threshold', 'mxchat'); ?></label>
1224 <span id="mxch-testing-threshold"><?php esc_html_e('Loading...', 'mxchat'); ?></span>
1225 </div>
1226
1227 <div class="mxch-testing-field">
1228 <label><?php esc_html_e('User Query', 'mxchat'); ?></label>
1229 <div id="mxch-testing-last-query" class="mxch-testing-query-display"><?php esc_html_e('Waiting for next query...', 'mxchat'); ?></div>
1230 </div>
1231
1232 <div class="mxch-testing-field">
1233 <label><?php esc_html_e('Approved URLs for Citations', 'mxchat'); ?></label>
1234 <div id="mxch-testing-approved-urls" class="mxch-testing-results">
1235 <div class="mxch-testing-no-data"><?php esc_html_e('No URL data yet', 'mxchat'); ?></div>
1236 </div>
1237 </div>
1238
1239 <div class="mxch-testing-field">
1240 <label><?php esc_html_e('Document Matches', 'mxchat'); ?></label>
1241 <div id="mxch-testing-similarity-scores" class="mxch-testing-results">
1242 <div class="mxch-testing-no-data"><?php esc_html_e('No query data yet', 'mxchat'); ?></div>
1243 </div>
1244 </div>
1245
1246 <div class="mxch-testing-field">
1247 <label><?php esc_html_e('Actions Triggered', 'mxchat'); ?></label>
1248 <div id="mxch-testing-action-scores" class="mxch-testing-results">
1249 <div class="mxch-testing-no-data"><?php esc_html_e('No action data yet', 'mxchat'); ?></div>
1250 </div>
1251 </div>
1252 </div>
1253 </div>
1254
1255 <!-- System Information -->
1256 <div class="mxch-card">
1257 <div class="mxch-card-body">
1258 <h3 class="mxch-testing-section-title"><?php esc_html_e('System Information', 'mxchat'); ?></h3>
1259
1260 <div class="mxch-testing-field">
1261 <label><?php esc_html_e('System Prompt', 'mxchat'); ?></label>
1262 <div id="mxch-testing-system-prompt" class="mxch-testing-system-prompt"><?php esc_html_e('Loading...', 'mxchat'); ?></div>
1263 </div>
1264
1265 <div class="mxch-testing-field">
1266 <label><?php esc_html_e('Knowledge Base', 'mxchat'); ?></label>
1267 <span id="mxch-testing-kb-status"><?php esc_html_e('Checking...', 'mxchat'); ?></span>
1268 </div>
1269 </div>
1270 </div>
1271
1272 <!-- Debug Log -->
1273 <div class="mxch-card">
1274 <div class="mxch-card-body">
1275 <h3 class="mxch-testing-section-title"><?php esc_html_e('Debug Log', 'mxchat'); ?></h3>
1276 <div id="mxch-testing-debug-console" class="mxch-testing-debug-console">
1277 <div class="mxch-testing-debug-entry"><?php esc_html_e('Debug panel ready - send a message to begin...', 'mxchat'); ?></div>
1278 </div>
1279 </div>
1280 </div>
1281 </div>
1282
1283 <!-- Right Column: Chatbot Replica -->
1284 <div class="mxch-testing-chatbot-column">
1285 <div class="mxch-testing-chatbot-scope">
1286 <?php
1287 // Render the chatbot inline for testing
1288 echo do_shortcode('[mxchat_chatbot floating="no" bot_id="testing"]');
1289 ?>
1290 </div>
1291 </div>
1292 </div>
1293 </div>
1294
1295 </main>
1296 </div>
1297
1298 <script>
1299 document.addEventListener('DOMContentLoaded', function() {
1300 // Sidebar navigation
1301 const navLinks = document.querySelectorAll('.mxch-nav-link, .mxch-nav-sub-link');
1302 const sections = document.querySelectorAll('.mxch-section');
1303 const navItems = document.querySelectorAll('.mxch-nav-item');
1304
1305 function showSection(target) {
1306 // Show target section
1307 sections.forEach(section => {
1308 section.classList.remove('active');
1309 if (section.id === target) {
1310 section.classList.add('active');
1311 }
1312 });
1313
1314 // Scroll content area to top
1315 const contentArea = document.querySelector('.mxch-content');
1316 if (contentArea) {
1317 contentArea.scrollTop = 0;
1318 }
1319 }
1320
1321 function setActiveNav(clickedLink) {
1322 // Remove active from all links
1323 navLinks.forEach(l => l.classList.remove('active'));
1324
1325 // Add active to clicked link
1326 clickedLink.classList.add('active');
1327
1328 // If clicking a sub-link, also highlight parent
1329 if (clickedLink.classList.contains('mxch-nav-sub-link')) {
1330 const parent = clickedLink.closest('.mxch-nav-item');
1331 if (parent) {
1332 parent.querySelector('.mxch-nav-link').classList.add('active');
1333 }
1334 }
1335 }
1336
1337 navLinks.forEach(link => {
1338 link.addEventListener('click', function(e) {
1339 e.preventDefault();
1340 e.stopPropagation();
1341 const target = this.dataset.target;
1342 const parentItem = this.closest('.mxch-nav-item');
1343 const hasSubmenu = parentItem && parentItem.querySelector('.mxch-nav-sub');
1344
1345 // If this is a parent nav link WITH children (expandable menu)
1346 if (this.classList.contains('mxch-nav-link') && hasSubmenu) {
1347 const wasExpanded = parentItem.classList.contains('expanded');
1348
1349 // Collapse all other expandable items
1350 navItems.forEach(item => {
1351 if (item !== parentItem && item.querySelector('.mxch-nav-sub')) {
1352 item.classList.remove('expanded');
1353 }
1354 });
1355
1356 // Toggle this item
1357 parentItem.classList.toggle('expanded');
1358
1359 // If expanding, show the first sub-item's content and mark it active
1360 if (!wasExpanded) {
1361 const firstSubLink = parentItem.querySelector('.mxch-nav-sub-link');
1362 if (firstSubLink) {
1363 const firstTarget = firstSubLink.dataset.target;
1364 showSection(firstTarget);
1365 setActiveNav(firstSubLink);
1366 // Also mark parent as active
1367 this.classList.add('active');
1368 history.replaceState(null, null, '#' + firstTarget);
1369 }
1370 }
1371 }
1372 // If this is a nav link WITHOUT children (like API Keys, Tutorials)
1373 else if (this.classList.contains('mxch-nav-link') && !hasSubmenu && target) {
1374 // Collapse all expandable items
1375 navItems.forEach(item => {
1376 if (item.querySelector('.mxch-nav-sub')) {
1377 item.classList.remove('expanded');
1378 }
1379 });
1380
1381 // Show the section
1382 showSection(target);
1383 setActiveNav(this);
1384 history.replaceState(null, null, '#' + target);
1385 }
1386 // If this is a sub-link
1387 else if (this.classList.contains('mxch-nav-sub-link') && target) {
1388 // Ensure parent stays expanded
1389 if (parentItem) {
1390 parentItem.classList.add('expanded');
1391 }
1392 showSection(target);
1393 setActiveNav(this);
1394 history.replaceState(null, null, '#' + target);
1395 }
1396 });
1397 });
1398
1399 // Handle initial deep-link (?tab=<slug> takes precedence over #hash so the
1400 // Onboarding setup-step CTAs land on the right sub-tab). Whitelist of valid
1401 // section ids must stay in sync with the .mxch-section[id] values above.
1402 const validTabs = [
1403 'chatbot-ai-models', 'chatbot-behavior', 'chatbot-display',
1404 'chatbot-lead-capture', 'chatbot-quick-questions', 'chatbot-rate-limits',
1405 'api-keys', 'optimization', 'testing',
1406 'integrations-toolbar', 'integrations-loops', 'integrations-brave',
1407 'integrations-slack', 'integrations-telegram',
1408 'tutorials'
1409 ];
1410 function activateTab(target) {
1411 if (!target) return false;
1412 if (validTabs.indexOf(target) === -1) return false;
1413 const targetLink = document.querySelector('[data-target="' + target + '"]');
1414 if (!targetLink) return false;
1415 const parentItem = targetLink.closest('.mxch-nav-item');
1416 if (parentItem && targetLink.classList.contains('mxch-nav-sub-link')) {
1417 parentItem.classList.add('expanded');
1418 }
1419 showSection(target);
1420 setActiveNav(targetLink);
1421 return true;
1422 }
1423 const urlParams = new URLSearchParams(window.location.search);
1424 const tabParam = urlParams.get('tab');
1425 let tabActivated = false;
1426 if (tabParam) {
1427 tabActivated = activateTab(tabParam);
1428 // Invalid ?tab=… silently falls through to default (#hash or AI Models).
1429 }
1430 if (!tabActivated) {
1431 const hash = window.location.hash.slice(1);
1432 if (hash) {
1433 activateTab(hash);
1434 }
1435 }
1436
1437 // Rate limit accordion
1438 const rateLimitHeaders = document.querySelectorAll('.mxch-rate-limit-header');
1439 rateLimitHeaders.forEach(header => {
1440 header.addEventListener('click', function(e) {
1441 e.preventDefault();
1442 e.stopPropagation();
1443 const item = this.closest('.mxch-rate-limit-item');
1444 item.classList.toggle('expanded');
1445 });
1446 });
1447
1448 // Rate-limit "Custom…" toggle: show/hide the integer input below each
1449 // limit <select> based on whether __custom__ is the active option.
1450 document.querySelectorAll('.mxch-rate-limit-limit-select').forEach(sel => {
1451 const targetId = sel.getAttribute('data-mxch-custom-target');
1452 if (!targetId) return;
1453 const field = document.querySelector('[data-mxch-custom-for="' + targetId + '"]');
1454 if (!field) return;
1455 const sync = () => {
1456 if (sel.value === '__custom__') {
1457 field.hidden = false;
1458 } else {
1459 field.hidden = true;
1460 }
1461 };
1462 sel.addEventListener('change', sync);
1463 sync();
1464 });
1465
1466 // =====================================================
1467 // Mobile Menu Functionality
1468 // =====================================================
1469 const mobileMenuBtn = document.querySelector('.mxch-mobile-menu-btn');
1470 const mobileMenuClose = document.querySelector('.mxch-mobile-menu-close');
1471 const mobileMenu = document.querySelector('.mxch-mobile-menu');
1472 const mobileOverlay = document.querySelector('.mxch-mobile-overlay');
1473 const mobileNavLinks = document.querySelectorAll('.mxch-mobile-nav-link, .mxch-mobile-nav-sub-link');
1474
1475 function openMobileMenu() {
1476 mobileMenu.classList.add('open');
1477 mobileOverlay.classList.add('open');
1478 document.body.style.overflow = 'hidden';
1479 }
1480
1481 function closeMobileMenu() {
1482 mobileMenu.classList.remove('open');
1483 mobileOverlay.classList.remove('open');
1484 document.body.style.overflow = '';
1485 }
1486
1487 if (mobileMenuBtn) {
1488 mobileMenuBtn.addEventListener('click', openMobileMenu);
1489 }
1490
1491 if (mobileMenuClose) {
1492 mobileMenuClose.addEventListener('click', closeMobileMenu);
1493 }
1494
1495 if (mobileOverlay) {
1496 mobileOverlay.addEventListener('click', closeMobileMenu);
1497 }
1498
1499 // Mobile navigation links
1500 mobileNavLinks.forEach(link => {
1501 link.addEventListener('click', function(e) {
1502 e.preventDefault();
1503 e.stopPropagation();
1504
1505 const target = this.dataset.target;
1506 const parentId = this.dataset.parent;
1507
1508 // If this is an expandable parent link
1509 if (parentId && !target) {
1510 const subNav = document.querySelector('.mxch-mobile-nav-sub[data-parent="' + parentId + '"]');
1511 if (subNav) {
1512 const isExpanded = subNav.classList.contains('expanded');
1513 // Collapse all sub navs
1514 document.querySelectorAll('.mxch-mobile-nav-sub').forEach(nav => {
1515 nav.classList.remove('expanded');
1516 });
1517 document.querySelectorAll('.mxch-mobile-nav-link').forEach(l => {
1518 l.classList.remove('expanded');
1519 });
1520 // Toggle this one
1521 if (!isExpanded) {
1522 subNav.classList.add('expanded');
1523 this.classList.add('expanded');
1524 }
1525 }
1526 }
1527 // If this is a direct link or sub-link with a target
1528 else if (target) {
1529 // Update mobile nav active state
1530 document.querySelectorAll('.mxch-mobile-nav-link, .mxch-mobile-nav-sub-link').forEach(l => {
1531 l.classList.remove('active');
1532 });
1533 this.classList.add('active');
1534
1535 // Also update desktop sidebar nav
1536 const desktopLink = document.querySelector('.mxch-sidebar [data-target="' + target + '"]');
1537 if (desktopLink) {
1538 setActiveNav(desktopLink);
1539 const parentItem = desktopLink.closest('.mxch-nav-item');
1540 if (parentItem && desktopLink.classList.contains('mxch-nav-sub-link')) {
1541 parentItem.classList.add('expanded');
1542 }
1543 }
1544
1545 // Show section and close menu
1546 showSection(target);
1547 history.replaceState(null, null, '#' + target);
1548 closeMobileMenu();
1549 }
1550 });
1551 });
1552
1553 // Close mobile menu on escape key
1554 document.addEventListener('keydown', function(e) {
1555 if (e.key === 'Escape' && mobileMenu && mobileMenu.classList.contains('open')) {
1556 closeMobileMenu();
1557 }
1558 });
1559 });
1560 </script>
1561 <?php
1562 }
1563
1564 /**
1565 * Helper function to render a field with consistent wrapper
1566 */
1567 function mxchat_render_field_wrapper($id, $label, $callback, $description = '') {
1568 ?>
1569 <div class="mxch-field">
1570 <label class="mxch-field-label"><?php echo esc_html($label); ?></label>
1571 <div class="mxch-field-control">
1572 <?php $callback(); ?>
1573 </div>
1574 <?php if ($description): ?>
1575 <p class="mxch-field-description"><?php echo esc_html($description); ?></p>
1576 <?php endif; ?>
1577 </div>
1578 <?php
1579 }
1580
1581 /**
1582 * Render rate limits as collapsible accordion
1583 */
1584 function mxchat_render_rate_limits_accordion($admin_instance) {
1585 $all_options = get_option('mxchat_options', []);
1586 $rate_limits = array('1', '3', '5', '10', '15', '20', '50', '100', 'unlimited');
1587 $timeframes = array(
1588 'hourly' => __('Per Hour', 'mxchat'),
1589 'daily' => __('Per Day', 'mxchat'),
1590 'weekly' => __('Per Week', 'mxchat'),
1591 'monthly' => __('Per Month', 'mxchat')
1592 );
1593
1594 $roles = wp_roles()->get_names();
1595 $roles['logged_out'] = __('Logged Out Users', 'mxchat');
1596
1597 // Whole-chatbot global cap (sits above per-role; defaults to unlimited so
1598 // existing installs are unchanged). Stored under mxchat_options['rate_limits_global'].
1599 $global_cfg = isset($all_options['rate_limits_global']) && is_array($all_options['rate_limits_global'])
1600 ? $all_options['rate_limits_global']
1601 : array();
1602 $global_limit_raw = isset($global_cfg['limit']) ? (string) $global_cfg['limit'] : 'unlimited';
1603 $global_timeframe = isset($global_cfg['timeframe']) ? (string) $global_cfg['timeframe'] : 'daily';
1604 $global_is_unlimited = ($global_limit_raw === '' || $global_limit_raw === 'unlimited');
1605 $global_is_preset = !$global_is_unlimited && in_array($global_limit_raw, $rate_limits, true);
1606 $global_select_value = $global_is_unlimited ? 'unlimited' : ($global_is_preset ? $global_limit_raw : '__custom__');
1607 $global_custom_value = (!$global_is_unlimited && !$global_is_preset && ctype_digit($global_limit_raw))
1608 ? $global_limit_raw
1609 : '';
1610
1611 echo '<div class="mxch-rate-limits">';
1612
1613 // --- Global cap card -------------------------------------------------
1614 ?>
1615 <div class="mxch-rate-limit-item mxch-rate-limit-global mxchat-autosave-section">
1616 <div class="mxch-rate-limit-header">
1617 <span class="mxch-rate-limit-role"><?php esc_html_e('Total chatbot message limit', 'mxchat'); ?></span>
1618 <div class="mxch-rate-limit-summary">
1619 <span class="mxch-rate-limit-badge mxch-rate-limit-global-badge">
1620 <?php
1621 if ($global_is_unlimited) {
1622 esc_html_e('Unlimited', 'mxchat');
1623 } else {
1624 $tf_label = isset($timeframes[$global_timeframe]) ? $timeframes[$global_timeframe] : $global_timeframe;
1625 echo esc_html(($global_custom_value !== '' ? $global_custom_value : $global_limit_raw) . ' / ' . $tf_label);
1626 }
1627 ?>
1628 </span>
1629 <svg class="mxch-rate-limit-arrow" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
1630 </div>
1631 </div>
1632 <div class="mxch-rate-limit-body">
1633 <p class="mxch-field-description" style="margin: 0 0 12px;">
1634 <?php esc_html_e('A single ceiling across all users and all roles, per timeframe. Independent of the per-role limits below. When both a per-role limit and this global cap are configured, whichever is hit first stops the conversation. Default is Unlimited — existing installs are unchanged.', 'mxchat'); ?>
1635 </p>
1636 <div class="mxch-rate-limit-controls">
1637 <div class="mxch-field">
1638 <label class="mxch-field-label" for="rate_limits_global_limit"><?php esc_html_e('Limit', 'mxchat'); ?></label>
1639 <select id="rate_limits_global_limit"
1640 name="mxchat_options[rate_limits_global][limit]"
1641 class="mxch-select mxchat-autosave-field mxch-rate-limit-limit-select"
1642 data-mxch-custom-target="rate_limits_global_limit_custom">
1643 <?php foreach ($rate_limits as $limit): ?>
1644 <option value="<?php echo esc_attr($limit); ?>" <?php selected($global_select_value, $limit); ?>>
1645 <?php echo esc_html($limit === 'unlimited' ? __('Unlimited', 'mxchat') : $limit); ?>
1646 </option>
1647 <?php endforeach; ?>
1648 <option value="__custom__" <?php selected($global_select_value, '__custom__'); ?>><?php esc_html_e('Custom…', 'mxchat'); ?></option>
1649 </select>
1650 </div>
1651 <div class="mxch-field mxch-rate-limit-custom-field" data-mxch-custom-for="rate_limits_global_limit_custom" <?php echo $global_select_value === '__custom__' ? '' : 'hidden'; ?>>
1652 <label class="mxch-field-label" for="rate_limits_global_limit_custom"><?php esc_html_e('Custom limit', 'mxchat'); ?></label>
1653 <input type="number"
1654 min="1"
1655 step="1"
1656 id="rate_limits_global_limit_custom"
1657 name="mxchat_options[rate_limits_global][limit_custom]"
1658 class="mxch-input mxchat-autosave-field mxch-rate-limit-custom-input"
1659 placeholder="e.g. 250"
1660 value="<?php echo esc_attr($global_custom_value); ?>" />
1661 </div>
1662 <div class="mxch-field">
1663 <label class="mxch-field-label" for="rate_limits_global_timeframe"><?php esc_html_e('Timeframe', 'mxchat'); ?></label>
1664 <select id="rate_limits_global_timeframe"
1665 name="mxchat_options[rate_limits_global][timeframe]"
1666 class="mxch-select mxchat-autosave-field">
1667 <?php foreach ($timeframes as $value => $label): ?>
1668 <option value="<?php echo esc_attr($value); ?>" <?php selected($global_timeframe, $value); ?>><?php echo esc_html($label); ?></option>
1669 <?php endforeach; ?>
1670 </select>
1671 </div>
1672 </div>
1673 <?php
1674 // --- Current usage readout (read-only; mirrors the integrator's
1675 // window-reset math at READ time — never writes the counter here).
1676 // v1 surfaces the DEFAULT bot's pool. TODO: per-bot selector if asked.
1677 $global_usage_limit_int = (!$global_is_unlimited && ctype_digit($global_limit_raw))
1678 ? (int) $global_limit_raw
1679 : 0;
1680 $usage_raw = get_option('mxchat_chat_limit_default_global', array('count' => 0, 'timestamp' => time()));
1681 $usage_count = isset($usage_raw['count']) ? (int) $usage_raw['count'] : 0;
1682 $usage_ts = isset($usage_raw['timestamp']) ? (int) $usage_raw['timestamp'] : time();
1683 $usage_windows = array('hourly' => 3600, 'daily' => 86400, 'weekly' => 604800, 'monthly' => 2592000);
1684 $usage_window = isset($usage_windows[$global_timeframe]) ? $usage_windows[$global_timeframe] : 86400;
1685 $usage_now = time();
1686 if (($usage_now - $usage_ts) >= $usage_window) {
1687 // Window elapsed since the stored timestamp → effective count is 0.
1688 $usage_count = 0;
1689 $usage_reset_at = $usage_now + $usage_window;
1690 } else {
1691 $usage_reset_at = $usage_ts + $usage_window;
1692 }
1693 $usage_left = max(0, $global_usage_limit_int - $usage_count);
1694 $usage_pct = ($global_usage_limit_int > 0)
1695 ? min(100, (int) round(($usage_count / $global_usage_limit_int) * 100))
1696 : 0;
1697 $usage_reset_nonce = wp_create_nonce('mxchat_reset_global_usage');
1698 ?>
1699 <div class="mxch-rate-limit-usage"
1700 id="mxch-global-usage"
1701 data-bot-id="default"
1702 data-reset-nonce="<?php echo esc_attr($usage_reset_nonce); ?>"
1703 <?php echo $global_is_unlimited ? 'hidden' : ''; ?>>
1704 <div class="mxch-rate-limit-usage-head">
1705 <span class="mxch-field-label" style="margin:0;"><?php esc_html_e('Current usage', 'mxchat'); ?></span>
1706 <button type="button" class="mxch-btn mxch-btn-secondary mxch-btn-sm" id="mxch-global-usage-reset"><?php esc_html_e('Reset counter', 'mxchat'); ?></button>
1707 </div>
1708 <div class="mxch-progress-bar">
1709 <div class="mxch-progress-bar-fill" id="mxch-global-usage-fill" style="width: <?php echo esc_attr($usage_pct); ?>%;"></div>
1710 </div>
1711 <p class="mxch-progress-label" id="mxch-global-usage-text" style="margin:0;">
1712 <?php
1713 printf(
1714 /* translators: 1: used count, 2: limit, 3: remaining, 4: human-readable time until reset */
1715 esc_html__('%1$s of %2$s used · %3$s left · resets in %4$s', 'mxchat'),
1716 esc_html(number_format_i18n($usage_count)),
1717 esc_html(number_format_i18n($global_usage_limit_int)),
1718 esc_html(number_format_i18n($usage_left)),
1719 esc_html(human_time_diff($usage_now, $usage_reset_at))
1720 );
1721 ?>
1722 </p>
1723 </div>
1724 <p class="mxch-field-description mxch-rate-limit-usage-unlimited"
1725 id="mxch-global-usage-unlimited"
1726 style="margin: 12px 0 0;"
1727 <?php echo $global_is_unlimited ? '' : 'hidden'; ?>>
1728 <?php esc_html_e('Unlimited — no cap. Usage tracking applies only when a numeric limit is set.', 'mxchat'); ?>
1729 </p>
1730 </div>
1731 </div>
1732 <?php
1733 // ---------------------------------------------------------------------
1734
1735 foreach ($roles as $role_id => $role_name) {
1736 $default_limit = ($role_id === 'logged_out') ? '10' : '100';
1737 $default_timeframe = 'daily';
1738 $default_message = __('Rate limit exceeded. Please try again later.', 'mxchat');
1739
1740 $selected_limit = isset($all_options['rate_limits'][$role_id]['limit'])
1741 ? (string) $all_options['rate_limits'][$role_id]['limit']
1742 : $default_limit;
1743
1744 $selected_timeframe = isset($all_options['rate_limits'][$role_id]['timeframe'])
1745 ? $all_options['rate_limits'][$role_id]['timeframe']
1746 : $default_timeframe;
1747
1748 $custom_message = isset($all_options['rate_limits'][$role_id]['message'])
1749 ? $all_options['rate_limits'][$role_id]['message']
1750 : $default_message;
1751
1752 $timeframe_label = isset($timeframes[$selected_timeframe]) ? $timeframes[$selected_timeframe] : $selected_timeframe;
1753
1754 // Custom-value handling: if the stored limit is not in the preset list
1755 // and not 'unlimited', it's a custom integer. The select shows __custom__
1756 // and the number input below carries the actual value.
1757 $is_preset_limit = in_array($selected_limit, $rate_limits, true);
1758 $role_select_value = $is_preset_limit ? $selected_limit : '__custom__';
1759 $role_custom_value = (!$is_preset_limit && ctype_digit($selected_limit)) ? $selected_limit : '';
1760 $custom_field_id = 'rate_limits_' . $role_id . '_limit_custom';
1761 ?>
1762 <div class="mxch-rate-limit-item">
1763 <div class="mxch-rate-limit-header">
1764 <span class="mxch-rate-limit-role"><?php echo esc_html($role_name); ?></span>
1765 <div class="mxch-rate-limit-summary">
1766 <span class="mxch-rate-limit-badge"><?php echo esc_html($selected_limit . ' / ' . $timeframe_label); ?></span>
1767 <svg class="mxch-rate-limit-arrow" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
1768 </div>
1769 </div>
1770 <div class="mxch-rate-limit-body mxchat-autosave-section">
1771 <div class="mxch-rate-limit-controls">
1772 <div class="mxch-field">
1773 <label class="mxch-field-label" for="rate_limits_<?php echo esc_attr($role_id); ?>_limit"><?php esc_html_e('Limit', 'mxchat'); ?></label>
1774 <select id="rate_limits_<?php echo esc_attr($role_id); ?>_limit"
1775 name="mxchat_options[rate_limits][<?php echo esc_attr($role_id); ?>][limit]"
1776 class="mxch-select mxchat-autosave-field mxch-rate-limit-limit-select"
1777 data-mxch-custom-target="<?php echo esc_attr($custom_field_id); ?>">
1778 <?php foreach ($rate_limits as $limit): ?>
1779 <option value="<?php echo esc_attr($limit); ?>" <?php selected($role_select_value, $limit); ?>>
1780 <?php echo esc_html($limit === 'unlimited' ? __('Unlimited', 'mxchat') : $limit); ?>
1781 </option>
1782 <?php endforeach; ?>
1783 <option value="__custom__" <?php selected($role_select_value, '__custom__'); ?>><?php esc_html_e('Custom…', 'mxchat'); ?></option>
1784 </select>
1785 </div>
1786 <div class="mxch-field mxch-rate-limit-custom-field" data-mxch-custom-for="<?php echo esc_attr($custom_field_id); ?>" <?php echo $role_select_value === '__custom__' ? '' : 'hidden'; ?>>
1787 <label class="mxch-field-label" for="<?php echo esc_attr($custom_field_id); ?>"><?php esc_html_e('Custom limit', 'mxchat'); ?></label>
1788 <input type="number"
1789 min="1"
1790 step="1"
1791 id="<?php echo esc_attr($custom_field_id); ?>"
1792 name="mxchat_options[rate_limits][<?php echo esc_attr($role_id); ?>][limit_custom]"
1793 class="mxch-input mxchat-autosave-field mxch-rate-limit-custom-input"
1794 placeholder="e.g. 250"
1795 value="<?php echo esc_attr($role_custom_value); ?>" />
1796 </div>
1797 <div class="mxch-field">
1798 <label class="mxch-field-label" for="rate_limits_<?php echo esc_attr($role_id); ?>_timeframe"><?php esc_html_e('Timeframe', 'mxchat'); ?></label>
1799 <select id="rate_limits_<?php echo esc_attr($role_id); ?>_timeframe"
1800 name="mxchat_options[rate_limits][<?php echo esc_attr($role_id); ?>][timeframe]"
1801 class="mxch-select mxchat-autosave-field">
1802 <?php foreach ($timeframes as $value => $label): ?>
1803 <option value="<?php echo esc_attr($value); ?>" <?php selected($selected_timeframe, $value); ?>><?php echo esc_html($label); ?></option>
1804 <?php endforeach; ?>
1805 </select>
1806 </div>
1807 </div>
1808 <div class="mxch-field">
1809 <label class="mxch-field-label" for="rate_limits_<?php echo esc_attr($role_id); ?>_message"><?php esc_html_e('Custom Message', 'mxchat'); ?></label>
1810 <textarea id="rate_limits_<?php echo esc_attr($role_id); ?>_message"
1811 name="mxchat_options[rate_limits][<?php echo esc_attr($role_id); ?>][message]"
1812 class="mxch-textarea mxchat-autosave-field"
1813 rows="2"
1814 placeholder="<?php esc_attr_e('Message shown when rate limit is reached', 'mxchat'); ?>"><?php echo esc_textarea($custom_message); ?></textarea>
1815 </div>
1816 </div>
1817 </div>
1818 <?php
1819 }
1820
1821 echo '</div>';
1822 }
1823