| 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 — 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 |
?> |
| 318 |
</div> |
| 319 |
</div> |
| 320 |
</div> |
| 321 |
|
| 322 |
<!-- ======================================== |
| 323 |
CHATBOT - DISPLAY |
| 324 |
======================================== --> |
| 325 |
<div id="chatbot-display" class="mxch-section"> |
| 326 |
<div class="mxch-content-header"> |
| 327 |
<h1 class="mxch-content-title"><?php esc_html_e('Display Settings', 'mxchat'); ?></h1> |
| 328 |
<p class="mxch-content-subtitle"><?php esc_html_e('Customize how and where your chatbot appears on your website.', 'mxchat'); ?></p> |
| 329 |
</div> |
| 330 |
|
| 331 |
<div class="mxch-card"> |
| 332 |
<div class="mxch-card-header"> |
| 333 |
<h3 class="mxch-card-title"> |
| 334 |
<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> |
| 335 |
<?php esc_html_e('Visibility', 'mxchat'); ?> |
| 336 |
</h3> |
| 337 |
</div> |
| 338 |
<div class="mxch-card-body mxchat-autosave-section"> |
| 339 |
<?php |
| 340 |
// Auto-Display |
| 341 |
mxchat_render_field_wrapper('auto_display', __('Auto-Display Chatbot', 'mxchat'), function() use ($admin_instance) { |
| 342 |
$admin_instance->mxchat_append_to_body_callback(); |
| 343 |
}, __('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')); |
| 344 |
|
| 345 |
// Open Links in New Tab |
| 346 |
mxchat_render_field_wrapper('link_target', __('Open Links in New Tab', 'mxchat'), function() use ($admin_instance) { |
| 347 |
$admin_instance->mxchat_link_target_toggle_callback(); |
| 348 |
}, __('Open links clicked in chat responses in a new browser tab.', 'mxchat')); |
| 349 |
|
| 350 |
// Chat Persistence |
| 351 |
mxchat_render_field_wrapper('chat_persistence', __('Chat Persistence', 'mxchat'), function() use ($admin_instance) { |
| 352 |
$admin_instance->mxchat_chat_persistence_toggle_callback(); |
| 353 |
}, __('Keep chat history when users navigate or return within 24 hours.', 'mxchat')); |
| 354 |
?> |
| 355 |
</div> |
| 356 |
</div> |
| 357 |
|
| 358 |
<div class="mxch-card"> |
| 359 |
<div class="mxch-card-header"> |
| 360 |
<h3 class="mxch-card-title"> |
| 361 |
<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> |
| 362 |
<?php esc_html_e('Text & Labels', 'mxchat'); ?> |
| 363 |
</h3> |
| 364 |
</div> |
| 365 |
<div class="mxch-card-body mxchat-autosave-section"> |
| 366 |
<?php |
| 367 |
// Top Bar Title |
| 368 |
mxchat_render_field_wrapper('top_bar_title', __('Top Bar Title', 'mxchat'), function() use ($admin_instance) { |
| 369 |
$admin_instance->mxchat_top_bar_title_callback(); |
| 370 |
}, __('Title text shown in the chatbot header.', 'mxchat')); |
| 371 |
|
| 372 |
// AI Agent Text |
| 373 |
mxchat_render_field_wrapper('ai_agent_text', __('AI Agent Text', 'mxchat'), function() use ($admin_instance) { |
| 374 |
$admin_instance->mxchat_ai_agent_text_callback(); |
| 375 |
}, __('Text shown for AI agents in the status indicator.', 'mxchat')); |
| 376 |
|
| 377 |
// Intro Message |
| 378 |
mxchat_render_field_wrapper('intro_message', __('Introductory Message', 'mxchat'), function() use ($admin_instance) { |
| 379 |
$admin_instance->mxchat_intro_message_callback(); |
| 380 |
}, __('First message shown when chat opens. HTML allowed.', 'mxchat')); |
| 381 |
|
| 382 |
// Input Placeholder |
| 383 |
mxchat_render_field_wrapper('input_copy', __('Input Placeholder', 'mxchat'), function() use ($admin_instance) { |
| 384 |
$admin_instance->mxchat_input_copy_callback(); |
| 385 |
}, __('Placeholder text in the chat input field.', 'mxchat')); |
| 386 |
|
| 387 |
// Chat Teaser |
| 388 |
mxchat_render_field_wrapper('pre_chat_message', __('Chat Teaser Pop-up', 'mxchat'), function() use ($admin_instance) { |
| 389 |
$admin_instance->mxchat_pre_chat_message_callback(); |
| 390 |
}, __('Message shown before users start chatting.', 'mxchat')); |
| 391 |
?> |
| 392 |
</div> |
| 393 |
</div> |
| 394 |
</div> |
| 395 |
|
| 396 |
<!-- ======================================== |
| 397 |
CHATBOT - LEAD CAPTURE |
| 398 |
======================================== --> |
| 399 |
<div id="chatbot-lead-capture" class="mxch-section"> |
| 400 |
<div class="mxch-content-header"> |
| 401 |
<h1 class="mxch-content-title"><?php esc_html_e('Lead Capture', 'mxchat'); ?></h1> |
| 402 |
<p class="mxch-content-subtitle"><?php esc_html_e('Collect user information and manage privacy settings.', 'mxchat'); ?></p> |
| 403 |
</div> |
| 404 |
|
| 405 |
<div class="mxch-card"> |
| 406 |
<div class="mxch-card-header"> |
| 407 |
<h3 class="mxch-card-title"> |
| 408 |
<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> |
| 409 |
<?php esc_html_e('Email Capture', 'mxchat'); ?> |
| 410 |
</h3> |
| 411 |
</div> |
| 412 |
<div class="mxch-card-body mxchat-autosave-section"> |
| 413 |
<?php |
| 414 |
// Require Email |
| 415 |
mxchat_render_field_wrapper('enable_email_block', __('Require Email to Chat', 'mxchat'), function() use ($admin_instance) { |
| 416 |
$admin_instance->enable_email_block_callback(); |
| 417 |
}, __('Require users to enter their email before chatting. Shows for non-logged-in users.', 'mxchat')); |
| 418 |
|
| 419 |
// Email Form Content |
| 420 |
mxchat_render_field_wrapper('email_blocker_header', __('Email Form Content', 'mxchat'), function() use ($admin_instance) { |
| 421 |
$admin_instance->email_blocker_header_content_callback(); |
| 422 |
}, __('HTML content shown above the email form.', 'mxchat')); |
| 423 |
|
| 424 |
// Email Button Text |
| 425 |
mxchat_render_field_wrapper('email_blocker_button', __('Submit Button Text', 'mxchat'), function() use ($admin_instance) { |
| 426 |
$admin_instance->email_blocker_button_text_callback(); |
| 427 |
}, __('Text for the email form submit button.', 'mxchat')); |
| 428 |
|
| 429 |
// Require Name |
| 430 |
mxchat_render_field_wrapper('enable_name_field', __('Also Require Name', 'mxchat'), function() use ($admin_instance) { |
| 431 |
$admin_instance->enable_name_field_callback(); |
| 432 |
}, __('Also require users to enter their name with email.', 'mxchat')); |
| 433 |
|
| 434 |
// Name Placeholder |
| 435 |
mxchat_render_field_wrapper('name_placeholder', __('Name Field Placeholder', 'mxchat'), function() use ($admin_instance) { |
| 436 |
$admin_instance->name_field_placeholder_callback(); |
| 437 |
}, __('Placeholder text for the name input field.', 'mxchat')); |
| 438 |
?> |
| 439 |
</div> |
| 440 |
</div> |
| 441 |
|
| 442 |
<div class="mxch-card"> |
| 443 |
<div class="mxch-card-header"> |
| 444 |
<h3 class="mxch-card-title"> |
| 445 |
<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> |
| 446 |
<?php esc_html_e('Privacy & Compliance', 'mxchat'); ?> |
| 447 |
</h3> |
| 448 |
</div> |
| 449 |
<div class="mxch-card-body mxchat-autosave-section"> |
| 450 |
<?php |
| 451 |
// Privacy Notice |
| 452 |
mxchat_render_field_wrapper('privacy_toggle', __('Privacy Notice', 'mxchat'), function() use ($admin_instance) { |
| 453 |
$admin_instance->mxchat_privacy_toggle_callback(); |
| 454 |
}, __('Show privacy notice below the chat widget.', 'mxchat')); |
| 455 |
|
| 456 |
// Complianz |
| 457 |
mxchat_render_field_wrapper('complianz_toggle', __('Complianz Integration', 'mxchat'), function() use ($admin_instance) { |
| 458 |
$admin_instance->mxchat_complianz_toggle_callback(); |
| 459 |
}, __('Apply Complianz consent logic to the chatbot (requires Complianz plugin).', 'mxchat')); |
| 460 |
?> |
| 461 |
</div> |
| 462 |
</div> |
| 463 |
</div> |
| 464 |
|
| 465 |
<!-- ======================================== |
| 466 |
CHATBOT - QUICK QUESTIONS |
| 467 |
======================================== --> |
| 468 |
<div id="chatbot-quick-questions" class="mxch-section"> |
| 469 |
<div class="mxch-content-header"> |
| 470 |
<h1 class="mxch-content-title"><?php esc_html_e('Quick Questions', 'mxchat'); ?></h1> |
| 471 |
<p class="mxch-content-subtitle"><?php esc_html_e('Pre-defined questions displayed above the chat input to help users get started.', 'mxchat'); ?></p> |
| 472 |
</div> |
| 473 |
|
| 474 |
<div class="mxch-card"> |
| 475 |
<div class="mxch-card-body mxchat-autosave-section"> |
| 476 |
<?php |
| 477 |
// Quick Question 1 |
| 478 |
mxchat_render_field_wrapper('popular_question_1', __('Quick Question 1', 'mxchat'), function() use ($admin_instance) { |
| 479 |
$admin_instance->mxchat_popular_question_1_callback(); |
| 480 |
}); |
| 481 |
|
| 482 |
// Quick Question 2 |
| 483 |
mxchat_render_field_wrapper('popular_question_2', __('Quick Question 2', 'mxchat'), function() use ($admin_instance) { |
| 484 |
$admin_instance->mxchat_popular_question_2_callback(); |
| 485 |
}); |
| 486 |
|
| 487 |
// Quick Question 3 |
| 488 |
mxchat_render_field_wrapper('popular_question_3', __('Quick Question 3', 'mxchat'), function() use ($admin_instance) { |
| 489 |
$admin_instance->mxchat_popular_question_3_callback(); |
| 490 |
}); |
| 491 |
|
| 492 |
// Additional Questions |
| 493 |
mxchat_render_field_wrapper('additional_questions', __('Additional Questions', 'mxchat'), function() use ($admin_instance) { |
| 494 |
$admin_instance->mxchat_additional_popular_questions_callback(); |
| 495 |
}, __('Add as many quick questions as you need.', 'mxchat')); |
| 496 |
?> |
| 497 |
</div> |
| 498 |
</div> |
| 499 |
</div> |
| 500 |
|
| 501 |
<!-- ======================================== |
| 502 |
CHATBOT - RATE LIMITS |
| 503 |
======================================== --> |
| 504 |
<div id="chatbot-rate-limits" class="mxch-section"> |
| 505 |
<div class="mxch-content-header"> |
| 506 |
<h1 class="mxch-content-title"><?php esc_html_e('Rate Limits', 'mxchat'); ?></h1> |
| 507 |
<p class="mxch-content-subtitle"><?php esc_html_e('Set message limits for each user role to manage API usage.', 'mxchat'); ?></p> |
| 508 |
</div> |
| 509 |
|
| 510 |
<div class="mxch-notice mxch-notice-info" style="margin-bottom: 24px;"> |
| 511 |
<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> |
| 512 |
<div> |
| 513 |
<strong><?php esc_html_e('Placeholders available:', 'mxchat'); ?></strong> |
| 514 |
<code>{limit}</code>, <code>{timeframe}</code>, <code>{count}</code>, <code>{remaining}</code> |
| 515 |
<br> |
| 516 |
<strong><?php esc_html_e('Markdown links supported:', 'mxchat'); ?></strong> |
| 517 |
<code>[Link text](https://example.com)</code> |
| 518 |
</div> |
| 519 |
</div> |
| 520 |
|
| 521 |
<div class="mxch-card"> |
| 522 |
<div class="mxch-card-body mxchat-autosave-section"> |
| 523 |
<?php |
| 524 |
// Render rate limits with accordion |
| 525 |
mxchat_render_rate_limits_accordion($admin_instance); |
| 526 |
?> |
| 527 |
</div> |
| 528 |
</div> |
| 529 |
</div> |
| 530 |
|
| 531 |
<!-- ======================================== |
| 532 |
API KEYS |
| 533 |
======================================== --> |
| 534 |
<div id="api-keys" class="mxch-section"> |
| 535 |
<div class="mxch-content-header"> |
| 536 |
<h1 class="mxch-content-title"><?php esc_html_e('API Keys', 'mxchat'); ?></h1> |
| 537 |
<p class="mxch-content-subtitle"><?php esc_html_e('Manage API keys for AI providers and integrations.', 'mxchat'); ?></p> |
| 538 |
</div> |
| 539 |
|
| 540 |
<div class="mxch-card"> |
| 541 |
<div class="mxch-card-header"> |
| 542 |
<h3 class="mxch-card-title"> |
| 543 |
<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> |
| 544 |
<?php esc_html_e('AI Providers', 'mxchat'); ?> |
| 545 |
</h3> |
| 546 |
</div> |
| 547 |
<div class="mxch-card-body mxchat-autosave-section"> |
| 548 |
<table class="form-table"> |
| 549 |
<?php do_settings_fields('mxchat-api-keys', 'mxchat_api_keys_section'); ?> |
| 550 |
</table> |
| 551 |
</div> |
| 552 |
</div> |
| 553 |
</div> |
| 554 |
|
| 555 |
<!-- ======================================== |
| 556 |
OPTIMIZATION |
| 557 |
======================================== --> |
| 558 |
<div id="optimization" class="mxch-section"> |
| 559 |
<div class="mxch-content-header"> |
| 560 |
<h1 class="mxch-content-title"><?php esc_html_e('Optimization & Diagnostics', 'mxchat'); ?></h1> |
| 561 |
<p class="mxch-content-subtitle"><?php esc_html_e('Optimize performance, debug issues, and manage plugin settings.', 'mxchat'); ?></p> |
| 562 |
</div> |
| 563 |
|
| 564 |
<!-- Script Loading Card --> |
| 565 |
<div class="mxch-card"> |
| 566 |
<div class="mxch-card-header"> |
| 567 |
<h3 class="mxch-card-title"> |
| 568 |
<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> |
| 569 |
<?php esc_html_e('Script Loading', 'mxchat'); ?> |
| 570 |
</h3> |
| 571 |
</div> |
| 572 |
<div class="mxch-card-body mxchat-autosave-section"> |
| 573 |
<?php |
| 574 |
$script_loading_strategy = isset($options['script_loading_strategy']) ? $options['script_loading_strategy'] : 'default'; |
| 575 |
?> |
| 576 |
<div class="mxch-field"> |
| 577 |
<label class="mxch-field-label"><?php esc_html_e('Script Loading Strategy', 'mxchat'); ?></label> |
| 578 |
<div class="mxch-field-control"> |
| 579 |
<select name="mxchat_options[script_loading_strategy]" id="script_loading_strategy" class="mxch-select mxchat-autosave-field"> |
| 580 |
<option value="default" <?php selected($script_loading_strategy, 'default'); ?>><?php esc_html_e('Default (Immediate)', 'mxchat'); ?></option> |
| 581 |
<option value="defer" <?php selected($script_loading_strategy, 'defer'); ?>><?php esc_html_e('Deferred', 'mxchat'); ?></option> |
| 582 |
<option value="delay_1s" <?php selected($script_loading_strategy, 'delay_1s'); ?>><?php esc_html_e('Delay 1 Second', 'mxchat'); ?></option> |
| 583 |
<option value="delay_3s" <?php selected($script_loading_strategy, 'delay_3s'); ?>><?php esc_html_e('Delay 3 Seconds', 'mxchat'); ?></option> |
| 584 |
<option value="delay_5s" <?php selected($script_loading_strategy, 'delay_5s'); ?>><?php esc_html_e('Delay 5 Seconds', 'mxchat'); ?></option> |
| 585 |
<option value="on_interaction" <?php selected($script_loading_strategy, 'on_interaction'); ?>><?php esc_html_e('On User Interaction', 'mxchat'); ?></option> |
| 586 |
</select> |
| 587 |
</div> |
| 588 |
<p class="mxch-field-description"><?php esc_html_e('Control when the chatbot script loads to improve page performance.', 'mxchat'); ?></p> |
| 589 |
</div> |
| 590 |
|
| 591 |
<div class="mxch-notice mxch-notice-info" style="margin-top: 16px;"> |
| 592 |
<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> |
| 593 |
<div> |
| 594 |
<strong><?php esc_html_e('Loading Strategies:', 'mxchat'); ?></strong> |
| 595 |
<ul style="margin: 8px 0 0 0; padding-left: 20px;"> |
| 596 |
<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> |
| 597 |
<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> |
| 598 |
<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> |
| 599 |
<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> |
| 600 |
</ul> |
| 601 |
</div> |
| 602 |
</div> |
| 603 |
</div> |
| 604 |
</div> |
| 605 |
|
| 606 |
<!-- Debug Mode Card --> |
| 607 |
<?php |
| 608 |
$debug_mode = isset($options['debug_mode']) ? $options['debug_mode'] : 'off'; |
| 609 |
$debug_active = ($debug_mode === 'on'); |
| 610 |
?> |
| 611 |
<div class="mxch-card"> |
| 612 |
<div class="mxch-card-header"> |
| 613 |
<h3 class="mxch-card-title"> |
| 614 |
<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> |
| 615 |
<?php esc_html_e('Debug Mode', 'mxchat'); ?> |
| 616 |
</h3> |
| 617 |
</div> |
| 618 |
<div class="mxch-card-body"> |
| 619 |
<div class="mxch-field"> |
| 620 |
<label class="mxch-toggle"> |
| 621 |
<input type="checkbox" class="mxch-toggle-input" id="mxchat_debug_mode" name="mxchat_options[debug_mode]" value="on" <?php checked($debug_active); ?>> |
| 622 |
<span class="mxch-toggle-switch"></span> |
| 623 |
<span class="mxch-toggle-label"><?php esc_html_e('Enable Debug Logging', 'mxchat'); ?></span> |
| 624 |
</label> |
| 625 |
<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> |
| 626 |
</div> |
| 627 |
</div> |
| 628 |
</div> |
| 629 |
|
| 630 |
<!-- Debug Log Viewer Card --> |
| 631 |
<div class="mxch-card"> |
| 632 |
<div class="mxch-card-header" style="display: flex; justify-content: space-between; align-items: center;"> |
| 633 |
<h3 class="mxch-card-title"> |
| 634 |
<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> |
| 635 |
<?php esc_html_e('Debug Log', 'mxchat'); ?> |
| 636 |
</h3> |
| 637 |
<div style="display: flex; gap: 8px; align-items: center;"> |
| 638 |
<span id="mxchat-log-count" class="mxch-badge" style="display: none;"></span> |
| 639 |
<button type="button" class="mxch-btn mxch-btn-secondary mxch-btn-sm" id="mxchat-refresh-log"> |
| 640 |
<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> |
| 641 |
<?php esc_html_e('Refresh', 'mxchat'); ?> |
| 642 |
</button> |
| 643 |
<button type="button" class="mxch-btn mxch-btn-secondary mxch-btn-sm" id="mxchat-clear-log"> |
| 644 |
<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> |
| 645 |
<?php esc_html_e('Clear', 'mxchat'); ?> |
| 646 |
</button> |
| 647 |
</div> |
| 648 |
</div> |
| 649 |
<div class="mxch-card-body"> |
| 650 |
<div id="mxchat-debug-log" class="mxchat-debug-log-viewer"> |
| 651 |
<div class="mxchat-debug-log-empty"> |
| 652 |
<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> |
| 653 |
<p><?php esc_html_e('No log entries yet. Enable debug mode to start logging.', 'mxchat'); ?></p> |
| 654 |
</div> |
| 655 |
</div> |
| 656 |
</div> |
| 657 |
</div> |
| 658 |
|
| 659 |
<!-- Settings Tools Card --> |
| 660 |
<div class="mxch-card"> |
| 661 |
<div class="mxch-card-header"> |
| 662 |
<h3 class="mxch-card-title"> |
| 663 |
<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> |
| 664 |
<?php esc_html_e('Settings Tools', 'mxchat'); ?> |
| 665 |
</h3> |
| 666 |
</div> |
| 667 |
<div class="mxch-card-body"> |
| 668 |
<div class="mxch-tools-grid"> |
| 669 |
<!-- Export Settings --> |
| 670 |
<div class="mxch-tool-item"> |
| 671 |
<div class="mxch-tool-icon"> |
| 672 |
<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> |
| 673 |
</div> |
| 674 |
<div class="mxch-tool-content"> |
| 675 |
<h4><?php esc_html_e('Export Settings', 'mxchat'); ?></h4> |
| 676 |
<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> |
| 677 |
<button type="button" class="mxch-btn mxch-btn-secondary" id="mxchat-export-settings"> |
| 678 |
<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> |
| 679 |
<?php esc_html_e('Export Settings', 'mxchat'); ?> |
| 680 |
</button> |
| 681 |
</div> |
| 682 |
</div> |
| 683 |
|
| 684 |
<!-- Reset All Settings --> |
| 685 |
<div class="mxch-tool-item mxch-tool-item-danger"> |
| 686 |
<div class="mxch-tool-icon"> |
| 687 |
<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> |
| 688 |
</div> |
| 689 |
<div class="mxch-tool-content"> |
| 690 |
<h4><?php esc_html_e('Reset All Settings', 'mxchat'); ?></h4> |
| 691 |
<p><?php esc_html_e('Reset all MxChat settings to their default values. This action cannot be undone.', 'mxchat'); ?></p> |
| 692 |
<button type="button" class="mxch-btn mxch-btn-danger" id="mxchat-reset-settings"> |
| 693 |
<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> |
| 694 |
<?php esc_html_e('Reset All Settings', 'mxchat'); ?> |
| 695 |
</button> |
| 696 |
</div> |
| 697 |
</div> |
| 698 |
</div> |
| 699 |
</div> |
| 700 |
</div> |
| 701 |
|
| 702 |
<!-- Reset Confirmation Modal --> |
| 703 |
<div id="mxchat-reset-modal" class="mxch-modal" style="display: none;"> |
| 704 |
<div class="mxch-modal-backdrop"></div> |
| 705 |
<div class="mxch-modal-content"> |
| 706 |
<div class="mxch-modal-header"> |
| 707 |
<h3><?php esc_html_e('Reset All Settings', 'mxchat'); ?></h3> |
| 708 |
<button type="button" class="mxch-modal-close" id="mxchat-reset-modal-close">×</button> |
| 709 |
</div> |
| 710 |
<div class="mxch-modal-body"> |
| 711 |
<div class="mxch-notice mxch-notice-warning"> |
| 712 |
<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> |
| 713 |
<div> |
| 714 |
<strong><?php esc_html_e('Warning: This action cannot be undone!', 'mxchat'); ?></strong> |
| 715 |
<p><?php esc_html_e('All your MxChat settings including API keys, customizations, and configurations will be permanently deleted.', 'mxchat'); ?></p> |
| 716 |
</div> |
| 717 |
</div> |
| 718 |
<div class="mxch-field" style="margin-top: 20px;"> |
| 719 |
<label class="mxch-field-label"><?php esc_html_e('Type RESET to confirm:', 'mxchat'); ?></label> |
| 720 |
<input type="text" id="mxchat-reset-confirmation" class="mxch-input" placeholder="RESET" autocomplete="off"> |
| 721 |
</div> |
| 722 |
</div> |
| 723 |
<div class="mxch-modal-footer"> |
| 724 |
<button type="button" class="mxch-btn mxch-btn-secondary" id="mxchat-reset-cancel"><?php esc_html_e('Cancel', 'mxchat'); ?></button> |
| 725 |
<button type="button" class="mxch-btn mxch-btn-danger" id="mxchat-reset-confirm" disabled><?php esc_html_e('Reset All Settings', 'mxchat'); ?></button> |
| 726 |
</div> |
| 727 |
</div> |
| 728 |
</div> |
| 729 |
</div> |
| 730 |
|
| 731 |
<!-- ======================================== |
| 732 |
INTEGRATIONS - TOOLBAR |
| 733 |
======================================== --> |
| 734 |
<div id="integrations-toolbar" class="mxch-section"> |
| 735 |
<div class="mxch-content-header"> |
| 736 |
<h1 class="mxch-content-title"><?php esc_html_e('Toolbar Settings', 'mxchat'); ?></h1> |
| 737 |
<p class="mxch-content-subtitle"><?php esc_html_e('Configure the chat toolbar and document upload features.', 'mxchat'); ?></p> |
| 738 |
</div> |
| 739 |
|
| 740 |
<div class="mxch-card"> |
| 741 |
<div class="mxch-card-body mxchat-autosave-section"> |
| 742 |
<table class="form-table"> |
| 743 |
<?php do_settings_fields('mxchat-embed', 'mxchat_pdf_intent_section'); ?> |
| 744 |
</table> |
| 745 |
</div> |
| 746 |
</div> |
| 747 |
</div> |
| 748 |
|
| 749 |
<!-- ======================================== |
| 750 |
INTEGRATIONS - LOOPS |
| 751 |
======================================== --> |
| 752 |
<div id="integrations-loops" class="mxch-section"> |
| 753 |
<div class="mxch-content-header"> |
| 754 |
<h1 class="mxch-content-title"><?php esc_html_e('Loops Integration', 'mxchat'); ?></h1> |
| 755 |
<p class="mxch-content-subtitle"><?php esc_html_e('Configure email capture with Loops for mailing list growth.', 'mxchat'); ?></p> |
| 756 |
</div> |
| 757 |
|
| 758 |
<div class="mxch-card"> |
| 759 |
<div class="mxch-card-body mxchat-autosave-section"> |
| 760 |
<table class="form-table"> |
| 761 |
<?php do_settings_fields('mxchat-embed', 'mxchat_loops_section'); ?> |
| 762 |
</table> |
| 763 |
</div> |
| 764 |
</div> |
| 765 |
</div> |
| 766 |
|
| 767 |
<!-- ======================================== |
| 768 |
INTEGRATIONS - BRAVE SEARCH |
| 769 |
======================================== --> |
| 770 |
<div id="integrations-brave" class="mxch-section"> |
| 771 |
<div class="mxch-content-header"> |
| 772 |
<h1 class="mxch-content-title"><?php esc_html_e('Brave Search', 'mxchat'); ?></h1> |
| 773 |
<p class="mxch-content-subtitle"><?php esc_html_e('Configure Brave Search API for web search capabilities.', 'mxchat'); ?></p> |
| 774 |
</div> |
| 775 |
|
| 776 |
<div class="mxch-card"> |
| 777 |
<div class="mxch-card-body mxchat-autosave-section"> |
| 778 |
<table class="form-table"> |
| 779 |
<?php do_settings_fields('mxchat-embed', 'mxchat_brave_section'); ?> |
| 780 |
</table> |
| 781 |
</div> |
| 782 |
</div> |
| 783 |
</div> |
| 784 |
|
| 785 |
<!-- ======================================== |
| 786 |
INTEGRATIONS - SLACK |
| 787 |
======================================== --> |
| 788 |
<div id="integrations-slack" class="mxch-section"> |
| 789 |
<div class="mxch-content-header"> |
| 790 |
<h1 class="mxch-content-title"><?php esc_html_e('Slack', 'mxchat'); ?></h1> |
| 791 |
<p class="mxch-content-subtitle"><?php esc_html_e('Connect your chatbot to Slack for live human support.', 'mxchat'); ?></p> |
| 792 |
</div> |
| 793 |
|
| 794 |
<div class="mxch-notice mxch-notice-info" style="margin-bottom: 24px;"> |
| 795 |
<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> |
| 796 |
<div> |
| 797 |
<?php printf( |
| 798 |
esc_html__('Visit our %s for setup instructions.', 'mxchat'), |
| 799 |
'<a href="https://mxchat.ai/documentation/#slack_integration" target="_blank">' . esc_html__('documentation page', 'mxchat') . '</a>' |
| 800 |
); ?> |
| 801 |
</div> |
| 802 |
</div> |
| 803 |
|
| 804 |
<div class="mxch-card"> |
| 805 |
<div class="mxch-card-body mxchat-autosave-section"> |
| 806 |
<table class="form-table"> |
| 807 |
<?php do_settings_fields('mxchat-embed', 'mxchat_live_agent_section'); ?> |
| 808 |
</table> |
| 809 |
</div> |
| 810 |
</div> |
| 811 |
|
| 812 |
<div class="mxch-card" style="margin-top: 24px;"> |
| 813 |
<div class="mxch-card-header"> |
| 814 |
<h3 class="mxch-card-title"> |
| 815 |
<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> |
| 816 |
<?php esc_html_e('Test Connection', 'mxchat'); ?> |
| 817 |
</h3> |
| 818 |
</div> |
| 819 |
<div class="mxch-card-body"> |
| 820 |
<p class="mxch-field-description" style="margin-bottom: 16px;"> |
| 821 |
<?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'); ?> |
| 822 |
</p> |
| 823 |
<button type="button" id="mxchat-test-slack-connection" class="mxch-btn mxch-btn-secondary"> |
| 824 |
<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> |
| 825 |
<?php esc_html_e('Test Slack Connection', 'mxchat'); ?> |
| 826 |
</button> |
| 827 |
<div id="mxchat-slack-test-result" style="margin-top: 16px; display: none;"></div> |
| 828 |
</div> |
| 829 |
</div> |
| 830 |
|
| 831 |
<div class="mxch-card" style="margin-top: 24px;"> |
| 832 |
<div class="mxch-card-header"> |
| 833 |
<h3 class="mxch-card-title"> |
| 834 |
<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> |
| 835 |
<?php esc_html_e('Required OAuth Scopes', 'mxchat'); ?> |
| 836 |
</h3> |
| 837 |
</div> |
| 838 |
<div class="mxch-card-body"> |
| 839 |
<p class="mxch-field-description" style="margin-bottom: 12px;"> |
| 840 |
<?php esc_html_e('Your Slack app needs these Bot Token Scopes (OAuth & Permissions > Scopes):', 'mxchat'); ?> |
| 841 |
</p> |
| 842 |
<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;"> |
| 843 |
<code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">channels:manage</code> |
| 844 |
<code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">channels:read</code> |
| 845 |
<code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">chat:write</code> |
| 846 |
<code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">chat:write.public</code> |
| 847 |
<code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">groups:write</code> |
| 848 |
<code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px;">users:read</code> |
| 849 |
</div> |
| 850 |
<p class="mxch-field-description" style="margin-top: 12px;"> |
| 851 |
<?php esc_html_e('After adding scopes, reinstall the app to your workspace.', 'mxchat'); ?> |
| 852 |
</p> |
| 853 |
</div> |
| 854 |
</div> |
| 855 |
</div> |
| 856 |
|
| 857 |
<!-- ======================================== |
| 858 |
INTEGRATIONS - TELEGRAM |
| 859 |
======================================== --> |
| 860 |
<div id="integrations-telegram" class="mxch-section"> |
| 861 |
<div class="mxch-content-header"> |
| 862 |
<h1 class="mxch-content-title"><?php esc_html_e('Telegram', 'mxchat'); ?></h1> |
| 863 |
<p class="mxch-content-subtitle"><?php esc_html_e('Connect your chatbot to Telegram for live human support.', 'mxchat'); ?></p> |
| 864 |
</div> |
| 865 |
|
| 866 |
<div class="mxch-notice mxch-notice-info" style="margin-bottom: 24px;"> |
| 867 |
<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> |
| 868 |
<div> |
| 869 |
<?php esc_html_e('Telegram Live Agent requires a Telegram bot and a supergroup with forum topics enabled.', 'mxchat'); ?> |
| 870 |
<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> |
| 871 |
</div> |
| 872 |
</div> |
| 873 |
|
| 874 |
<div class="mxch-card"> |
| 875 |
<div class="mxch-card-body mxchat-autosave-section"> |
| 876 |
<table class="form-table"> |
| 877 |
<?php do_settings_fields('mxchat-embed', 'mxchat_telegram_section'); ?> |
| 878 |
</table> |
| 879 |
</div> |
| 880 |
</div> |
| 881 |
|
| 882 |
<div class="mxch-card" style="margin-top: 24px;"> |
| 883 |
<div class="mxch-card-header"> |
| 884 |
<h3 class="mxch-card-title"> |
| 885 |
<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> |
| 886 |
<?php esc_html_e('Webhook Setup', 'mxchat'); ?> |
| 887 |
</h3> |
| 888 |
</div> |
| 889 |
<div class="mxch-card-body"> |
| 890 |
<?php |
| 891 |
$telegram_bot_token = $options['telegram_bot_token'] ?? ''; |
| 892 |
$telegram_webhook_secret = $options['telegram_webhook_secret'] ?? ''; |
| 893 |
$webhook_url = rest_url('mxchat/v1/telegram-webhook'); |
| 894 |
?> |
| 895 |
|
| 896 |
<p class="mxch-field-description" style="margin-bottom: 8px;"> |
| 897 |
<strong><?php esc_html_e('Your Webhook URL:', 'mxchat'); ?></strong> |
| 898 |
</p> |
| 899 |
<div class="mxch-webhook-url-display" style="margin-bottom: 20px;"> |
| 900 |
<code id="mxch-telegram-webhook-url"><?php echo esc_url($webhook_url); ?></code> |
| 901 |
<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);"> |
| 902 |
<?php esc_html_e('Copy', 'mxchat'); ?> |
| 903 |
</button> |
| 904 |
</div> |
| 905 |
|
| 906 |
<?php if (!empty($telegram_bot_token)) : ?> |
| 907 |
<p class="mxch-field-description" style="margin-bottom: 8px;"> |
| 908 |
<strong><?php esc_html_e('Register Webhook URL:', 'mxchat'); ?></strong><br> |
| 909 |
<?php esc_html_e('Copy and paste this URL into your browser to register the webhook with Telegram:', 'mxchat'); ?> |
| 910 |
</p> |
| 911 |
<?php |
| 912 |
$registration_url = 'https://api.telegram.org/bot' . $telegram_bot_token . '/setWebhook?url=' . urlencode($webhook_url); |
| 913 |
if (!empty($telegram_webhook_secret)) { |
| 914 |
$registration_url .= '&secret_token=' . urlencode($telegram_webhook_secret); |
| 915 |
} |
| 916 |
?> |
| 917 |
<div class="mxch-webhook-url-display" style="margin-bottom: 12px;"> |
| 918 |
<code id="mxch-telegram-registration-url" style="word-break: break-all; font-size: 12px;"><?php echo esc_url($registration_url); ?></code> |
| 919 |
<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);"> |
| 920 |
<?php esc_html_e('Copy', 'mxchat'); ?> |
| 921 |
</button> |
| 922 |
</div> |
| 923 |
<p class="mxch-field-description" style="color: #22c55e;"> |
| 924 |
<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> |
| 925 |
<?php esc_html_e('You should see {"ok":true,"result":true,"description":"Webhook was set"} after visiting the URL.', 'mxchat'); ?> |
| 926 |
</p> |
| 927 |
<?php else : ?> |
| 928 |
<p class="mxch-field-description" style="color: #f59e0b;"> |
| 929 |
<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> |
| 930 |
<?php esc_html_e('Enter your Bot Token above and save to generate the registration URL.', 'mxchat'); ?> |
| 931 |
</p> |
| 932 |
<?php endif; ?> |
| 933 |
</div> |
| 934 |
</div> |
| 935 |
</div> |
| 936 |
|
| 937 |
<!-- ======================================== |
| 938 |
TUTORIALS |
| 939 |
======================================== --> |
| 940 |
<div id="tutorials" class="mxch-section"> |
| 941 |
<div class="mxch-content-header"> |
| 942 |
<h1 class="mxch-content-title"><?php esc_html_e('Video Tutorials', 'mxchat'); ?></h1> |
| 943 |
<p class="mxch-content-subtitle"><?php esc_html_e('Learn how to get the most out of MxChat with our video guides.', 'mxchat'); ?></p> |
| 944 |
</div> |
| 945 |
|
| 946 |
<div class="mxch-card" style="margin-bottom: 24px;"> |
| 947 |
<div class="mxch-card-body"> |
| 948 |
<div style="display: flex; align-items: flex-start; gap: 16px;"> |
| 949 |
<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> |
| 950 |
<div> |
| 951 |
<h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 600;"><?php esc_html_e('Need Help?', 'mxchat'); ?></h3> |
| 952 |
<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> |
| 953 |
<a href="https://wordpress.org/support/plugin/mxchat-basic/" target="_blank" class="mxch-btn mxch-btn-secondary mxch-btn-sm"> |
| 954 |
<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> |
| 955 |
<?php esc_html_e('Submit Support Ticket', 'mxchat'); ?> |
| 956 |
</a> |
| 957 |
</div> |
| 958 |
</div> |
| 959 |
</div> |
| 960 |
</div> |
| 961 |
|
| 962 |
<div class="mxch-tutorials-grid"> |
| 963 |
<?php |
| 964 |
$tutorials = array( |
| 965 |
array( |
| 966 |
'title' => __('Quick Setup with MxChat', 'mxchat'), |
| 967 |
'description' => __('Learn how to quickly setup and understand how your chatbot works.', 'mxchat'), |
| 968 |
'url' => 'https://www.youtube.com/watch?v=3BqoiyWaQiM&t' |
| 969 |
), |
| 970 |
array( |
| 971 |
'title' => __('AI Content Generation', 'mxchat'), |
| 972 |
'description' => __('Generate full blog posts and landing pages with AI—from prompt to publish in minutes.', 'mxchat'), |
| 973 |
'url' => 'https://www.youtube.com/watch?v=n8TeEeHpxs4' |
| 974 |
), |
| 975 |
array( |
| 976 |
'title' => __('Chat With Your GSC Data', 'mxchat'), |
| 977 |
'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'), |
| 978 |
'url' => 'https://www.youtube.com/watch?v=ytgMou_7SZA&t=2s' |
| 979 |
), |
| 980 |
array( |
| 981 |
'title' => __('AI Theme Generator', 'mxchat'), |
| 982 |
'description' => __('Learn how to instantly restyle your chatbot using plain English prompts with real-time previews.', 'mxchat'), |
| 983 |
'url' => 'https://www.youtube.com/watch?v=rSQDW2qbtRU&t' |
| 984 |
), |
| 985 |
array( |
| 986 |
'title' => __('MxChat Forms', 'mxchat'), |
| 987 |
'description' => __('Create and manage smart forms that automatically trigger during chat conversations.', 'mxchat'), |
| 988 |
'url' => 'https://www.youtube.com/watch?v=3MrWy5dRalA' |
| 989 |
), |
| 990 |
array( |
| 991 |
'title' => __('Admin Assistant Add-on', 'mxchat'), |
| 992 |
'description' => __('Bring a ChatGPT-like experience directly inside your WordPress dashboard.', 'mxchat'), |
| 993 |
'url' => 'https://youtu.be/AdEA1k-UCFM' |
| 994 |
), |
| 995 |
array( |
| 996 |
'title' => __('Chat Themes', 'mxchat'), |
| 997 |
'description' => __('Customize appearance with real-time previews to match your brand.', 'mxchat'), |
| 998 |
'url' => 'https://youtu.be/MfbB9mZi6ag' |
| 999 |
), |
| 1000 |
array( |
| 1001 |
'title' => __('WooCommerce Integration', 'mxchat'), |
| 1002 |
'description' => __('Provide product recommendations and shopping assistance to customers.', 'mxchat'), |
| 1003 |
'url' => 'https://www.youtube.com/watch?v=WsqAppHRGdA' |
| 1004 |
), |
| 1005 |
array( |
| 1006 |
'title' => __('Knowledge Base Setup', 'mxchat'), |
| 1007 |
'description' => __('Set up your knowledge base using PDFs, sitemaps, and manual entries.', 'mxchat'), |
| 1008 |
'url' => 'https://www.youtube.com/watch?v=8Ztjs66-VTo' |
| 1009 |
), |
| 1010 |
array( |
| 1011 |
'title' => __('Document Chat', 'mxchat'), |
| 1012 |
'description' => __('Chat with PDF and Word documents for enhanced document analysis.', 'mxchat'), |
| 1013 |
'url' => 'https://www.youtube.com/watch?v=j_c45WWCTG0' |
| 1014 |
), |
| 1015 |
array( |
| 1016 |
'title' => __('Perplexity Integration', 'mxchat'), |
| 1017 |
'description' => __('Enable real-time web search capabilities for your chatbot.', 'mxchat'), |
| 1018 |
'url' => 'https://youtu.be/wpKkbt24-bo' |
| 1019 |
), |
| 1020 |
array( |
| 1021 |
'title' => __('Brave Search Intent', 'mxchat'), |
| 1022 |
'description' => __('Leverage Brave Search for improved query understanding.', 'mxchat'), |
| 1023 |
'url' => 'https://www.youtube.com/watch?v=7vDL5H7vToc' |
| 1024 |
), |
| 1025 |
array( |
| 1026 |
'title' => __('Loops Email Capture', 'mxchat'), |
| 1027 |
'description' => __('Set up email capture with Loops to grow your mailing list.', 'mxchat'), |
| 1028 |
'url' => 'https://www.youtube.com/watch?v=CNgm5TYDyTc' |
| 1029 |
), |
| 1030 |
array( |
| 1031 |
'title' => __('AI Agent Testing', 'mxchat'), |
| 1032 |
'description' => __('Evaluate and improve your chatbot\'s performance and accuracy.', 'mxchat'), |
| 1033 |
'url' => 'https://www.youtube.com/watch?v=A0jowbpyX54' |
| 1034 |
), |
| 1035 |
); |
| 1036 |
|
| 1037 |
foreach ($tutorials as $tutorial): ?> |
| 1038 |
<div class="mxch-tutorial-card"> |
| 1039 |
<div class="mxch-tutorial-content"> |
| 1040 |
<h3 class="mxch-tutorial-title"><?php echo esc_html($tutorial['title']); ?></h3> |
| 1041 |
<p class="mxch-tutorial-description"><?php echo esc_html($tutorial['description']); ?></p> |
| 1042 |
<a href="<?php echo esc_url($tutorial['url']); ?>" target="_blank" rel="noopener" class="mxch-tutorial-link"> |
| 1043 |
<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> |
| 1044 |
<?php esc_html_e('Watch Tutorial', 'mxchat'); ?> |
| 1045 |
</a> |
| 1046 |
</div> |
| 1047 |
</div> |
| 1048 |
<?php endforeach; ?> |
| 1049 |
</div> |
| 1050 |
</div> |
| 1051 |
|
| 1052 |
<!-- ===================================================== |
| 1053 |
TESTING SECTION |
| 1054 |
===================================================== --> |
| 1055 |
<div id="testing" class="mxch-section"> |
| 1056 |
<div class="mxch-content-header"> |
| 1057 |
<h1 class="mxch-content-title"><?php esc_html_e('Testing', 'mxchat'); ?></h1> |
| 1058 |
<p class="mxch-content-subtitle"><?php esc_html_e('Test your chatbot and inspect debug data in real time.', 'mxchat'); ?></p> |
| 1059 |
</div> |
| 1060 |
|
| 1061 |
<div class="mxch-testing-layout"> |
| 1062 |
<!-- Left Column: Debug Panel --> |
| 1063 |
<div class="mxch-testing-debug-panel"> |
| 1064 |
<!-- Quick Actions --> |
| 1065 |
<div class="mxch-card"> |
| 1066 |
<div class="mxch-card-body"> |
| 1067 |
<h3 class="mxch-testing-section-title"><?php esc_html_e('Quick Actions', 'mxchat'); ?></h3> |
| 1068 |
<div class="mxch-testing-actions-row"> |
| 1069 |
<button type="button" class="mxch-testing-btn mxch-testing-btn-danger" id="mxch-testing-clear-session"> |
| 1070 |
<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> |
| 1071 |
<?php esc_html_e('Clear Chat Session', 'mxchat'); ?> |
| 1072 |
</button> |
| 1073 |
<button type="button" class="mxch-testing-btn mxch-testing-btn-secondary" id="mxch-testing-clear-debug"> |
| 1074 |
<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> |
| 1075 |
<?php esc_html_e('Clear Debug Log', 'mxchat'); ?> |
| 1076 |
</button> |
| 1077 |
</div> |
| 1078 |
</div> |
| 1079 |
</div> |
| 1080 |
|
| 1081 |
<!-- Last Query Analysis --> |
| 1082 |
<div class="mxch-card"> |
| 1083 |
<div class="mxch-card-body"> |
| 1084 |
<h3 class="mxch-testing-section-title"><?php esc_html_e('Last Query Analysis', 'mxchat'); ?></h3> |
| 1085 |
|
| 1086 |
<div class="mxch-testing-field"> |
| 1087 |
<label><?php esc_html_e('Similarity Threshold', 'mxchat'); ?></label> |
| 1088 |
<span id="mxch-testing-threshold"><?php esc_html_e('Loading...', 'mxchat'); ?></span> |
| 1089 |
</div> |
| 1090 |
|
| 1091 |
<div class="mxch-testing-field"> |
| 1092 |
<label><?php esc_html_e('User Query', 'mxchat'); ?></label> |
| 1093 |
<div id="mxch-testing-last-query" class="mxch-testing-query-display"><?php esc_html_e('Waiting for next query...', 'mxchat'); ?></div> |
| 1094 |
</div> |
| 1095 |
|
| 1096 |
<div class="mxch-testing-field"> |
| 1097 |
<label><?php esc_html_e('Approved URLs for Citations', 'mxchat'); ?></label> |
| 1098 |
<div id="mxch-testing-approved-urls" class="mxch-testing-results"> |
| 1099 |
<div class="mxch-testing-no-data"><?php esc_html_e('No URL data yet', 'mxchat'); ?></div> |
| 1100 |
</div> |
| 1101 |
</div> |
| 1102 |
|
| 1103 |
<div class="mxch-testing-field"> |
| 1104 |
<label><?php esc_html_e('Document Matches', 'mxchat'); ?></label> |
| 1105 |
<div id="mxch-testing-similarity-scores" class="mxch-testing-results"> |
| 1106 |
<div class="mxch-testing-no-data"><?php esc_html_e('No query data yet', 'mxchat'); ?></div> |
| 1107 |
</div> |
| 1108 |
</div> |
| 1109 |
|
| 1110 |
<div class="mxch-testing-field"> |
| 1111 |
<label><?php esc_html_e('Actions Triggered', 'mxchat'); ?></label> |
| 1112 |
<div id="mxch-testing-action-scores" class="mxch-testing-results"> |
| 1113 |
<div class="mxch-testing-no-data"><?php esc_html_e('No action data yet', 'mxchat'); ?></div> |
| 1114 |
</div> |
| 1115 |
</div> |
| 1116 |
</div> |
| 1117 |
</div> |
| 1118 |
|
| 1119 |
<!-- System Information --> |
| 1120 |
<div class="mxch-card"> |
| 1121 |
<div class="mxch-card-body"> |
| 1122 |
<h3 class="mxch-testing-section-title"><?php esc_html_e('System Information', 'mxchat'); ?></h3> |
| 1123 |
|
| 1124 |
<div class="mxch-testing-field"> |
| 1125 |
<label><?php esc_html_e('System Prompt', 'mxchat'); ?></label> |
| 1126 |
<div id="mxch-testing-system-prompt" class="mxch-testing-system-prompt"><?php esc_html_e('Loading...', 'mxchat'); ?></div> |
| 1127 |
</div> |
| 1128 |
|
| 1129 |
<div class="mxch-testing-field"> |
| 1130 |
<label><?php esc_html_e('Knowledge Base', 'mxchat'); ?></label> |
| 1131 |
<span id="mxch-testing-kb-status"><?php esc_html_e('Checking...', 'mxchat'); ?></span> |
| 1132 |
</div> |
| 1133 |
</div> |
| 1134 |
</div> |
| 1135 |
|
| 1136 |
<!-- Debug Log --> |
| 1137 |
<div class="mxch-card"> |
| 1138 |
<div class="mxch-card-body"> |
| 1139 |
<h3 class="mxch-testing-section-title"><?php esc_html_e('Debug Log', 'mxchat'); ?></h3> |
| 1140 |
<div id="mxch-testing-debug-console" class="mxch-testing-debug-console"> |
| 1141 |
<div class="mxch-testing-debug-entry"><?php esc_html_e('Debug panel ready - send a message to begin...', 'mxchat'); ?></div> |
| 1142 |
</div> |
| 1143 |
</div> |
| 1144 |
</div> |
| 1145 |
</div> |
| 1146 |
|
| 1147 |
<!-- Right Column: Chatbot Replica --> |
| 1148 |
<div class="mxch-testing-chatbot-column"> |
| 1149 |
<div class="mxch-testing-chatbot-scope"> |
| 1150 |
<?php |
| 1151 |
// Render the chatbot inline for testing |
| 1152 |
echo do_shortcode('[mxchat_chatbot floating="no" bot_id="testing"]'); |
| 1153 |
?> |
| 1154 |
</div> |
| 1155 |
</div> |
| 1156 |
</div> |
| 1157 |
</div> |
| 1158 |
|
| 1159 |
</main> |
| 1160 |
</div> |
| 1161 |
|
| 1162 |
<script> |
| 1163 |
document.addEventListener('DOMContentLoaded', function() { |
| 1164 |
// Sidebar navigation |
| 1165 |
const navLinks = document.querySelectorAll('.mxch-nav-link, .mxch-nav-sub-link'); |
| 1166 |
const sections = document.querySelectorAll('.mxch-section'); |
| 1167 |
const navItems = document.querySelectorAll('.mxch-nav-item'); |
| 1168 |
|
| 1169 |
function showSection(target) { |
| 1170 |
// Show target section |
| 1171 |
sections.forEach(section => { |
| 1172 |
section.classList.remove('active'); |
| 1173 |
if (section.id === target) { |
| 1174 |
section.classList.add('active'); |
| 1175 |
} |
| 1176 |
}); |
| 1177 |
|
| 1178 |
// Scroll content area to top |
| 1179 |
const contentArea = document.querySelector('.mxch-content'); |
| 1180 |
if (contentArea) { |
| 1181 |
contentArea.scrollTop = 0; |
| 1182 |
} |
| 1183 |
} |
| 1184 |
|
| 1185 |
function setActiveNav(clickedLink) { |
| 1186 |
// Remove active from all links |
| 1187 |
navLinks.forEach(l => l.classList.remove('active')); |
| 1188 |
|
| 1189 |
// Add active to clicked link |
| 1190 |
clickedLink.classList.add('active'); |
| 1191 |
|
| 1192 |
// If clicking a sub-link, also highlight parent |
| 1193 |
if (clickedLink.classList.contains('mxch-nav-sub-link')) { |
| 1194 |
const parent = clickedLink.closest('.mxch-nav-item'); |
| 1195 |
if (parent) { |
| 1196 |
parent.querySelector('.mxch-nav-link').classList.add('active'); |
| 1197 |
} |
| 1198 |
} |
| 1199 |
} |
| 1200 |
|
| 1201 |
navLinks.forEach(link => { |
| 1202 |
link.addEventListener('click', function(e) { |
| 1203 |
e.preventDefault(); |
| 1204 |
e.stopPropagation(); |
| 1205 |
const target = this.dataset.target; |
| 1206 |
const parentItem = this.closest('.mxch-nav-item'); |
| 1207 |
const hasSubmenu = parentItem && parentItem.querySelector('.mxch-nav-sub'); |
| 1208 |
|
| 1209 |
// If this is a parent nav link WITH children (expandable menu) |
| 1210 |
if (this.classList.contains('mxch-nav-link') && hasSubmenu) { |
| 1211 |
const wasExpanded = parentItem.classList.contains('expanded'); |
| 1212 |
|
| 1213 |
// Collapse all other expandable items |
| 1214 |
navItems.forEach(item => { |
| 1215 |
if (item !== parentItem && item.querySelector('.mxch-nav-sub')) { |
| 1216 |
item.classList.remove('expanded'); |
| 1217 |
} |
| 1218 |
}); |
| 1219 |
|
| 1220 |
// Toggle this item |
| 1221 |
parentItem.classList.toggle('expanded'); |
| 1222 |
|
| 1223 |
// If expanding, show the first sub-item's content and mark it active |
| 1224 |
if (!wasExpanded) { |
| 1225 |
const firstSubLink = parentItem.querySelector('.mxch-nav-sub-link'); |
| 1226 |
if (firstSubLink) { |
| 1227 |
const firstTarget = firstSubLink.dataset.target; |
| 1228 |
showSection(firstTarget); |
| 1229 |
setActiveNav(firstSubLink); |
| 1230 |
// Also mark parent as active |
| 1231 |
this.classList.add('active'); |
| 1232 |
history.replaceState(null, null, '#' + firstTarget); |
| 1233 |
} |
| 1234 |
} |
| 1235 |
} |
| 1236 |
// If this is a nav link WITHOUT children (like API Keys, Tutorials) |
| 1237 |
else if (this.classList.contains('mxch-nav-link') && !hasSubmenu && target) { |
| 1238 |
// Collapse all expandable items |
| 1239 |
navItems.forEach(item => { |
| 1240 |
if (item.querySelector('.mxch-nav-sub')) { |
| 1241 |
item.classList.remove('expanded'); |
| 1242 |
} |
| 1243 |
}); |
| 1244 |
|
| 1245 |
// Show the section |
| 1246 |
showSection(target); |
| 1247 |
setActiveNav(this); |
| 1248 |
history.replaceState(null, null, '#' + target); |
| 1249 |
} |
| 1250 |
// If this is a sub-link |
| 1251 |
else if (this.classList.contains('mxch-nav-sub-link') && target) { |
| 1252 |
// Ensure parent stays expanded |
| 1253 |
if (parentItem) { |
| 1254 |
parentItem.classList.add('expanded'); |
| 1255 |
} |
| 1256 |
showSection(target); |
| 1257 |
setActiveNav(this); |
| 1258 |
history.replaceState(null, null, '#' + target); |
| 1259 |
} |
| 1260 |
}); |
| 1261 |
}); |
| 1262 |
|
| 1263 |
// Handle initial hash |
| 1264 |
const hash = window.location.hash.slice(1); |
| 1265 |
if (hash) { |
| 1266 |
const targetLink = document.querySelector('[data-target="' + hash + '"]'); |
| 1267 |
if (targetLink) { |
| 1268 |
// Expand parent if it's a sub-link |
| 1269 |
const parentItem = targetLink.closest('.mxch-nav-item'); |
| 1270 |
if (parentItem && targetLink.classList.contains('mxch-nav-sub-link')) { |
| 1271 |
parentItem.classList.add('expanded'); |
| 1272 |
} |
| 1273 |
showSection(hash); |
| 1274 |
setActiveNav(targetLink); |
| 1275 |
} |
| 1276 |
} |
| 1277 |
|
| 1278 |
// Rate limit accordion |
| 1279 |
const rateLimitHeaders = document.querySelectorAll('.mxch-rate-limit-header'); |
| 1280 |
rateLimitHeaders.forEach(header => { |
| 1281 |
header.addEventListener('click', function(e) { |
| 1282 |
e.preventDefault(); |
| 1283 |
e.stopPropagation(); |
| 1284 |
const item = this.closest('.mxch-rate-limit-item'); |
| 1285 |
item.classList.toggle('expanded'); |
| 1286 |
}); |
| 1287 |
}); |
| 1288 |
|
| 1289 |
// ===================================================== |
| 1290 |
// Mobile Menu Functionality |
| 1291 |
// ===================================================== |
| 1292 |
const mobileMenuBtn = document.querySelector('.mxch-mobile-menu-btn'); |
| 1293 |
const mobileMenuClose = document.querySelector('.mxch-mobile-menu-close'); |
| 1294 |
const mobileMenu = document.querySelector('.mxch-mobile-menu'); |
| 1295 |
const mobileOverlay = document.querySelector('.mxch-mobile-overlay'); |
| 1296 |
const mobileNavLinks = document.querySelectorAll('.mxch-mobile-nav-link, .mxch-mobile-nav-sub-link'); |
| 1297 |
|
| 1298 |
function openMobileMenu() { |
| 1299 |
mobileMenu.classList.add('open'); |
| 1300 |
mobileOverlay.classList.add('open'); |
| 1301 |
document.body.style.overflow = 'hidden'; |
| 1302 |
} |
| 1303 |
|
| 1304 |
function closeMobileMenu() { |
| 1305 |
mobileMenu.classList.remove('open'); |
| 1306 |
mobileOverlay.classList.remove('open'); |
| 1307 |
document.body.style.overflow = ''; |
| 1308 |
} |
| 1309 |
|
| 1310 |
if (mobileMenuBtn) { |
| 1311 |
mobileMenuBtn.addEventListener('click', openMobileMenu); |
| 1312 |
} |
| 1313 |
|
| 1314 |
if (mobileMenuClose) { |
| 1315 |
mobileMenuClose.addEventListener('click', closeMobileMenu); |
| 1316 |
} |
| 1317 |
|
| 1318 |
if (mobileOverlay) { |
| 1319 |
mobileOverlay.addEventListener('click', closeMobileMenu); |
| 1320 |
} |
| 1321 |
|
| 1322 |
// Mobile navigation links |
| 1323 |
mobileNavLinks.forEach(link => { |
| 1324 |
link.addEventListener('click', function(e) { |
| 1325 |
e.preventDefault(); |
| 1326 |
e.stopPropagation(); |
| 1327 |
|
| 1328 |
const target = this.dataset.target; |
| 1329 |
const parentId = this.dataset.parent; |
| 1330 |
|
| 1331 |
// If this is an expandable parent link |
| 1332 |
if (parentId && !target) { |
| 1333 |
const subNav = document.querySelector('.mxch-mobile-nav-sub[data-parent="' + parentId + '"]'); |
| 1334 |
if (subNav) { |
| 1335 |
const isExpanded = subNav.classList.contains('expanded'); |
| 1336 |
// Collapse all sub navs |
| 1337 |
document.querySelectorAll('.mxch-mobile-nav-sub').forEach(nav => { |
| 1338 |
nav.classList.remove('expanded'); |
| 1339 |
}); |
| 1340 |
document.querySelectorAll('.mxch-mobile-nav-link').forEach(l => { |
| 1341 |
l.classList.remove('expanded'); |
| 1342 |
}); |
| 1343 |
// Toggle this one |
| 1344 |
if (!isExpanded) { |
| 1345 |
subNav.classList.add('expanded'); |
| 1346 |
this.classList.add('expanded'); |
| 1347 |
} |
| 1348 |
} |
| 1349 |
} |
| 1350 |
// If this is a direct link or sub-link with a target |
| 1351 |
else if (target) { |
| 1352 |
// Update mobile nav active state |
| 1353 |
document.querySelectorAll('.mxch-mobile-nav-link, .mxch-mobile-nav-sub-link').forEach(l => { |
| 1354 |
l.classList.remove('active'); |
| 1355 |
}); |
| 1356 |
this.classList.add('active'); |
| 1357 |
|
| 1358 |
// Also update desktop sidebar nav |
| 1359 |
const desktopLink = document.querySelector('.mxch-sidebar [data-target="' + target + '"]'); |
| 1360 |
if (desktopLink) { |
| 1361 |
setActiveNav(desktopLink); |
| 1362 |
const parentItem = desktopLink.closest('.mxch-nav-item'); |
| 1363 |
if (parentItem && desktopLink.classList.contains('mxch-nav-sub-link')) { |
| 1364 |
parentItem.classList.add('expanded'); |
| 1365 |
} |
| 1366 |
} |
| 1367 |
|
| 1368 |
// Show section and close menu |
| 1369 |
showSection(target); |
| 1370 |
history.replaceState(null, null, '#' + target); |
| 1371 |
closeMobileMenu(); |
| 1372 |
} |
| 1373 |
}); |
| 1374 |
}); |
| 1375 |
|
| 1376 |
// Close mobile menu on escape key |
| 1377 |
document.addEventListener('keydown', function(e) { |
| 1378 |
if (e.key === 'Escape' && mobileMenu && mobileMenu.classList.contains('open')) { |
| 1379 |
closeMobileMenu(); |
| 1380 |
} |
| 1381 |
}); |
| 1382 |
}); |
| 1383 |
</script> |
| 1384 |
<?php |
| 1385 |
} |
| 1386 |
|
| 1387 |
/** |
| 1388 |
* Helper function to render a field with consistent wrapper |
| 1389 |
*/ |
| 1390 |
function mxchat_render_field_wrapper($id, $label, $callback, $description = '') { |
| 1391 |
?> |
| 1392 |
<div class="mxch-field"> |
| 1393 |
<label class="mxch-field-label"><?php echo esc_html($label); ?></label> |
| 1394 |
<div class="mxch-field-control"> |
| 1395 |
<?php $callback(); ?> |
| 1396 |
</div> |
| 1397 |
<?php if ($description): ?> |
| 1398 |
<p class="mxch-field-description"><?php echo esc_html($description); ?></p> |
| 1399 |
<?php endif; ?> |
| 1400 |
</div> |
| 1401 |
<?php |
| 1402 |
} |
| 1403 |
|
| 1404 |
/** |
| 1405 |
* Render rate limits as collapsible accordion |
| 1406 |
*/ |
| 1407 |
function mxchat_render_rate_limits_accordion($admin_instance) { |
| 1408 |
$all_options = get_option('mxchat_options', []); |
| 1409 |
$rate_limits = array('1', '3', '5', '10', '15', '20', '50', '100', 'unlimited'); |
| 1410 |
$timeframes = array( |
| 1411 |
'hourly' => __('Per Hour', 'mxchat'), |
| 1412 |
'daily' => __('Per Day', 'mxchat'), |
| 1413 |
'weekly' => __('Per Week', 'mxchat'), |
| 1414 |
'monthly' => __('Per Month', 'mxchat') |
| 1415 |
); |
| 1416 |
|
| 1417 |
$roles = wp_roles()->get_names(); |
| 1418 |
$roles['logged_out'] = __('Logged Out Users', 'mxchat'); |
| 1419 |
|
| 1420 |
echo '<div class="mxch-rate-limits">'; |
| 1421 |
|
| 1422 |
foreach ($roles as $role_id => $role_name) { |
| 1423 |
$default_limit = ($role_id === 'logged_out') ? '10' : '100'; |
| 1424 |
$default_timeframe = 'daily'; |
| 1425 |
$default_message = __('Rate limit exceeded. Please try again later.', 'mxchat'); |
| 1426 |
|
| 1427 |
$selected_limit = isset($all_options['rate_limits'][$role_id]['limit']) |
| 1428 |
? $all_options['rate_limits'][$role_id]['limit'] |
| 1429 |
: $default_limit; |
| 1430 |
|
| 1431 |
$selected_timeframe = isset($all_options['rate_limits'][$role_id]['timeframe']) |
| 1432 |
? $all_options['rate_limits'][$role_id]['timeframe'] |
| 1433 |
: $default_timeframe; |
| 1434 |
|
| 1435 |
$custom_message = isset($all_options['rate_limits'][$role_id]['message']) |
| 1436 |
? $all_options['rate_limits'][$role_id]['message'] |
| 1437 |
: $default_message; |
| 1438 |
|
| 1439 |
$timeframe_label = isset($timeframes[$selected_timeframe]) ? $timeframes[$selected_timeframe] : $selected_timeframe; |
| 1440 |
?> |
| 1441 |
<div class="mxch-rate-limit-item"> |
| 1442 |
<div class="mxch-rate-limit-header"> |
| 1443 |
<span class="mxch-rate-limit-role"><?php echo esc_html($role_name); ?></span> |
| 1444 |
<div class="mxch-rate-limit-summary"> |
| 1445 |
<span class="mxch-rate-limit-badge"><?php echo esc_html($selected_limit . ' / ' . $timeframe_label); ?></span> |
| 1446 |
<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> |
| 1447 |
</div> |
| 1448 |
</div> |
| 1449 |
<div class="mxch-rate-limit-body mxchat-autosave-section"> |
| 1450 |
<div class="mxch-rate-limit-controls"> |
| 1451 |
<div class="mxch-field"> |
| 1452 |
<label class="mxch-field-label" for="rate_limits_<?php echo esc_attr($role_id); ?>_limit"><?php esc_html_e('Limit', 'mxchat'); ?></label> |
| 1453 |
<select id="rate_limits_<?php echo esc_attr($role_id); ?>_limit" |
| 1454 |
name="mxchat_options[rate_limits][<?php echo esc_attr($role_id); ?>][limit]" |
| 1455 |
class="mxch-select mxchat-autosave-field"> |
| 1456 |
<?php foreach ($rate_limits as $limit): ?> |
| 1457 |
<option value="<?php echo esc_attr($limit); ?>" <?php selected($selected_limit, $limit); ?>><?php echo esc_html($limit); ?></option> |
| 1458 |
<?php endforeach; ?> |
| 1459 |
</select> |
| 1460 |
</div> |
| 1461 |
<div class="mxch-field"> |
| 1462 |
<label class="mxch-field-label" for="rate_limits_<?php echo esc_attr($role_id); ?>_timeframe"><?php esc_html_e('Timeframe', 'mxchat'); ?></label> |
| 1463 |
<select id="rate_limits_<?php echo esc_attr($role_id); ?>_timeframe" |
| 1464 |
name="mxchat_options[rate_limits][<?php echo esc_attr($role_id); ?>][timeframe]" |
| 1465 |
class="mxch-select mxchat-autosave-field"> |
| 1466 |
<?php foreach ($timeframes as $value => $label): ?> |
| 1467 |
<option value="<?php echo esc_attr($value); ?>" <?php selected($selected_timeframe, $value); ?>><?php echo esc_html($label); ?></option> |
| 1468 |
<?php endforeach; ?> |
| 1469 |
</select> |
| 1470 |
</div> |
| 1471 |
</div> |
| 1472 |
<div class="mxch-field"> |
| 1473 |
<label class="mxch-field-label" for="rate_limits_<?php echo esc_attr($role_id); ?>_message"><?php esc_html_e('Custom Message', 'mxchat'); ?></label> |
| 1474 |
<textarea id="rate_limits_<?php echo esc_attr($role_id); ?>_message" |
| 1475 |
name="mxchat_options[rate_limits][<?php echo esc_attr($role_id); ?>][message]" |
| 1476 |
class="mxch-textarea mxchat-autosave-field" |
| 1477 |
rows="2" |
| 1478 |
placeholder="<?php esc_attr_e('Message shown when rate limit is reached', 'mxchat'); ?>"><?php echo esc_textarea($custom_message); ?></textarea> |
| 1479 |
</div> |
| 1480 |
</div> |
| 1481 |
</div> |
| 1482 |
<?php |
| 1483 |
} |
| 1484 |
|
| 1485 |
echo '</div>'; |
| 1486 |
} |
| 1487 |
|
