PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 3.1.7
MxChat – AI Chatbot & Content Generation for WordPress v3.1.7
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.1.7, at includes/admin-settings-page.php

1,370 lines 93.3 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 </div>
72 <!-- Integrations Section -->
73 <div class="mxch-mobile-nav-section">
74 <div class="mxch-mobile-nav-section-title"><?php esc_html_e('Integrations', 'mxchat'); ?></div>
75 <button class="mxch-mobile-nav-link" data-parent="integrations">
76 <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>
77 <span><?php esc_html_e('Integrations', 'mxchat'); ?></span>
78 <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>
79 </button>
80 <div class="mxch-mobile-nav-sub" data-parent="integrations">
81 <button class="mxch-mobile-nav-sub-link" data-target="integrations-toolbar"><?php esc_html_e('Toolbar', 'mxchat'); ?></button>
82 <button class="mxch-mobile-nav-sub-link" data-target="integrations-loops"><?php esc_html_e('Loops', 'mxchat'); ?></button>
83 <button class="mxch-mobile-nav-sub-link" data-target="integrations-brave"><?php esc_html_e('Brave Search', 'mxchat'); ?></button>
84 <button class="mxch-mobile-nav-sub-link" data-target="integrations-slack"><?php esc_html_e('Slack', 'mxchat'); ?></button>
85 <button class="mxch-mobile-nav-sub-link" data-target="integrations-telegram"><?php esc_html_e('Telegram', 'mxchat'); ?></button>
86 </div>
87 </div>
88 <!-- Resources Section -->
89 <div class="mxch-mobile-nav-section">
90 <div class="mxch-mobile-nav-section-title"><?php esc_html_e('Resources', 'mxchat'); ?></div>
91 <button class="mxch-mobile-nav-link" data-target="tutorials">
92 <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>
93 <span><?php esc_html_e('Tutorials', 'mxchat'); ?></span>
94 </button>
95 </div>
96 <?php if (!$is_activated): ?>
97 <div class="mxch-mobile-menu-footer">
98 <a href="https://mxchat.ai/" target="_blank" class="mxch-mobile-upgrade-btn">
99 <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>
100 <?php esc_html_e('Upgrade to Pro', 'mxchat'); ?>
101 </a>
102 </div>
103 <?php endif; ?>
104 </nav>
105 </div>
106
107 <!-- Sidebar Navigation -->
108 <aside class="mxch-sidebar">
109 <div class="mxch-sidebar-header">
110 <a href="#" class="mxch-sidebar-logo">
111 <div class="mxch-sidebar-logo-icon">
112 <img src="<?php echo esc_url($plugin_url . 'images/icon-128x128.png'); ?>" alt="MxChat">
113 </div>
114 <span class="mxch-sidebar-logo-text">MxChat</span>
115 <span class="mxch-sidebar-version">v<?php echo esc_html(MXCHAT_VERSION ?? '2.7.0'); ?></span>
116 </a>
117 </div>
118
119 <nav class="mxch-sidebar-nav">
120 <!-- Chatbot Section -->
121 <div class="mxch-nav-section">
122 <div class="mxch-nav-section-title"><?php esc_html_e('Configuration', 'mxchat'); ?></div>
123
124 <div class="mxch-nav-item expanded" data-section="chatbot">
125 <button class="mxch-nav-link active">
126 <span class="mxch-nav-link-icon">
127 <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>
128 </span>
129 <span class="mxch-nav-link-text"><?php esc_html_e('Chatbot', 'mxchat'); ?></span>
130 <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>
131 </button>
132 <div class="mxch-nav-sub">
133 <button class="mxch-nav-sub-link active" data-target="chatbot-ai-models"><?php esc_html_e('AI Models', 'mxchat'); ?></button>
134 <button class="mxch-nav-sub-link" data-target="chatbot-behavior"><?php esc_html_e('Behavior', 'mxchat'); ?></button>
135 <button class="mxch-nav-sub-link" data-target="chatbot-display"><?php esc_html_e('Display', 'mxchat'); ?></button>
136 <button class="mxch-nav-sub-link" data-target="chatbot-lead-capture"><?php esc_html_e('Lead Capture', 'mxchat'); ?></button>
137 <button class="mxch-nav-sub-link" data-target="chatbot-quick-questions"><?php esc_html_e('Quick Questions', 'mxchat'); ?></button>
138 <button class="mxch-nav-sub-link" data-target="chatbot-rate-limits"><?php esc_html_e('Rate Limits', 'mxchat'); ?></button>
139 </div>
140 </div>
141
142 <div class="mxch-nav-item" data-section="api-keys">
143 <button class="mxch-nav-link" data-target="api-keys">
144 <span class="mxch-nav-link-icon">
145 <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>
146 </span>
147 <span class="mxch-nav-link-text"><?php esc_html_e('API Keys', 'mxchat'); ?></span>
148 </button>
149 </div>
150
151 <div class="mxch-nav-item" data-section="optimization">
152 <button class="mxch-nav-link" data-target="optimization">
153 <span class="mxch-nav-link-icon">
154 <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>
155 </span>
156 <span class="mxch-nav-link-text"><?php esc_html_e('Optimization', 'mxchat'); ?></span>
157 </button>
158 </div>
159 </div>
160
161 <!-- Integrations Section -->
162 <div class="mxch-nav-section">
163 <div class="mxch-nav-section-title"><?php esc_html_e('Integrations', 'mxchat'); ?></div>
164
165 <div class="mxch-nav-item" data-section="integrations">
166 <button class="mxch-nav-link">
167 <span class="mxch-nav-link-icon">
168 <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>
169 </span>
170 <span class="mxch-nav-link-text"><?php esc_html_e('Integrations', 'mxchat'); ?></span>
171 <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>
172 </button>
173 <div class="mxch-nav-sub">
174 <button class="mxch-nav-sub-link" data-target="integrations-toolbar"><?php esc_html_e('Toolbar', 'mxchat'); ?></button>
175 <button class="mxch-nav-sub-link" data-target="integrations-loops"><?php esc_html_e('Loops', 'mxchat'); ?></button>
176 <button class="mxch-nav-sub-link" data-target="integrations-brave"><?php esc_html_e('Brave Search', 'mxchat'); ?></button>
177 <button class="mxch-nav-sub-link" data-target="integrations-slack"><?php esc_html_e('Slack', 'mxchat'); ?></button>
178 <button class="mxch-nav-sub-link" data-target="integrations-telegram"><?php esc_html_e('Telegram', 'mxchat'); ?></button>
179 </div>
180 </div>
181 </div>
182
183 <!-- Resources Section -->
184 <div class="mxch-nav-section">
185 <div class="mxch-nav-section-title"><?php esc_html_e('Resources', 'mxchat'); ?></div>
186
187 <div class="mxch-nav-item" data-section="tutorials">
188 <button class="mxch-nav-link" data-target="tutorials">
189 <span class="mxch-nav-link-icon">
190 <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>
191 </span>
192 <span class="mxch-nav-link-text"><?php esc_html_e('Tutorials', 'mxchat'); ?></span>
193 </button>
194 </div>
195 </div>
196 </nav>
197
198 <?php if (!$is_activated): ?>
199 <div class="mxch-sidebar-footer">
200 <a href="https://mxchat.ai/" target="_blank" class="mxch-sidebar-upgrade-v2">
201 <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>
202 <?php esc_html_e('Pro Upgrade', 'mxchat'); ?>
203 </a>
204 </div>
205 <?php endif; ?>
206 </aside>
207
208 <!-- Main Content Area -->
209 <main class="mxch-content">
210 <?php if (!$is_activated): ?>
211 <div class="mxch-pro-banner">
212 <div class="mxch-pro-banner-content">
213 <h3 class="mxch-pro-banner-title"><?php esc_html_e('MxChat Pro — Lifetime Access', 'mxchat'); ?></h3>
214 <p class="mxch-pro-banner-text"><?php esc_html_e('One-time purchase. Unlock 14+ premium add-ons: Chat with GSC, WooCommerce, Chatbot Themes, Forms Builder, and more.', 'mxchat'); ?></p>
215 </div>
216 <a href="https://mxchat.ai/" target="_blank" class="mxch-pro-banner-btn"><span><?php esc_html_e('Learn More', 'mxchat'); ?></span></a>
217 </div>
218 <?php endif; ?>
219
220 <?php
221 // Show theme migration notice for Pro users
222 $admin_instance->show_theme_migration_banner();
223 ?>
224
225 <!-- ========================================
226 CHATBOT - AI MODELS
227 ======================================== -->
228 <div id="chatbot-ai-models" class="mxch-section active">
229 <div class="mxch-content-header">
230 <h1 class="mxch-content-title"><?php esc_html_e('AI Models', 'mxchat'); ?></h1>
231 <p class="mxch-content-subtitle"><?php esc_html_e('Configure the AI models your chatbot will use for conversations and embeddings.', 'mxchat'); ?></p>
232 </div>
233
234 <div class="mxch-card">
235 <div class="mxch-card-body mxchat-autosave-section">
236 <?php
237 // Chat Model
238 mxchat_render_field_wrapper('model', __('Chat Model', 'mxchat'), function() use ($admin_instance) {
239 $admin_instance->mxchat_model_callback();
240 }, __('Select the AI model your chatbot will use for conversations.', 'mxchat'));
241
242 // Embedding Model
243 mxchat_render_field_wrapper('embedding_model', __('Embedding Model', 'mxchat'), function() use ($admin_instance) {
244 $admin_instance->embedding_model_callback();
245 }, __('Vector embedding model for knowledge base matching. Changing models requires reconfiguring knowledge data.', 'mxchat'));
246
247 // Enable Streaming
248 mxchat_render_field_wrapper('enable_streaming', __('Enable Streaming', 'mxchat'), function() use ($admin_instance) {
249 $admin_instance->enable_streaming_toggle_callback();
250 }, __('Enable real-time streaming responses for supported models (OpenAI, Claude, DeepSeek, Grok).', 'mxchat'));
251
252 // Enable Web Search (OpenAI only)
253 mxchat_render_field_wrapper('enable_web_search', __('Enable Web Search', 'mxchat'), function() use ($admin_instance) {
254 $admin_instance->enable_web_search_toggle_callback();
255 }, __('Allow the chatbot to search the web for current information (OpenAI models only).', 'mxchat'));
256 ?>
257 </div>
258 </div>
259 </div>
260
261 <!-- ========================================
262 CHATBOT - BEHAVIOR
263 ======================================== -->
264 <div id="chatbot-behavior" class="mxch-section">
265 <div class="mxch-content-header">
266 <h1 class="mxch-content-title"><?php esc_html_e('Behavior', 'mxchat'); ?></h1>
267 <p class="mxch-content-subtitle"><?php esc_html_e('Control how your AI chatbot responds and processes queries.', 'mxchat'); ?></p>
268 </div>
269
270 <div class="mxch-card">
271 <div class="mxch-card-body mxchat-autosave-section">
272 <?php
273 // AI Instructions
274 mxchat_render_field_wrapper('system_prompt_instructions', __('AI Instructions (Behavior)', 'mxchat'), function() use ($admin_instance) {
275 $admin_instance->system_prompt_instructions_callback();
276 }, __('Provide system-level instructions to guide the AI\'s behavior and responses.', 'mxchat'));
277
278 // Similarity Threshold
279 mxchat_render_field_wrapper('similarity_threshold', __('Similarity Threshold', 'mxchat'), function() use ($admin_instance) {
280 $admin_instance->mxchat_similarity_threshold_callback();
281 }, __('Adjust threshold for content matching. Lower values = more matches, higher values = stricter matching.', 'mxchat'));
282
283 // RAG Sources Limit
284 mxchat_render_field_wrapper('rag_sources_limit', __('RAG Sources Limit', 'mxchat'), function() use ($admin_instance) {
285 $admin_instance->mxchat_rag_sources_limit_callback();
286 }, __('Number of knowledge base sources (pages/documents) to include in AI context. Higher values provide more context but use more tokens.', 'mxchat'));
287
288 // RAG Chunks Limit
289 mxchat_render_field_wrapper('rag_chunks_limit', __('RAG Chunks Limit', 'mxchat'), function() use ($admin_instance) {
290 $admin_instance->mxchat_rag_chunks_limit_callback();
291 }, __('Maximum total content chunks sent to the AI across all sources. Higher values provide more context but increase token usage and cost.', 'mxchat'));
292
293 // Contextual Awareness
294 mxchat_render_field_wrapper('contextual_awareness', __('Contextual Awareness', 'mxchat'), function() use ($admin_instance) {
295 $admin_instance->mxchat_contextual_awareness_callback();
296 }, __('Allow the chatbot to understand and reference the current page content for more relevant responses.', 'mxchat'));
297
298 // Citation Links
299 mxchat_render_field_wrapper('citation_links', __('Citation Links', 'mxchat'), function() use ($admin_instance) {
300 $admin_instance->mxchat_citation_links_toggle_callback();
301 }, __('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'));
302
303 // Frontend Debugger
304 mxchat_render_field_wrapper('frontend_debugger', __('Frontend Debugger', 'mxchat'), function() use ($admin_instance) {
305 $admin_instance->mxchat_frontend_debugger_callback();
306 }, __('Show debug panel on frontend for admins. Displays similarity scores and query analysis.', 'mxchat'));
307 ?>
308 </div>
309 </div>
310 </div>
311
312 <!-- ========================================
313 CHATBOT - DISPLAY
314 ======================================== -->
315 <div id="chatbot-display" class="mxch-section">
316 <div class="mxch-content-header">
317 <h1 class="mxch-content-title"><?php esc_html_e('Display Settings', 'mxchat'); ?></h1>
318 <p class="mxch-content-subtitle"><?php esc_html_e('Customize how and where your chatbot appears on your website.', 'mxchat'); ?></p>
319 </div>
320
321 <div class="mxch-card">
322 <div class="mxch-card-header">
323 <h3 class="mxch-card-title">
324 <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>
325 <?php esc_html_e('Visibility', 'mxchat'); ?>
326 </h3>
327 </div>
328 <div class="mxch-card-body mxchat-autosave-section">
329 <?php
330 // Auto-Display
331 mxchat_render_field_wrapper('auto_display', __('Auto-Display Chatbot', 'mxchat'), function() use ($admin_instance) {
332 $admin_instance->mxchat_append_to_body_callback();
333 }, __('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'));
334
335 // Open Links in New Tab
336 mxchat_render_field_wrapper('link_target', __('Open Links in New Tab', 'mxchat'), function() use ($admin_instance) {
337 $admin_instance->mxchat_link_target_toggle_callback();
338 }, __('Open links clicked in chat responses in a new browser tab.', 'mxchat'));
339
340 // Chat Persistence
341 mxchat_render_field_wrapper('chat_persistence', __('Chat Persistence', 'mxchat'), function() use ($admin_instance) {
342 $admin_instance->mxchat_chat_persistence_toggle_callback();
343 }, __('Keep chat history when users navigate or return within 24 hours.', 'mxchat'));
344 ?>
345 </div>
346 </div>
347
348 <div class="mxch-card">
349 <div class="mxch-card-header">
350 <h3 class="mxch-card-title">
351 <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>
352 <?php esc_html_e('Text & Labels', 'mxchat'); ?>
353 </h3>
354 </div>
355 <div class="mxch-card-body mxchat-autosave-section">
356 <?php
357 // Top Bar Title
358 mxchat_render_field_wrapper('top_bar_title', __('Top Bar Title', 'mxchat'), function() use ($admin_instance) {
359 $admin_instance->mxchat_top_bar_title_callback();
360 }, __('Title text shown in the chatbot header.', 'mxchat'));
361
362 // AI Agent Text
363 mxchat_render_field_wrapper('ai_agent_text', __('AI Agent Text', 'mxchat'), function() use ($admin_instance) {
364 $admin_instance->mxchat_ai_agent_text_callback();
365 }, __('Text shown for AI agents in the status indicator.', 'mxchat'));
366
367 // Intro Message
368 mxchat_render_field_wrapper('intro_message', __('Introductory Message', 'mxchat'), function() use ($admin_instance) {
369 $admin_instance->mxchat_intro_message_callback();
370 }, __('First message shown when chat opens. HTML allowed.', 'mxchat'));
371
372 // Input Placeholder
373 mxchat_render_field_wrapper('input_copy', __('Input Placeholder', 'mxchat'), function() use ($admin_instance) {
374 $admin_instance->mxchat_input_copy_callback();
375 }, __('Placeholder text in the chat input field.', 'mxchat'));
376
377 // Chat Teaser
378 mxchat_render_field_wrapper('pre_chat_message', __('Chat Teaser Pop-up', 'mxchat'), function() use ($admin_instance) {
379 $admin_instance->mxchat_pre_chat_message_callback();
380 }, __('Message shown before users start chatting.', 'mxchat'));
381 ?>
382 </div>
383 </div>
384 </div>
385
386 <!-- ========================================
387 CHATBOT - LEAD CAPTURE
388 ======================================== -->
389 <div id="chatbot-lead-capture" class="mxch-section">
390 <div class="mxch-content-header">
391 <h1 class="mxch-content-title"><?php esc_html_e('Lead Capture', 'mxchat'); ?></h1>
392 <p class="mxch-content-subtitle"><?php esc_html_e('Collect user information and manage privacy settings.', 'mxchat'); ?></p>
393 </div>
394
395 <div class="mxch-card">
396 <div class="mxch-card-header">
397 <h3 class="mxch-card-title">
398 <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>
399 <?php esc_html_e('Email Capture', 'mxchat'); ?>
400 </h3>
401 </div>
402 <div class="mxch-card-body mxchat-autosave-section">
403 <?php
404 // Require Email
405 mxchat_render_field_wrapper('enable_email_block', __('Require Email to Chat', 'mxchat'), function() use ($admin_instance) {
406 $admin_instance->enable_email_block_callback();
407 }, __('Require users to enter their email before chatting. Shows for non-logged-in users.', 'mxchat'));
408
409 // Email Form Content
410 mxchat_render_field_wrapper('email_blocker_header', __('Email Form Content', 'mxchat'), function() use ($admin_instance) {
411 $admin_instance->email_blocker_header_content_callback();
412 }, __('HTML content shown above the email form.', 'mxchat'));
413
414 // Email Button Text
415 mxchat_render_field_wrapper('email_blocker_button', __('Submit Button Text', 'mxchat'), function() use ($admin_instance) {
416 $admin_instance->email_blocker_button_text_callback();
417 }, __('Text for the email form submit button.', 'mxchat'));
418
419 // Require Name
420 mxchat_render_field_wrapper('enable_name_field', __('Also Require Name', 'mxchat'), function() use ($admin_instance) {
421 $admin_instance->enable_name_field_callback();
422 }, __('Also require users to enter their name with email.', 'mxchat'));
423
424 // Name Placeholder
425 mxchat_render_field_wrapper('name_placeholder', __('Name Field Placeholder', 'mxchat'), function() use ($admin_instance) {
426 $admin_instance->name_field_placeholder_callback();
427 }, __('Placeholder text for the name input field.', 'mxchat'));
428 ?>
429 </div>
430 </div>
431
432 <div class="mxch-card">
433 <div class="mxch-card-header">
434 <h3 class="mxch-card-title">
435 <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>
436 <?php esc_html_e('Privacy & Compliance', 'mxchat'); ?>
437 </h3>
438 </div>
439 <div class="mxch-card-body mxchat-autosave-section">
440 <?php
441 // Privacy Notice
442 mxchat_render_field_wrapper('privacy_toggle', __('Privacy Notice', 'mxchat'), function() use ($admin_instance) {
443 $admin_instance->mxchat_privacy_toggle_callback();
444 }, __('Show privacy notice below the chat widget.', 'mxchat'));
445
446 // Complianz
447 mxchat_render_field_wrapper('complianz_toggle', __('Complianz Integration', 'mxchat'), function() use ($admin_instance) {
448 $admin_instance->mxchat_complianz_toggle_callback();
449 }, __('Apply Complianz consent logic to the chatbot (requires Complianz plugin).', 'mxchat'));
450 ?>
451 </div>
452 </div>
453 </div>
454
455 <!-- ========================================
456 CHATBOT - QUICK QUESTIONS
457 ======================================== -->
458 <div id="chatbot-quick-questions" class="mxch-section">
459 <div class="mxch-content-header">
460 <h1 class="mxch-content-title"><?php esc_html_e('Quick Questions', 'mxchat'); ?></h1>
461 <p class="mxch-content-subtitle"><?php esc_html_e('Pre-defined questions displayed above the chat input to help users get started.', 'mxchat'); ?></p>
462 </div>
463
464 <div class="mxch-card">
465 <div class="mxch-card-body mxchat-autosave-section">
466 <?php
467 // Quick Question 1
468 mxchat_render_field_wrapper('popular_question_1', __('Quick Question 1', 'mxchat'), function() use ($admin_instance) {
469 $admin_instance->mxchat_popular_question_1_callback();
470 });
471
472 // Quick Question 2
473 mxchat_render_field_wrapper('popular_question_2', __('Quick Question 2', 'mxchat'), function() use ($admin_instance) {
474 $admin_instance->mxchat_popular_question_2_callback();
475 });
476
477 // Quick Question 3
478 mxchat_render_field_wrapper('popular_question_3', __('Quick Question 3', 'mxchat'), function() use ($admin_instance) {
479 $admin_instance->mxchat_popular_question_3_callback();
480 });
481
482 // Additional Questions
483 mxchat_render_field_wrapper('additional_questions', __('Additional Questions', 'mxchat'), function() use ($admin_instance) {
484 $admin_instance->mxchat_additional_popular_questions_callback();
485 }, __('Add as many quick questions as you need.', 'mxchat'));
486 ?>
487 </div>
488 </div>
489 </div>
490
491 <!-- ========================================
492 CHATBOT - RATE LIMITS
493 ======================================== -->
494 <div id="chatbot-rate-limits" class="mxch-section">
495 <div class="mxch-content-header">
496 <h1 class="mxch-content-title"><?php esc_html_e('Rate Limits', 'mxchat'); ?></h1>
497 <p class="mxch-content-subtitle"><?php esc_html_e('Set message limits for each user role to manage API usage.', 'mxchat'); ?></p>
498 </div>
499
500 <div class="mxch-notice mxch-notice-info" style="margin-bottom: 24px;">
501 <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>
502 <div>
503 <strong><?php esc_html_e('Placeholders available:', 'mxchat'); ?></strong>
504 <code>{limit}</code>, <code>{timeframe}</code>, <code>{count}</code>, <code>{remaining}</code>
505 <br>
506 <strong><?php esc_html_e('Markdown links supported:', 'mxchat'); ?></strong>
507 <code>[Link text](https://example.com)</code>
508 </div>
509 </div>
510
511 <div class="mxch-card">
512 <div class="mxch-card-body mxchat-autosave-section">
513 <?php
514 // Render rate limits with accordion
515 mxchat_render_rate_limits_accordion($admin_instance);
516 ?>
517 </div>
518 </div>
519 </div>
520
521 <!-- ========================================
522 API KEYS
523 ======================================== -->
524 <div id="api-keys" class="mxch-section">
525 <div class="mxch-content-header">
526 <h1 class="mxch-content-title"><?php esc_html_e('API Keys', 'mxchat'); ?></h1>
527 <p class="mxch-content-subtitle"><?php esc_html_e('Manage API keys for AI providers and integrations.', 'mxchat'); ?></p>
528 </div>
529
530 <div class="mxch-card">
531 <div class="mxch-card-header">
532 <h3 class="mxch-card-title">
533 <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>
534 <?php esc_html_e('AI Providers', 'mxchat'); ?>
535 </h3>
536 </div>
537 <div class="mxch-card-body mxchat-autosave-section">
538 <table class="form-table">
539 <?php do_settings_fields('mxchat-api-keys', 'mxchat_api_keys_section'); ?>
540 </table>
541 </div>
542 </div>
543 </div>
544
545 <!-- ========================================
546 OPTIMIZATION
547 ======================================== -->
548 <div id="optimization" class="mxch-section">
549 <div class="mxch-content-header">
550 <h1 class="mxch-content-title"><?php esc_html_e('Optimization & Diagnostics', 'mxchat'); ?></h1>
551 <p class="mxch-content-subtitle"><?php esc_html_e('Optimize performance, debug issues, and manage plugin settings.', 'mxchat'); ?></p>
552 </div>
553
554 <!-- Script Loading Card -->
555 <div class="mxch-card">
556 <div class="mxch-card-header">
557 <h3 class="mxch-card-title">
558 <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>
559 <?php esc_html_e('Script Loading', 'mxchat'); ?>
560 </h3>
561 </div>
562 <div class="mxch-card-body mxchat-autosave-section">
563 <?php
564 $script_loading_strategy = isset($options['script_loading_strategy']) ? $options['script_loading_strategy'] : 'default';
565 ?>
566 <div class="mxch-field">
567 <label class="mxch-field-label"><?php esc_html_e('Script Loading Strategy', 'mxchat'); ?></label>
568 <div class="mxch-field-control">
569 <select name="mxchat_options[script_loading_strategy]" id="script_loading_strategy" class="mxch-select mxchat-autosave-field">
570 <option value="default" <?php selected($script_loading_strategy, 'default'); ?>><?php esc_html_e('Default (Immediate)', 'mxchat'); ?></option>
571 <option value="defer" <?php selected($script_loading_strategy, 'defer'); ?>><?php esc_html_e('Deferred', 'mxchat'); ?></option>
572 <option value="delay_1s" <?php selected($script_loading_strategy, 'delay_1s'); ?>><?php esc_html_e('Delay 1 Second', 'mxchat'); ?></option>
573 <option value="delay_3s" <?php selected($script_loading_strategy, 'delay_3s'); ?>><?php esc_html_e('Delay 3 Seconds', 'mxchat'); ?></option>
574 <option value="delay_5s" <?php selected($script_loading_strategy, 'delay_5s'); ?>><?php esc_html_e('Delay 5 Seconds', 'mxchat'); ?></option>
575 <option value="on_interaction" <?php selected($script_loading_strategy, 'on_interaction'); ?>><?php esc_html_e('On User Interaction', 'mxchat'); ?></option>
576 </select>
577 </div>
578 <p class="mxch-field-description"><?php esc_html_e('Control when the chatbot script loads to improve page performance.', 'mxchat'); ?></p>
579 </div>
580
581 <div class="mxch-notice mxch-notice-info" style="margin-top: 16px;">
582 <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>
583 <div>
584 <strong><?php esc_html_e('Loading Strategies:', 'mxchat'); ?></strong>
585 <ul style="margin: 8px 0 0 0; padding-left: 20px;">
586 <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>
587 <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>
588 <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>
589 <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>
590 </ul>
591 </div>
592 </div>
593 </div>
594 </div>
595
596 <!-- Debug Mode Card -->
597 <?php
598 $debug_mode = isset($options['debug_mode']) ? $options['debug_mode'] : 'off';
599 $debug_active = ($debug_mode === 'on');
600 ?>
601 <div class="mxch-card">
602 <div class="mxch-card-header">
603 <h3 class="mxch-card-title">
604 <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>
605 <?php esc_html_e('Debug Mode', 'mxchat'); ?>
606 </h3>
607 </div>
608 <div class="mxch-card-body">
609 <div class="mxch-field">
610 <label class="mxch-toggle">
611 <input type="checkbox" class="mxch-toggle-input" id="mxchat_debug_mode" name="mxchat_options[debug_mode]" value="on" <?php checked($debug_active); ?>>
612 <span class="mxch-toggle-switch"></span>
613 <span class="mxch-toggle-label"><?php esc_html_e('Enable Debug Logging', 'mxchat'); ?></span>
614 </label>
615 <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>
616 </div>
617 </div>
618 </div>
619
620 <!-- Debug Log Viewer Card -->
621 <div class="mxch-card">
622 <div class="mxch-card-header" style="display: flex; justify-content: space-between; align-items: center;">
623 <h3 class="mxch-card-title">
624 <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>
625 <?php esc_html_e('Debug Log', 'mxchat'); ?>
626 </h3>
627 <div style="display: flex; gap: 8px; align-items: center;">
628 <span id="mxchat-log-count" class="mxch-badge" style="display: none;"></span>
629 <button type="button" class="mxch-btn mxch-btn-secondary mxch-btn-sm" id="mxchat-refresh-log">
630 <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>
631 <?php esc_html_e('Refresh', 'mxchat'); ?>
632 </button>
633 <button type="button" class="mxch-btn mxch-btn-secondary mxch-btn-sm" id="mxchat-clear-log">
634 <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>
635 <?php esc_html_e('Clear', 'mxchat'); ?>
636 </button>
637 </div>
638 </div>
639 <div class="mxch-card-body">
640 <div id="mxchat-debug-log" class="mxchat-debug-log-viewer">
641 <div class="mxchat-debug-log-empty">
642 <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>
643 <p><?php esc_html_e('No log entries yet. Enable debug mode to start logging.', 'mxchat'); ?></p>
644 </div>
645 </div>
646 </div>
647 </div>
648
649 <!-- Settings Tools Card -->
650 <div class="mxch-card">
651 <div class="mxch-card-header">
652 <h3 class="mxch-card-title">
653 <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>
654 <?php esc_html_e('Settings Tools', 'mxchat'); ?>
655 </h3>
656 </div>
657 <div class="mxch-card-body">
658 <div class="mxch-tools-grid">
659 <!-- Export Settings -->
660 <div class="mxch-tool-item">
661 <div class="mxch-tool-icon">
662 <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>
663 </div>
664 <div class="mxch-tool-content">
665 <h4><?php esc_html_e('Export Settings', 'mxchat'); ?></h4>
666 <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>
667 <button type="button" class="mxch-btn mxch-btn-secondary" id="mxchat-export-settings">
668 <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>
669 <?php esc_html_e('Export Settings', 'mxchat'); ?>
670 </button>
671 </div>
672 </div>
673
674 <!-- Reset All Settings -->
675 <div class="mxch-tool-item mxch-tool-item-danger">
676 <div class="mxch-tool-icon">
677 <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>
678 </div>
679 <div class="mxch-tool-content">
680 <h4><?php esc_html_e('Reset All Settings', 'mxchat'); ?></h4>
681 <p><?php esc_html_e('Reset all MxChat settings to their default values. This action cannot be undone.', 'mxchat'); ?></p>
682 <button type="button" class="mxch-btn mxch-btn-danger" id="mxchat-reset-settings">
683 <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>
684 <?php esc_html_e('Reset All Settings', 'mxchat'); ?>
685 </button>
686 </div>
687 </div>
688 </div>
689 </div>
690 </div>
691
692 <!-- Reset Confirmation Modal -->
693 <div id="mxchat-reset-modal" class="mxch-modal" style="display: none;">
694 <div class="mxch-modal-backdrop"></div>
695 <div class="mxch-modal-content">
696 <div class="mxch-modal-header">
697 <h3><?php esc_html_e('Reset All Settings', 'mxchat'); ?></h3>
698 <button type="button" class="mxch-modal-close" id="mxchat-reset-modal-close">&times;</button>
699 </div>
700 <div class="mxch-modal-body">
701 <div class="mxch-notice mxch-notice-warning">
702 <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>
703 <div>
704 <strong><?php esc_html_e('Warning: This action cannot be undone!', 'mxchat'); ?></strong>
705 <p><?php esc_html_e('All your MxChat settings including API keys, customizations, and configurations will be permanently deleted.', 'mxchat'); ?></p>
706 </div>
707 </div>
708 <div class="mxch-field" style="margin-top: 20px;">
709 <label class="mxch-field-label"><?php esc_html_e('Type RESET to confirm:', 'mxchat'); ?></label>
710 <input type="text" id="mxchat-reset-confirmation" class="mxch-input" placeholder="RESET" autocomplete="off">
711 </div>
712 </div>
713 <div class="mxch-modal-footer">
714 <button type="button" class="mxch-btn mxch-btn-secondary" id="mxchat-reset-cancel"><?php esc_html_e('Cancel', 'mxchat'); ?></button>
715 <button type="button" class="mxch-btn mxch-btn-danger" id="mxchat-reset-confirm" disabled><?php esc_html_e('Reset All Settings', 'mxchat'); ?></button>
716 </div>
717 </div>
718 </div>
719 </div>
720
721 <!-- ========================================
722 INTEGRATIONS - TOOLBAR
723 ======================================== -->
724 <div id="integrations-toolbar" class="mxch-section">
725 <div class="mxch-content-header">
726 <h1 class="mxch-content-title"><?php esc_html_e('Toolbar Settings', 'mxchat'); ?></h1>
727 <p class="mxch-content-subtitle"><?php esc_html_e('Configure the chat toolbar and document upload features.', 'mxchat'); ?></p>
728 </div>
729
730 <div class="mxch-card">
731 <div class="mxch-card-body mxchat-autosave-section">
732 <table class="form-table">
733 <?php do_settings_fields('mxchat-embed', 'mxchat_pdf_intent_section'); ?>
734 </table>
735 </div>
736 </div>
737 </div>
738
739 <!-- ========================================
740 INTEGRATIONS - LOOPS
741 ======================================== -->
742 <div id="integrations-loops" class="mxch-section">
743 <div class="mxch-content-header">
744 <h1 class="mxch-content-title"><?php esc_html_e('Loops Integration', 'mxchat'); ?></h1>
745 <p class="mxch-content-subtitle"><?php esc_html_e('Configure email capture with Loops for mailing list growth.', 'mxchat'); ?></p>
746 </div>
747
748 <div class="mxch-card">
749 <div class="mxch-card-body mxchat-autosave-section">
750 <table class="form-table">
751 <?php do_settings_fields('mxchat-embed', 'mxchat_loops_section'); ?>
752 </table>
753 </div>
754 </div>
755 </div>
756
757 <!-- ========================================
758 INTEGRATIONS - BRAVE SEARCH
759 ======================================== -->
760 <div id="integrations-brave" class="mxch-section">
761 <div class="mxch-content-header">
762 <h1 class="mxch-content-title"><?php esc_html_e('Brave Search', 'mxchat'); ?></h1>
763 <p class="mxch-content-subtitle"><?php esc_html_e('Configure Brave Search API for web search capabilities.', 'mxchat'); ?></p>
764 </div>
765
766 <div class="mxch-card">
767 <div class="mxch-card-body mxchat-autosave-section">
768 <table class="form-table">
769 <?php do_settings_fields('mxchat-embed', 'mxchat_brave_section'); ?>
770 </table>
771 </div>
772 </div>
773 </div>
774
775 <!-- ========================================
776 INTEGRATIONS - SLACK
777 ======================================== -->
778 <div id="integrations-slack" class="mxch-section">
779 <div class="mxch-content-header">
780 <h1 class="mxch-content-title"><?php esc_html_e('Slack', 'mxchat'); ?></h1>
781 <p class="mxch-content-subtitle"><?php esc_html_e('Connect your chatbot to Slack for live human support.', 'mxchat'); ?></p>
782 </div>
783
784 <div class="mxch-notice mxch-notice-info" style="margin-bottom: 24px;">
785 <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>
786 <div>
787 <?php printf(
788 esc_html__('Visit our %s for setup instructions.', 'mxchat'),
789 '<a href="https://mxchat.ai/documentation/#slack_integration" target="_blank">' . esc_html__('documentation page', 'mxchat') . '</a>'
790 ); ?>
791 </div>
792 </div>
793
794 <div class="mxch-card">
795 <div class="mxch-card-body mxchat-autosave-section">
796 <table class="form-table">
797 <?php do_settings_fields('mxchat-embed', 'mxchat_live_agent_section'); ?>
798 </table>
799 </div>
800 </div>
801
802 <div class="mxch-card" style="margin-top: 24px;">
803 <div class="mxch-card-header">
804 <h3 class="mxch-card-title">
805 <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>
806 <?php esc_html_e('Test Connection', 'mxchat'); ?>
807 </h3>
808 </div>
809 <div class="mxch-card-body">
810 <p class="mxch-field-description" style="margin-bottom: 16px;">
811 <?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'); ?>
812 </p>
813 <button type="button" id="mxchat-test-slack-connection" class="mxch-btn mxch-btn-secondary">
814 <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>
815 <?php esc_html_e('Test Slack Connection', 'mxchat'); ?>
816 </button>
817 <div id="mxchat-slack-test-result" style="margin-top: 16px; display: none;"></div>
818 </div>
819 </div>
820
821 <div class="mxch-card" style="margin-top: 24px;">
822 <div class="mxch-card-header">
823 <h3 class="mxch-card-title">
824 <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>
825 <?php esc_html_e('Required OAuth Scopes', 'mxchat'); ?>
826 </h3>
827 </div>
828 <div class="mxch-card-body">
829 <p class="mxch-field-description" style="margin-bottom: 12px;">
830 <?php esc_html_e('Your Slack app needs these Bot Token Scopes (OAuth & Permissions > Scopes):', 'mxchat'); ?>
831 </p>
832 <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;">
833 <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">channels:manage</code>
834 <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">channels:read</code>
835 <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">chat:write</code>
836 <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">chat:write.public</code>
837 <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">groups:write</code>
838 <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">users:read</code>
839 </div>
840 <p class="mxch-field-description" style="margin-top: 12px;">
841 <?php esc_html_e('After adding scopes, reinstall the app to your workspace.', 'mxchat'); ?>
842 </p>
843 </div>
844 </div>
845 </div>
846
847 <!-- ========================================
848 INTEGRATIONS - TELEGRAM
849 ======================================== -->
850 <div id="integrations-telegram" class="mxch-section">
851 <div class="mxch-content-header">
852 <h1 class="mxch-content-title"><?php esc_html_e('Telegram', 'mxchat'); ?></h1>
853 <p class="mxch-content-subtitle"><?php esc_html_e('Connect your chatbot to Telegram for live human support.', 'mxchat'); ?></p>
854 </div>
855
856 <div class="mxch-notice mxch-notice-info" style="margin-bottom: 24px;">
857 <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>
858 <div>
859 <?php esc_html_e('Telegram Live Agent requires a Telegram bot and a supergroup with forum topics enabled.', 'mxchat'); ?>
860 <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>
861 </div>
862 </div>
863
864 <div class="mxch-card">
865 <div class="mxch-card-body mxchat-autosave-section">
866 <table class="form-table">
867 <?php do_settings_fields('mxchat-embed', 'mxchat_telegram_section'); ?>
868 </table>
869 </div>
870 </div>
871
872 <div class="mxch-card" style="margin-top: 24px;">
873 <div class="mxch-card-header">
874 <h3 class="mxch-card-title">
875 <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>
876 <?php esc_html_e('Webhook Setup', 'mxchat'); ?>
877 </h3>
878 </div>
879 <div class="mxch-card-body">
880 <?php
881 $telegram_bot_token = $options['telegram_bot_token'] ?? '';
882 $telegram_webhook_secret = $options['telegram_webhook_secret'] ?? '';
883 $webhook_url = rest_url('mxchat/v1/telegram-webhook');
884 ?>
885
886 <p class="mxch-field-description" style="margin-bottom: 8px;">
887 <strong><?php esc_html_e('Your Webhook URL:', 'mxchat'); ?></strong>
888 </p>
889 <div class="mxch-webhook-url-display" style="margin-bottom: 20px;">
890 <code id="mxch-telegram-webhook-url"><?php echo esc_url($webhook_url); ?></code>
891 <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);">
892 <?php esc_html_e('Copy', 'mxchat'); ?>
893 </button>
894 </div>
895
896 <?php if (!empty($telegram_bot_token)) : ?>
897 <p class="mxch-field-description" style="margin-bottom: 8px;">
898 <strong><?php esc_html_e('Register Webhook URL:', 'mxchat'); ?></strong><br>
899 <?php esc_html_e('Copy and paste this URL into your browser to register the webhook with Telegram:', 'mxchat'); ?>
900 </p>
901 <?php
902 $registration_url = 'https://api.telegram.org/bot' . $telegram_bot_token . '/setWebhook?url=' . urlencode($webhook_url);
903 if (!empty($telegram_webhook_secret)) {
904 $registration_url .= '&secret_token=' . urlencode($telegram_webhook_secret);
905 }
906 ?>
907 <div class="mxch-webhook-url-display" style="margin-bottom: 12px;">
908 <code id="mxch-telegram-registration-url" style="word-break: break-all; font-size: 12px;"><?php echo esc_url($registration_url); ?></code>
909 <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);">
910 <?php esc_html_e('Copy', 'mxchat'); ?>
911 </button>
912 </div>
913 <p class="mxch-field-description" style="color: #22c55e;">
914 <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>
915 <?php esc_html_e('You should see {"ok":true,"result":true,"description":"Webhook was set"} after visiting the URL.', 'mxchat'); ?>
916 </p>
917 <?php else : ?>
918 <p class="mxch-field-description" style="color: #f59e0b;">
919 <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>
920 <?php esc_html_e('Enter your Bot Token above and save to generate the registration URL.', 'mxchat'); ?>
921 </p>
922 <?php endif; ?>
923 </div>
924 </div>
925 </div>
926
927 <!-- ========================================
928 TUTORIALS
929 ======================================== -->
930 <div id="tutorials" class="mxch-section">
931 <div class="mxch-content-header">
932 <h1 class="mxch-content-title"><?php esc_html_e('Video Tutorials', 'mxchat'); ?></h1>
933 <p class="mxch-content-subtitle"><?php esc_html_e('Learn how to get the most out of MxChat with our video guides.', 'mxchat'); ?></p>
934 </div>
935
936 <div class="mxch-card" style="margin-bottom: 24px;">
937 <div class="mxch-card-body">
938 <div style="display: flex; align-items: flex-start; gap: 16px;">
939 <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>
940 <div>
941 <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 600;"><?php esc_html_e('Need Help?', 'mxchat'); ?></h3>
942 <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>
943 <a href="https://wordpress.org/support/plugin/mxchat-basic/" target="_blank" class="mxch-btn mxch-btn-secondary mxch-btn-sm">
944 <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>
945 <?php esc_html_e('Submit Support Ticket', 'mxchat'); ?>
946 </a>
947 </div>
948 </div>
949 </div>
950 </div>
951
952 <div class="mxch-tutorials-grid">
953 <?php
954 $tutorials = array(
955 array(
956 'title' => __('Quick Setup with MxChat', 'mxchat'),
957 'description' => __('Learn how to quickly setup and understand how your chatbot works.', 'mxchat'),
958 'url' => 'https://www.youtube.com/watch?v=3BqoiyWaQiM&t'
959 ),
960 array(
961 'title' => __('AI Content Generation', 'mxchat'),
962 'description' => __('Generate full blog posts and landing pages with AI—from prompt to publish in minutes.', 'mxchat'),
963 'url' => 'https://www.youtube.com/watch?v=n8TeEeHpxs4'
964 ),
965 array(
966 'title' => __('Chat With Your GSC Data', 'mxchat'),
967 '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'),
968 'url' => 'https://www.youtube.com/watch?v=ytgMou_7SZA&t=2s'
969 ),
970 array(
971 'title' => __('AI Theme Generator', 'mxchat'),
972 'description' => __('Learn how to instantly restyle your chatbot using plain English prompts with real-time previews.', 'mxchat'),
973 'url' => 'https://www.youtube.com/watch?v=rSQDW2qbtRU&t'
974 ),
975 array(
976 'title' => __('MxChat Forms', 'mxchat'),
977 'description' => __('Create and manage smart forms that automatically trigger during chat conversations.', 'mxchat'),
978 'url' => 'https://www.youtube.com/watch?v=3MrWy5dRalA'
979 ),
980 array(
981 'title' => __('Admin Assistant Add-on', 'mxchat'),
982 'description' => __('Bring a ChatGPT-like experience directly inside your WordPress dashboard.', 'mxchat'),
983 'url' => 'https://youtu.be/AdEA1k-UCFM'
984 ),
985 array(
986 'title' => __('Chat Themes', 'mxchat'),
987 'description' => __('Customize appearance with real-time previews to match your brand.', 'mxchat'),
988 'url' => 'https://youtu.be/MfbB9mZi6ag'
989 ),
990 array(
991 'title' => __('WooCommerce Integration', 'mxchat'),
992 'description' => __('Provide product recommendations and shopping assistance to customers.', 'mxchat'),
993 'url' => 'https://www.youtube.com/watch?v=WsqAppHRGdA'
994 ),
995 array(
996 'title' => __('Knowledge Base Setup', 'mxchat'),
997 'description' => __('Set up your knowledge base using PDFs, sitemaps, and manual entries.', 'mxchat'),
998 'url' => 'https://www.youtube.com/watch?v=8Ztjs66-VTo'
999 ),
1000 array(
1001 'title' => __('Document Chat', 'mxchat'),
1002 'description' => __('Chat with PDF and Word documents for enhanced document analysis.', 'mxchat'),
1003 'url' => 'https://www.youtube.com/watch?v=j_c45WWCTG0'
1004 ),
1005 array(
1006 'title' => __('Perplexity Integration', 'mxchat'),
1007 'description' => __('Enable real-time web search capabilities for your chatbot.', 'mxchat'),
1008 'url' => 'https://youtu.be/wpKkbt24-bo'
1009 ),
1010 array(
1011 'title' => __('Brave Search Intent', 'mxchat'),
1012 'description' => __('Leverage Brave Search for improved query understanding.', 'mxchat'),
1013 'url' => 'https://www.youtube.com/watch?v=7vDL5H7vToc'
1014 ),
1015 array(
1016 'title' => __('Loops Email Capture', 'mxchat'),
1017 'description' => __('Set up email capture with Loops to grow your mailing list.', 'mxchat'),
1018 'url' => 'https://www.youtube.com/watch?v=CNgm5TYDyTc'
1019 ),
1020 array(
1021 'title' => __('AI Agent Testing', 'mxchat'),
1022 'description' => __('Evaluate and improve your chatbot\'s performance and accuracy.', 'mxchat'),
1023 'url' => 'https://www.youtube.com/watch?v=A0jowbpyX54'
1024 ),
1025 );
1026
1027 foreach ($tutorials as $tutorial): ?>
1028 <div class="mxch-tutorial-card">
1029 <div class="mxch-tutorial-content">
1030 <h3 class="mxch-tutorial-title"><?php echo esc_html($tutorial['title']); ?></h3>
1031 <p class="mxch-tutorial-description"><?php echo esc_html($tutorial['description']); ?></p>
1032 <a href="<?php echo esc_url($tutorial['url']); ?>" target="_blank" rel="noopener" class="mxch-tutorial-link">
1033 <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>
1034 <?php esc_html_e('Watch Tutorial', 'mxchat'); ?>
1035 </a>
1036 </div>
1037 </div>
1038 <?php endforeach; ?>
1039 </div>
1040 </div>
1041
1042 </main>
1043 </div>
1044
1045 <script>
1046 document.addEventListener('DOMContentLoaded', function() {
1047 // Sidebar navigation
1048 const navLinks = document.querySelectorAll('.mxch-nav-link, .mxch-nav-sub-link');
1049 const sections = document.querySelectorAll('.mxch-section');
1050 const navItems = document.querySelectorAll('.mxch-nav-item');
1051
1052 function showSection(target) {
1053 // Show target section
1054 sections.forEach(section => {
1055 section.classList.remove('active');
1056 if (section.id === target) {
1057 section.classList.add('active');
1058 }
1059 });
1060
1061 // Scroll content area to top
1062 const contentArea = document.querySelector('.mxch-content');
1063 if (contentArea) {
1064 contentArea.scrollTop = 0;
1065 }
1066 }
1067
1068 function setActiveNav(clickedLink) {
1069 // Remove active from all links
1070 navLinks.forEach(l => l.classList.remove('active'));
1071
1072 // Add active to clicked link
1073 clickedLink.classList.add('active');
1074
1075 // If clicking a sub-link, also highlight parent
1076 if (clickedLink.classList.contains('mxch-nav-sub-link')) {
1077 const parent = clickedLink.closest('.mxch-nav-item');
1078 if (parent) {
1079 parent.querySelector('.mxch-nav-link').classList.add('active');
1080 }
1081 }
1082 }
1083
1084 navLinks.forEach(link => {
1085 link.addEventListener('click', function(e) {
1086 e.preventDefault();
1087 e.stopPropagation();
1088 const target = this.dataset.target;
1089 const parentItem = this.closest('.mxch-nav-item');
1090 const hasSubmenu = parentItem && parentItem.querySelector('.mxch-nav-sub');
1091
1092 // If this is a parent nav link WITH children (expandable menu)
1093 if (this.classList.contains('mxch-nav-link') && hasSubmenu) {
1094 const wasExpanded = parentItem.classList.contains('expanded');
1095
1096 // Collapse all other expandable items
1097 navItems.forEach(item => {
1098 if (item !== parentItem && item.querySelector('.mxch-nav-sub')) {
1099 item.classList.remove('expanded');
1100 }
1101 });
1102
1103 // Toggle this item
1104 parentItem.classList.toggle('expanded');
1105
1106 // If expanding, show the first sub-item's content and mark it active
1107 if (!wasExpanded) {
1108 const firstSubLink = parentItem.querySelector('.mxch-nav-sub-link');
1109 if (firstSubLink) {
1110 const firstTarget = firstSubLink.dataset.target;
1111 showSection(firstTarget);
1112 setActiveNav(firstSubLink);
1113 // Also mark parent as active
1114 this.classList.add('active');
1115 history.replaceState(null, null, '#' + firstTarget);
1116 }
1117 }
1118 }
1119 // If this is a nav link WITHOUT children (like API Keys, Tutorials)
1120 else if (this.classList.contains('mxch-nav-link') && !hasSubmenu && target) {
1121 // Collapse all expandable items
1122 navItems.forEach(item => {
1123 if (item.querySelector('.mxch-nav-sub')) {
1124 item.classList.remove('expanded');
1125 }
1126 });
1127
1128 // Show the section
1129 showSection(target);
1130 setActiveNav(this);
1131 history.replaceState(null, null, '#' + target);
1132 }
1133 // If this is a sub-link
1134 else if (this.classList.contains('mxch-nav-sub-link') && target) {
1135 // Ensure parent stays expanded
1136 if (parentItem) {
1137 parentItem.classList.add('expanded');
1138 }
1139 showSection(target);
1140 setActiveNav(this);
1141 history.replaceState(null, null, '#' + target);
1142 }
1143 });
1144 });
1145
1146 // Handle initial hash
1147 const hash = window.location.hash.slice(1);
1148 if (hash) {
1149 const targetLink = document.querySelector('[data-target="' + hash + '"]');
1150 if (targetLink) {
1151 // Expand parent if it's a sub-link
1152 const parentItem = targetLink.closest('.mxch-nav-item');
1153 if (parentItem && targetLink.classList.contains('mxch-nav-sub-link')) {
1154 parentItem.classList.add('expanded');
1155 }
1156 showSection(hash);
1157 setActiveNav(targetLink);
1158 }
1159 }
1160
1161 // Rate limit accordion
1162 const rateLimitHeaders = document.querySelectorAll('.mxch-rate-limit-header');
1163 rateLimitHeaders.forEach(header => {
1164 header.addEventListener('click', function(e) {
1165 e.preventDefault();
1166 e.stopPropagation();
1167 const item = this.closest('.mxch-rate-limit-item');
1168 item.classList.toggle('expanded');
1169 });
1170 });
1171
1172 // =====================================================
1173 // Mobile Menu Functionality
1174 // =====================================================
1175 const mobileMenuBtn = document.querySelector('.mxch-mobile-menu-btn');
1176 const mobileMenuClose = document.querySelector('.mxch-mobile-menu-close');
1177 const mobileMenu = document.querySelector('.mxch-mobile-menu');
1178 const mobileOverlay = document.querySelector('.mxch-mobile-overlay');
1179 const mobileNavLinks = document.querySelectorAll('.mxch-mobile-nav-link, .mxch-mobile-nav-sub-link');
1180
1181 function openMobileMenu() {
1182 mobileMenu.classList.add('open');
1183 mobileOverlay.classList.add('open');
1184 document.body.style.overflow = 'hidden';
1185 }
1186
1187 function closeMobileMenu() {
1188 mobileMenu.classList.remove('open');
1189 mobileOverlay.classList.remove('open');
1190 document.body.style.overflow = '';
1191 }
1192
1193 if (mobileMenuBtn) {
1194 mobileMenuBtn.addEventListener('click', openMobileMenu);
1195 }
1196
1197 if (mobileMenuClose) {
1198 mobileMenuClose.addEventListener('click', closeMobileMenu);
1199 }
1200
1201 if (mobileOverlay) {
1202 mobileOverlay.addEventListener('click', closeMobileMenu);
1203 }
1204
1205 // Mobile navigation links
1206 mobileNavLinks.forEach(link => {
1207 link.addEventListener('click', function(e) {
1208 e.preventDefault();
1209 e.stopPropagation();
1210
1211 const target = this.dataset.target;
1212 const parentId = this.dataset.parent;
1213
1214 // If this is an expandable parent link
1215 if (parentId && !target) {
1216 const subNav = document.querySelector('.mxch-mobile-nav-sub[data-parent="' + parentId + '"]');
1217 if (subNav) {
1218 const isExpanded = subNav.classList.contains('expanded');
1219 // Collapse all sub navs
1220 document.querySelectorAll('.mxch-mobile-nav-sub').forEach(nav => {
1221 nav.classList.remove('expanded');
1222 });
1223 document.querySelectorAll('.mxch-mobile-nav-link').forEach(l => {
1224 l.classList.remove('expanded');
1225 });
1226 // Toggle this one
1227 if (!isExpanded) {
1228 subNav.classList.add('expanded');
1229 this.classList.add('expanded');
1230 }
1231 }
1232 }
1233 // If this is a direct link or sub-link with a target
1234 else if (target) {
1235 // Update mobile nav active state
1236 document.querySelectorAll('.mxch-mobile-nav-link, .mxch-mobile-nav-sub-link').forEach(l => {
1237 l.classList.remove('active');
1238 });
1239 this.classList.add('active');
1240
1241 // Also update desktop sidebar nav
1242 const desktopLink = document.querySelector('.mxch-sidebar [data-target="' + target + '"]');
1243 if (desktopLink) {
1244 setActiveNav(desktopLink);
1245 const parentItem = desktopLink.closest('.mxch-nav-item');
1246 if (parentItem && desktopLink.classList.contains('mxch-nav-sub-link')) {
1247 parentItem.classList.add('expanded');
1248 }
1249 }
1250
1251 // Show section and close menu
1252 showSection(target);
1253 history.replaceState(null, null, '#' + target);
1254 closeMobileMenu();
1255 }
1256 });
1257 });
1258
1259 // Close mobile menu on escape key
1260 document.addEventListener('keydown', function(e) {
1261 if (e.key === 'Escape' && mobileMenu && mobileMenu.classList.contains('open')) {
1262 closeMobileMenu();
1263 }
1264 });
1265 });
1266 </script>
1267 <?php
1268 }
1269
1270 /**
1271 * Helper function to render a field with consistent wrapper
1272 */
1273 function mxchat_render_field_wrapper($id, $label, $callback, $description = '') {
1274 ?>
1275 <div class="mxch-field">
1276 <label class="mxch-field-label"><?php echo esc_html($label); ?></label>
1277 <div class="mxch-field-control">
1278 <?php $callback(); ?>
1279 </div>
1280 <?php if ($description): ?>
1281 <p class="mxch-field-description"><?php echo esc_html($description); ?></p>
1282 <?php endif; ?>
1283 </div>
1284 <?php
1285 }
1286
1287 /**
1288 * Render rate limits as collapsible accordion
1289 */
1290 function mxchat_render_rate_limits_accordion($admin_instance) {
1291 $all_options = get_option('mxchat_options', []);
1292 $rate_limits = array('1', '3', '5', '10', '15', '20', '50', '100', 'unlimited');
1293 $timeframes = array(
1294 'hourly' => __('Per Hour', 'mxchat'),
1295 'daily' => __('Per Day', 'mxchat'),
1296 'weekly' => __('Per Week', 'mxchat'),
1297 'monthly' => __('Per Month', 'mxchat')
1298 );
1299
1300 $roles = wp_roles()->get_names();
1301 $roles['logged_out'] = __('Logged Out Users', 'mxchat');
1302
1303 echo '<div class="mxch-rate-limits">';
1304
1305 foreach ($roles as $role_id => $role_name) {
1306 $default_limit = ($role_id === 'logged_out') ? '10' : '100';
1307 $default_timeframe = 'daily';
1308 $default_message = __('Rate limit exceeded. Please try again later.', 'mxchat');
1309
1310 $selected_limit = isset($all_options['rate_limits'][$role_id]['limit'])
1311 ? $all_options['rate_limits'][$role_id]['limit']
1312 : $default_limit;
1313
1314 $selected_timeframe = isset($all_options['rate_limits'][$role_id]['timeframe'])
1315 ? $all_options['rate_limits'][$role_id]['timeframe']
1316 : $default_timeframe;
1317
1318 $custom_message = isset($all_options['rate_limits'][$role_id]['message'])
1319 ? $all_options['rate_limits'][$role_id]['message']
1320 : $default_message;
1321
1322 $timeframe_label = isset($timeframes[$selected_timeframe]) ? $timeframes[$selected_timeframe] : $selected_timeframe;
1323 ?>
1324 <div class="mxch-rate-limit-item">
1325 <div class="mxch-rate-limit-header">
1326 <span class="mxch-rate-limit-role"><?php echo esc_html($role_name); ?></span>
1327 <div class="mxch-rate-limit-summary">
1328 <span class="mxch-rate-limit-badge"><?php echo esc_html($selected_limit . ' / ' . $timeframe_label); ?></span>
1329 <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>
1330 </div>
1331 </div>
1332 <div class="mxch-rate-limit-body mxchat-autosave-section">
1333 <div class="mxch-rate-limit-controls">
1334 <div class="mxch-field">
1335 <label class="mxch-field-label" for="rate_limits_<?php echo esc_attr($role_id); ?>_limit"><?php esc_html_e('Limit', 'mxchat'); ?></label>
1336 <select id="rate_limits_<?php echo esc_attr($role_id); ?>_limit"
1337 name="mxchat_options[rate_limits][<?php echo esc_attr($role_id); ?>][limit]"
1338 class="mxch-select mxchat-autosave-field">
1339 <?php foreach ($rate_limits as $limit): ?>
1340 <option value="<?php echo esc_attr($limit); ?>" <?php selected($selected_limit, $limit); ?>><?php echo esc_html($limit); ?></option>
1341 <?php endforeach; ?>
1342 </select>
1343 </div>
1344 <div class="mxch-field">
1345 <label class="mxch-field-label" for="rate_limits_<?php echo esc_attr($role_id); ?>_timeframe"><?php esc_html_e('Timeframe', 'mxchat'); ?></label>
1346 <select id="rate_limits_<?php echo esc_attr($role_id); ?>_timeframe"
1347 name="mxchat_options[rate_limits][<?php echo esc_attr($role_id); ?>][timeframe]"
1348 class="mxch-select mxchat-autosave-field">
1349 <?php foreach ($timeframes as $value => $label): ?>
1350 <option value="<?php echo esc_attr($value); ?>" <?php selected($selected_timeframe, $value); ?>><?php echo esc_html($label); ?></option>
1351 <?php endforeach; ?>
1352 </select>
1353 </div>
1354 </div>
1355 <div class="mxch-field">
1356 <label class="mxch-field-label" for="rate_limits_<?php echo esc_attr($role_id); ?>_message"><?php esc_html_e('Custom Message', 'mxchat'); ?></label>
1357 <textarea id="rate_limits_<?php echo esc_attr($role_id); ?>_message"
1358 name="mxchat_options[rate_limits][<?php echo esc_attr($role_id); ?>][message]"
1359 class="mxch-textarea mxchat-autosave-field"
1360 rows="2"
1361 placeholder="<?php esc_attr_e('Message shown when rate limit is reached', 'mxchat'); ?>"><?php echo esc_textarea($custom_message); ?></textarea>
1362 </div>
1363 </div>
1364 </div>
1365 <?php
1366 }
1367
1368 echo '</div>';
1369 }
1370