← All changes | js/mxchat-admin.js +3003 -3790 3.2.17 → 2.6.1 View file →

		@@ -1,3791 +1,3004 @@
1		-// Simple debounce function implementation
2		-function debounce(func, wait) {
3		- let timeout;
4		- return function executedFunction(...args) {
5		- const later = () => {
6		- clearTimeout(timeout);
7		- func(...args);
8		- };
9		- clearTimeout(timeout);
10		- timeout = setTimeout(later, wait);
11		- };
12		-}
13		-
14		-// ─── Modal close safety ──────────────────────────────────────────────────
15		-// A click event fires on the common ancestor of its mousedown and mouseup, so
16		-// releasing a text-selection drag past a dialog's edge dispatches the click on
17		-// the overlay. Modals holding editable fields therefore never close on the
18		-// overlay and confirm before discarding; read-only ones require the whole
19		-// gesture to land on the overlay.
20		-
21		-// Serializes a modal's visible fields so edits can be detected on close.
22		-function mxchatModalSnapshot(modal) {
23		- const parts = [];
24		- modal.querySelectorAll('input, textarea, select').forEach((field) => {
25		- if (field.type === 'hidden') return;
26		- parts.push(field.type === 'checkbox' || field.type === 'radio' ? (field.checked ? '1' : '0') : field.value);
27		- });
28		- return JSON.stringify(parts);
29		-}
30		-
31		-// Wraps a modal's closeModal so an explicit close confirms when fields changed.
32		-function mxchatGuardedClose(modal, closeModal) {
33		- const snapshot = mxchatModalSnapshot(modal);
34		- const message = (typeof mxchatAdmin !== 'undefined' && mxchatAdmin.discard_changes_confirm)
35		- ? mxchatAdmin.discard_changes_confirm
36		- : 'Discard your unsaved changes?';
37		- return (e) => {
38		- if (mxchatModalSnapshot(modal) !== snapshot && !window.confirm(message)) return;
39		- closeModal(e);
40		- };
41		-}
42		-
43		-// Esc-to-close for a modal. Binds one named keydown handler and returns the detach
44		-// function the modal's own close path must call. `{ once: true }` cannot be used
45		-// here: it removes the listener on the first keydown of ANY key, so typing a single
46		-// character killed Esc for the rest of the modal's life, and every open that saw no
47		-// keypress left another listener stacked on document.
48		-function mxchatBindEscClose(modal, onEscape) {
49		- function onKeydown(e) {
50		- if (e.key === 'Escape' && modal.classList.contains('active')) {
51		- onEscape(e);
52		- }
53		- }
54		- document.addEventListener('keydown', onKeydown);
55		- return function detachEsc() {
56		- document.removeEventListener('keydown', onKeydown);
57		- };
58		-}
59		-
60		-// Overlay-close for read-only modals, ignoring clicks that began inside.
61		-function mxchatDragSafeOverlayClose(modal, closeModal) {
62		- let downOnOverlay = false;
63		- modal.addEventListener('mousedown', (e) => { downOnOverlay = (e.target === modal); });
64		- modal.addEventListener('click', (e) => {
65		- const overlayGesture = downOnOverlay;
66		- downOnOverlay = false;
67		- if (e.target === modal && overlayGesture) closeModal(e);
68		- });
69		-}
70		-
71		-// Helper function to open edit modal for intents/actions
72		-function mxchatOpenEditModal(intentId, phrases) {
73		- const modal = document.getElementById('mxchat-edit-modal');
74		- if (!modal) return;
75		-
76		- // Get form fields
77		- const intentIdField = document.getElementById('edit_intent_id');
78		- const phrasesField = document.getElementById('edit_phrases');
79		-
80		- // Set values
81		- intentIdField.value = intentId;
82		- phrasesField.value = phrases;
83		-
84		- // Show modal with animation
85		- modal.style.display = 'flex';
86		- requestAnimationFrame(() => {
87		- modal.classList.add('active');
88		- });
89		-
90		- // Set up close handlers
91		- let detachEsc = null;
92		- const closeModal = () => {
93		- if (detachEsc) {
94		- detachEsc();
95		- detachEsc = null;
96		- }
97		- modal.classList.remove('active');
98		- setTimeout(() => {
99		- modal.style.display = 'none';
100		- }, 300); // Match the CSS transition time
101		- };
102		-
103		- // This modal holds edits: close only on explicit controls, confirming when dirty.
104		- const guardedClose = mxchatGuardedClose(modal, closeModal);
105		-
106		- // Close button handler
107		- const closeBtn = modal.querySelector('.mxchat-modal-close');
108		- if (closeBtn) {
109		- closeBtn.onclick = guardedClose;
110		- }
111		-
112		- // Cancel button handler
113		- const cancelBtn = modal.querySelector('.mxchat-modal-cancel');
114		- if (cancelBtn) {
115		- cancelBtn.onclick = guardedClose;
116		- }
117		-
118		- // Escape key to close modal
119		- detachEsc = mxchatBindEscClose(modal, guardedClose);
120		-
121		- // Focus the textarea
122		- phrasesField.focus();
123		-}
124		-// Live Agent Notice Dismissal Function
125		-function dismissLiveAgentNotice() {
126		- if (typeof jQuery !== 'undefined' && typeof mxchatLiveAgent !== 'undefined') {
127		- jQuery.post(mxchatLiveAgent.ajaxurl, {
128		- action: 'dismiss_live_agent_notice',
129		- nonce: mxchatLiveAgent.nonce
130		- }, function(response) {
131		- if (response.success) {
132		- jQuery('#mxchat-disabled-notice').fadeOut(300);
133		- }
134		- }).fail(function() {
135		- // Fallback: just hide the notice if AJAX fails
136		- jQuery('#mxchat-disabled-notice').fadeOut(300);
137		- });
138		- } else {
139		- // Fallback for cases where jQuery or localized data isn't available
140		- var notice = document.getElementById('mxchat-disabled-notice');
141		- if (notice) {
142		- notice.style.display = 'none';
143		- }
144		- }
145		-}
146		-
147		-// Theme Migration Notice Dismissal Function
148		-function dismissThemeMigrationNotice() {
149		- if (typeof jQuery !== 'undefined' && typeof mxchatThemeMigration !== 'undefined') {
150		- jQuery.post(mxchatThemeMigration.ajaxurl, {
151		- action: 'dismiss_theme_migration_notice',
152		- nonce: mxchatThemeMigration.nonce
153		- }, function(response) {
154		- if (response.success) {
155		- jQuery('#mxchat-theme-migration-notice').fadeOut(300);
156		- }
157		- }).fail(function() {
158		- // Fallback: just hide the notice if AJAX fails
159		- jQuery('#mxchat-theme-migration-notice').fadeOut(300);
160		- });
161		- } else {
162		- // Fallback for cases where jQuery or localized data isn't available
163		- var notice = document.getElementById('mxchat-theme-migration-notice');
164		- if (notice) {
165		- notice.style.display = 'none';
166		- }
167		- }
168		-}
169		-
170		-// Updated mxchatOpenActionModal function to integrate with the new selector
171		-function mxchatOpenActionModal(isEdit = false, actionId = '', label = '', phrases = '', threshold = 85, callbackFunction = '') {
172		- const modal = document.getElementById('mxchat-action-modal');
173		- if (!modal) return;
174		-
175		- // Get form fields
176		- const actionIdField = document.getElementById('edit_action_id');
177		- const labelField = document.getElementById('intent_label');
178		- const phrasesField = document.getElementById('action_phrases');
179		- const formActionType = document.getElementById('form_action_type');
180		- const callbackGroup = document.getElementById('callback_selection_group');
181		- const callbackSelect = document.getElementById('callback_function');
182		- const saveButton = document.getElementById('mxchat-save-action-btn');
183		- const nonceContainer = document.getElementById('action-nonce-container');
184		- const thresholdSlider = document.getElementById('similarity_threshold');
185		- const thresholdDisplay = document.querySelector('.mxchat-threshold-value-display');
186		-
187		- // Set up modal for edit or create
188		- if (isEdit) {
189		- saveButton.textContent = 'Update Action';
190		- formActionType.value = 'mxchat_edit_intent';
191		- actionIdField.value = actionId;
192		- labelField.value = label;
193		- phrasesField.value = phrases;
194		- callbackGroup.style.display = 'none'; // Hide callback selection when editing
195		- thresholdSlider.value = threshold; // Set the current threshold value
196		- thresholdDisplay.textContent = threshold + '%'; // Update display
197		-
198		- // Remove the required attribute when editing
199		- callbackSelect.removeAttribute('required');
200		-
201		- // Update the nonce field for editing
202		- nonceContainer.innerHTML = ''; // Clear existing nonce
203		- if (typeof mxchatAdmin !== 'undefined' && mxchatAdmin.edit_intent_nonce) {
204		- nonceContainer.innerHTML = `<input type="hidden" name="_wpnonce" value="${mxchatAdmin.edit_intent_nonce}">`;
205		- }
206		- } else {
207		- saveButton.textContent = 'Save Action';
208		- formActionType.value = 'mxchat_add_intent';
209		- actionIdField.value = '';
210		- labelField.value = '';
211		- phrasesField.value = '';
212		- callbackGroup.style.display = 'block'; // Show callback selection when creating
213		- thresholdSlider.value = 85; // Default value for new actions
214		- thresholdDisplay.textContent = '85%'; // Default display
215		-
216		- // Ensure the required attribute is present when adding
217		- callbackSelect.setAttribute('required', 'required');
218		-
219		- // Update the nonce field for adding
220		- nonceContainer.innerHTML = ''; // Clear existing nonce
221		- if (typeof mxchatAdmin !== 'undefined' && mxchatAdmin.add_intent_nonce) {
222		- nonceContainer.innerHTML = `<input type="hidden" name="_wpnonce" value="${mxchatAdmin.add_intent_nonce}">`;
223		- }
224		- }
225		-
226		- // Show modal with animation
227		- modal.style.display = 'flex';
228		- requestAnimationFrame(() => {
229		- modal.classList.add('active');
230		- });
231		-
232		- // Set up close handlers
233		- let detachEsc = null;
234		- const closeModal = () => {
235		- if (detachEsc) {
236		- detachEsc();
237		- detachEsc = null;
238		- }
239		- modal.classList.remove('active');
240		- setTimeout(() => {
241		- modal.style.display = 'none';
242		- }, 300); // Match the CSS transition time
243		- };
244		-
245		- // This modal holds edits: close only on explicit controls, confirming when dirty.
246		- const guardedClose = mxchatGuardedClose(modal, closeModal);
247		-
248		- // Close button handler
249		- const closeBtn = modal.querySelector('.mxchat-modal-close');
250		- if (closeBtn) {
251		- closeBtn.onclick = guardedClose;
252		- }
253		-
254		- // Cancel button handler
255		- const cancelBtn = modal.querySelector('.mxchat-modal-cancel');
256		- if (cancelBtn) {
257		- cancelBtn.onclick = guardedClose;
258		- }
259		-
260		- // Escape key to close modal
261		- detachEsc = mxchatBindEscClose(modal, guardedClose);
262		-
263		- // Focus the first field
264		- labelField.focus();
265		-
266		- // Dispatch an event for the action type selector to catch
267		- const event = new CustomEvent('mxchatModalOpened', {
268		- detail: {
269		- isEdit: isEdit,
270		- callbackFunction: callbackFunction || (isEdit ? callbackSelect.value : '')
271		- }
272		- });
273		- document.dispatchEvent(event);
274		-
275		- return closeModal; // Return close function for external use
276		-}
277		-
278		-// Initialize event listeners
279		-document.addEventListener('DOMContentLoaded', () => {
280		- // Set up edit button handlers for intents
281		- document.querySelectorAll('.mxchat-edit-button').forEach(button => {
282		- button.onclick = () => {
283		- const intentId = button.dataset.intentId;
284		- const phrases = button.dataset.phrases;
285		- mxchatOpenEditModal(intentId, phrases);
286		- };
287		- });
288		-
289		- document.querySelectorAll('.mxchat-action-card .mxchat-edit-button').forEach(button => {
290		- button.onclick = () => {
291		- const actionId = button.dataset.actionId;
292		- const phrases = button.dataset.phrases;
293		- const label = button.dataset.label;
294		- const threshold = button.dataset.threshold || 85;
295		- const callbackFunction = button.dataset.callbackFunction;
296		- const enabledBots = button.dataset.enabledBots; // ADD THIS LINE
297		-
298		- mxchatOpenActionModal(true, actionId, label, phrases, threshold, callbackFunction, enabledBots);
299		- };
300		- });
301		-
302		- // Set up add new action buttons (new functionality)
303		- const addActionBtn = document.getElementById('mxchat-add-action-btn');
304		- if (addActionBtn) {
305		- addActionBtn.onclick = () => mxchatOpenActionModal();
306		- }
307		-
308		- const createFirstAction = document.getElementById('mxchat-create-first-action');
309		- if (createFirstAction) {
310		- createFirstAction.onclick = () => mxchatOpenActionModal();
311		- }
312		-
313		- // Setup category-specific new action buttons (new functionality)
314		- document.querySelectorAll('.mxchat-new-action-button').forEach(button => {
315		- button.onclick = () => {
316		- const category = button.closest('.mxchat-new-action-card').dataset.category;
317		- const closeModal = mxchatOpenActionModal();
318		-
319		- // Pre-select the appropriate callback based on category
320		- if (category) {
321		- const callbackSelect = document.getElementById('callback_function');
322		- if (callbackSelect) {
323		- setTimeout(() => {
324		- // Map categories to default callbacks
325		- const categoryToCallback = {
326		- 'data_collection': 'mxchat_handle_form_collection',
327		- 'integrations': 'mxchat_handle_slack_message',
328		- 'custom_actions': 'mxchat_handle_custom_action',
329		- 'recommendations': 'mxchat_handle_product_recommendations'
330		- // Add more mappings as needed
331		- };
332		-
333		- if (categoryToCallback[category]) {
334		- callbackSelect.value = categoryToCallback[category];
335		- }
336		- }, 100);
337		- }
338		- }
339		- };
340		- });
341		-
342		- // Handle action toggle switches (new functionality)
343		- document.querySelectorAll('.mxchat-action-toggle').forEach(toggle => {
344		- toggle.onchange = function() {
345		- const actionId = this.dataset.actionId;
346		- const isEnabled = this.checked;
347		-
348		- // Show loading indicator
349		- const loadingEl = document.getElementById('mxchat-action-loading');
350		- if (loadingEl) loadingEl.style.display = 'flex';
351		-
352		- // Send AJAX request to update status
353		- fetch(ajaxurl, {
354		- method: 'POST',
355		- headers: {
356		- 'Content-Type': 'application/x-www-form-urlencoded',
357		- },
358		- body: new URLSearchParams({
359		- action: 'mxchat_toggle_action',
360		- intent_id: actionId,
361		- enabled: isEnabled ? 1 : 0,
362		- nonce: mxchatAdmin.toggle_action_nonce // Use the correct nonce
363		- })
364		- })
365		- .then(response => response.json())
366		- .then(data => {
367		- if (!data.success) {
368		- alert('Failed to update action status: ' + (data.data?.message || 'Unknown error'));
369		- this.checked = !isEnabled; // Revert the toggle
370		- }
371		- })
372		- .catch(error => {
373		- //console.error('Error:', error);
374		- alert('Server error. Please try again.');
375		- this.checked = !isEnabled; // Revert the toggle
376		- })
377		- .finally(() => {
378		- if (loadingEl) loadingEl.style.display = 'none';
379		- });
380		- };
381		- });
382		-
383		- // Handle threshold sliders in action cards (new functionality)
384		- document.querySelectorAll('.mxchat-threshold-slider').forEach(slider => {
385		- slider.oninput = function() {
386		- const actionId = this.id.replace('intent_threshold_', '');
387		- document.getElementById('threshold_output_' + actionId).textContent = this.value + '%';
388		- };
389		- });
390		-
391		- // Handle threshold save buttons in action cards (new functionality)
392		- document.querySelectorAll('.mxchat-threshold-save').forEach(button => {
393		- button.onclick = function(e) {
394		- e.preventDefault();
395		- const form = this.closest('form');
396		- const intentId = form.querySelector('input[name="intent_id"]').value;
397		- const threshold = form.querySelector('input[name="intent_threshold"]').value;
398		- const nonce = form.querySelector('input[name="_wpnonce"]').value;
399		-
400		- // Show loading indicator
401		- const loadingEl = document.getElementById('mxchat-action-loading');
402		- if (loadingEl) loadingEl.style.display = 'flex';
403		-
404		- // Send AJAX request
405		- fetch(ajaxurl, {
406		- method: 'POST',
407		- headers: {
408		- 'Content-Type': 'application/x-www-form-urlencoded',
409		- },
410		- body: new URLSearchParams({
411		- action: 'mxchat_update_intent_threshold',
412		- intent_id: intentId,
413		- intent_threshold: threshold,
414		- _wpnonce: nonce
415		- })
416		- })
417		- .then(response => response.json())
418		- .then(data => {
419		- if (data.success) {
420		- // Visual feedback of success
421		- const card = this.closest('.mxchat-action-card');
422		- card.style.background = 'rgba(120, 115, 245, 0.1)';
423		- setTimeout(() => {
424		- card.style.background = 'white';
425		- }, 300);
426		- } else {
427		- alert('Failed to update threshold: ' + (data.data?.message || 'Unknown error'));
428		- }
429		- })
430		- .catch(error => {
431		- //console.error('Error:', error);
432		- alert('Server error. Please try again.');
433		- })
434		- .finally(() => {
435		- if (loadingEl) loadingEl.style.display = 'none';
436		- });
437		- };
438		- });
439		-});
440		-
441		-jQuery(document).ready(function($) {
442		- // Ensure we have a debounce function (use lodash if available, otherwise use our implementation)
443		- const useDebounce = (window._ && window._.debounce) ? window._.debounce : debounce;
444		-
445		- // --- AJAX Auto-Save ---
446		- let $autosaveSections = $('.mxchat-autosave-section');
447		-
448		- // *** ADD THIS: Extend auto-save sections to include Pinecone settings ***
449		- const $pineconeAutosaveSection = $('#mxchat-kb-tab-pinecone');
450		- if ($pineconeAutosaveSection.length) {
451		- $autosaveSections = $autosaveSections.add($pineconeAutosaveSection);
452		- //console.log('Added Pinecone section to auto-save monitoring');
453		- }
454		-
455		- // Track whether fields have been modified by user
456		- const userModifiedFields = new Set();
457		-
458		- if ($autosaveSections.length) {
459		- // Track user interactions with input fields to determine if changes are user-initiated
460		- $autosaveSections.find('input, textarea, select').on('focus keydown paste', function() {
461		- const fieldName = $(this).attr('name');
462		- if (fieldName) {
463		- userModifiedFields.add(fieldName);
464		- }
465		- });
466		-
467		- // Handle real-time range slider value updates
468		- $autosaveSections.find('input[type="range"]').on('input', function() {
469		- const value = $(this).val();
470		- const $slider = $(this);
471		- const sliderId = $slider.attr('id');
472		- // Find the corresponding value display span (convention: id_value)
473		- const $valueSpan = $('#' + sliderId + '_value');
474		- if ($valueSpan.length) {
475		- $valueSpan.text(value);
476		- } else {
477		- // Fallback for similarity_threshold which uses threshold_value
478		- $('#threshold_value').text(value);
479		- }
480		- });
481		-
482		- // Handle all input changes (including range slider)
483		- // Store pending AJAX requests and debounce timers per field to prevent freezing
484		- const pendingRequests = {};
485		- const fieldDebounceTimers = {};
486		-
487		- // Helper function to save rate limit fields with request tracking
488		- function triggerFieldSave($field, name, pendingRequests) {
489		- const value = $field.val();
490		-
491		- // Remove any existing feedback containers for this field
492		- $field.siblings('.feedback-container').remove();
493		- $field.parent().find('.feedback-container').remove();
494		-
495		- // Create feedback container
496		- const feedbackContainer = $('<div class="feedback-container"></div>');
497		- const spinner = $('<div class="saving-spinner"></div>');
498		- const successIcon = $('<div class="success-icon">✔</div>');
499		- $field.after(feedbackContainer);
500		- feedbackContainer.append(spinner);
501		-
502		- // Rate limits use the main settings action
503		- const ajaxAction = 'mxchat_save_setting';
504		- const nonce = mxchatAdmin.setting_nonce;
505		-
506		- // Store the AJAX request so it can be aborted if needed
507		- pendingRequests[name] = $.ajax({
508		- url: mxchatAdmin.ajax_url,
509		- type: 'POST',
510		- data: {
511		- action: ajaxAction,
512		- name: name,
513		- value: value,
514		- _ajax_nonce: nonce
515		- },
516		- success: function(response) {
517		- delete pendingRequests[name];
518		- if (response.success) {
519		- spinner.fadeOut(200, function() {
520		- feedbackContainer.append(successIcon);
521		- successIcon.fadeIn(200).delay(800).fadeOut(200, function() {
522		- feedbackContainer.remove();
523		- });
524		- });
525		- } else {
526		- feedbackContainer.remove();
527		- }
528		- },
529		- error: function(xhr, textStatus, error) {
530		- delete pendingRequests[name];
531		- // Don't show error for aborted requests
532		- if (textStatus !== 'abort') {
533		- feedbackContainer.remove();
534		- }
535		- }
536		- });
537		- }
538		-
539		- // .mxchat-la-field — the live-agent schedule editors' day inputs (plans
540		- // 8ccaa2 + 99d7a4, one editor per channel). They are nameless by design:
541		- // each editor folds them into its own hidden live_agent_schedule_<channel>
542		- // input and fires ONE change, which this same handler then saves. Without
543		- // the exclusion each keystroke would POST a nameless field the server can
544		- // only reject.
545		- $autosaveSections.find('input, textarea, select').not('#model, #openrouter_selected_model, .mxchat-la-field').on('change', function() {
546		- const $field = $(this);
547		- const name = $field.attr('name');
548		-
549		- // Debounce rate limit fields to prevent UI freezing from rapid changes
550		- if (name && name.indexOf('rate_limits') !== -1) {
551		- // Clear any pending timer for this field
552		- if (fieldDebounceTimers[name]) {
553		- clearTimeout(fieldDebounceTimers[name]);
554		- }
555		- // Abort any pending AJAX request for this field
556		- if (pendingRequests[name]) {
557		- pendingRequests[name].abort();
558		- // Remove any existing feedback containers for this field
559		- $field.siblings('.feedback-container').remove();
560		- $field.parent().find('.feedback-container').remove();
561		- }
562		- // Debounce the save operation
563		- const fieldRef = $field;
564		- fieldDebounceTimers[name] = setTimeout(function() {
565		- triggerFieldSave(fieldRef, name, pendingRequests);
566		- }, 300);
567		- return;
568		- }
569		-
570		- // Skip saving for API key fields that haven't been interacted with and are empty
571		- const isApiKeyField = name && (
572		- name === 'loops_api_key' ||
573		- name === 'api_key' ||
574		- name === 'xai_api_key' ||
575		- name === 'claude_api_key' ||
576		- name === 'voyage_api_key' ||
577		- name === 'gemini_api_key' ||
578		- name === 'deepseek_api_key' ||
579		- name.indexOf('_api_key') !== -1
580		- );
581		-
582		- // Skip processing if:
583		- // 1. It's an API key field
584		- // 2. The user hasn't interacted with it
585		- // 3. The field is empty
586		- if (isApiKeyField && !userModifiedFields.has(name) && (!$field.val() || $field.val().trim() === '')) {
587		- //console.log('Skipping auto-save for untouched API key field:', name);
588		- return;
589		- }
590		-
591		- let value;
592		-
593		- // Handle different input types
594		- if ($field.attr('type') === 'checkbox') {
595		- // *** UPDATED: Handle Pinecone checkboxes differently ***
596		- if (name && name.indexOf('mxchat_pinecone_addon_options') !== -1) {
597		- value = $field.is(':checked') ? '1' : '0';
598		- } else {
599		- value = $field.is(':checked') ? 'on' : 'off';
600		- }
601		- } else {
602		- value = $field.val();
603		- }
604		-
605		- // Create feedback container
606		- const feedbackContainer = $('<div class="feedback-container"></div>');
607		- const spinner = $('<div class="saving-spinner"></div>');
608		- const successIcon = $('<div class="success-icon">✔</div>');
609		-
610		- // Position feedback container based on input type
611		- if ($field.closest('.toggle-switch').length) {
612		- // Try td first (old layout), then mxc-field-control (new card layout), then fallback to after toggle
613		- var $container = $field.closest('td');
614		- if (!$container.length) {
615		- $container = $field.closest('.mxc-field-control');
616		- }
617		- if ($container.length) {
618		- $container.append(feedbackContainer);
619		- } else {
620		- $field.closest('.toggle-switch').after(feedbackContainer);
621		- }
622		- } else if ($field.closest('.mxchat-toggle-switch').length) {
623		- // Try mxchat-toggle-container first, then parent div, then fallback to after toggle
624		- var $toggleContainer = $field.closest('.mxchat-toggle-container');
625		- if ($toggleContainer.length) {
626		- $toggleContainer.append(feedbackContainer);
627		- } else {
628		- $field.closest('.mxchat-toggle-switch').after(feedbackContainer);
629		- }
630		- } else if ($field.closest('.slider-container').length) {
631		- $field.closest('.slider-container').after(feedbackContainer);
632		- } else {
633		- $field.after(feedbackContainer);
634		- }
635		- feedbackContainer.append(spinner);
636		-
637		- // Determine which AJAX action and nonce to use:
638		- var ajaxAction, nonce;
639		- // *** UPDATED: Add Pinecone fields, chunking fields, ACF fields, and custom meta to prompts action ***
640		- if (name.indexOf('mxchat_prompts_options') !== -1 ||
641		- name === 'mxchat_auto_sync_posts' ||
642		- name === 'mxchat_auto_sync_pages' ||
643		- name.indexOf('mxchat_auto_sync_') === 0 ||
644		- name.indexOf('mxchat_pinecone_addon_options') !== -1 ||
645		- name.indexOf('mxchat_chunk') === 0 ||
646		- name.indexOf('mxchat_acf_field_') === 0 ||
647		- name === 'mxchat_custom_meta_whitelist') { // Chunking, ACF field settings, and custom meta
648		- ajaxAction = 'mxchat_save_prompts_setting';
649		- nonce = mxchatPromptsAdmin.prompts_setting_nonce;
650		- } else {
651		- // Otherwise, use the existing AJAX action.
652		- ajaxAction = 'mxchat_save_setting';
653		- nonce = mxchatAdmin.setting_nonce;
654		- }
655		-
656		- // *** ADD THIS: Debug logging for Pinecone fields ***
657		- if (name && name.indexOf('mxchat_pinecone_addon_options') !== -1) {
658		- //console.log('Saving Pinecone field:', name, '=', value);
659		- }
660		-
661		- // AJAX save request
662		- $.ajax({
663		- url: (ajaxAction === 'mxchat_save_prompts_setting') ? mxchatPromptsAdmin.ajax_url : mxchatAdmin.ajax_url,
664		- type: 'POST',
665		- data: {
666		- action: ajaxAction,
667		- name: name,
668		- value: value,
669		- _ajax_nonce: nonce
670		- },
671		- success: function(response) {
672		- if (response.success) {
673		- spinner.fadeOut(200, function() {
674		- feedbackContainer.append(successIcon);
675		- successIcon.fadeIn(200).delay(1000).fadeOut(200, function() {
676		- feedbackContainer.remove();
677		- });
678		- });
679		-
680		- // *** ADD THIS: Refresh API key status after saving an API key ***
681		- const isApiKeyField = name && (
682		- name === 'api_key' ||
683		- name === 'xai_api_key' ||
684		- name === 'claude_api_key' ||
685		- name === 'voyage_api_key' ||
686		- name === 'gemini_api_key' ||
687		- name === 'deepseek_api_key' ||
688		- name === 'openrouter_api_key' ||
689		- name.indexOf('_api_key') !== -1
690		- );
691		-
692		- if (isApiKeyField && typeof window.mxchatRefreshAPIKeyStatus === 'function') {
693		- window.mxchatRefreshAPIKeyStatus();
694		- }
695		-
696		- // *** ADD THIS: Update Pinecone checkbox state after successful save ***
697		- if (name && name.indexOf('mxchat_pinecone_addon_options[mxchat_use_pinecone]') !== -1) {
698		- //console.log('Pinecone toggle saved successfully, value:', value);
699		-
700		- // The checkbox state is already updated by the user interaction
701		- // But let's make sure the UI state matches the saved value
702		- var $checkbox = $('input[name="mxchat_pinecone_addon_options[mxchat_use_pinecone]"]');
703		- var settingsDiv = $('.mxchat-pinecone-settings');
704		-
705		- // Double-check the UI state matches what was saved
706		- if (value === '1' && !$checkbox.is(':checked')) {
707		- $checkbox.prop('checked', true);
708		- settingsDiv.slideDown(300);
709		- } else if (value === '0' && $checkbox.is(':checked')) {
710		- $checkbox.prop('checked', false);
711		- settingsDiv.slideUp(300);
712		- }
713		-
714		- //console.log('Pinecone UI state synchronized');
715		-
716		- // Check if Knowledge Import tab is currently active
717		- if ($('.mxchat-kb-tab-button[data-tab="import"]').hasClass('active')) {
718		- // Show a notice that we need to refresh
719		- var $knowledgeCard = $('#mxchat-kb-tab-import .mxchat-card').eq(1);
720		- if ($knowledgeCard.length > 0) {
721		- // Add a refresh notice at the top of the knowledge base card
722		- var refreshNotice = $('<div class="notice notice-warning" style="margin: 15px 0; padding: 10px 15px;">' +
723		- '<p style="margin: 0;">' +
724		- '<span class="dashicons dashicons-info" style="color: #f0ad4e; margin-right: 5px;"></span>' +
725		- 'Database settings have changed. ' +
726		- '<a href="#" onclick="location.reload(); return false;" style="font-weight: bold;">Click here to refresh</a> to see the updated knowledge base.' +
727		- '</p></div>');
728		-
729		- $knowledgeCard.prepend(refreshNotice);
730		- }
731		- } else {
732		- // If not on import tab, set a flag to refresh when they go there
733		- sessionStorage.setItem('mxchat_pinecone_changed', 'true');
734		- }
735		- }
736		-
737		- // *** ADD THIS: Debug logging for successful saves ***
738		- if (name && name.indexOf('mxchat_pinecone_addon_options') !== -1) {
739		- //console.log('Pinecone field saved successfully:', name, '=', value);
740		- }
741		-
742		- // Check if the response contains a "no changes" message and log it
743		- if (response.data && response.data.message === 'No changes detected') {
744		- //console.log('No changes detected for field:', name);
745		- }
746		- } else {
747		- // Only show alert for actual errors, not for "no changes"
748		- let errorMessage = response.data?.message || 'Unknown error';
749		-
750		- // Don't display an alert for "no changes" message
751		- if (errorMessage !== 'No changes detected' && errorMessage !== 'Update failed or no changes') {
752		- alert('Error saving: ' + errorMessage);
753		- } else {
754		- // Still provide visual feedback that no changes were needed
755		- spinner.fadeOut(200, function() {
756		- feedbackContainer.append(successIcon);
757		- successIcon.fadeIn(200).delay(1000).fadeOut(200, function() {
758		- feedbackContainer.remove();
759		- });
760		- });
761		- //console.log('No changes detected for field:', name);
762		- return;
763		- }
764		-
765		- // Only revert checkbox state if it was an actual error
766		- if (errorMessage !== 'No changes detected' && errorMessage !== 'Update failed or no changes') {
767		- if ($field.attr('type') === 'checkbox') {
768		- $field.prop('checked', !$field.is(':checked'));
769		- }
770		- }
771		-
772		- // Always clean up the feedback container
773		- feedbackContainer.remove();
774		- }
775		- },
776		- error: function(xhr, textStatus, error) {
777		- //console.error('AJAX Error:', textStatus, error);
778		- alert('An error occurred while saving. Please try again.');
779		-
780		- // Revert checkbox state on error
781		- if ($field.attr('type') === 'checkbox') {
782		- $field.prop('checked', !$field.is(':checked'));
783		- }
784		-
785		- feedbackContainer.remove();
786		- }
787		- });
788		- });
789		-
790		- // Initialize color pickers with debouncing
791		- $autosaveSections.find('.my-color-field').each(function() {
792		- const $colorField = $(this);
793		-
794		- $(this).wpColorPicker({
795		- change: useDebounce(function(event, ui) {
796		- // Safety check - ensure we have a valid field and value
797		- if (!$colorField || !$colorField.val()) {
798		- //console.warn('Color picker not ready');
799		- return;
800		- }
801		-
802		- const name = $colorField.attr('name');
803		- const value = $colorField.val();
804		-
805		- if (!name || !value) {
806		- //console.warn('Missing required color picker values');
807		- return;
808		- }
809		-
810		- // Create feedback container
811		- const feedbackContainer = $('<div class="feedback-container"></div>');
812		- const spinner = $('<div class="saving-spinner"></div>');
813		- const successIcon = $('<div class="success-icon">✔</div>');
814		-
815		- // Position feedback container
816		- $colorField.closest('.wp-picker-container').after(feedbackContainer);
817		- feedbackContainer.append(spinner);
818		-
819		- // Determine which AJAX action and nonce to use:
820		- var ajaxAction, nonce;
821		- // Use the new AJAX action for submenu fields:
822		- if (name.indexOf('mxchat_prompts_options') !== -1 ||
823		- name === 'mxchat_auto_sync_posts' ||
824		- name === 'mxchat_auto_sync_pages' ||
825		- name.indexOf('mxchat_auto_sync_') === 0) { // Modified to catch all auto-sync fields
826		- ajaxAction = 'mxchat_save_prompts_setting';
827		- nonce = mxchatPromptsAdmin.prompts_setting_nonce;
828		- } else {
829		- // Otherwise, use the existing AJAX action.
830		- ajaxAction = 'mxchat_save_setting';
831		- nonce = mxchatAdmin.setting_nonce;
832		- }
833		- // AJAX save request
834		- $.ajax({
835		- url: (ajaxAction === 'mxchat_save_prompts_setting') ? mxchatPromptsAdmin.ajax_url : mxchatAdmin.ajax_url,
836		- type: 'POST',
837		- data: {
838		- action: ajaxAction,
839		- name: name,
840		- value: value,
841		- _ajax_nonce: nonce
842		- },
843		- success: function(response) {
844		- if (response.success) {
845		- spinner.fadeOut(200, function() {
846		- feedbackContainer.append(successIcon);
847		- successIcon.fadeIn(200).delay(1000).fadeOut(200, function() {
848		- feedbackContainer.remove();
849		- });
850		- });
851		- } else {
852		- alert('Error saving: ' + (response.data?.message || 'Unknown error'));
853		- feedbackContainer.remove();
854		- }
855		- },
856		- error: function() {
857		- alert('An error occurred while saving.');
858		- feedbackContainer.remove();
859		- }
860		- });
861		- }, 500)
862		- });
863		- });
864		-
865		- }
866		-
867		-// ========================================
868		-// POST TYPE VISIBILITY SETTINGS
869		-// ========================================
870		-(function() {
871		- const $appendToBody = $('#append_to_body');
872		- const $visibilityOptions = $('#post-type-visibility-options');
873		- const $modeRadios = $('input[name="post_type_visibility_mode"]');
874		- const $postTypeList = $('#post-type-list');
875		- const $postTypeCheckboxes = $('input[name="post_type_visibility_list[]"]');
876		-
877		- // Toggle visibility options based on auto-display toggle
878		- $appendToBody.on('change', function() {
879		- if ($(this).is(':checked')) {
880		- $visibilityOptions.slideDown(200);
881		- } else {
882		- $visibilityOptions.slideUp(200);
883		- }
884		- });
885		-
886		- // Toggle post type list based on mode selection
887		- $modeRadios.on('change', function() {
888		- const mode = $(this).val();
889		- if (mode === 'all') {
890		- $postTypeList.slideUp(200);
891		- } else {
892		- $postTypeList.slideDown(200);
893		- }
894		-
895		- // Save mode via AJAX
896		- savePostTypeVisibility('post_type_visibility_mode', mode);
897		- });
898		-
899		- // Save post type list when checkboxes change
900		- $postTypeCheckboxes.on('change', function() {
901		- // Collect all checked post types
902		- const selectedPostTypes = [];
903		- $postTypeCheckboxes.filter(':checked').each(function() {
904		- selectedPostTypes.push($(this).val());
905		- });
906		-
907		- // Save as JSON array
908		- savePostTypeVisibility('post_type_visibility_list', JSON.stringify(selectedPostTypes));
909		- });
910		-
911		- // Helper function to save post type visibility settings
912		- function savePostTypeVisibility(name, value) {
913		- if (typeof mxchatAdmin === 'undefined') return;
914		-
915		- // Find the container element for feedback
916		- const $container = name === 'post_type_visibility_mode'
917		- ? $('.mxchat-visibility-mode')
918		- : $postTypeList;
919		-
920		- // Remove any existing feedback
921		- $container.find('.mxchat-save-feedback').remove();
922		-
923		- // Create feedback element
924		- const $feedback = $('<span class="mxchat-save-feedback" style="margin-left: 10px; font-size: 12px;"></span>');
925		- $feedback.text('Saving...').css('color', '#666');
926		-
927		- if (name === 'post_type_visibility_mode') {
928		- $container.append($feedback);
929		- } else {
930		- $container.before($feedback);
931		- }
932		-
933		- $.ajax({
934		- url: mxchatAdmin.ajax_url,
935		- type: 'POST',
936		- data: {
937		- action: 'mxchat_save_setting',
938		- name: name,
939		- value: value,
940		- _ajax_nonce: mxchatAdmin.setting_nonce
941		- },
942		- success: function(response) {
943		- if (response.success) {
944		- $feedback.text('✓ Saved').css('color', '#46b450');
945		- setTimeout(function() {
946		- $feedback.fadeOut(300, function() {
947		- $(this).remove();
948		- });
949		- }, 1500);
950		- } else {
951		- $feedback.text('Error saving').css('color', '#dc3232');
952		- }
953		- },
954		- error: function() {
955		- $feedback.text('Error saving').css('color', '#dc3232');
956		- }
957		- });
958		- }
959		-})();
960		-
961		-// Toggle visibility handlers
962		-function toggleVisibility(selector) {
963		- $(selector).on('click', function() {
964		- var inputField = $(this).prev('input');
965		- // Check if this is a CSS-masked field (type="text" with mxchat-api-key-field class)
966		- if (inputField.hasClass('mxchat-api-key-field')) {
967		- // Use CSS class toggle for CSS-masked fields
968		- if (inputField.hasClass('mxchat-show-key')) {
969		- inputField.removeClass('mxchat-show-key');
970		- $(this).text('Show');
971		- } else {
972		- inputField.addClass('mxchat-show-key');
973		- $(this).text('Hide');
974		- }
975		- } else {
976		- // Legacy type toggle for password fields
977		- if (inputField.attr('type') === 'password') {
978		- inputField.attr('type', 'text');
979		- $(this).text('Hide');
980		- } else {
981		- inputField.attr('type', 'password');
982		- $(this).text('Show');
983		- }
984		- }
985		- });
986		-}
987		-
988		-// Initialize all toggle visibility buttons
989		-[
990		- '#toggleApiKeyVisibility',
991		- '#toggleWooCommerceSecretVisibility',
992		- '#toggleVoyageAPIKeyVisibility',
993		- '#toggleLoopsApiKeyVisibility',
994		- '#toggleXaiApiKeyVisibility',
995		- '#toggleClaudeApiKeyVisibility',
996		- '#toggleBraveApiKeyVisibility',
997		- '#toggleWebhookUrlVisibility',
998		- '#toggleSecretKeyVisibility',
999		- '#toggleBotTokenVisibility',
1000		- '#toggleDeepSeekApiKeyVisibility',
1001		- '#toggleGeminiApiKeyVisibility',
1002		- '#toggleOpenRouterApiKeyVisibility'
1003		-].forEach(toggleVisibility);
1004		-
1005		-function setupMxChatModelSelector() {
1006		- const $modelSelect = $('#model');
1007		- const $modelSelectorButton = $('<button>', {
1008		- type: 'button',
1009		- id: 'mxchat_model_selector_btn',
1010		- class: 'button-primary mxchat-model-selector-btn',
1011		- text: 'Select AI Model'
1012		- });
1013		-
1014		- // Replace the select dropdown with a button
1015		- $modelSelect.hide().after($modelSelectorButton);
1016		-
1017		- // Update button text to show currently selected model
1018		- function updateButtonText() {
1019		- const selectedModel = $modelSelect.val();
1020		-
1021		- // Check if OpenRouter is selected
1022		- if (selectedModel === 'openrouter') {
1023		- const openrouterModelId = $('#openrouter_selected_model').val();
1024		- const openrouterModelName = $('#openrouter_selected_model_name').val();
1025		-
1026		- if (openrouterModelName && openrouterModelName.trim() !== '') {
1027		- $modelSelectorButton.text('OpenRouter: ' + openrouterModelName);
1028		- } else if (openrouterModelId && openrouterModelId.trim() !== '') {
1029		- $modelSelectorButton.text('OpenRouter: ' + openrouterModelId);
1030		- } else {
1031		- $modelSelectorButton.text('OpenRouter - Select Model');
1032		- }
1033		- } else {
1034		- const selectedModelText = $modelSelect.find('option:selected').text();
1035		- $modelSelectorButton.text(selectedModelText);
1036		- }
1037		- }
1038		-
1039		- // Initialize button text
1040		- updateButtonText();
1041		-
1042		- // Create and append modal HTML
1043		- const modelSelectorModal = `
1044		- <div id="mxchat_model_selector_modal" class="mxchat-model-selector-modal">
1045		- <div class="mxchat-model-selector-modal-content">
1046		- <div class="mxchat-model-selector-modal-header">
1047		- <h3>Select AI Model</h3>
1048		- <span class="mxchat-model-selector-modal-close">&times;</span>
1049		- </div>
1050		- <div class="mxchat-model-selector-modal-body">
1051		- <div class="mxchat-model-selector-search-container">
1052		- <input type="text" id="mxchat_model_search_input" class="mxchat-model-search-input" placeholder="Search models...">
1053		- </div>
1054		- <div class="mxchat-model-selector-categories">
1055		- <button class="mxchat-model-category-btn active" data-category="all">All</button>
1056		- <button class="mxchat-model-category-btn" data-category="openrouter">OpenRouter</button>
1057		- <button class="mxchat-model-category-btn" data-category="gemini">Google Gemini</button>
1058		- <button class="mxchat-model-category-btn" data-category="openai">OpenAI</button>
1059		- <button class="mxchat-model-category-btn" data-category="claude">Claude</button>
1060		- <button class="mxchat-model-category-btn" data-category="xai">X.AI</button>
1061		- <button class="mxchat-model-category-btn" data-category="deepseek">DeepSeek</button>
1062		- <button class="mxchat-model-category-btn" data-category="custom">Custom / Local</button>
1063		- </div>
1064		- <div class="mxchat-model-selector-grid" id="mxchat_models_grid"></div>
1065		- </div>
1066		- <div class="mxchat-model-selector-modal-footer">
1067		- <button id="mxchat_cancel_model_selection" class="button mxchat-model-cancel-btn">Cancel</button>
1068		- </div>
1069		- </div>
1070		- </div>
1071		- `;
1072		-
1073		- $('body').append(modelSelectorModal);
1074		-
1075		- // MOVE THIS OUTSIDE - Make it a property of the window object so it's accessible globally
1076		- window.populateModelsGrid = function(filter = '', category = 'all') {
1077		- const $grid = $('#mxchat_models_grid');
1078		- $grid.empty();
1079		-
1080		- // Catalog refactor (plan-d14e89): when class-mxchat-model-catalog.php
1081		- // is loaded (via wp_localize_script as mxchatChatModelCatalog), use
1082		- // its data so a single edit there flows to this picker grid. The
1083		- // inline fallback below keeps the picker working if for some reason
1084		- // the localize hasn't run (e.g. legacy admin page bootstrap order).
1085		- const models = (typeof mxchatChatModelCatalog === 'object' && mxchatChatModelCatalog) ? mxchatChatModelCatalog : {
1086		- openrouter: [
1087		- { value: 'openrouter', label: 'OpenRouter', description: 'Access 100+ models from multiple providers (add API key to browse)' }
1088		- ],
1089		- gemini: [
1090		- { value: 'gemini-3.5-flash', label: 'Gemini 3.5 Flash', description: 'Stable — newest Flash generation, recommended default' },
1091		- ],
1092		- openai: [
1093		- { value: 'gpt-5.6-sol', label: 'GPT-5.6 Sol', description: 'Recommended — newest OpenAI flagship for reasoning, coding and chat' },
1094		- ],
1095		- claude: [
1096		- { value: 'claude-fable-5', label: 'Claude Fable 5', description: 'Latest Flagship — newest and most capable Anthropic model' },
1097		- { value: 'claude-opus-5', label: 'Claude Opus 5', description: 'Latest Opus — best for complex agentic and coding work' },
1098		- { value: 'claude-opus-4-8', label: 'Claude Opus 4.8', description: 'Previous Opus generation' },
1099		- { value: 'claude-opus-4-7', label: 'Claude Opus 4.7', description: 'Previous Anthropic flagship model' },
1100		- ],
1101		- xai: [
1102		- { value: 'grok-4-0709', label: 'Grok 4', description: 'Latest flagship model' },
1103		- ],
1104		- deepseek: [
1105		- { value: 'deepseek-v4-flash', label: 'DeepSeek V4 Flash', description: 'Fast and cost-effective' },
1106		- { value: 'deepseek-v4-pro', label: 'DeepSeek V4 Pro', description: 'Most capable DeepSeek model' },
1107		- ],
1108		- custom: [
1109		- { value: 'custom-provider', label: 'Custom Provider', description: 'OpenAI-compatible local LLM — configure in API Keys tab' },
1110		- ],
1111		- };
1112		-
1113		- let allModels = [];
1114		- Object.keys(models).forEach(key => {
1115		- if (category === 'all' || category === key) {
1116		- allModels = allModels.concat(models[key]);
1117		- }
1118		- });
1119		-
1120		- // Filter by search term if present
1121		- if (filter) {
1122		- const lowerFilter = filter.toLowerCase();
1123		- allModels = allModels.filter(model =>
1124		- model.label.toLowerCase().includes(lowerFilter) ||
1125		- model.description.toLowerCase().includes(lowerFilter)
1126		- );
1127		- }
1128		-
1129		- // Create model cards
1130		- allModels.forEach(model => {
1131		- const isSelected = $modelSelect.val() === model.value;
1132		- const $modelCard = $(`
1133		- <div class="mxchat-model-selector-card ${isSelected ? 'mxchat-model-selected' : ''}" data-value="${model.value}">
1134		- <div class="mxchat-model-selector-icon">${getModelIcon(model.value)}</div>
1135		- <div class="mxchat-model-selector-info">
1136		- <h4 class="mxchat-model-selector-title">${model.label}</h4>
1137		- <p class="mxchat-model-selector-description">${model.description}</p>
1138		- </div>
1139		- ${isSelected ? '<div class="mxchat-model-selector-checkmark">✓</div>' : ''}
1140		- </div>
1141		- `);
1142		- $grid.append($modelCard);
1143		- });
1144		- };
1145		-
1146		- // Helper function to get icon for each model
1147		- function getModelIcon(modelValue) {
1148		- if (modelValue === 'openrouter') return '<span class="dashicons dashicons-networking" style="font-size: 24px; color: #6750A4;"></span>';
1149		- if (modelValue.startsWith('gemini-')) return '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" class="mxchat-model-icon-gemini"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"></path></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"></path><path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"></path><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"></path><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"></path></svg>';
1150		- if (modelValue.startsWith('gpt-')) return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" class="mxchat-model-icon-openai"><path fill="currentColor" d="M297 131a80.6 80.6 0 0 0-93.7-104.2 80.6 80.6 0 0 0-137 29A80.6 80.6 0 0 0 23 189a80.6 80.6 0 0 0 93.7 104.2 80.6 80.6 0 0 0 137-29A80.7 80.7 0 0 0 297.1 131zM176.9 299c-14 .1-27.6-4.8-38.4-13.8l1.9-1 63.7-36.9c3.3-1.8 5.3-5.3 5.2-9v-89.9l27 15.6c.3.1.4.4.5.7v74.4a60 60 0 0 1-60 60zM47.9 244a59.7 59.7 0 0 1-7.1-40.1l1.9 1.1 63.7 36.8c3.2 1.9 7.2 1.9 10.5 0l77.8-45V228c0 .3-.2.6-.4.8L129.9 266a60 60 0 0 1-82-22zM31.2 105c7-12.2 18-21.5 31.2-26.3v75.8c0 3.7 2 7.2 5.2 9l77.8 45-27 15.5a1 1 0 0 1-.9 0L53.1 187a60 60 0 0 1-22-82zm221.2 51.5-77.8-45 27-15.5a1 1 0 0 1 .9 0l64.4 37.1a60 60 0 0 1-9.3 108.2v-75.8c0-3.7-2-7.2-5.2-9zm26.8-40.4-1.9-1.1-63.7-36.8a10.4 10.4 0 0 0-10.5 0L125.4 123V92c0-.3 0-.6.3-.8L190.1 54a60 60 0 0 1 89.1 62.1zm-168.5 55.4-27-15.5a1 1 0 0 1-.4-.7V80.9a60 60 0 0 1 98.3-46.1l-1.9 1L116 72.8a10.3 10.3 0 0 0-5.2 9v89.8zm14.6-31.5 34.7-20 34.6 20v40L160 200l-34.7-20z"></path></svg>';
1151		- if (modelValue.startsWith('claude-')) return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 176" fill="none" class="mxchat-model-icon-claude"><path fill="currentColor" d="m147.487 0l70.081 175.78H256L185.919 0zM66.183 106.221l23.98-61.774l23.98 61.774zM70.07 0L0 175.78h39.18l14.33-36.914h73.308l14.328 36.914h39.179L110.255 0z"></path></svg>';
1152		- if (modelValue.startsWith('grok-')) return '<svg fill="currentColor" fill-rule="evenodd" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="mxchat-model-icon-xai"><path d="M6.469 8.776L16.512 23h-4.464L2.005 8.776H6.47zm-.004 7.9l2.233 3.164L6.467 23H2l4.465-6.324zM22 2.582V23h-3.659V7.764L22 2.582zM22 1l-9.952 14.095-2.233-3.163L17.533 1H22z"></path></svg>';
1153		- if (modelValue === 'custom-provider' || modelValue.startsWith('custom-')) return '<span class="dashicons dashicons-admin-site-alt3" style="font-size: 24px; color: #2c8a3d;"></span>';
1154		- if (modelValue.startsWith('deepseek-')) return '<svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" class="mxchat-model-icon-deepseek"><path d="M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z" fill="currentColor"></path></svg>';
1155		- return '<span class="dashicons dashicons-admin-generic mxchat-model-icon-generic"></span>';
1156		- }
1157		-
1158		- // Event handlers
1159		- $modelSelectorButton.on('click', function() {
1160		- $('#mxchat_model_selector_modal').show();
1161		- window.populateModelsGrid('', 'all');
1162		- });
1163		-
1164		- $('.mxchat-model-selector-modal-close, #mxchat_cancel_model_selection').on('click', function() {
1165		- $('#mxchat_model_selector_modal').hide();
1166		- });
1167		-
1168		- $('.mxchat-model-category-btn').on('click', function() {
1169		- $('.mxchat-model-category-btn').removeClass('active');
1170		- $(this).addClass('active');
1171		- const category = $(this).data('category');
1172		- const searchTerm = $('#mxchat_model_search_input').val();
1173		- window.populateModelsGrid(searchTerm, category);
1174		- });
1175		-
1176		- $('#mxchat_model_search_input').on('input', function() {
1177		- const searchTerm = $(this).val();
1178		- const activeCategory = $('.mxchat-model-category-btn.active').data('category');
1179		- window.populateModelsGrid(searchTerm, activeCategory);
1180		- });
1181		-
1182		-$(document).on('click', '.mxchat-model-selector-card', function() {
1183		- const modelValue = $(this).data('value');
1184		- const $modelSelect = $('#model');
1185		- const $clickedCard = $(this);
1186		-
1187		- // Check if OpenRouter was selected
1188		- if (modelValue === 'openrouter') {
1189		- // Load OpenRouter models instead of closing
1190		- loadOpenRouterModels();
1191		- } else {
1192		- // Remove selection from all other cards
1193		- $('.mxchat-model-selector-card').removeClass('mxchat-model-selected').find('.mxchat-model-selector-checkmark').remove();
1194		-
1195		- // Add selection to clicked card immediately for instant feedback
1196		- $clickedCard.addClass('mxchat-model-selected');
1197		- if ($clickedCard.find('.mxchat-model-selector-checkmark').length === 0) {
1198		- $clickedCard.append('<div class="mxchat-model-selector-checkmark">✓</div>');
1199		- }
1200		-
1201		- // Brief delay to show the selection, then start saving
1202		- setTimeout(function() {
1203		- // Normal model selection
1204		- $modelSelect.val(modelValue).trigger('change');
1205		-
1206		- // Show loading state on the card
1207		- $clickedCard.css('pointer-events', 'none');
1208		- const originalContent = $clickedCard.find('.mxchat-model-selector-title').html();
1209		- $clickedCard.find('.mxchat-model-selector-title').html(
1210		- '<span class="spinner is-active" style="float: none; margin: 0 5px 0 0;"></span> Saving...'
1211		- );
1212		-
1213		- // Manually save the model via AJAX
1214		- jQuery.ajax({
1215		- url: mxchatAdmin.ajax_url,
1216		- type: 'POST',
1217		- data: {
1218		- action: 'mxchat_save_setting',
1219		- name: 'model',
1220		- value: modelValue,
1221		- _ajax_nonce: mxchatAdmin.setting_nonce
1222		- },
1223		- success: function(response) {
1224		- if (response.success) {
1225		- // Show success state
1226		- $clickedCard.find('.mxchat-model-selector-title').html(
1227		- '<span class="dashicons dashicons-yes" style="color: #46b450; margin-top: 3px;"></span> Saved!'
1228		- );
1229		-
1230		- // Update button text after successful save
1231		- const selectedModelText = $modelSelect.find('option:selected').text();
1232		- $('#mxchat_model_selector_btn').text(selectedModelText);
1233		-
1234		- // Close modal after a short delay to show the success message
1235		- setTimeout(function() {
1236		- $('#mxchat_model_selector_modal').hide();
1237		- // Restore original content and remove selection for next time
1238		- $clickedCard.find('.mxchat-model-selector-title').html(originalContent);
1239		- $clickedCard.removeClass('mxchat-model-selected').find('.mxchat-model-selector-checkmark').remove();
1240		- $clickedCard.css('pointer-events', 'auto');
1241		- }, 600);
1242		- } else {
1243		- // Show error state
1244		- $clickedCard.find('.mxchat-model-selector-title').html(
1245		- '<span class="dashicons dashicons-no" style="color: #dc3232;"></span> Error!'
1246		- );
1247		-
1248		- setTimeout(function() {
1249		- $clickedCard.find('.mxchat-model-selector-title').html(originalContent);
1250		- $clickedCard.removeClass('mxchat-model-selected').find('.mxchat-model-selector-checkmark').remove();
1251		- $clickedCard.css('pointer-events', 'auto');
1252		- }, 1500);
1253		- }
1254		- },
1255		- error: function() {
1256		- // Show error state
1257		- $clickedCard.find('.mxchat-model-selector-title').html(
1258		- '<span class="dashicons dashicons-no" style="color: #dc3232;"></span> Error!'
1259		- );
1260		-
1261		- setTimeout(function() {
1262		- $clickedCard.find('.mxchat-model-selector-title').html(originalContent);
1263		- $clickedCard.removeClass('mxchat-model-selected').find('.mxchat-model-selector-checkmark').remove();
1264		- $clickedCard.css('pointer-events', 'auto');
1265		- }, 1500);
1266		- }
1267		- });
1268		- }, 300); // 300ms delay to show the selection before starting to save
1269		- }
1270		-});
1271		-
1272		- // Close modal when clicking outside
1273		- $(window).on('click', function(event) {
1274		- if ($(event.target).is('#mxchat_model_selector_modal')) {
1275		- $('#mxchat_model_selector_modal').hide();
1276		- }
1277		- });
1278		-}
1279		-
1280		-function loadOpenRouterModels() {
1281		- const apiKey = $('#openrouter_api_key').val(); // This line already re-checks the field
1282		- const $modal = $('#mxchat_model_selector_modal');
1283		- const $modalBody = $modal.find('.mxchat-model-selector-modal-body');
1284		-
1285		- if (!apiKey || apiKey.trim() === '') {
1286		- // Show error message in modal
1287		- $modalBody.html(`
1288		- <div style="text-align: center; padding: 40px;">
1289		- <span class="dashicons dashicons-warning" style="font-size: 48px; color: #d63638; margin-bottom: 20px;"></span>
1290		- <h3>OpenRouter API Key Required</h3>
1291		- <p>Please enter your OpenRouter API key in the settings before selecting a model. If you're seeing this message and recently entered API key, try refreshing.</p>
1292		- <button class="button button-primary" id="mxchat_back_to_models">Back to Models</button>
1293		- </div>
1294		- `);
1295		-
1296		- $('#mxchat_back_to_models').on('click', function(e) {
1297		- e.preventDefault();
1298		- // CHANGE THIS: Instead of reloading, restore the original modal content
1299		- $modalBody.html(`
1300		- <div class="mxchat-model-selector-search-container">
1301		- <input type="text" id="mxchat_model_search_input" class="mxchat-model-search-input" placeholder="Search models...">
1302		- </div>
1303		- <div class="mxchat-model-selector-categories">
1304		- <button class="mxchat-model-category-btn active" data-category="all">All</button>
1305		- <button class="mxchat-model-category-btn" data-category="openrouter">OpenRouter</button>
1306		- <button class="mxchat-model-category-btn" data-category="gemini">Google Gemini</button>
1307		- <button class="mxchat-model-category-btn" data-category="openai">OpenAI</button>
1308		- <button class="mxchat-model-category-btn" data-category="claude">Claude</button>
1309		- <button class="mxchat-model-category-btn" data-category="xai">X.AI</button>
1310		- <button class="mxchat-model-category-btn" data-category="deepseek">DeepSeek</button>
1311		- </div>
1312		- <div class="mxchat-model-selector-grid" id="mxchat_models_grid"></div>
1313		- `);
1314		-
1315		- // Re-populate the grid
1316		- populateModelsGrid('', 'all');
1317		-
1318		- // Re-bind event handlers
1319		- rebindModalEventHandlers();
1320		- });
1321		- return;
1322		- }
1323		-
1324		- // Show loading state
1325		- $modalBody.html(`
1326		- <div style="text-align: center; padding: 60px 20px;">
1327		- <div class="spinner is-active" style="float: none; margin: 0 auto 20px;"></div>
1328		- <h3>Loading OpenRouter Models...</h3>
1329		- <p>Fetching available models from OpenRouter</p>
1330		- </div>
1331		- `);
1332		-
1333		- // Fetch models from OpenRouter
1334		- jQuery.ajax({
1335		- url: mxchatAdmin.ajax_url,
1336		- type: 'POST',
1337		- data: {
1338		- action: 'mxchat_fetch_openrouter_models',
1339		- api_key: apiKey,
1340		- nonce: mxchatAdmin.fetch_openrouter_models_nonce
1341		- },
1342		- success: function(response) {
1343		- if (response.success && response.data.models) {
1344		- displayOpenRouterModels(response.data.models);
1345		- } else {
1346		- $modalBody.html(`
1347		- <div style="text-align: center; padding: 40px;">
1348		- <span class="dashicons dashicons-warning" style="font-size: 48px; color: #d63638; margin-bottom: 20px;"></span>
1349		- <h3>Error Loading Models</h3>
1350		- <p>${response.data.message || 'Failed to load models from OpenRouter'}</p>
1351		- <button class="button button-primary" id="mxchat_back_to_models">Back to Models</button>
1352		- </div>
1353		- `);
1354		-
1355		- $('#mxchat_back_to_models').on('click', function(e) {
1356		- e.preventDefault();
1357		- // CHANGE THIS: Restore original content instead of reloading
1358		- restoreOriginalModalContent();
1359		- });
1360		- }
1361		- },
1362		- error: function() {
1363		- $modalBody.html(`
1364		- <div style="text-align: center; padding: 40px;">
1365		- <span class="dashicons dashicons-warning" style="font-size: 48px; color: #d63638; margin-bottom: 20px;"></span>
1366		- <h3>Connection Error</h3>
1367		- <p>Failed to connect to OpenRouter. Please check your API key and try again.</p>
1368		- <button class="button button-primary" id="mxchat_back_to_models">Back to Models</button>
1369		- </div>
1370		- `);
1371		-
1372		- $('#mxchat_back_to_models').on('click', function(e) {
1373		- e.preventDefault();
1374		- // CHANGE THIS: Restore original content instead of reloading
1375		- restoreOriginalModalContent();
1376		- });
1377		- }
1378		- });
1379		-}
1380		-function restoreOriginalModalContent() {
1381		- const $modalBody = $('#mxchat_model_selector_modal').find('.mxchat-model-selector-modal-body');
1382		-
1383		- $modalBody.html(`
1384		- <div class="mxchat-model-selector-search-container">
1385		- <input type="text" id="mxchat_model_search_input" class="mxchat-model-search-input" placeholder="Search models...">
1386		- </div>
1387		- <div class="mxchat-model-selector-categories">
1388		- <button class="mxchat-model-category-btn active" data-category="all">All</button>
1389		- <button class="mxchat-model-category-btn" data-category="openrouter">OpenRouter</button>
1390		- <button class="mxchat-model-category-btn" data-category="gemini">Google Gemini</button>
1391		- <button class="mxchat-model-category-btn" data-category="openai">OpenAI</button>
1392		- <button class="mxchat-model-category-btn" data-category="claude">Claude</button>
1393		- <button class="mxchat-model-category-btn" data-category="xai">X.AI</button>
1394		- <button class="mxchat-model-category-btn" data-category="deepseek">DeepSeek</button>
1395		- </div>
1396		- <div class="mxchat-model-selector-grid" id="mxchat_models_grid"></div>
1397		- `);
1398		-
1399		- // Re-populate the grid
1400		- window.populateModelsGrid('', 'all');
1401		-
1402		- // Re-bind event handlers
1403		- rebindModalEventHandlers();
1404		-}
1405		-function rebindModalEventHandlers() {
1406		- const $modal = $('#mxchat_model_selector_modal');
1407		-
1408		- // Re-bind category button clicks
1409		- $('.mxchat-model-category-btn').off('click').on('click', function() {
1410		- $('.mxchat-model-category-btn').removeClass('active');
1411		- $(this).addClass('active');
1412		- const category = $(this).data('category');
1413		- const searchTerm = $('#mxchat_model_search_input').val();
1414		- window.populateModelsGrid(searchTerm, category);
1415		- });
1416		-
1417		- // Re-bind search input
1418		- $('#mxchat_model_search_input').off('input').on('input', function() {
1419		- const searchTerm = $(this).val();
1420		- const activeCategory = $('.mxchat-model-category-btn.active').data('category');
1421		- populateModelsGrid(searchTerm, activeCategory);
1422		- });
1423		-}
1424		-
1425		-function restoreDefaultModalFooter() {
1426		- const $modalFooter = $('#mxchat_model_selector_modal').find('.mxchat-model-selector-modal-footer');
1427		-
1428		- // Restore default footer buttons
1429		- $modalFooter.html(`
1430		- <button id="mxchat_cancel_model_selection" class="button mxchat-model-cancel-btn">Cancel</button>
1431		- `);
1432		-
1433		- // Re-bind cancel button
1434		- $('#mxchat_cancel_model_selection').on('click', function() {
1435		- $('#mxchat_model_selector_modal').hide();
1436		- });
1437		-}
1438		-
1439		-function displayOpenRouterModels(models) {
1440		- const $modal = $('#mxchat_model_selector_modal');
1441		- const $modalBody = $modal.find('.mxchat-model-selector-modal-body');
1442		- const $modalFooter = $modal.find('.mxchat-model-selector-modal-footer');
1443		- const currentSelected = $('#openrouter_selected_model').val();
1444		-
1445		- // Variable to store the currently selected model (in the UI, not yet saved)
1446		- let pendingSelection = {
1447		- modelId: currentSelected || null,
1448		- modelName: $('#openrouter_selected_model_name').val() || null
1449		- };
1450		-
1451		- // Build new modal content with search and models
1452		- const newContent = `
1453		- <div class="mxchat-model-selector-search-container">
1454		- <input type="text" id="mxchat_openrouter_search" class="mxchat-model-search-input" placeholder="Search OpenRouter models...">
1455		- <p style="margin: 10px 0; color: #666; font-size: 13px;">
1456		- <strong>${models.length} models available</strong> ·
1457		- <a href="#" id="mxchat_back_to_provider_select" style="color: #2271b1;">← Back to providers</a>
1458		- </p>
1459		- </div>
1460		- <div class="mxchat-model-selector-grid" id="mxchat_openrouter_models_grid"></div>
1461		- `;
1462		-
1463		- // Update footer with Save button for OpenRouter
1464		- const footerContent = `
1465		- <button id="mxchat_back_to_models_footer" class="button mxchat-model-cancel-btn">Back to Providers</button>
1466		- <button id="mxchat_save_openrouter_model" class="button button-primary" disabled>
1467		- <span class="dashicons dashicons-saved" style="margin-top: 3px;"></span> Save Selected Model
1468		- </button>
1469		- `;
1470		-
1471		- $modalBody.html(newContent);
1472		- $modalFooter.html(footerContent);
1473		-
1474		- // Function to render models
1475		- function renderOpenRouterModels(filterText = '') {
1476		- const $grid = $('#mxchat_openrouter_models_grid');
1477		- $grid.empty();
1478		-
1479		- let filteredModels = models;
1480		- if (filterText) {
1481		- const lowerFilter = filterText.toLowerCase();
1482		- filteredModels = models.filter(m =>
1483		- m.id.toLowerCase().includes(lowerFilter) ||
1484		- m.name.toLowerCase().includes(lowerFilter) ||
1485		- (m.description && m.description.toLowerCase().includes(lowerFilter))
1486		- );
1487		- }
1488		-
1489		- filteredModels.forEach(model => {
1490		- const isSelected = pendingSelection.modelId === model.id;
1491		- const contextLength = model.context_length ? `${(model.context_length / 1000).toFixed(0)}K` : '';
1492		- const promptPrice = model.pricing.prompt ? `$${(model.pricing.prompt * 1000000).toFixed(2)}/1M` : '';
1493		-
1494		- const $card = jQuery(`
1495		- <div class="mxchat-openrouter-card ${isSelected ? 'mxchat-model-selected' : ''}" data-model-id="${model.id}" data-model-name="${model.name}">
1496		- <div class="mxchat-model-selector-icon">
1497		- ${getOpenRouterIcon(model.id)}
1498		- </div>
1499		- <div class="mxchat-model-selector-info">
1500		- <h4 class="mxchat-model-selector-title">${model.name}</h4>
1501		- <div style="font-size: 12px; color: #666; margin-top: 5px;">
1502		- ${contextLength ? '<span style="margin-right: 12px;">📄 ' + contextLength + '</span>' : ''}
1503		- ${promptPrice ? '<span>💰 ' + promptPrice + '</span>' : ''}
1504		- </div>
1505		- </div>
1506		- ${isSelected ? '<div class="mxchat-model-selector-checkmark">✓</div>' : ''}
1507		- </div>
1508		- `);
1509		-
1510		- $grid.append($card);
1511		- });
1512		- }
1513		-
1514		- // Helper to get icon
1515		- function getOpenRouterIcon(modelId) {
1516		- if (modelId.includes('gpt') || modelId.includes('openai')) {
1517		- return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" class="mxchat-model-icon-openai"><path fill="currentColor" d="M297 131a80.6 80.6 0 0 0-93.7-104.2 80.6 80.6 0 0 0-137 29A80.6 80.6 0 0 0 23 189a80.6 80.6 0 0 0 93.7 104.2 80.6 80.6 0 0 0 137-29A80.7 80.7 0 0 0 297.1 131zM176.9 299c-14 .1-27.6-4.8-38.4-13.8l1.9-1 63.7-36.9c3.3-1.8 5.3-5.3 5.2-9v-89.9l27 15.6c.3.1.4.4.5.7v74.4a60 60 0 0 1-60 60zM47.9 244a59.7 59.7 0 0 1-7.1-40.1l1.9 1.1 63.7 36.8c3.2 1.9 7.2 1.9 10.5 0l77.8-45V228c0 .3-.2.6-.4.8L129.9 266a60 60 0 0 1-82-22zM31.2 105c7-12.2 18-21.5 31.2-26.3v75.8c0 3.7 2 7.2 5.2 9l77.8 45-27 15.5a1 1 0 0 1-.9 0L53.1 187a60 60 0 0 1-22-82zm221.2 51.5-77.8-45 27-15.5a1 1 0 0 1 .9 0l64.4 37.1a60 60 0 0 1-9.3 108.2v-75.8c0-3.7-2-7.2-5.2-9zm26.8-40.4-1.9-1.1-63.7-36.8a10.4 10.4 0 0 0-10.5 0L125.4 123V92c0-.3 0-.6.3-.8L190.1 54a60 60 0 0 1 89.1 62.1zm-168.5 55.4-27-15.5a1 1 0 0 1-.4-.7V80.9a60 60 0 0 1 98.3-46.1l-1.9 1L116 72.8a10.3 10.3 0 0 0-5.2 9v89.8zm14.6-31.5 34.7-20 34.6 20v40L160 200l-34.7-20z"></path></svg>';
1518		- } else if (modelId.includes('claude') || modelId.includes('anthropic')) {
1519		- return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 176" fill="none" class="mxchat-model-icon-claude"><path fill="currentColor" d="m147.487 0l70.081 175.78H256L185.919 0zM66.183 106.221l23.98-61.774l23.98 61.774zM70.07 0L0 175.78h39.18l14.33-36.914h73.308l14.328 36.914h39.179L110.255 0z"></path></svg>';
1520		- } else if (modelId.includes('gemini') || modelId.includes('google')) {
1521		- return '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" class="mxchat-model-icon-gemini"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"></path></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"></path><clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"></path><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"></path><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"></path></svg>';
1522		- }
1523		- return '<span class="dashicons dashicons-cloud" style="font-size: 24px; color: #6750A4;"></span>';
1524		- }
1525		-
1526		- // Initial render
1527		- renderOpenRouterModels();
1528		-
1529		- // Search handler
1530		- $('#mxchat_openrouter_search').on('input', function() {
1531		- renderOpenRouterModels($(this).val());
1532		- });
1533		-
1534		- $('#mxchat_back_to_provider_select').on('click', function(e) {
1535		- e.preventDefault();
1536		- // Restore footer to default state
1537		- restoreDefaultModalFooter();
1538		- // Instead of location.reload(), restore original content
1539		- restoreOriginalModalContent();
1540		- });
1541		-
1542		- // Back to providers footer button
1543		- $('#mxchat_back_to_models_footer').on('click', function(e) {
1544		- e.preventDefault();
1545		- // Restore footer to default state
1546		- restoreDefaultModalFooter();
1547		- // Restore original content
1548		- restoreOriginalModalContent();
1549		- });
1550		-
1551		- // Model selection - just highlight, don't save yet
1552		- $(document).on('click', '.mxchat-openrouter-card', function(e) {
1553		- e.stopPropagation(); // Prevent triggering the regular model card handler
1554		-
1555		- const modelId = $(this).data('model-id');
1556		- const modelName = $(this).data('model-name');
1557		-
1558		- // Remove selection from all cards
1559		- $('.mxchat-openrouter-card').removeClass('mxchat-model-selected').find('.mxchat-model-selector-checkmark').remove();
1560		-
1561		- // Add selection to clicked card
1562		- $(this).addClass('mxchat-model-selected');
1563		- if ($(this).find('.mxchat-model-selector-checkmark').length === 0) {
1564		- $(this).append('<div class="mxchat-model-selector-checkmark">✓</div>');
1565		- }
1566		-
1567		- // Update pending selection
1568		- pendingSelection.modelId = modelId;
1569		- pendingSelection.modelName = modelName;
1570		-
1571		- // Enable the save button
1572		- $('#mxchat_save_openrouter_model').prop('disabled', false);
1573		- });
1574		-
1575		- // Save button handler
1576		- $('#mxchat_save_openrouter_model').on('click', function() {
1577		- const $saveButton = $(this);
1578		-
1579		- if (!pendingSelection.modelId) {
1580		- return;
1581		- }
1582		-
1583		- // Disable button and show loading state
1584		- $saveButton.prop('disabled', true).html('<span class="spinner is-active" style="float: none; margin: 0 5px 0 0;"></span> Saving...');
1585		-
1586		- // First, save that we're using OpenRouter
1587		- jQuery.ajax({
1588		- url: mxchatAdmin.ajax_url,
1589		- type: 'POST',
1590		- data: {
1591		- action: 'mxchat_save_setting',
1592		- name: 'model',
1593		- value: 'openrouter',
1594		- _ajax_nonce: mxchatAdmin.setting_nonce
1595		- },
1596		- success: function() {
1597		- // After model is set, save the model ID
1598		- jQuery.ajax({
1599		- url: mxchatAdmin.ajax_url,
1600		- type: 'POST',
1601		- data: {
1602		- action: 'mxchat_save_setting',
1603		- name: 'openrouter_selected_model',
1604		- value: pendingSelection.modelId,
1605		- _ajax_nonce: mxchatAdmin.setting_nonce
1606		- },
1607		- success: function() {
1608		- // Update DOM immediately
1609		- $('#openrouter_selected_model').val(pendingSelection.modelId);
1610		-
1611		- // After model ID is saved, save the display name
1612		- jQuery.ajax({
1613		- url: mxchatAdmin.ajax_url,
1614		- type: 'POST',
1615		- data: {
1616		- action: 'mxchat_save_setting',
1617		- name: 'openrouter_selected_model_name',
1618		- value: pendingSelection.modelName,
1619		- _ajax_nonce: mxchatAdmin.setting_nonce
1620		- },
1621		- success: function() {
1622		- // Update DOM immediately
1623		- $('#openrouter_selected_model_name').val(pendingSelection.modelName);
1624		-
1625		- // Update button text
1626		- $('#mxchat_model_selector_btn').text('OpenRouter: ' + pendingSelection.modelName);
1627		-
1628		- // Update the "Currently using" message
1629		- const $currentSelection = $('#openrouter-current-selection');
1630		- if ($currentSelection.length) {
1631		- $currentSelection.html(
1632		- '<span class="dashicons dashicons-yes" style="font-size: 16px; vertical-align: middle;"></span> ' +
1633		- 'Currently using: <strong>' + pendingSelection.modelName + '</strong>'
1634		- ).show();
1635		- }
1636		-
1637		- // Show success state briefly
1638		- $saveButton.html('<span class="dashicons dashicons-yes" style="color: #46b450; margin-top: 3px;"></span> Saved!');
1639		-
1640		- // Close modal after short delay
1641		- setTimeout(function() {
1642		- // Restore footer to default state
1643		- restoreDefaultModalFooter();
1644		- $modal.hide();
1645		- }, 800);
1646		- },
1647		- error: function() {
1648		- $saveButton.prop('disabled', false).html('<span class="dashicons dashicons-saved" style="margin-top: 3px;"></span> Save Selected Model');
1649		- alert('Failed to save model name. Please try again.');
1650		- }
1651		- });
1652		- },
1653		- error: function() {
1654		- $saveButton.prop('disabled', false).html('<span class="dashicons dashicons-saved" style="margin-top: 3px;"></span> Save Selected Model');
1655		- alert('Failed to save model ID. Please try again.');
1656		- }
1657		- });
1658		- },
1659		- error: function() {
1660		- $saveButton.prop('disabled', false).html('<span class="dashicons dashicons-saved" style="margin-top: 3px;"></span> Save Selected Model');
1661		- alert('Failed to save OpenRouter selection. Please try again.');
1662		- }
1663		- });
1664		- });
1665		-
1666		-}
1667		-
1668		-// 3.2.3: Confirmation dialog shown when the user attempts to switch embedding
1669		-// models after they've already embedded content with a different model. Mixing
1670		-// embeddings from two models silently breaks similarity matching.
1671		-function showEmbeddingSwitchWarning(data, newValue, onChoice) {
1672		- $('#mxchat_embedding_switch_warning').remove();
1673		-
1674		- const dimsBlock = data.dims_differ ? `
1675		- <div class="mxchat-embed-warn-dims">
1676		- <strong>Dimension mismatch:</strong>
1677		- Existing vectors are ${data.active_dims}-dimensional, but ${data.new_label}
1678		- produces ${data.new_dims}-dimensional vectors.
1679		- If you use Pinecone, your index will reject queries entirely until you re-embed.
1680		- </div>` : '';
1681		-
1682		- const $modal = $(`
1683		- <div id="mxchat_embedding_switch_warning" class="mxchat-embed-warn-overlay">
1684		- <div class="mxchat-embed-warn-dialog">
1685		- <div class="mxchat-embed-warn-header">
1686		- <span class="mxchat-embed-warn-icon">⚠️</span>
1687		- <h3>Switching embedding models will break similarity matching</h3>
1688		- </div>
1689		- <div class="mxchat-embed-warn-body">
1690		- <p>
1691		- Your knowledge base and actions are currently embedded with
1692		- <code>${data.active_label}</code>. Switching to
1693		- <code>${data.new_label}</code> means new queries are embedded with
1694		- a different model than the stored vectors — the chatbot will return
1695		- inaccurate results or fail to match anything.
1696		- </p>
1697		- ${dimsBlock}
1698		- <p><strong>To switch safely:</strong></p>
1699		- <ol>
1700		- <li>Go to <em>Knowledge Base</em> and delete all existing entries.</li>
1701		- <li>Go to <em>Actions</em> and delete all existing actions.</li>
1702		- <li>Come back here, switch the model, then re-import your content and re-add your actions.</li>
1703		- </ol>
1704		- </div>
1705		- <div class="mxchat-embed-warn-footer">
1706		- <button type="button" class="button button-secondary" id="mxchat_embed_warn_cancel">Cancel — keep ${data.active_label}</button>
1707		- <button type="button" class="button button-primary mxchat-embed-warn-danger" id="mxchat_embed_warn_continue">Switch anyway (I'll handle it)</button>
1708		- </div>
1709		- </div>
1710		- </div>
1711		- `);
1712		-
1713		- $('body').append($modal);
1714		-
1715		- let resolved = false;
1716		- function resolve(confirmed) {
1717		- if (resolved) return;
1718		- resolved = true;
1719		- $modal.remove();
1720		- if (typeof onChoice === 'function') onChoice(confirmed);
1721		- }
1722		-
1723		- // Click on the overlay background dismisses (cancel)
1724		- $modal.on('click', function(e) {
1725		- if (e.target === $modal[0]) resolve(false);
1726		- });
1727		- $modal.find('#mxchat_embed_warn_cancel').on('click', function() { resolve(false); });
1728		- $modal.find('#mxchat_embed_warn_continue').on('click', function() { resolve(true); });
1729		-}
1730		-
1731		-// Embedding model selector - completely separate from chat model selector
1732		-function setupMxChatEmbeddingModelSelector() {
1733		- const $embeddingModelSelect = $('#embedding_model');
1734		-
1735		- // Skip if the element doesn't exist on the page
1736		- if ($embeddingModelSelect.length === 0) {
1737		- return;
1738		- }
1739		-
1740		- const $embeddingModelSelectorButton = $('<button>', {
1741		- type: 'button',
1742		- id: 'mxchat_embedding_model_selector_btn',
1743		- class: 'button-primary mxchat-embedding-model-selector-btn', // Changed class name to be more specific
1744		- text: 'Select Embedding Model'
1745		- });
1746		-
1747		- // Replace the select dropdown with a button
1748		- $embeddingModelSelect.hide().after($embeddingModelSelectorButton);
1749		-
1750		- // Custom-provider embeddings lock (plan ae02cb): while "Use custom provider
1751		- // for embeddings" is on, the standard picker is inert — the effective model
1752		- // is the Custom Embedding Model field. Lock the button (which also makes the
1753		- // switch-warning preflight unreachable), show the explanatory note, and keep
1754		- // both in sync with the toggle without a reload.
1755		- const $customEmbedToggle = $('#custom_provider_for_embeddings');
1756		- function syncCustomEmbeddingLock() {
1757		- const locked = $customEmbedToggle.length
1758		- ? $customEmbedToggle.is(':checked')
1759		- : $embeddingModelSelect.prop('disabled');
1760		- $embeddingModelSelect.prop('disabled', locked);
1761		- $embeddingModelSelectorButton.prop('disabled', locked);
1762		- $('#mxchat_embedding_custom_note').toggle(locked);
1763		- if (locked) {
1764		- $('#' + embeddingModalId).hide();
1765		- $('.mxchat-embedding-api-status').hide();
1766		- } else if (typeof window.mxchatRefreshAPIKeyStatus === 'function') {
1767		- window.mxchatRefreshAPIKeyStatus();
1768		- }
1769		- }
1770		- // NOTE: invoked further down, after embeddingModalId exists — calling it
1771		- // here would hit the const's temporal dead zone whenever the page loads
1772		- // with the lock already on.
1773		-
1774		- // Update button text to show currently selected model
1775		- function updateButtonText() {
1776		- const selectedModel = $embeddingModelSelect.val();
1777		- const selectedModelText = $embeddingModelSelect.find('option:selected').text();
1778		- $embeddingModelSelectorButton.text(selectedModelText);
1779		- }
1780		-
1781		- // Initialize button text
1782		- updateButtonText();
1783		-
1784		- // Create a unique ID for the modal to avoid conflicts
1785		- const embeddingModalId = 'mxchat_embedding_model_selector_modal';
1786		-
1787		- // Create and append modal HTML with unique IDs
1788		- const embeddingModelSelectorModal = `
1789		- <div id="${embeddingModalId}" class="mxchat-embedding-model-selector-modal">
1790		- <div class="mxchat-embedding-model-selector-modal-content">
1791		- <div class="mxchat-embedding-model-selector-modal-header">
1792		- <h3>Select Embedding Model</h3>
1793		- <span class="mxchat-embedding-model-selector-modal-close">&times;</span>
1794		- </div>
1795		- <div class="mxchat-embedding-model-selector-modal-body">
1796		- <div class="mxchat-embedding-model-selector-search-container">
1797		- <input type="text" id="mxchat_embedding_model_search_input" class="mxchat-embedding-model-search-input" placeholder="Search models...">
1798		- </div>
1799		- <div class="mxchat-embedding-model-selector-categories">
1800		- <button class="mxchat-embedding-model-category-btn active" data-category="all">All</button>
1801		- <button class="mxchat-embedding-model-category-btn" data-category="openai">OpenAI</button>
1802		- <button class="mxchat-embedding-model-category-btn" data-category="voyage">Voyage AI</button>
1803		- <button class="mxchat-embedding-model-category-btn" data-category="gemini">Google Gemini</button>
1804		- </div>
1805		- <div class="mxchat-embedding-model-selector-grid" id="mxchat_embedding_models_grid"></div>
1806		- </div>
1807		- <div class="mxchat-embedding-model-selector-modal-footer">
1808		- <button id="mxchat_cancel_embedding_model_selection" class="button mxchat-embedding-model-cancel-btn">Cancel</button>
1809		- </div>
1810		- </div>
1811		- </div>
1812		- `;
1813		-
1814		- // Use jQuery's append to ensure it doesn't clash with existing modals
1815		- $('body').append(embeddingModelSelectorModal);
1816		-
1817		- // Apply the custom-embeddings lock now that the modal id is live, and keep
1818		- // it in sync with the toggle.
1819		- syncCustomEmbeddingLock();
1820		- $customEmbedToggle.on('change.embeddingModelSelector', syncCustomEmbeddingLock);
1821		-
1822		- // Populate models grid
1823		- function populateEmbeddingModelsGrid(filter = '', category = 'all') {
1824		- const $grid = $('#mxchat_embedding_models_grid');
1825		- $grid.empty();
1826		-
1827		- // Define embedding models with descriptions and context lengths
1828		- const models = {
1829		- openai: [
1830		- {
1831		- value: 'text-embedding-3-small',
1832		- label: 'TE3 Small',
1833		- description: 'Fast and cost-effective embeddings (1536 dimensions, 8K context)'
1834		- },
1835		- {
1836		- value: 'text-embedding-ada-002',
1837		- label: 'Ada 2',
1838		- description: 'Balanced performance embeddings (1536 dimensions, 8K context)'
1839		- },
1840		- {
1841		- value: 'text-embedding-3-large',
1842		- label: 'TE3 Large',
1843		- description: 'High-performance embeddings (3072 dimensions, 8K context)'
1844		- }
1845		- ],
1846		- voyage: [
1847		- {
1848		- value: 'voyage-3-large',
1849		- label: 'Voyage-3 Large',
1850		- description: 'Advanced semantic search embeddings (2048 dimensions, 32K context)'
1851		- }
1852		- ],
1853		- gemini: [
1854		- {
1855		- value: 'gemini-embedding-001',
1856		- label: 'Gemini Embedding',
1857		- description: 'Stable SOTA embeddings (1536 dimensions, 8K context)'
1858		- }
1859		- ]
1860		- };
1861		-
1862		- let allModels = [];
1863		- Object.keys(models).forEach(key => {
1864		- if (category === 'all' || category === key) {
1865		- allModels = allModels.concat(models[key]);
1866		- }
1867		- });
1868		-
1869		- // Filter by search term if present
1870		- if (filter) {
1871		- const lowerFilter = filter.toLowerCase();
1872		- allModels = allModels.filter(model =>
1873		- model.label.toLowerCase().includes(lowerFilter) ||
1874		- model.description.toLowerCase().includes(lowerFilter)
1875		- );
1876		- }
1877		-
1878		- // Create model cards
1879		- allModels.forEach(model => {
1880		- const isSelected = $embeddingModelSelect.val() === model.value;
1881		- let providerClass = 'mxchat-embedding-model-provider-openai';
1882		-
1883		- if (model.value.startsWith('voyage-')) {
1884		- providerClass = 'mxchat-embedding-model-provider-voyage';
1885		- } else if (model.value.startsWith('gemini-embedding-')) {
1886		- providerClass = 'mxchat-embedding-model-provider-gemini';
1887		- }
1888		-
1889		- let iconHTML = '';
1890		- if (model.value.startsWith('voyage-')) {
1891		- iconHTML = '<span class="dashicons dashicons-chart-line mxchat-embedding-model-icon-voyage"></span>';
1892		- } else if (model.value.startsWith('gemini-embedding-')) {
1893		- iconHTML = '<span class="dashicons dashicons-google mxchat-embedding-model-icon-gemini"></span>';
1894		- } else {
1895		- iconHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" class="mxchat-embedding-model-icon-openai"><path fill="currentColor" d="M297 131a80.6 80.6 0 0 0-93.7-104.2 80.6 80.6 0 0 0-137 29A80.6 80.6 0 0 0 23 189a80.6 80.6 0 0 0 93.7 104.2 80.6 80.6 0 0 0 137-29A80.7 80.7 0 0 0 297.1 131zM176.9 299c-14 .1-27.6-4.8-38.4-13.8l1.9-1 63.7-36.9c3.3-1.8 5.3-5.3 5.2-9v-89.9l27 15.6c.3.1.4.4.5.7v74.4a60 60 0 0 1-60 60zM47.9 244a59.7 59.7 0 0 1-7.1-40.1l1.9 1.1 63.7 36.8c3.2 1.9 7.2 1.9 10.5 0l77.8-45V228c0 .3-.2.6-.4.8L129.9 266a60 60 0 0 1-82-22zM31.2 105c7-12.2 18-21.5 31.2-26.3v75.8c0 3.7 2 7.2 5.2 9l77.8 45-27 15.5a1 1 0 0 1-.9 0L53.1 187a60 60 0 0 1-22-82zm221.2 51.5-77.8-45 27-15.5a1 1 0 0 1 .9 0l64.4 37.1a60 60 0 0 1-9.3 108.2v-75.8c0-3.7-2-7.2-5.2-9zm26.8-40.4-1.9-1.1-63.7-36.8a10.4 10.4 0 0 0-10.5 0L125.4 123V92c0-.3 0-.6.3-.8L190.1 54a60 60 0 0 1 89.1 62.1zm-168.5 55.4-27-15.5a1 1 0 0 1-.4-.7V80.9a60 60 0 0 1 98.3-46.1l-1.9 1L116 72.8a10.3 10.3 0 0 0-5.2 9v89.8zm14.6-31.5 34.7-20 34.6 20v40L160 200l-34.7-20z"></path></svg>';
1896		- }
1897		-
1898		- const $modelCard = $(`
1899		- <div class="mxchat-embedding-model-selector-card ${isSelected ? 'mxchat-embedding-model-selected' : ''} ${providerClass}" data-value="${model.value}">
1900		- <div class="mxchat-embedding-model-selector-icon">
1901		- ${iconHTML}
1902		- </div>
1903		- <div class="mxchat-embedding-model-selector-info">
1904		- <h4 class="mxchat-embedding-model-selector-title">${model.label}</h4>
1905		- <p class="mxchat-embedding-model-selector-description">${model.description}</p>
1906		- </div>
1907		- ${isSelected ? '<div class="mxchat-embedding-model-selector-checkmark">✓</div>' : ''}
1908		- </div>
1909		- `);
1910		-
1911		- $grid.append($modelCard);
1912		- });
1913		- }
1914		-
1915		- // Event handlers - use namespaced events to avoid conflicts
1916		- $embeddingModelSelectorButton.on('click.embeddingModelSelector', function(e) {
1917		- e.stopPropagation(); // Prevent event bubbling
1918		- $('#' + embeddingModalId).show();
1919		- populateEmbeddingModelsGrid('', 'all');
1920		- });
1921		-
1922		- $('.mxchat-embedding-model-selector-modal-close, #mxchat_cancel_embedding_model_selection').on('click.embeddingModelSelector', function(e) {
1923		- e.stopPropagation(); // Prevent event bubbling
1924		- $('#' + embeddingModalId).hide();
1925		- });
1926		-
1927		- $('.mxchat-embedding-model-selector-categories .mxchat-embedding-model-category-btn').on('click.embeddingModelSelector', function(e) {
1928		- e.stopPropagation(); // Prevent event bubbling
1929		- $('.mxchat-embedding-model-selector-categories .mxchat-embedding-model-category-btn').removeClass('active');
1930		- $(this).addClass('active');
1931		- const category = $(this).data('category');
1932		- const searchTerm = $('#mxchat_embedding_model_search_input').val();
1933		- populateEmbeddingModelsGrid(searchTerm, category);
1934		- });
1935		-
1936		- $('#mxchat_embedding_model_search_input').on('input.embeddingModelSelector', function() {
1937		- const searchTerm = $(this).val();
1938		- const activeCategory = $('.mxchat-embedding-model-selector-categories .mxchat-embedding-model-category-btn.active').data('category');
1939		- populateEmbeddingModelsGrid(searchTerm, activeCategory);
1940		- });
1941		-
1942		- // 3.2.3: Commit a model change — same as the original click handler, just
1943		- // factored out so it can be invoked from both the safe path and the
1944		- // post-confirmation path.
1945		- function commitEmbeddingModelChange(modelValue) {
1946		- $embeddingModelSelect.val(modelValue);
1947		- const changeEvent = new Event('change', { bubbles: true });
1948		- $embeddingModelSelect[0].dispatchEvent(changeEvent);
1949		- updateButtonText();
1950		- $('#' + embeddingModalId).hide();
1951		- }
1952		-
1953		- // Use a direct selector to avoid conflicts with other card elements
1954		- $(document).on('click.embeddingModelSelector', '.mxchat-embedding-model-selector-grid .mxchat-embedding-model-selector-card', function(e) {
1955		- e.stopPropagation(); // Prevent event bubbling
1956		- const modelValue = $(this).data('value');
1957		- const previousValue = $embeddingModelSelect.val();
1958		-
1959		- // No-op if the user clicked the already-selected card
1960		- if (modelValue === previousValue) {
1961		- $('#' + embeddingModalId).hide();
1962		- return;
1963		- }
1964		-
1965		- // 3.2.3: Preflight — if the user has content embedded with a different
1966		- // model, surface a confirmation dialog before committing the switch.
1967		- $.post(ajaxurl, {
1968		- action: 'mxchat_check_embedding_switch',
1969		- security: (typeof mxchatAdmin !== 'undefined' ? mxchatAdmin.nonce : ''),
1970		- new_model: modelValue
1971		- }).done(function(resp) {
1972		- if (resp && resp.success && resp.data && resp.data.is_mismatch) {
1973		- showEmbeddingSwitchWarning(resp.data, modelValue, function(confirmed) {
1974		- if (confirmed) {
1975		- commitEmbeddingModelChange(modelValue);
1976		- }
1977		- });
1978		- } else {
1979		- commitEmbeddingModelChange(modelValue);
1980		- }
1981		- }).fail(function() {
1982		- // If preflight fails, fall back to the original behavior so a network
1983		- // hiccup doesn't block legitimate model switches.
1984		- commitEmbeddingModelChange(modelValue);
1985		- });
1986		- return;
1987		- });
1988		-
1989		- // Close modal when clicking outside - use namespaced events
1990		- $(window).on('click.embeddingModelSelector', function(event) {
1991		- if ($(event.target).is('#' + embeddingModalId)) {
1992		- $('#' + embeddingModalId).hide();
1993		- }
1994		- });
1995		-}
1996		-
1997		-// Call this function after the DOM is fully loaded
1998		-$(document).ready(function() {
1999		- setupMxChatModelSelector();
2000		- setupMxChatEmbeddingModelSelector();
2001		-});
2002		-
2003		- // Add Intent Form Submission
2004		- $('#mxchat-add-intent-form').on('submit', function(event) {
2005		- $('#mxchat-intent-loading').show();
2006		- $('#mxchat-intent-loading-text').show();
2007		- $(this).find('button[type="submit"]').hide();
2008		- });
2009		-
2010		- // Inline Edit Functionality
2011		- $('.edit-button').on('click', function() {
2012		- var row = $(this).closest('tr');
2013		-
2014		- // Clear URL field if it's a manual content URL (mxchat:// protocol)
2015		- var urlEdit = row.find('.url-edit');
2016		- if (urlEdit.length && urlEdit.val().indexOf('mxchat://') === 0) {
2017		- urlEdit.val('');
2018		- }
2019		-
2020		- // Expand the accordion to show the edit textarea (fixes short content editing)
2021		- var contentFull = row.find('.mxchat-content-full');
2022		- if (contentFull.length && contentFull.is(':hidden')) {
2023		- contentFull.show();
2024		- row.find('.mxchat-content-preview').hide();
2025		- }
2026		-
2027		- row.find('.content-view, .url-view').hide();
2028		- row.find('.content-edit, .url-edit').show();
2029		- row.find('.edit-button').hide();
2030		- row.find('.save-button').show();
2031		- });
2032		-
2033		- // Save button handler
2034		-// Save button handler
2035		-$('.save-button').on('click', function() {
2036		- var button = $(this);
2037		- var row = button.closest('tr');
2038		- var id = button.data('id');
2039		- var nonce = button.data('nonce'); // Get nonce from button data attribute
2040		- var newContent = row.find('.content-edit').val();
2041		- var newUrl = row.find('.url-edit').val();
2042		-
2043		- //console.log('Nonce from button:', nonce); // Debug
2044		-
2045		- button.prop('disabled', true);
2046		- button.text('Saving...');
2047		-
2048		- $.ajax({
2049		- url: mxchatAdmin.ajax_url,
2050		- type: 'POST',
2051		- data: {
2052		- action: 'mxchat_save_inline_prompt',
2053		- id: id,
2054		- article_content: newContent,
2055		- article_url: newUrl,
2056		- _ajax_nonce: nonce // Use nonce from button
2057		- },
2058		- success: function(response) {
2059		- button.prop('disabled', false);
2060		- button.text('Save');
2061		-
2062		- if (response.success) {
2063		- row.find('.content-view').html(newContent.replace(/\n/g, "<br>"));
2064		- if (newUrl) {
2065		- row.find('.url-view').html('<a href="' + newUrl + '" target="_blank"><span class="dashicons dashicons-external"></span> View Source</a>');
2066		- } else {
2067		- row.find('.url-view').html('<span class="mxchat-na">Manual Content</span>');
2068		- }
2069		-
2070		- row.find('.content-edit, .url-edit').hide();
2071		- row.find('.content-view, .url-view').show();
2072		- row.find('.save-button').hide();
2073		- row.find('.edit-button').show();
2074		-
2075		- // Restore accordion state - show preview, hide full content
2076		- row.find('.mxchat-content-preview').show();
2077		- row.find('.mxchat-content-full').hide();
2078		- } else {
2079		- alert('Error saving content: ' + (response.data?.message || 'Unknown error'));
2080		- }
2081		- },
2082		- error: function() {
2083		- button.prop('disabled', false);
2084		- button.text('Save');
2085		- alert('An error occurred while saving.');
2086		- }
2087		- });
2088		-});
2089		-
2090		-
2091		- // Questions handling
2092		- $('.mxchat-add-question').on('click', function () {
2093		- const container = $('#mxchat-additional-questions-container');
2094		- const questionCount = container.find('.mxchat-question-row').length + 4;
2095		- const questionIndex = container.find('.mxchat-question-row').length;
2096		-
2097		- const newQuestion = `
2098		- <div class="mxchat-question-row">
2099		- <input type="text"
2100		- name="additional_popular_questions[]"
2101		- placeholder="Enter Additional Popular Question ${questionCount}"
2102		- class="regular-text mxchat-question-input"
2103		- data-question-index="${questionIndex}" />
2104		- <button type="button" class="button mxchat-remove-question"
2105		- aria-label="Remove question">Remove</button>
2106		- </div>
2107		- `;
2108		- container.append(newQuestion);
2109		- });
2110		-
2111		- $(document).on('click', '.mxchat-remove-question', function () {
2112		- $(this).closest('.mxchat-question-row').remove();
2113		- saveQuestions();
2114		- });
2115		-
2116		- $(document).on('change', '.mxchat-question-input', function() {
2117		- saveQuestions();
2118		- });
2119		-
2120		- function saveQuestions() {
2121		- const questions = [];
2122		- $('.mxchat-question-input').each(function() {
2123		- const value = $(this).val().trim();
2124		- if (value) {
2125		- questions.push(value);
2126		- }
2127		- });
2128		-
2129		- const feedbackContainer = $('<div class="feedback-container"></div>');
2130		- const spinner = $('<div class="saving-spinner"></div>');
2131		- const successIcon = $('<div class="success-icon">✔</div>');
2132		-
2133		- // Append feedback after the add button
2134		- $('.mxchat-add-question').after(feedbackContainer);
2135		- feedbackContainer.append(spinner);
2136		-
2137		- // Save via AJAX
2138		- $.ajax({
2139		- url: mxchatAdmin.ajax_url,
2140		- type: 'POST',
2141		- data: {
2142		- action: 'mxchat_save_setting',
2143		- name: 'additional_popular_questions',
2144		- value: JSON.stringify(questions),
2145		- _ajax_nonce: mxchatAdmin.setting_nonce
2146		- },
2147		- success: function(response) {
2148		- if (response.success) {
2149		- spinner.fadeOut(200, function() {
2150		- feedbackContainer.append(successIcon);
2151		- successIcon.fadeIn(200).delay(1000).fadeOut(200, function() {
2152		- feedbackContainer.remove();
2153		- });
2154		- });
2155		- } else {
2156		- alert('Error saving questions: ' + (response.data?.message || 'Unknown error'));
2157		- feedbackContainer.remove();
2158		- }
2159		- },
2160		- error: function() {
2161		- alert('An error occurred while saving questions.');
2162		- feedbackContainer.remove();
2163		- }
2164		- });
2165		- }
2166		-
2167		- // Live agent status handler
2168		- const statusToggle = document.getElementById('live_agent_status');
2169		- const statusText = statusToggle?.parentElement.nextElementSibling?.querySelector('.status-text');
2170		- if (statusToggle && statusText) {
2171		- statusToggle.addEventListener('change', function() {
2172		- // Update display text
2173		- statusText.textContent = this.checked ? 'Online' : 'Offline';
2174		-
2175		- // Send the correct on/off value to the server
2176		- if (window.mxchatSaveSetting) {
2177		- window.mxchatSaveSetting('live_agent_status', this.checked ? 'on' : 'off');
2178		- }
2179		- });
2180		- }
2181		-
2182		- // Live agent availability schedules (plans 8ccaa2 + 99d7a4).
2183		- // The editor markup exists once PER CHANNEL (Slack + Telegram tabs), so
2184		- // everything is scoped inside each .mxchat-la-schedule container via classes
2185		- // — no page-global ids. Each editor collects its own day grid into its own
2186		- // hidden live_agent_schedule_<channel> input as JSON and fires one change
2187		- // event, so the existing autosave handler above does the POST.
2188		- $('.mxchat-la-schedule').each(function() {
2189		- const $laSchedule = $(this);
2190		- const $laEnabled = $laSchedule.find('.mxchat-la-enabled');
2191		- const $laHidden = $laSchedule.find('.mxchat-la-hidden');
2192		- const $laDays = $laSchedule.find('.mxchat-la-days');
2193		- const $laStatus = $laSchedule.find('.mxchat-la-status-text');
2194		-
2195		- function laCollect() {
2196		- const days = {};
2197		- $laDays.find('.mxchat-la-day').each(function() {
2198		- const $day = $(this);
2199		- const n = $day.data('day');
2200		- days[n] = {
2201		- enabled: $day.find('.mxchat-la-day-enabled').is(':checked'),
2202		- start: $day.find('.mxchat-la-start').val() || '09:00',
2203		- end: $day.find('.mxchat-la-end').val() || '17:00'
2204		- };
2205		- });
2206		- return { enabled: $laEnabled.is(':checked'), days: days };
2207		- }
2208		-
2209		- function laSync() {
2210		- const schedule = laCollect();
2211		- $laSchedule.toggleClass('is-active', schedule.enabled);
2212		- $laDays.attr('aria-hidden', schedule.enabled ? 'false' : 'true');
2213		- $laStatus.text(
2214		- schedule.enabled
2215		- ? (mxchatAdmin.i18n_scheduled_hours || 'Scheduled hours')
2216		- : (mxchatAdmin.i18n_always_available || 'Always available')
2217		- );
2218		- $laDays.find('.mxchat-la-day').each(function() {
2219		- const $day = $(this);
2220		- $day.toggleClass('is-on', $day.find('.mxchat-la-day-enabled').is(':checked'));
2221		- });
2222		- // Hand this channel's schedule to the shared autosave transport.
2223		- $laHidden.val(JSON.stringify(schedule)).trigger('change');
2224		- }
2225		-
2226		- $laSchedule.find('.mxchat-la-field').on('change', laSync);
2227		- });
2228		-
2229		- // Function to adjust the textarea height to content
2230		- function adjustTextareaHeight() {
2231		- this.style.height = 'auto'; // Reset to auto to calculate scrollHeight
2232		- this.style.height = this.scrollHeight + 'px'; // Expand to content height
2233		- }
2234		-
2235		- // Function to reset the textarea height to initial
2236		- function resetTextareaHeight() {
2237		- this.style.height = ''; // Remove inline height, reverting to CSS default
2238		- }
2239		-
2240		- // Target the specific textarea by ID
2241		- var $textarea = $('#system_prompt_instructions');
2242		-
2243		- // Bind events
2244		- $textarea.on('focus input', adjustTextareaHeight) // Expand on focus and input
2245		- .on('blur', resetTextareaHeight); // Reset on blur
2246		-});
2247		-
2248		-
2249		-
2250		-document.addEventListener('DOMContentLoaded', function() {
2251		- // Check if we're on the correct page before initializing
2252		- const modal = document.getElementById('mxchat-action-modal');
2253		-
2254		- // Only initialize if the modal exists on this page
2255		- if (modal) {
2256		- //console.log('MXChat Action Modal JS Loaded');
2257		-
2258		- // Initialize the action modal functionality
2259		- initStepBasedActionModal();
2260		- }
2261		-
2262		- // Function to initialize the step-based action modal
2263		- function initStepBasedActionModal() {
2264		- // We already checked for modal existence above, so no need to check again
2265		-
2266		- const actionStep1 = document.getElementById('mxchat-action-step-1');
2267		- const actionStep2 = document.getElementById('mxchat-action-step-2');
2268		- const backToStep1Btn = document.getElementById('mxchat-back-to-step-1');
2269		- const searchInput = document.getElementById('action-type-search');
2270		- const categoryButtons = modal.querySelectorAll('.mxchat-category-button');
2271		- const actionCards = modal.querySelectorAll('.mxchat-action-type-card');
2272		- const actionForm = document.getElementById('mxchat-action-form');
2273		- const callbackInput = document.getElementById('callback_function');
2274		- const actionIdField = document.getElementById('edit_action_id');
2275		- const labelField = document.getElementById('intent_label');
2276		- const phrasesField = document.getElementById('action_phrases');
2277		- const formActionType = document.getElementById('form_action_type');
2278		- const nonceContainer = document.getElementById('action-nonce-container');
2279		- const thresholdSlider = document.getElementById('similarity_threshold');
2280		- const thresholdDisplay = document.querySelector('.mxchat-threshold-value-display');
2281		-
2282		- // Rest of your initialization code remains the same...
2283		-
2284		- // Log the structure of one action card for debugging
2285		- if (actionCards.length > 0) {
2286		- //console.log('First action card data attributes:', actionCards[0].dataset);
2287		- //console.log('First action card HTML:', actionCards[0].outerHTML);
2288		- }
2289		-
2290		- // Add click event listeners to category buttons
2291		- categoryButtons.forEach(button => {
2292		- button.addEventListener('click', function() {
2293		- //console.log('Category button clicked:', this.dataset.category);
2294		-
2295		- // Remove active class from all buttons
2296		- categoryButtons.forEach(btn => btn.classList.remove('active'));
2297		-
2298		- // Add active class to clicked button
2299		- this.classList.add('active');
2300		-
2301		- // Get selected category
2302		- const category = this.dataset.category;
2303		-
2304		- // Filter action cards
2305		- filterActionCards(category, searchInput.value);
2306		- });
2307		- });
2308		-
2309		- // Add search functionality
2310		- if (searchInput) {
2311		- searchInput.addEventListener('input', function() {
2312		- // Get active category
2313		- const activeCategory = modal.querySelector('.mxchat-category-button.active')?.dataset.category || 'all';
2314		- //console.log('Search input changed, active category:', activeCategory);
2315		-
2316		- // Filter action cards
2317		- filterActionCards(activeCategory, this.value);
2318		- });
2319		- }
2320		-
2321		- // Add click event listeners to action cards
2322		- actionCards.forEach(card => {
2323		- card.addEventListener('click', function() {
2324		- // Get the action data
2325		- const isPro = this.dataset.pro === 'true';
2326		- const isInstalled = this.dataset.installed === 'true';
2327		- const addonName = this.dataset.addon || '';
2328		- const actionValue = this.dataset.value;
2329		- const actionLabel = this.dataset.label;
2330		- const actionIcon = this.querySelector('.dashicons').getAttribute('class').replace('dashicons dashicons-', '');
2331		- const actionDescription = this.querySelector('p').textContent;
2332		-
2333		- // Check if this is a promotional card (add-on not installed)
2334		- const isPromo = this.dataset.promo === 'true';
2335		-
2336		- if (isPromo || (addonName && !isInstalled)) {
2337		- // Add-on required but not installed — show informational notice
2338		- const addonDisplayName = this.querySelector('.mxchat-addon-info')?.textContent?.replace('Requires ', '').replace('— Get Add-on', '').trim() || addonName + ' Add-on';
2339		- showAddonRequiredNotice(addonDisplayName);
2340		- return;
2341		- }
2342		-
2343		- // If we get here, the action is available - proceed as normal
2344		- callbackInput.value = actionValue;
2345		-
2346		- // Update the selected action display in step 2
2347		- document.getElementById('selected-action-title').textContent = actionLabel;
2348		- document.getElementById('selected-action-description').textContent = actionDescription;
2349		- document.getElementById('selected-action-icon').innerHTML =
2350		- `<span class="dashicons dashicons-${actionIcon}"></span>`;
2351		-
2352		- // Set a default label based on the action type (user can change it)
2353		- if (!labelField.value) {
2354		- labelField.value = actionLabel;
2355		- }
2356		-
2357		- // Move to step 2
2358		- actionStep1.classList.remove('active');
2359		- actionStep2.classList.add('active');
2360		-
2361		- // Update modal title
2362		- });
2363		- });
2364		-
2365		- // Back button functionality
2366		- if (backToStep1Btn) {
2367		- backToStep1Btn.addEventListener('click', function() {
2368		- //console.log('Back button clicked');
2369		- actionStep2.classList.remove('active');
2370		- actionStep1.classList.add('active');
2371		- });
2372		- }
2373		-
2374		- // Function to filter action cards by category and search term
2375		- function filterActionCards(category, searchTerm) {
2376		- searchTerm = searchTerm.toLowerCase().trim();
2377		- //console.log(`Filtering cards by category: "${category}", search: "${searchTerm}"`);
2378		-
2379		- let visibleCount = 0;
2380		-
2381		- // Show all cards initially with animation
2382		- actionCards.forEach((card, index) => {
2383		- // Reset animation
2384		- card.style.animation = 'none';
2385		- // Trigger reflow
2386		- void card.offsetWidth;
2387		-
2388		- // Determine if card should be visible based on category and search term
2389		- const cardCategory = card.dataset.category || '';
2390		- const matchesCategory = category === 'all' || cardCategory === category;
2391		-
2392		- const cardTitle = card.querySelector('h4')?.textContent?.toLowerCase() || '';
2393		- const cardDesc = card.querySelector('p')?.textContent?.toLowerCase() || '';
2394		- const matchesSearch = searchTerm === '' ||
2395		- cardTitle.includes(searchTerm) ||
2396		- cardDesc.includes(searchTerm);
2397		-
2398		- // Show/hide card with animation
2399		- if (matchesCategory && matchesSearch) {
2400		- card.style.display = 'flex';
2401		- // Staggered animation for cards
2402		- card.style.animation = `fadeIn 0.2s ease forwards ${index * 0.03}s`;
2403		- visibleCount++;
2404		- } else {
2405		- card.style.display = 'none';
2406		- }
2407		- });
2408		-
2409		- //console.log(`Filter results: ${visibleCount} cards visible out of ${actionCards.length}`);
2410		- }
2411		-
2412		- // Function to show notice for Pro features
2413		- function showProFeatureNotice() {
2414		- //console.log('Showing Pro feature notice');
2415		- // Check if we already have a notification container
2416		- let noticeContainer = document.querySelector('.mxchat-pro-notice');
2417		-
2418		- if (!noticeContainer) {
2419		- // Create the notice container
2420		- noticeContainer = document.createElement('div');
2421		- noticeContainer.className = 'mxchat-pro-notice';
2422		-
2423		- // Create content
2424		- noticeContainer.innerHTML = `
2425		- <div class="mxchat-pro-notice-content">
2426		- <h3>MxChat Pro Feature</h3>
2427		- <p>This action is available in the Pro version only.</p>
2428		- <div class="mxchat-pro-notice-buttons">
2429		- <button class="mxchat-button-secondary mxchat-pro-notice-close">Close</button>
2430		- <a href="https://mxchat.ai/" class="mxchat-button-primary">Upgrade to Pro</a>
2431		- </div>
2432		- </div>
2433		- `;
2434		-
2435		- // Append to body
2436		- document.body.appendChild(noticeContainer);
2437		-
2438		- // Add close functionality
2439		- const closeButton = noticeContainer.querySelector('.mxchat-pro-notice-close');
2440		- closeButton.addEventListener('click', function() {
2441		- noticeContainer.classList.remove('active');
2442		- setTimeout(() => {
2443		- noticeContainer.remove();
2444		- }, 300);
2445		- });
2446		-
2447		- // Click outside to close (drag-safe)
2448		- mxchatDragSafeOverlayClose(noticeContainer, function() {
2449		- closeButton.click();
2450		- });
2451		-
2452		- // Show with animation
2453		- setTimeout(() => {
2454		- noticeContainer.classList.add('active');
2455		- }, 10);
2456		- } else {
2457		- // If it already exists, just make it visible again
2458		- noticeContainer.classList.add('active');
2459		- }
2460		- }
2461		-
2462		- // Function to show notice for add-on requirements
2463		- function showAddonRequiredNotice(addonName) {
2464		- //console.log(`Showing add-on notice for: ${addonName}`);
2465		- // Check if we already have a notification container
2466		- let noticeContainer = document.querySelector('.mxchat-addon-notice');
2467		-
2468		- if (!noticeContainer) {
2469		- // Create the notice container
2470		- noticeContainer = document.createElement('div');
2471		- noticeContainer.className = 'mxchat-addon-notice';
2472		-
2473		- // Create content
2474		- noticeContainer.innerHTML = `
2475		- <div class="mxchat-addon-notice-content">
2476		- <span class="mxchat-addon-notice-icon">🧩</span>
2477		- <h3>Add-on Required</h3>
2478		- <p>This action requires the <strong>${addonName}</strong> add-on to be installed.</p>
2479		- <div class="mxchat-addon-notice-buttons">
2480		- <button class="mxchat-button-secondary mxchat-addon-notice-close">Close</button>
2481		- <a href="admin.php?page=mxchat-addons" class="mxchat-button-primary">Get Add-ons</a>
2482		- </div>
2483		- </div>
2484		- `;
2485		-
2486		- // Append to body
2487		- document.body.appendChild(noticeContainer);
2488		-
2489		- // Add close functionality
2490		- const closeButton = noticeContainer.querySelector('.mxchat-addon-notice-close');
2491		- closeButton.addEventListener('click', function() {
2492		- noticeContainer.classList.remove('active');
2493		- setTimeout(() => {
2494		- noticeContainer.remove();
2495		- }, 300);
2496		- });
2497		-
2498		- // Click outside to close (drag-safe)
2499		- mxchatDragSafeOverlayClose(noticeContainer, function() {
2500		- closeButton.click();
2501		- });
2502		-
2503		- // Show with animation
2504		- setTimeout(() => {
2505		- noticeContainer.classList.add('active');
2506		- }, 10);
2507		- } else {
2508		- // If it already exists, update the content
2509		- const addonNameElement = noticeContainer.querySelector('p strong');
2510		- if (addonNameElement) {
2511		- addonNameElement.textContent = addonName;
2512		- }
2513		-
2514		- // Make it visible again
2515		- noticeContainer.classList.add('active');
2516		- }
2517		- }
2518		-
2519		- // Form submission handling
2520		- if (actionForm) {
2521		- actionForm.addEventListener('submit', function() {
2522		- //console.log('Form submitted');
2523		- document.getElementById('mxchat-action-loading').style.display = 'flex';
2524		- this.querySelector('button[type="submit"]').disabled = true;
2525		- });
2526		- }
2527		- }
2528		-
2529		- // Setup add action buttons (only if we're on the correct page)
2530		- if (modal) {
2531		- // Update the modal open function to support the step-based flow
2532		- window.mxchatOpenActionModal = function(isEdit = false, actionId = '', label = '', phrases = '', threshold = 85, callbackFunction = '', enabledBots = null) {
2533		- //console.log('Modal opening, edit mode:', isEdit);
2534		-
2535		- // Get form fields
2536		- const actionIdField = document.getElementById('edit_action_id');
2537		- const labelField = document.getElementById('intent_label');
2538		- const phrasesField = document.getElementById('action_phrases');
2539		- const formActionType = document.getElementById('form_action_type');
2540		- const callbackInput = document.getElementById('callback_function');
2541		- const saveButton = document.getElementById('mxchat-save-action-btn');
2542		- const nonceContainer = document.getElementById('action-nonce-container');
2543		- const thresholdSlider = document.getElementById('similarity_threshold');
2544		- const thresholdDisplay = document.querySelector('.mxchat-threshold-value-display');
2545		- const actionStep1 = document.getElementById('mxchat-action-step-1');
2546		- const actionStep2 = document.getElementById('mxchat-action-step-2');
2547		- const searchInput = document.getElementById('action-type-search');
2548		-
2549		- // Set up modal for edit or create
2550		- if (isEdit) {
2551		- saveButton.textContent = 'Update Action';
2552		- formActionType.value = 'mxchat_edit_intent';
2553		- actionIdField.value = actionId;
2554		- labelField.value = label;
2555		- phrasesField.value = phrases;
2556		- callbackInput.value = callbackFunction;
2557		- thresholdSlider.value = threshold; // Set the current threshold value
2558		- thresholdDisplay.textContent = threshold + '%'; // Update display
2559		-
2560		- // NEW: Handle bot selection checkboxes for editing
2561		- // First uncheck all bot checkboxes
2562		- document.querySelectorAll('input[name="enabled_bots[]"]').forEach(checkbox => {
2563		- checkbox.checked = false;
2564		- });
2565		-
2566		- // Then check the ones that should be enabled
2567		- if (enabledBots) {
2568		- let botsArray;
2569		- if (typeof enabledBots === 'string') {
2570		- try {
2571		- botsArray = JSON.parse(enabledBots);
2572		- } catch (e) {
2573		- console.warn('Failed to parse enabledBots:', enabledBots);
2574		- botsArray = ['default']; // fallback
2575		- }
2576		- } else if (Array.isArray(enabledBots)) {
2577		- botsArray = enabledBots;
2578		- } else {
2579		- botsArray = ['default']; // fallback
2580		- }
2581		-
2582		- botsArray.forEach(botId => {
2583		- const checkbox = document.querySelector(`input[name="enabled_bots[]"][value="${botId}"]`);
2584		- if (checkbox) {
2585		- checkbox.checked = true;
2586		- }
2587		- });
2588		- } else {
2589		- // Fallback to default if no bot data
2590		- const defaultCheckbox = document.querySelector('input[name="enabled_bots[]"][value="default"]');
2591		- if (defaultCheckbox) {
2592		- defaultCheckbox.checked = true;
2593		- }
2594		- }
2595		-
2596		- // Update the nonce field for editing
2597		- nonceContainer.innerHTML = ''; // Clear existing nonce
2598		- if (typeof mxchatAdmin !== 'undefined' && mxchatAdmin.edit_intent_nonce) {
2599		- nonceContainer.innerHTML = `<input type="hidden" name="_wpnonce" value="${mxchatAdmin.edit_intent_nonce}">`;
2600		- }
2601		-
2602		- // For editing, go directly to step 2 and update the selected action display
2603		- actionStep1.classList.remove('active');
2604		- actionStep2.classList.add('active');
2605		-
2606		- // Find the matching action card to get its details
2607		- const actionCards = document.querySelectorAll('.mxchat-action-type-card');
2608		- let foundCard = null;
2609		-
2610		- actionCards.forEach(card => {
2611		- if (card.dataset.value === callbackFunction) {
2612		- foundCard = card;
2613		- }
2614		- });
2615		-
2616		- if (foundCard) {
2617		- //console.log('Found matching action card for:', callbackFunction);
2618		- const actionLabel = foundCard.dataset.label || foundCard.querySelector('h4')?.textContent || '';
2619		- const actionIconElement = foundCard.querySelector('.dashicons');
2620		- const actionIcon = actionIconElement
2621		- ? actionIconElement.getAttribute('class').replace('dashicons dashicons-', '')
2622		- : 'admin-generic';
2623		- const actionDescription = foundCard.querySelector('p')?.textContent || '';
2624		-
2625		- document.getElementById('selected-action-title').textContent = actionLabel;
2626		- document.getElementById('selected-action-description').textContent = actionDescription;
2627		- document.getElementById('selected-action-icon').innerHTML =
2628		- `<span class="dashicons dashicons-${actionIcon}"></span>`;
2629		- } else {
2630		- //console.log('No matching action card found for:', callbackFunction);
2631		- // Fallback if we can't find the card
2632		- document.getElementById('selected-action-title').textContent = label;
2633		- document.getElementById('selected-action-description').textContent = 'Configure this action for your chatbot';
2634		- document.getElementById('selected-action-icon').innerHTML =
2635		- `<span class="dashicons dashicons-admin-generic"></span>`;
2636		- }
2637		- } else {
2638		- //console.log('Setting up create mode');
2639		- saveButton.textContent = 'Save Action';
2640		- formActionType.value = 'mxchat_add_intent';
2641		- actionIdField.value = '';
2642		- labelField.value = '';
2643		- phrasesField.value = '';
2644		- callbackInput.value = '';
2645		- thresholdSlider.value = 85; // Default value for new actions
2646		- thresholdDisplay.textContent = '85%'; // Default display
2647		-
2648		- // For new actions, ensure default is checked and others are unchecked
2649		- document.querySelectorAll('input[name="enabled_bots[]"]').forEach(checkbox => {
2650		- checkbox.checked = (checkbox.value === 'default');
2651		- });
2652		-
2653		- // Update the nonce field for adding
2654		- nonceContainer.innerHTML = ''; // Clear existing nonce
2655		- if (typeof mxchatAdmin !== 'undefined' && mxchatAdmin.add_intent_nonce) {
2656		- nonceContainer.innerHTML = `<input type="hidden" name="_wpnonce" value="${mxchatAdmin.add_intent_nonce}">`;
2657		- }
2658		-
2659		- // For creating new, start at step 1
2660		- actionStep1.classList.add('active');
2661		- actionStep2.classList.remove('active');
2662		- }
2663		-
2664		- // Show modal with animation
2665		- modal.style.display = 'flex';
2666		- requestAnimationFrame(() => {
2667		- modal.classList.add('active');
2668		- });
2669		-
2670		- // Set up close handlers
2671		- let detachEsc = null;
2672		- const closeModal = () => {
2673		- //console.log('Closing modal');
2674		- if (detachEsc) {
2675		- detachEsc();
2676		- detachEsc = null;
2677		- }
2678		- modal.classList.remove('active');
2679		- setTimeout(() => {
2680		- modal.style.display = 'none';
2681		- }, 300); // Match the CSS transition time
2682		- };
2683		-
2684		- // This modal holds edits: close only on explicit controls, confirming when dirty.
2685		- const guardedClose = mxchatGuardedClose(modal, closeModal);
2686		-
2687		- // Close button handler
2688		- const closeBtn = modal.querySelector('.mxchat-modal-close');
2689		- if (closeBtn) {
2690		- closeBtn.onclick = guardedClose;
2691		- }
2692		-
2693		- // Cancel button handler
2694		- const cancelBtns = modal.querySelectorAll('.mxchat-modal-cancel');
2695		- if (cancelBtns) {
2696		- cancelBtns.forEach(btn => {
2697		- btn.onclick = guardedClose;
2698		- });
2699		- }
2700		-
2701		- // Escape key to close modal
2702		- detachEsc = mxchatBindEscClose(modal, guardedClose);
2703		-
2704		- // Focus appropriate field based on current step
2705		- if (isEdit || actionStep2.classList.contains('active')) {
2706		- if (labelField) labelField.focus();
2707		- } else {
2708		- if (searchInput) searchInput.focus();
2709		- }
2710		-
2711		- return closeModal; // Return close function for external use
2712		- };
2713		- // Setup add action buttons
2714		- const addActionBtn = document.getElementById('mxchat-add-action-btn');
2715		- if (addActionBtn) {
2716		- //console.log('Add action button found');
2717		- addActionBtn.onclick = () => window.mxchatOpenActionModal();
2718		- }
2719		-
2720		- const createFirstAction = document.getElementById('mxchat-create-first-action');
2721		- if (createFirstAction) {
2722		- //console.log('Create first action button found');
2723		- createFirstAction.onclick = () => window.mxchatOpenActionModal();
2724		- }
2725		-
2726		- // Setup edit buttons
2727		- const editButtons = document.querySelectorAll('.mxchat-action-card .mxchat-edit-button');
2728		- //console.log('Edit buttons found:', editButtons.length);
2729		- editButtons.forEach(button => {
2730		- button.onclick = () => {
2731		- const actionId = button.dataset.actionId;
2732		- const phrases = button.dataset.phrases;
2733		- const label = button.dataset.label;
2734		- const threshold = button.dataset.threshold || 85;
2735		- const callbackFunction = button.dataset.callbackFunction;
2736		- const enabledBots = button.dataset.enabledBots; // ADD THIS LINE
2737		-
2738		- window.mxchatOpenActionModal(true, actionId, label, phrases, threshold, callbackFunction, enabledBots);
2739		- };
2740		- });
2741		- }
2742		-});
2743		-
2744		-jQuery(document).ready(function($) {
2745		- // Auto-expand custom post types container if any are checked
2746		- // Note: Click handler is in admin-knowledge-page.php inline script (initCustomPostTypesToggle)
2747		- function autoExpandIfNeeded() {
2748		- const $container = $('#mxchat-custom-post-types-container');
2749		- const $toggleBtn = $('#mxchat-custom-post-types-toggle');
2750		-
2751		- if ($container.length === 0) return;
2752		-
2753		- const hasCheckedItems = $container.find('input[type="checkbox"]:checked').length > 0;
2754		-
2755		- if (hasCheckedItems) {
2756		- $container.show();
2757		- const $icon = $toggleBtn.find('span:last-child');
2758		- if ($icon.length) {
2759		- $icon.text('▲');
2760		- }
2761		- }
2762		- }
2763		-
2764		- // Run on page load
2765		- autoExpandIfNeeded();
2766		-});
2767		-
2768		-document.addEventListener('DOMContentLoaded', function() {
2769		- var viewSampleBtn = document.getElementById('mxchatViewSampleBtn');
2770		- var modal = document.getElementById('mxchatSampleModal');
2771		- var modalClose = document.getElementById('mxchatModalClose');
2772		- var closeBtn = document.getElementById('mxchatCloseBtn');
2773		- var copyBtn = document.getElementById('mxchatCopyBtn');
2774		- var instructionsContent = document.querySelector('.mxchat-instructions-content');
2775		- var modalContent = document.querySelector('.mxchat-instructions-modal-content');
2776		-
2777		- if (!viewSampleBtn || !modal) {
2778		- return;
2779		- }
2780		-
2781		- // Open modal
2782		- viewSampleBtn.addEventListener('click', function(e) {
2783		- e.preventDefault();
2784		- e.stopPropagation();
2785		- modal.classList.add('mxchat-instructions-show');
2786		- });
2787		-
2788		- // Close modal function
2789		- function closeModal(e) {
2790		- if (e) {
2791		- e.preventDefault();
2792		- e.stopPropagation();
2793		- }
2794		- modal.classList.remove('mxchat-instructions-show');
2795		- }
2796		-
2797		- // Close modal events
2798		- if (modalClose) {
2799		- modalClose.addEventListener('click', function(e) {
2800		- closeModal(e);
2801		- });
2802		- }
2803		-
2804		- if (closeBtn) {
2805		- closeBtn.addEventListener('click', function(e) {
2806		- closeModal(e);
2807		- });
2808		- }
2809		-
2810		- // Close on backdrop click ONLY (not on hover), and only when the whole gesture
2811		- // happened on the backdrop — selecting the sample text and releasing past the
2812		- // dialog edge otherwise dispatches the click on the overlay and closes it.
2813		- mxchatDragSafeOverlayClose(modal, closeModal);
2814		-
2815		- // Prevent modal content clicks from closing the modal
2816		- if (modalContent) {
2817		- modalContent.addEventListener('click', function(e) {
2818		- e.stopPropagation();
2819		- });
2820		- }
2821		-
2822		- // Close on escape key
2823		- document.addEventListener('keydown', function(e) {
2824		- if (e.key === 'Escape' && modal.classList.contains('mxchat-instructions-show')) {
2825		- closeModal();
2826		- }
2827		- });
2828		-
2829		- // Copy functionality
2830		- if (copyBtn && instructionsContent) {
2831		- copyBtn.addEventListener('click', function(e) {
2832		- e.preventDefault();
2833		- e.stopPropagation();
2834		-
2835		- var text = instructionsContent.textContent;
2836		-
2837		- if (navigator.clipboard) {
2838		- navigator.clipboard.writeText(text).then(function() {
2839		- showCopySuccess();
2840		- }).catch(function() {
2841		- fallbackCopy(text);
2842		- });
2843		- } else {
2844		- fallbackCopy(text);
2845		- }
2846		- });
2847		- }
2848		-
2849		- function fallbackCopy(text) {
2850		- var textArea = document.createElement('textarea');
2851		- textArea.value = text;
2852		- textArea.style.position = 'fixed';
2853		- textArea.style.left = '-999999px';
2854		- textArea.style.top = '-999999px';
2855		- document.body.appendChild(textArea);
2856		- textArea.select();
2857		- try {
2858		- document.execCommand('copy');
2859		- showCopySuccess();
2860		- } catch (err) {
2861		- console.error('Copy failed');
2862		- }
2863		- document.body.removeChild(textArea);
2864		- }
2865		-
2866		- function showCopySuccess() {
2867		- var originalText = copyBtn.innerHTML;
2868		- copyBtn.innerHTML = '<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"><polyline points="20,6 9,17 4,12"/></svg>Copied!';
2869		-
2870		- setTimeout(function() {
2871		- copyBtn.innerHTML = originalText;
2872		- }, 2000);
2873		- }
2874		-});
2875		-
2876		-jQuery(document).ready(function($) {
2877		- var emailDependentFields = [
2878		- '#email_blocker_header_content',
2879		- '#email_blocker_button_text',
2880		- '#enable_name_field',
2881		- '#name_field_placeholder'
2882		- ];
2883		-
2884		- // Add visual indicators
2885		- emailDependentFields.forEach(function(fieldId) {
2886		- var $row = $(fieldId).closest('tr');
2887		- $row.addClass('email-dependent-field');
2888		-
2889		- // Add an icon to show it's dependent
2890		- var $label = $row.find('th label, th');
2891		- $label.prepend('<span class="email-dependent-icon" style="color: #0073aa; margin-right: 5px;">↳</span>');
2892		- });
2893		-
2894		- // Hide initially with opacity for smoother transition
2895		- emailDependentFields.forEach(function(fieldId) {
2896		- $(fieldId).closest('tr').hide().css('opacity', '0');
2897		- });
2898		-
2899		- function toggleEmailFields() {
2900		- var emailEnabled = $('#enable_email_block').is(':checked');
2901		-
2902		- emailDependentFields.forEach(function(fieldId) {
2903		- var $row = $(fieldId).closest('tr');
2904		- if (emailEnabled) {
2905		- $row.slideDown(400).animate({opacity: 1}, 200);
2906		- } else {
2907		- $row.animate({opacity: 0}, 200).slideUp(400);
2908		- }
2909		- });
2910		- }
2911		-
2912		- toggleEmailFields();
2913		- $('#enable_email_block').on('change', toggleEmailFields);
2914		-});
2915		-
2916		-
2917		-
2918		-//Handle role restriction changes
2919		-jQuery(document).ready(function($) {
2920		- //Handle role restriction changes for both data sources
2921		- $(document).on('change', '.mxchat-role-select', function() {
2922		- const $select = $(this);
2923		- const entryId = $select.data('entry-id');
2924		- const dataSource = $select.data('data-source');
2925		- const roleRestriction = $select.val();
2926		- const nonce = $select.data('nonce');
2927		-
2928		- // Visual feedback
2929		- $select.prop('disabled', true).addClass('updating');
2930		-
2931		- $.ajax({
2932		- url: ajaxurl,
2933		- type: 'POST',
2934		- data: {
2935		- action: 'mxchat_update_role_restriction',
2936		- nonce: nonce,
2937		- entry_id: entryId,
2938		- data_source: dataSource, // NEW: Include data source
2939		- role_restriction: roleRestriction
2940		- },
2941		- success: function(response) {
2942		- if (response.success) {
2943		- // Show success feedback
2944		- $select.removeClass('updating').addClass('updated');
2945		- setTimeout(() => {
2946		- $select.removeClass('updated');
2947		- }, 2000);
2948		- } else {
2949		- alert('Failed to update role restriction: ' + response.data);
2950		- // Revert selection
2951		- $select.val($select.data('original-value'));
2952		- }
2953		- },
2954		- error: function() {
2955		- alert('Error updating role restriction');
2956		- // Revert selection
2957		- $select.val($select.data('original-value'));
2958		- },
2959		- complete: function() {
2960		- $select.prop('disabled', false);
2961		- }
2962		- });
2963		-
2964		- // Store original value for potential revert
2965		- $select.data('original-value', roleRestriction);
2966		- });
2967		-
2968		- // Store initial values
2969		- $('.mxchat-role-select').each(function() {
2970		- $(this).data('original-value', $(this).val());
2971		- });
2972		-});
2973		-
2974		-// Bot Selector Handler
2975		-jQuery(document).ready(function($) {
2976		- var saveTimer;
2977		-
2978		- // Function to update bot_id in forms
2979		- function updateBotIdInForm(formSelector) {
2980		- var botId = $('#mxchat-bot-selector').val();
2981		- var form = $(formSelector);
2982		-
2983		- if (form.length > 0) {
2984		- // Remove existing bot_id hidden input
2985		- form.find('input[name="bot_id"]').remove();
2986		-
2987		- // Add new bot_id hidden input if not default
2988		- if (botId && botId !== 'default') {
2989		- form.append('<input type="hidden" name="bot_id" value="' + botId + '">');
2990		- }
2991		- }
2992		- }
2993		-
2994		- $('#mxchat-bot-selector').on('change', function() {
2995		- var botId = $(this).val();
2996		-
2997		- // Clear any existing timer
2998		- clearTimeout(saveTimer);
2999		-
3000		- // Update all forms with new bot_id when bot selection changes
3001		- updateBotIdInForm('#mxchat-url-form');
3002		- updateBotIdInForm('#mxchat-content-form');
3003		-
3004		- // Save the selection via AJAX
3005		- $.ajax({
3006		- url: ajaxurl,
3007		- type: 'POST',
3008		- data: {
3009		- action: 'mxchat_save_selected_bot',
3010		- bot_id: botId,
3011		- nonce: mxchatAdmin.setting_nonce
3012		- },
3013		- success: function(response) {
3014		- if (response.success) {
3015		- // Show saved indicator
3016		- $('#mxchat-bot-save-status').fadeIn().delay(2000).fadeOut();
3017		-
3018		- // Reload the page after a short delay to refresh content
3019		- saveTimer = setTimeout(function() {
3020		- var currentUrl = new URL(window.location.href);
3021		- currentUrl.searchParams.set('bot_id', botId);
3022		- currentUrl.searchParams.set('page', 'mxchat-prompts');
3023		- window.location.href = currentUrl.toString();
3024		- }, 500);
3025		- }
3026		- },
3027		- error: function() {
3028		- console.error('Failed to save bot selection');
3029		- }
3030		- });
3031		- });
3032		-
3033		- // Initialize forms with current bot_id when the page loads
3034		- setTimeout(function() {
3035		- updateBotIdInForm('#mxchat-url-form');
3036		- updateBotIdInForm('#mxchat-content-form');
3037		- }, 100);
3038		-});
3039		-
3040		-// API Key Status Indicator for Chat Models
3041		-jQuery(document).ready(function($) {
3042		- function updateChatModelAPIStatus(apiKeyStatuses) {
3043		- var selectedModel = $('#model').val();
3044		-
3045		- // Hide all status messages
3046		- $('.mxchat-api-status').hide();
3047		-
3048		- // Return early if no model is selected
3049		- if (!selectedModel) {
3050		- return;
3051		- }
3052		-
3053		- // Map models to providers
3054		- var provider = null;
3055		-
3056		- if (selectedModel.startsWith('gpt-')) {
3057		- provider = 'openai';
3058		- } else if (selectedModel.startsWith('claude-')) {
3059		- provider = 'claude';
3060		- } else if (selectedModel.startsWith('grok-')) {
3061		- provider = 'xai';
3062		- } else if (selectedModel.startsWith('deepseek-')) {
3063		- provider = 'deepseek';
3064		- } else if (selectedModel.startsWith('gemini-')) {
3065		- provider = 'gemini';
3066		- } else if (selectedModel === 'openrouter') {
3067		- provider = 'openrouter';
3068		- }
3069		-
3070		- // If we have fresh API key data, update the messages
3071		- if (apiKeyStatuses && provider && apiKeyStatuses[provider] !== undefined) {
3072		- var $statusElement = $('.mxchat-api-status[data-provider="' + provider + '"]');
3073		- var hasKey = apiKeyStatuses[provider];
3074		-
3075		- if (hasKey) {
3076		- $statusElement.html('<span style="color: #00a32a;">✓ API key for ' + getProviderName(provider) + ' detected</span>');
3077		- } else {
3078		- $statusElement.html('<span style="color: #d63638;">⚠ No API key for ' + getProviderName(provider) + ' detected. Please enter API key in API Keys tab.</span>');
3079		- }
3080		- }
3081		-
3082		- // Show the appropriate status message
3083		- if (provider) {
3084		- $('.mxchat-api-status[data-provider="' + provider + '"]').show();
3085		- }
3086		- }
3087		-
3088		- function updateEmbeddingModelAPIStatus(apiKeyStatuses) {
3089		- var selectedModel = $('#embedding_model').val();
3090		-
3091		- // Hide all status messages
3092		- $('.mxchat-embedding-api-status').hide();
3093		-
3094		- // Custom-provider embeddings in use: the standard picker is inert, so
3095		- // its provider key statuses are noise (plan ae02cb).
3096		- if ($('#embedding_model').prop('disabled')) {
3097		- return;
3098		- }
3099		-
3100		- // Return early if no model is selected
3101		- if (!selectedModel) {
3102		- return;
3103		- }
3104		-
3105		- // Map models to providers
3106		- var provider = null;
3107		-
3108		- if (selectedModel.startsWith('text-embedding-')) {
3109		- provider = 'openai';
3110		- } else if (selectedModel.startsWith('voyage-')) {
3111		- provider = 'voyage';
3112		- } else if (selectedModel.startsWith('gemini-embedding-')) {
3113		- provider = 'gemini';
3114		- }
3115		-
3116		- // If we have fresh API key data, update the messages
3117		- if (apiKeyStatuses && provider && apiKeyStatuses[provider] !== undefined) {
3118		- var $statusElement = $('.mxchat-embedding-api-status[data-provider="' + provider + '"]');
3119		- var hasKey = apiKeyStatuses[provider];
3120		-
3121		- if (hasKey) {
3122		- $statusElement.html('<span style="color: #00a32a;">✓ API key for ' + getProviderName(provider) + ' detected</span>');
3123		- } else {
3124		- $statusElement.html('<span style="color: #d63638;">⚠ No API key for ' + getProviderName(provider) + ' detected. Please enter API key in API Keys tab.</span>');
3125		- }
3126		- }
3127		-
3128		- // Show the appropriate status message
3129		- if (provider) {
3130		- $('.mxchat-embedding-api-status[data-provider="' + provider + '"]').show();
3131		- }
3132		- }
3133		-
3134		- function getProviderName(provider) {
3135		- var names = {
3136		- 'openai': 'OpenAI',
3137		- 'claude': 'Anthropic (Claude)',
3138		- 'xai': 'X.AI (Grok)',
3139		- 'deepseek': 'DeepSeek',
3140		- 'gemini': 'Google Gemini',
3141		- 'openrouter': 'OpenRouter',
3142		- 'voyage': 'Voyage AI'
3143		- };
3144		- return names[provider] || provider;
3145		- }
3146		-
3147		- function refreshAPIKeyStatus() {
3148		- $.ajax({
3149		- url: ajaxurl,
3150		- type: 'POST',
3151		- data: {
3152		- action: 'mxchat_check_api_keys',
3153		- nonce: mxchatAdmin.setting_nonce
3154		- },
3155		- success: function(response) {
3156		- if (response.success && response.data) {
3157		- updateChatModelAPIStatus(response.data);
3158		- updateEmbeddingModelAPIStatus(response.data);
3159		- }
3160		- }
3161		- });
3162		- }
3163		-
3164		- // Expose refresh function globally so auto-save can call it
3165		- window.mxchatRefreshAPIKeyStatus = refreshAPIKeyStatus;
3166		-
3167		- // Run on page load
3168		- updateChatModelAPIStatus();
3169		- updateEmbeddingModelAPIStatus();
3170		-
3171		- // Check if we just saved settings (WordPress redirects with ?settings-updated=true)
3172		- var urlParams = new URLSearchParams(window.location.search);
3173		- if (urlParams.get('settings-updated') === 'true') {
3174		- // Page was just reloaded after save, fetch fresh API key status
3175		- refreshAPIKeyStatus();
3176		- }
3177		-
3178		- // Run when model changes
3179		- $('#model').on('change', function() {
3180		- updateChatModelAPIStatus();
3181		- updateWebSearchToggleVisibility();
3182		- });
3183		- $('#embedding_model').on('change', function() { updateEmbeddingModelAPIStatus(); });
3184		-
3185		- // Web Search toggle visibility based on model
3186		- function updateWebSearchToggleVisibility() {
3187		- var selectedModel = $('#model').val();
3188		- var $wrapper = $('#web-search-toggle-wrapper');
3189		- var $unavailableMessage = $('#web-search-unavailable-message');
3190		-
3191		- if (!$wrapper.length) return; // Element doesn't exist
3192		-
3193		- // Get the list of web-search-capable models from data attributes (OpenAI + Gemini)
3194		- var openaiModelsAttr = $wrapper.data('openai-models');
3195		- var geminiModelsAttr = $wrapper.data('gemini-models');
3196		- var unsupportedModelsAttr = $wrapper.data('unsupported-models');
3197		-
3198		- var openaiModels = openaiModelsAttr ? String(openaiModelsAttr).split(',') : [];
3199		- var geminiModels = geminiModelsAttr ? String(geminiModelsAttr).split(',') : [];
3200		- var unsupportedModels = unsupportedModelsAttr ? String(unsupportedModelsAttr).split(',') : [];
3201		-
3202		- // Check if selected model is an OpenAI or Gemini model that supports web search
3203		- var isCapable = openaiModels.includes(selectedModel) || geminiModels.includes(selectedModel);
3204		- var isSupported = isCapable && !unsupportedModels.includes(selectedModel);
3205		-
3206		- if (isSupported) {
3207		- $wrapper.show();
3208		- $unavailableMessage.hide();
3209		- } else {
3210		- $wrapper.hide();
3211		- $unavailableMessage.show();
3212		- }
3213		- }
3214		-
3215		- // Run on page load
3216		- updateWebSearchToggleVisibility();
3217		-});
3218		-
3219		-// Transcripts Metrics Dashboard
3220		-jQuery(document).ready(function($) {
3221		- // Tab switching functionality
3222		- $('.mxchat-metrics-tab').on('click', function() {
3223		- const tabName = $(this).data('tab');
3224		-
3225		- // Update tab buttons
3226		- $('.mxchat-metrics-tab').removeClass('active');
3227		- $(this).addClass('active');
3228		-
3229		- // Update panels
3230		- $('.mxchat-metrics-panel').removeClass('active');
3231		- $(`.mxchat-metrics-panel[data-panel="${tabName}"]`).addClass('active');
3232		-
3233		- // Initialize chart if activity tab is shown
3234		- if (tabName === 'activity' && typeof mxchatChartData !== 'undefined') {
3235		- // Small delay to ensure the canvas is visible
3236		- setTimeout(function() {
3237		- initActivityChart();
3238		- }, 50);
3239		- }
3240		- });
3241		-
3242		- // Initialize chart function
3243		- function initActivityChart() {
3244		- const canvas = document.getElementById('mxchat-activity-chart');
3245		- if (!canvas) return;
3246		-
3247		- // Check if chart already exists and destroy it
3248		- if (canvas.chartInstance) {
3249		- canvas.chartInstance.destroy();
3250		- }
3251		-
3252		- const ctx = canvas.getContext('2d');
3253		-
3254		- // Create gradient for chats line
3255		- const chatsGradient = ctx.createLinearGradient(0, 0, 0, 300);
3256		- chatsGradient.addColorStop(0, 'rgba(102, 126, 234, 0.3)');
3257		- chatsGradient.addColorStop(1, 'rgba(102, 126, 234, 0.05)');
3258		-
3259		- // Create gradient for messages line
3260		- const messagesGradient = ctx.createLinearGradient(0, 0, 0, 300);
3261		- messagesGradient.addColorStop(0, 'rgba(118, 75, 162, 0.3)');
3262		- messagesGradient.addColorStop(1, 'rgba(118, 75, 162, 0.05)');
3263		-
3264		- // Simple chart without external library
3265		- canvas.chartInstance = new SimpleChart(canvas, {
3266		- labels: mxchatChartData.labels,
3267		- datasets: [
3268		- {
3269		- label: 'Chats',
3270		- data: mxchatChartData.chats,
3271		- borderColor: '#667eea',
3272		- backgroundColor: chatsGradient,
3273		- fill: true
3274		- },
3275		- {
3276		- label: 'Messages',
3277		- data: mxchatChartData.messages,
3278		- borderColor: '#764ba2',
3279		- backgroundColor: messagesGradient,
3280		- fill: true
3281		- }
3282		- ]
3283		- });
3284		- }
3285		-
3286		- // Simple chart implementation (no external dependencies)
3287		- class SimpleChart {
3288		- constructor(canvas, config) {
3289		- this.canvas = canvas;
3290		- this.ctx = canvas.getContext('2d');
3291		- this.config = config;
3292		- this.padding = { top: 20, right: 20, bottom: 40, left: 50 };
3293		- this.render();
3294		- }
3295		-
3296		- destroy() {
3297		- this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
3298		- }
3299		-
3300		- render() {
3301		- const dpr = window.devicePixelRatio || 1;
3302		- const rect = this.canvas.getBoundingClientRect();
3303		-
3304		- this.canvas.width = rect.width * dpr;
3305		- this.canvas.height = rect.height * dpr;
3306		- this.ctx.scale(dpr, dpr);
3307		-
3308		- this.canvas.style.width = rect.width + 'px';
3309		- this.canvas.style.height = rect.height + 'px';
3310		-
3311		- const width = rect.width - this.padding.left - this.padding.right;
3312		- const height = rect.height - this.padding.top - this.padding.bottom;
3313		-
3314		- // Find max value
3315		- let maxValue = 0;
3316		- this.config.datasets.forEach(dataset => {
3317		- const max = Math.max(...dataset.data);
3318		- if (max > maxValue) maxValue = max;
3319		- });
3320		-
3321		- // Add some padding to max value
3322		- maxValue = Math.ceil(maxValue * 1.1);
3323		- if (maxValue === 0) maxValue = 10;
3324		-
3325		- // Draw grid lines
3326		- this.ctx.strokeStyle = '#e5e7eb';
3327		- this.ctx.lineWidth = 1;
3328		- const gridLines = 5;
3329		-
3330		- for (let i = 0; i <= gridLines; i++) {
3331		- const y = this.padding.top + (height / gridLines) * i;
3332		- this.ctx.beginPath();
3333		- this.ctx.moveTo(this.padding.left, y);
3334		- this.ctx.lineTo(this.padding.left + width, y);
3335		- this.ctx.stroke();
3336		-
3337		- // Draw y-axis labels
3338		- const value = maxValue - (maxValue / gridLines) * i;
3339		- this.ctx.fillStyle = '#6b7280';
3340		- this.ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
3341		- this.ctx.textAlign = 'right';
3342		- this.ctx.fillText(Math.round(value), this.padding.left - 10, y + 4);
3343		- }
3344		-
3345		- // Draw datasets
3346		- this.config.datasets.forEach(dataset => {
3347		- const points = [];
3348		- const xStep = width / (this.config.labels.length - 1 || 1);
3349		-
3350		- dataset.data.forEach((value, index) => {
3351		- const x = this.padding.left + (xStep * index);
3352		- const y = this.padding.top + height - (value / maxValue * height);
3353		- points.push({ x, y, value });
3354		- });
3355		-
3356		- // Draw filled area
3357		- if (dataset.fill && dataset.backgroundColor) {
3358		- this.ctx.fillStyle = dataset.backgroundColor;
3359		- this.ctx.beginPath();
3360		- this.ctx.moveTo(points[0].x, this.padding.top + height);
3361		- points.forEach(point => {
3362		- this.ctx.lineTo(point.x, point.y);
3363		- });
3364		- this.ctx.lineTo(points[points.length - 1].x, this.padding.top + height);
3365		- this.ctx.closePath();
3366		- this.ctx.fill();
3367		- }
3368		-
3369		- // Draw line
3370		- this.ctx.strokeStyle = dataset.borderColor;
3371		- this.ctx.lineWidth = 3;
3372		- this.ctx.lineCap = 'round';
3373		- this.ctx.lineJoin = 'round';
3374		-
3375		- this.ctx.beginPath();
3376		- points.forEach((point, index) => {
3377		- if (index === 0) {
3378		- this.ctx.moveTo(point.x, point.y);
3379		- } else {
3380		- this.ctx.lineTo(point.x, point.y);
3381		- }
3382		- });
3383		- this.ctx.stroke();
3384		-
3385		- // Draw points
3386		- points.forEach(point => {
3387		- this.ctx.fillStyle = '#ffffff';
3388		- this.ctx.beginPath();
3389		- this.ctx.arc(point.x, point.y, 5, 0, Math.PI * 2);
3390		- this.ctx.fill();
3391		- this.ctx.strokeStyle = dataset.borderColor;
3392		- this.ctx.lineWidth = 2;
3393		- this.ctx.stroke();
3394		- });
3395		- });
3396		-
3397		- // Draw x-axis labels
3398		- const xStep = width / (this.config.labels.length - 1 || 1);
3399		- this.ctx.fillStyle = '#6b7280';
3400		- this.ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
3401		- this.ctx.textAlign = 'center';
3402		-
3403		- this.config.labels.forEach((label, index) => {
3404		- const x = this.padding.left + (xStep * index);
3405		- this.ctx.fillText(label, x, this.padding.top + height + 20);
3406		- });
3407		-
3408		- // Draw legend
3409		- let legendX = this.padding.left;
3410		- const legendY = rect.height - 10;
3411		-
3412		- this.config.datasets.forEach((dataset, index) => {
3413		- // Color box
3414		- this.ctx.fillStyle = dataset.borderColor;
3415		- this.ctx.fillRect(legendX, legendY - 8, 12, 12);
3416		-
3417		- // Label
3418		- this.ctx.fillStyle = '#374151';
3419		- this.ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
3420		- this.ctx.textAlign = 'left';
3421		- this.ctx.fillText(dataset.label, legendX + 18, legendY);
3422		-
3423		- legendX += this.ctx.measureText(dataset.label).width + 40;
3424		- });
3425		- }
3426		- }
3427		-
3428		- // Initialize chart on page load if we're on the activity tab
3429		- if ($('.mxchat-metrics-tab.active').data('tab') === 'activity' && typeof mxchatChartData !== 'undefined') {
3430		- setTimeout(function() {
3431		- initActivityChart();
3432		- }, 100);
3433		- }
3434		-
3435		- // ========================================
3436		- // SLACK TEST CONNECTION
3437		- // ========================================
3438		- $('#mxchat-test-slack-connection').on('click', function() {
3439		- var $button = $(this);
3440		- var $result = $('#mxchat-slack-test-result');
3441		- var originalText = $button.html();
3442		-
3443		- // Show loading state
3444		- $button.prop('disabled', true).html(
3445		- '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 8px; animation: spin 1s linear infinite;"><circle cx="12" cy="12" r="10" stroke-dasharray="32" stroke-dashoffset="12"/></svg>' +
3446		- 'Testing...'
3447		- );
3448		-
3449		- $.ajax({
3450		- url: ajaxurl,
3451		- type: 'POST',
3452		- data: {
3453		- action: 'mxchat_test_slack_connection',
3454		- nonce: mxchatAdmin.nonce
3455		- },
3456		- success: function(response) {
3457		- $result.show();
3458		- if (response.success) {
3459		- $result.html(
3460		- '<div style="background: #d4edda; border: 1px solid #c3e6cb; color: #155724; padding: 16px; border-radius: 8px;">' +
3461		- '<strong style="display: block; margin-bottom: 8px;">✓ Connection Successful!</strong>' +
3462		- '<pre style="margin: 0; white-space: pre-wrap; font-size: 13px;">' + escapeHtml(response.data.message) + '</pre>' +
3463		- '</div>'
3464		- );
3465		- } else {
3466		- var bgColor = response.data.partial ? '#fff3cd' : '#f8d7da';
3467		- var borderColor = response.data.partial ? '#ffeeba' : '#f5c6cb';
3468		- var textColor = response.data.partial ? '#856404' : '#721c24';
3469		- var icon = response.data.partial ? '⚠' : '✗';
3470		- var title = response.data.partial ? 'Partial Success - Missing Scopes' : 'Connection Failed';
3471		-
3472		- $result.html(
3473		- '<div style="background: ' + bgColor + '; border: 1px solid ' + borderColor + '; color: ' + textColor + '; padding: 16px; border-radius: 8px;">' +
3474		- '<strong style="display: block; margin-bottom: 8px;">' + icon + ' ' + title + '</strong>' +
3475		- '<pre style="margin: 0; white-space: pre-wrap; font-size: 13px;">' + escapeHtml(response.data.message) + '</pre>' +
3476		- (response.data.missing_scopes ? '<p style="margin: 12px 0 0; font-size: 13px;">Add these scopes in your Slack app settings and reinstall the app.</p>' : '') +
3477		- '</div>'
3478		- );
3479		- }
3480		- },
3481		- error: function() {
3482		- $result.show().html(
3483		- '<div style="background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; padding: 16px; border-radius: 8px;">' +
3484		- '<strong>✗ Request Failed</strong><br>Could not connect to the server. Please try again.' +
3485		- '</div>'
3486		- );
3487		- },
3488		- complete: function() {
3489		- $button.prop('disabled', false).html(originalText);
3490		- }
3491		- });
3492		- });
3493		-
3494		- // Helper function to escape HTML
3495		- function escapeHtml(text) {
3496		- var div = document.createElement('div');
3497		- div.appendChild(document.createTextNode(text));
3498		- return div.innerHTML;
3499		- }
3500		-
3501		- // ========================================
3502		- // DEBUG & OPTIMIZATION TOOLS
3503		- // ========================================
3504		-
3505		- // Debug Mode Toggle
3506		- $('#mxchat_debug_mode').on('change', function() {
3507		- var $toggle = $(this);
3508		- var enabled = $toggle.is(':checked') ? 'on' : 'off';
3509		- var $label = $toggle.closest('label');
3510		-
3511		- // Add loading indicator next to the toggle label
3512		- var $indicator = $label.find('.mxchat-save-indicator');
3513		- if ($indicator.length === 0) {
3514		- $indicator = $('<span class="mxchat-save-indicator" style="margin-left: 10px;"></span>');
3515		- $label.append($indicator);
3516		- }
3517		- $indicator.html('<span class="mxchat-saving-spinner"></span>').show();
3518		-
3519		- $.ajax({
3520		- url: ajaxurl,
3521		- type: 'POST',
3522		- data: {
3523		- action: 'mxchat_toggle_debug_mode',
3524		- enabled: enabled,
3525		- _ajax_nonce: mxchatAdmin.setting_nonce
3526		- },
3527		- success: function(response) {
3528		- if (response.success) {
3529		- // Show success indicator
3530		- $indicator.html('<span class="mxchat-save-success">✓</span>');
3531		- setTimeout(function() {
3532		- $indicator.fadeOut(300);
3533		- }, 2000);
3534		-
3535		- // Always refresh the log after toggling
3536		- refreshDebugLog();
3537		- } else {
3538		- $indicator.html('<span class="mxchat-save-error">✗</span>');
3539		- alert(response.data.message || 'Error toggling debug mode');
3540		- $toggle.prop('checked', !$toggle.is(':checked'));
3541		- }
3542		- },
3543		- error: function() {
3544		- $indicator.html('<span class="mxchat-save-error">✗</span>');
3545		- alert('Error toggling debug mode');
3546		- $toggle.prop('checked', !$toggle.is(':checked'));
3547		- }
3548		- });
3549		- });
3550		-
3551		- // Refresh Debug Log
3552		- function refreshDebugLog() {
3553		- var $container = $('#mxchat-debug-log');
3554		- var $countBadge = $('#mxchat-log-count');
3555		-
3556		- $.ajax({
3557		- url: ajaxurl,
3558		- type: 'POST',
3559		- data: {
3560		- action: 'mxchat_get_debug_log',
3561		- _ajax_nonce: mxchatAdmin.setting_nonce
3562		- },
3563		- success: function(response) {
3564		- if (response.success) {
3565		- var log = response.data.log;
3566		- var count = response.data.count;
3567		-
3568		- if (count > 0) {
3569		- $countBadge.text(count + ' entries').show();
3570		- var html = '<div class="mxchat-debug-log-entries">';
3571		- log.forEach(function(entry) {
3572		- var typeClass = 'mxchat-log-type-' + entry.type;
3573		- var typeLabel = entry.type.replace(/_/g, ' ').toUpperCase();
3574		- html += '<div class="mxchat-debug-log-entry ' + typeClass + '">';
3575		- html += '<div class="mxchat-log-header">';
3576		- html += '<span class="mxchat-log-type">' + escapeHtml(typeLabel) + '</span>';
3577		- html += '<span class="mxchat-log-time">' + escapeHtml(entry.time) + '</span>';
3578		- html += '</div>';
3579		- html += '<div class="mxchat-log-message">' + escapeHtml(entry.message) + '</div>';
3580		- if (entry.data) {
3581		- html += '<div class="mxchat-log-data">' + escapeHtml(JSON.stringify(entry.data, null, 2)) + '</div>';
3582		- }
3583		- html += '</div>';
3584		- });
3585		- html += '</div>';
3586		- $container.html(html);
3587		- } else {
3588		- $countBadge.hide();
3589		- $container.html(
3590		- '<div class="mxchat-debug-log-empty">' +
3591		- '<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>' +
3592		- '<p>No log entries yet. Enable debug mode to start logging.</p>' +
3593		- '</div>'
3594		- );
3595		- }
3596		- }
3597		- }
3598		- });
3599		- }
3600		-
3601		- // Load debug log on page load
3602		- if ($('#mxchat-debug-log').length) {
3603		- refreshDebugLog();
3604		- }
3605		-
3606		- // Refresh Log Button
3607		- $('#mxchat-refresh-log').on('click', function() {
3608		- var $btn = $(this);
3609		- $btn.prop('disabled', true);
3610		- refreshDebugLog();
3611		- setTimeout(function() {
3612		- $btn.prop('disabled', false);
3613		- }, 500);
3614		- });
3615		-
3616		- // Clear Log Button
3617		- $('#mxchat-clear-log').on('click', function() {
3618		- if (!confirm('Are you sure you want to clear the debug log?')) {
3619		- return;
3620		- }
3621		-
3622		- var $btn = $(this);
3623		- $btn.prop('disabled', true);
3624		-
3625		- $.ajax({
3626		- url: ajaxurl,
3627		- type: 'POST',
3628		- data: {
3629		- action: 'mxchat_clear_debug_log',
3630		- _ajax_nonce: mxchatAdmin.setting_nonce
3631		- },
3632		- success: function(response) {
3633		- if (response.success) {
3634		- refreshDebugLog();
3635		- } else {
3636		- alert(response.data.message || 'Error clearing log');
3637		- }
3638		- },
3639		- error: function() {
3640		- alert('Error clearing log');
3641		- },
3642		- complete: function() {
3643		- $btn.prop('disabled', false);
3644		- }
3645		- });
3646		- });
3647		-
3648		- // Export Settings Button
3649		- $('#mxchat-export-settings').on('click', function() {
3650		- var $btn = $(this);
3651		- var originalHtml = $btn.html();
3652		- $btn.prop('disabled', true).html(
3653		- '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: spin 1s linear infinite;"><circle cx="12" cy="12" r="10" stroke-dasharray="32" stroke-dashoffset="12"/></svg> Exporting...'
3654		- );
3655		-
3656		- $.ajax({
3657		- url: ajaxurl,
3658		- type: 'POST',
3659		- data: {
3660		- action: 'mxchat_export_settings',
3661		- _ajax_nonce: mxchatAdmin.setting_nonce
3662		- },
3663		- success: function(response) {
3664		- if (response.success) {
3665		- // Create and download the JSON file
3666		- var dataStr = JSON.stringify(response.data.settings, null, 2);
3667		- var blob = new Blob([dataStr], { type: 'application/json' });
3668		- var url = URL.createObjectURL(blob);
3669		- var a = document.createElement('a');
3670		- a.href = url;
3671		- a.download = response.data.filename;
3672		- document.body.appendChild(a);
3673		- a.click();
3674		- document.body.removeChild(a);
3675		- URL.revokeObjectURL(url);
3676		- } else {
3677		- alert(response.data.message || 'Error exporting settings');
3678		- }
3679		- },
3680		- error: function() {
3681		- alert('Error exporting settings');
3682		- },
3683		- complete: function() {
3684		- $btn.prop('disabled', false).html(originalHtml);
3685		- }
3686		- });
3687		- });
3688		-
3689		- // Reset Settings Modal
3690		- var $resetModal = $('#mxchat-reset-modal');
3691		- var $resetConfirmInput = $('#mxchat-reset-confirmation');
3692		- var $resetConfirmBtn = $('#mxchat-reset-confirm');
3693		-
3694		- $('#mxchat-reset-settings').on('click', function() {
3695		- $resetModal.fadeIn(200);
3696		- $resetConfirmInput.val('').focus();
3697		- $resetConfirmBtn.prop('disabled', true);
3698		- });
3699		-
3700		- $('#mxchat-reset-modal-close, #mxchat-reset-cancel, .mxch-modal-backdrop').on('click', function() {
3701		- $resetModal.fadeOut(200);
3702		- });
3703		-
3704		- $resetConfirmInput.on('input', function() {
3705		- var value = $(this).val().toUpperCase();
3706		- $resetConfirmBtn.prop('disabled', value !== 'RESET');
3707		- });
3708		-
3709		- $resetConfirmBtn.on('click', function() {
3710		- var $btn = $(this);
3711		- var confirmation = $resetConfirmInput.val();
3712		-
3713		- $btn.prop('disabled', true).text('Resetting...');
3714		-
3715		- $.ajax({
3716		- url: ajaxurl,
3717		- type: 'POST',
3718		- data: {
3719		- action: 'mxchat_reset_all_settings',
3720		- confirmation: confirmation,
3721		- _ajax_nonce: mxchatAdmin.setting_nonce
3722		- },
3723		- success: function(response) {
3724		- if (response.success) {
3725		- alert(response.data.message);
3726		- window.location.reload();
3727		- } else {
3728		- alert(response.data.message || 'Error resetting settings');
3729		- $btn.prop('disabled', false).text('Reset All Settings');
3730		- }
3731		- },
3732		- error: function() {
3733		- alert('Error resetting settings');
3734		- $btn.prop('disabled', false).text('Reset All Settings');
3735		- }
3736		- });
3737		- });
3738		-
3739		- // Load debug log on page load if we're on the optimization section
3740		- if ($('#optimization').hasClass('active') || window.location.hash === '#optimization') {
3741		- refreshDebugLog();
3742		- }
3743		-
3744		- // Also refresh when switching to optimization tab
3745		- $(document).on('click', '[data-section="optimization"]', function() {
3746		- setTimeout(refreshDebugLog, 100);
3747		- });
3748		-});
3749		-
3750		-// Global rate-limit usage: "Reset counter" button (plan-mxchat-20260603-e9b3f9)
3751		-jQuery(document).ready(function($) {
3752		- var $usage = $('#mxch-global-usage');
3753		- if (!$usage.length) {
3754		- return;
3755		- }
3756		-
3757		- $('#mxch-global-usage-reset').on('click', function() {
3758		- var $btn = $(this);
3759		- if (!window.confirm('Reset the global usage counter to zero now? This clears how many messages have been used in the current window.')) {
3760		- return;
3761		- }
3762		-
3763		- var original = $btn.text();
3764		- $btn.prop('disabled', true).text('Resetting…');
3765		-
3766		- $.ajax({
3767		- url: mxchatAdmin.ajax_url,
3768		- type: 'POST',
3769		- data: {
3770		- action: 'mxchat_reset_global_rate_limit',
3771		- bot_id: $usage.data('bot-id') || 'default',
3772		- _ajax_nonce: $usage.data('reset-nonce')
3773		- },
3774		- success: function(response) {
3775		- $btn.prop('disabled', false).text(original);
3776		- if (response && response.success) {
3777		- $('#mxch-global-usage-fill').css('width', (response.data.pct || 0) + '%');
3778		- if (response.data.text) {
3779		- $('#mxch-global-usage-text').text(response.data.text);
3780		- }
3781		- } else {
3782		- window.alert((response && response.data && response.data.message) || 'Reset failed. Please try again.');
3783		- }
3784		- },
3785		- error: function() {
3786		- $btn.prop('disabled', false).text(original);
3787		- window.alert('Reset failed. Please try again.');
3788		- }
3789		- });
3790		- });
	1	+// Simple debounce function implementation
	2	+function debounce(func, wait) {
	3	+ let timeout;
	4	+ return function executedFunction(...args) {
	5	+ const later = () => {
	6	+ clearTimeout(timeout);
	7	+ func(...args);
	8	+ };
	9	+ clearTimeout(timeout);
	10	+ timeout = setTimeout(later, wait);
	11	+ };
	12	+}
	13	+
	14	+// Helper function to open edit modal for intents/actions
	15	+function mxchatOpenEditModal(intentId, phrases) {
	16	+ const modal = document.getElementById('mxchat-edit-modal');
	17	+ if (!modal) return;
	18	+
	19	+ // Get form fields
	20	+ const intentIdField = document.getElementById('edit_intent_id');
	21	+ const phrasesField = document.getElementById('edit_phrases');
	22	+
	23	+ // Set values
	24	+ intentIdField.value = intentId;
	25	+ phrasesField.value = phrases;
	26	+
	27	+ // Show modal with animation
	28	+ modal.style.display = 'flex';
	29	+ requestAnimationFrame(() => {
	30	+ modal.classList.add('active');
	31	+ });
	32	+
	33	+ // Set up close handlers
	34	+ const closeModal = () => {
	35	+ modal.classList.remove('active');
	36	+ setTimeout(() => {
	37	+ modal.style.display = 'none';
	38	+ }, 300); // Match the CSS transition time
	39	+ };
	40	+
	41	+ // Close button handler
	42	+ const closeBtn = modal.querySelector('.mxchat-modal-close');
	43	+ if (closeBtn) {
	44	+ closeBtn.onclick = closeModal;
	45	+ }
	46	+
	47	+ // Cancel button handler
	48	+ const cancelBtn = modal.querySelector('.mxchat-modal-cancel');
	49	+ if (cancelBtn) {
	50	+ cancelBtn.onclick = closeModal;
	51	+ }
	52	+
	53	+ // Click outside modal to close
	54	+ modal.onclick = (e) => {
	55	+ if (e.target === modal) {
	56	+ closeModal();
	57	+ }
	58	+ };
	59	+
	60	+ // Focus the textarea
	61	+ phrasesField.focus();
	62	+}
	63	+// Live Agent Notice Dismissal Function
	64	+function dismissLiveAgentNotice() {
	65	+ if (typeof jQuery !== 'undefined' && typeof mxchatLiveAgent !== 'undefined') {
	66	+ jQuery.post(mxchatLiveAgent.ajaxurl, {
	67	+ action: 'dismiss_live_agent_notice',
	68	+ nonce: mxchatLiveAgent.nonce
	69	+ }, function(response) {
	70	+ if (response.success) {
	71	+ jQuery('#mxchat-disabled-notice').fadeOut(300);
	72	+ }
	73	+ }).fail(function() {
	74	+ // Fallback: just hide the notice if AJAX fails
	75	+ jQuery('#mxchat-disabled-notice').fadeOut(300);
	76	+ });
	77	+ } else {
	78	+ // Fallback for cases where jQuery or localized data isn't available
	79	+ var notice = document.getElementById('mxchat-disabled-notice');
	80	+ if (notice) {
	81	+ notice.style.display = 'none';
	82	+ }
	83	+ }
	84	+}
	85	+
	86	+// Updated mxchatOpenActionModal function to integrate with the new selector
	87	+function mxchatOpenActionModal(isEdit = false, actionId = '', label = '', phrases = '', threshold = 85, callbackFunction = '') {
	88	+ const modal = document.getElementById('mxchat-action-modal');
	89	+ if (!modal) return;
	90	+
	91	+ // Get form fields
	92	+ const actionIdField = document.getElementById('edit_action_id');
	93	+ const labelField = document.getElementById('intent_label');
	94	+ const phrasesField = document.getElementById('action_phrases');
	95	+ const formActionType = document.getElementById('form_action_type');
	96	+ const callbackGroup = document.getElementById('callback_selection_group');
	97	+ const callbackSelect = document.getElementById('callback_function');
	98	+ const saveButton = document.getElementById('mxchat-save-action-btn');
	99	+ const nonceContainer = document.getElementById('action-nonce-container');
	100	+ const thresholdSlider = document.getElementById('similarity_threshold');
	101	+ const thresholdDisplay = document.querySelector('.mxchat-threshold-value-display');
	102	+
	103	+ // Set up modal for edit or create
	104	+ if (isEdit) {
	105	+ saveButton.textContent = 'Update Action';
	106	+ formActionType.value = 'mxchat_edit_intent';
	107	+ actionIdField.value = actionId;
	108	+ labelField.value = label;
	109	+ phrasesField.value = phrases;
	110	+ callbackGroup.style.display = 'none'; // Hide callback selection when editing
	111	+ thresholdSlider.value = threshold; // Set the current threshold value
	112	+ thresholdDisplay.textContent = threshold + '%'; // Update display
	113	+
	114	+ // Remove the required attribute when editing
	115	+ callbackSelect.removeAttribute('required');
	116	+
	117	+ // Update the nonce field for editing
	118	+ nonceContainer.innerHTML = ''; // Clear existing nonce
	119	+ if (typeof mxchatAdmin !== 'undefined' && mxchatAdmin.edit_intent_nonce) {
	120	+ nonceContainer.innerHTML = `<input type="hidden" name="_wpnonce" value="${mxchatAdmin.edit_intent_nonce}">`;
	121	+ }
	122	+ } else {
	123	+ saveButton.textContent = 'Save Action';
	124	+ formActionType.value = 'mxchat_add_intent';
	125	+ actionIdField.value = '';
	126	+ labelField.value = '';
	127	+ phrasesField.value = '';
	128	+ callbackGroup.style.display = 'block'; // Show callback selection when creating
	129	+ thresholdSlider.value = 85; // Default value for new actions
	130	+ thresholdDisplay.textContent = '85%'; // Default display
	131	+
	132	+ // Ensure the required attribute is present when adding
	133	+ callbackSelect.setAttribute('required', 'required');
	134	+
	135	+ // Update the nonce field for adding
	136	+ nonceContainer.innerHTML = ''; // Clear existing nonce
	137	+ if (typeof mxchatAdmin !== 'undefined' && mxchatAdmin.add_intent_nonce) {
	138	+ nonceContainer.innerHTML = `<input type="hidden" name="_wpnonce" value="${mxchatAdmin.add_intent_nonce}">`;
	139	+ }
	140	+ }
	141	+
	142	+ // Show modal with animation
	143	+ modal.style.display = 'flex';
	144	+ requestAnimationFrame(() => {
	145	+ modal.classList.add('active');
	146	+ });
	147	+
	148	+ // Set up close handlers
	149	+ const closeModal = () => {
	150	+ modal.classList.remove('active');
	151	+ setTimeout(() => {
	152	+ modal.style.display = 'none';
	153	+ }, 300); // Match the CSS transition time
	154	+ };
	155	+
	156	+ // Close button handler
	157	+ const closeBtn = modal.querySelector('.mxchat-modal-close');
	158	+ if (closeBtn) {
	159	+ closeBtn.onclick = closeModal;
	160	+ }
	161	+
	162	+ // Cancel button handler
	163	+ const cancelBtn = modal.querySelector('.mxchat-modal-cancel');
	164	+ if (cancelBtn) {
	165	+ cancelBtn.onclick = closeModal;
	166	+ }
	167	+
	168	+ // Click outside modal to close
	169	+ modal.onclick = (e) => {
	170	+ if (e.target === modal) {
	171	+ closeModal();
	172	+ }
	173	+ };
	174	+
	175	+ // Escape key to close modal
	176	+ document.addEventListener('keydown', function(e) {
	177	+ if (e.key === 'Escape' && modal.classList.contains('active')) {
	178	+ closeModal();
	179	+ }
	180	+ }, { once: true });
	181	+
	182	+ // Focus the first field
	183	+ labelField.focus();
	184	+
	185	+ // Dispatch an event for the action type selector to catch
	186	+ const event = new CustomEvent('mxchatModalOpened', {
	187	+ detail: {
	188	+ isEdit: isEdit,
	189	+ callbackFunction: callbackFunction || (isEdit ? callbackSelect.value : '')
	190	+ }
	191	+ });
	192	+ document.dispatchEvent(event);
	193	+
	194	+ return closeModal; // Return close function for external use
	195	+}
	196	+
	197	+// Initialize event listeners
	198	+document.addEventListener('DOMContentLoaded', () => {
	199	+ // Set up edit button handlers for intents
	200	+ document.querySelectorAll('.mxchat-edit-button').forEach(button => {
	201	+ button.onclick = () => {
	202	+ const intentId = button.dataset.intentId;
	203	+ const phrases = button.dataset.phrases;
	204	+ mxchatOpenEditModal(intentId, phrases);
	205	+ };
	206	+ });
	207	+
	208	+ document.querySelectorAll('.mxchat-action-card .mxchat-edit-button').forEach(button => {
	209	+ button.onclick = () => {
	210	+ const actionId = button.dataset.actionId;
	211	+ const phrases = button.dataset.phrases;
	212	+ const label = button.dataset.label;
	213	+ const threshold = button.dataset.threshold || 85;
	214	+ const callbackFunction = button.dataset.callbackFunction;
	215	+ const enabledBots = button.dataset.enabledBots; // ADD THIS LINE
	216	+
	217	+ mxchatOpenActionModal(true, actionId, label, phrases, threshold, callbackFunction, enabledBots);
	218	+ };
	219	+ });
	220	+
	221	+ // Set up add new action buttons (new functionality)
	222	+ const addActionBtn = document.getElementById('mxchat-add-action-btn');
	223	+ if (addActionBtn) {
	224	+ addActionBtn.onclick = () => mxchatOpenActionModal();
	225	+ }
	226	+
	227	+ const createFirstAction = document.getElementById('mxchat-create-first-action');
	228	+ if (createFirstAction) {
	229	+ createFirstAction.onclick = () => mxchatOpenActionModal();
	230	+ }
	231	+
	232	+ // Setup category-specific new action buttons (new functionality)
	233	+ document.querySelectorAll('.mxchat-new-action-button').forEach(button => {
	234	+ button.onclick = () => {
	235	+ const category = button.closest('.mxchat-new-action-card').dataset.category;
	236	+ const closeModal = mxchatOpenActionModal();
	237	+
	238	+ // Pre-select the appropriate callback based on category
	239	+ if (category) {
	240	+ const callbackSelect = document.getElementById('callback_function');
	241	+ if (callbackSelect) {
	242	+ setTimeout(() => {
	243	+ // Map categories to default callbacks
	244	+ const categoryToCallback = {
	245	+ 'data_collection': 'mxchat_handle_form_collection',
	246	+ 'integrations': 'mxchat_handle_slack_message',
	247	+ 'custom_actions': 'mxchat_handle_custom_action',
	248	+ 'recommendations': 'mxchat_handle_product_recommendations'
	249	+ // Add more mappings as needed
	250	+ };
	251	+
	252	+ if (categoryToCallback[category]) {
	253	+ callbackSelect.value = categoryToCallback[category];
	254	+ }
	255	+ }, 100);
	256	+ }
	257	+ }
	258	+ };
	259	+ });
	260	+
	261	+ // Handle action toggle switches (new functionality)
	262	+ document.querySelectorAll('.mxchat-action-toggle').forEach(toggle => {
	263	+ toggle.onchange = function() {
	264	+ const actionId = this.dataset.actionId;
	265	+ const isEnabled = this.checked;
	266	+
	267	+ // Show loading indicator
	268	+ const loadingEl = document.getElementById('mxchat-action-loading');
	269	+ if (loadingEl) loadingEl.style.display = 'flex';
	270	+
	271	+ // Send AJAX request to update status
	272	+ fetch(ajaxurl, {
	273	+ method: 'POST',
	274	+ headers: {
	275	+ 'Content-Type': 'application/x-www-form-urlencoded',
	276	+ },
	277	+ body: new URLSearchParams({
	278	+ action: 'mxchat_toggle_action',
	279	+ intent_id: actionId,
	280	+ enabled: isEnabled ? 1 : 0,
	281	+ nonce: mxchatAdmin.toggle_action_nonce // Use the correct nonce
	282	+ })
	283	+ })
	284	+ .then(response => response.json())
	285	+ .then(data => {
	286	+ if (!data.success) {
	287	+ alert('Failed to update action status: ' + (data.data?.message || 'Unknown error'));
	288	+ this.checked = !isEnabled; // Revert the toggle
	289	+ }
	290	+ })
	291	+ .catch(error => {
	292	+ //console.error('Error:', error);
	293	+ alert('Server error. Please try again.');
	294	+ this.checked = !isEnabled; // Revert the toggle
	295	+ })
	296	+ .finally(() => {
	297	+ if (loadingEl) loadingEl.style.display = 'none';
	298	+ });
	299	+ };
	300	+ });
	301	+
	302	+ // Handle threshold sliders in action cards (new functionality)
	303	+ document.querySelectorAll('.mxchat-threshold-slider').forEach(slider => {
	304	+ slider.oninput = function() {
	305	+ const actionId = this.id.replace('intent_threshold_', '');
	306	+ document.getElementById('threshold_output_' + actionId).textContent = this.value + '%';
	307	+ };
	308	+ });
	309	+
	310	+ // Handle threshold save buttons in action cards (new functionality)
	311	+ document.querySelectorAll('.mxchat-threshold-save').forEach(button => {
	312	+ button.onclick = function(e) {
	313	+ e.preventDefault();
	314	+ const form = this.closest('form');
	315	+ const intentId = form.querySelector('input[name="intent_id"]').value;
	316	+ const threshold = form.querySelector('input[name="intent_threshold"]').value;
	317	+ const nonce = form.querySelector('input[name="_wpnonce"]').value;
	318	+
	319	+ // Show loading indicator
	320	+ const loadingEl = document.getElementById('mxchat-action-loading');
	321	+ if (loadingEl) loadingEl.style.display = 'flex';
	322	+
	323	+ // Send AJAX request
	324	+ fetch(ajaxurl, {
	325	+ method: 'POST',
	326	+ headers: {
	327	+ 'Content-Type': 'application/x-www-form-urlencoded',
	328	+ },
	329	+ body: new URLSearchParams({
	330	+ action: 'mxchat_update_intent_threshold',
	331	+ intent_id: intentId,
	332	+ intent_threshold: threshold,
	333	+ _wpnonce: nonce
	334	+ })
	335	+ })
	336	+ .then(response => response.json())
	337	+ .then(data => {
	338	+ if (data.success) {
	339	+ // Visual feedback of success
	340	+ const card = this.closest('.mxchat-action-card');
	341	+ card.style.background = 'rgba(120, 115, 245, 0.1)';
	342	+ setTimeout(() => {
	343	+ card.style.background = 'white';
	344	+ }, 300);
	345	+ } else {
	346	+ alert('Failed to update threshold: ' + (data.data?.message || 'Unknown error'));
	347	+ }
	348	+ })
	349	+ .catch(error => {
	350	+ //console.error('Error:', error);
	351	+ alert('Server error. Please try again.');
	352	+ })
	353	+ .finally(() => {
	354	+ if (loadingEl) loadingEl.style.display = 'none';
	355	+ });
	356	+ };
	357	+ });
	358	+});
	359	+
	360	+jQuery(document).ready(function($) {
	361	+ // Ensure we have a debounce function (use lodash if available, otherwise use our implementation)
	362	+ const useDebounce = (window._ && window._.debounce) ? window._.debounce : debounce;
	363	+
	364	+ // --- AJAX Auto-Save ---
	365	+ let $autosaveSections = $('.mxchat-autosave-section');
	366	+
	367	+ // *** ADD THIS: Extend auto-save sections to include Pinecone settings ***
	368	+ const $pineconeAutosaveSection = $('#mxchat-kb-tab-pinecone');
	369	+ if ($pineconeAutosaveSection.length) {
	370	+ $autosaveSections = $autosaveSections.add($pineconeAutosaveSection);
	371	+ //console.log('Added Pinecone section to auto-save monitoring');
	372	+ }
	373	+
	374	+ // Track whether fields have been modified by user
	375	+ const userModifiedFields = new Set();
	376	+
	377	+ if ($autosaveSections.length) {
	378	+ // Track user interactions with input fields to determine if changes are user-initiated
	379	+ $autosaveSections.find('input, textarea, select').on('focus keydown paste', function() {
	380	+ const fieldName = $(this).attr('name');
	381	+ if (fieldName) {
	382	+ userModifiedFields.add(fieldName);
	383	+ }
	384	+ });
	385	+
	386	+ // Handle real-time range slider value updates
	387	+ $autosaveSections.find('input[type="range"]').on('input', function() {
	388	+ const value = $(this).val();
	389	+ $('#threshold_value').text(value);
	390	+ });
	391	+
	392	+ // Handle all input changes (including range slider)
	393	+ $autosaveSections.find('input, textarea, select').not('#model, #openrouter_selected_model').on('change', function() {
	394	+ const $field = $(this);
	395	+ const name = $field.attr('name');
	396	+
	397	+ // Skip saving for API key fields that haven't been interacted with and are empty
	398	+ const isApiKeyField = name && (
	399	+ name === 'loops_api_key' ||
	400	+ name === 'api_key' ||
	401	+ name === 'xai_api_key' ||
	402	+ name === 'claude_api_key' ||
	403	+ name === 'voyage_api_key' ||
	404	+ name === 'gemini_api_key' ||
	405	+ name === 'deepseek_api_key' ||
	406	+ name.indexOf('_api_key') !== -1
	407	+ );
	408	+
	409	+ // Skip processing if:
	410	+ // 1. It's an API key field
	411	+ // 2. The user hasn't interacted with it
	412	+ // 3. The field is empty
	413	+ if (isApiKeyField && !userModifiedFields.has(name) && (!$field.val() || $field.val().trim() === '')) {
	414	+ //console.log('Skipping auto-save for untouched API key field:', name);
	415	+ return;
	416	+ }
	417	+
	418	+ let value;
	419	+
	420	+ // Handle different input types
	421	+ if ($field.attr('type') === 'checkbox') {
	422	+ // *** UPDATED: Handle Pinecone checkboxes differently ***
	423	+ if (name && name.indexOf('mxchat_pinecone_addon_options') !== -1) {
	424	+ value = $field.is(':checked') ? '1' : '0';
	425	+ } else {
	426	+ value = $field.is(':checked') ? 'on' : 'off';
	427	+ }
	428	+ } else {
	429	+ value = $field.val();
	430	+ }
	431	+
	432	+ // Create feedback container
	433	+ const feedbackContainer = $('<div class="feedback-container"></div>');
	434	+ const spinner = $('<div class="saving-spinner"></div>');
	435	+ const successIcon = $('<div class="success-icon">✔</div>');
	436	+
	437	+ // Position feedback container based on input type
	438	+ if ($field.closest('.toggle-switch').length) {
	439	+ $field.closest('td').append(feedbackContainer);
	440	+ } else if ($field.closest('.mxchat-toggle-switch').length) {
	441	+ $field.closest('.mxchat-toggle-container').append(feedbackContainer);
	442	+ } else if ($field.closest('.slider-container').length) {
	443	+ $field.closest('.slider-container').after(feedbackContainer);
	444	+ } else {
	445	+ $field.after(feedbackContainer);
	446	+ }
	447	+ feedbackContainer.append(spinner);
	448	+
	449	+ // Determine which AJAX action and nonce to use:
	450	+ var ajaxAction, nonce;
	451	+ // *** UPDATED: Add Pinecone fields to prompts action ***
	452	+ if (name.indexOf('mxchat_prompts_options') !== -1 ||
	453	+ name === 'mxchat_auto_sync_posts' ||
	454	+ name === 'mxchat_auto_sync_pages' ||
	455	+ name.indexOf('mxchat_auto_sync_') === 0 ||
	456	+ name.indexOf('mxchat_pinecone_addon_options') !== -1) { // *** ADD THIS LINE ***
	457	+ ajaxAction = 'mxchat_save_prompts_setting';
	458	+ nonce = mxchatPromptsAdmin.prompts_setting_nonce;
	459	+ } else {
	460	+ // Otherwise, use the existing AJAX action.
	461	+ ajaxAction = 'mxchat_save_setting';
	462	+ nonce = mxchatAdmin.setting_nonce;
	463	+ }
	464	+
	465	+ // *** ADD THIS: Debug logging for Pinecone fields ***
	466	+ if (name && name.indexOf('mxchat_pinecone_addon_options') !== -1) {
	467	+ //console.log('Saving Pinecone field:', name, '=', value);
	468	+ }
	469	+
	470	+ // AJAX save request
	471	+ $.ajax({
	472	+ url: (ajaxAction === 'mxchat_save_prompts_setting') ? mxchatPromptsAdmin.ajax_url : mxchatAdmin.ajax_url,
	473	+ type: 'POST',
	474	+ data: {
	475	+ action: ajaxAction,
	476	+ name: name,
	477	+ value: value,
	478	+ _ajax_nonce: nonce
	479	+ },
	480	+ success: function(response) {
	481	+ if (response.success) {
	482	+ spinner.fadeOut(200, function() {
	483	+ feedbackContainer.append(successIcon);
	484	+ successIcon.fadeIn(200).delay(1000).fadeOut(200, function() {
	485	+ feedbackContainer.remove();
	486	+ });
	487	+ });
	488	+
	489	+ // *** ADD THIS: Refresh API key status after saving an API key ***
	490	+ const isApiKeyField = name && (
	491	+ name === 'api_key' ||
	492	+ name === 'xai_api_key' ||
	493	+ name === 'claude_api_key' ||
	494	+ name === 'voyage_api_key' ||
	495	+ name === 'gemini_api_key' ||
	496	+ name === 'deepseek_api_key' ||
	497	+ name === 'openrouter_api_key' ||
	498	+ name.indexOf('_api_key') !== -1
	499	+ );
	500	+
	501	+ if (isApiKeyField && typeof window.mxchatRefreshAPIKeyStatus === 'function') {
	502	+ window.mxchatRefreshAPIKeyStatus();
	503	+ }
	504	+
	505	+ // *** ADD THIS: Update Pinecone checkbox state after successful save ***
	506	+ if (name && name.indexOf('mxchat_pinecone_addon_options[mxchat_use_pinecone]') !== -1) {
	507	+ //console.log('Pinecone toggle saved successfully, value:', value);
	508	+
	509	+ // The checkbox state is already updated by the user interaction
	510	+ // But let's make sure the UI state matches the saved value
	511	+ var $checkbox = $('input[name="mxchat_pinecone_addon_options[mxchat_use_pinecone]"]');
	512	+ var settingsDiv = $('.mxchat-pinecone-settings');
	513	+
	514	+ // Double-check the UI state matches what was saved
	515	+ if (value === '1' && !$checkbox.is(':checked')) {
	516	+ $checkbox.prop('checked', true);
	517	+ settingsDiv.slideDown(300);
	518	+ } else if (value === '0' && $checkbox.is(':checked')) {
	519	+ $checkbox.prop('checked', false);
	520	+ settingsDiv.slideUp(300);
	521	+ }
	522	+
	523	+ //console.log('Pinecone UI state synchronized');
	524	+
	525	+ // Check if Knowledge Import tab is currently active
	526	+ if ($('.mxchat-kb-tab-button[data-tab="import"]').hasClass('active')) {
	527	+ // Show a notice that we need to refresh
	528	+ var $knowledgeCard = $('#mxchat-kb-tab-import .mxchat-card').eq(1);
	529	+ if ($knowledgeCard.length > 0) {
	530	+ // Add a refresh notice at the top of the knowledge base card
	531	+ var refreshNotice = $('<div class="notice notice-warning" style="margin: 15px 0; padding: 10px 15px;">' +
	532	+ '<p style="margin: 0;">' +
	533	+ '<span class="dashicons dashicons-info" style="color: #f0ad4e; margin-right: 5px;"></span>' +
	534	+ 'Database settings have changed. ' +
	535	+ '<a href="#" onclick="location.reload(); return false;" style="font-weight: bold;">Click here to refresh</a> to see the updated knowledge base.' +
	536	+ '</p></div>');
	537	+
	538	+ $knowledgeCard.prepend(refreshNotice);
	539	+ }
	540	+ } else {
	541	+ // If not on import tab, set a flag to refresh when they go there
	542	+ sessionStorage.setItem('mxchat_pinecone_changed', 'true');
	543	+ }
	544	+ }
	545	+
	546	+ // *** ADD THIS: Debug logging for successful saves ***
	547	+ if (name && name.indexOf('mxchat_pinecone_addon_options') !== -1) {
	548	+ //console.log('Pinecone field saved successfully:', name, '=', value);
	549	+ }
	550	+
	551	+ // Check if the response contains a "no changes" message and log it
	552	+ if (response.data && response.data.message === 'No changes detected') {
	553	+ //console.log('No changes detected for field:', name);
	554	+ }
	555	+ } else {
	556	+ // Only show alert for actual errors, not for "no changes"
	557	+ let errorMessage = response.data?.message || 'Unknown error';
	558	+
	559	+ // Don't display an alert for "no changes" message
	560	+ if (errorMessage !== 'No changes detected' && errorMessage !== 'Update failed or no changes') {
	561	+ alert('Error saving: ' + errorMessage);
	562	+ } else {
	563	+ // Still provide visual feedback that no changes were needed
	564	+ spinner.fadeOut(200, function() {
	565	+ feedbackContainer.append(successIcon);
	566	+ successIcon.fadeIn(200).delay(1000).fadeOut(200, function() {
	567	+ feedbackContainer.remove();
	568	+ });
	569	+ });
	570	+ //console.log('No changes detected for field:', name);
	571	+ return;
	572	+ }
	573	+
	574	+ // Only revert checkbox state if it was an actual error
	575	+ if (errorMessage !== 'No changes detected' && errorMessage !== 'Update failed or no changes') {
	576	+ if ($field.attr('type') === 'checkbox') {
	577	+ $field.prop('checked', !$field.is(':checked'));
	578	+ }
	579	+ }
	580	+
	581	+ // Always clean up the feedback container
	582	+ feedbackContainer.remove();
	583	+ }
	584	+ },
	585	+ error: function(xhr, textStatus, error) {
	586	+ //console.error('AJAX Error:', textStatus, error);
	587	+ alert('An error occurred while saving. Please try again.');
	588	+
	589	+ // Revert checkbox state on error
	590	+ if ($field.attr('type') === 'checkbox') {
	591	+ $field.prop('checked', !$field.is(':checked'));
	592	+ }
	593	+
	594	+ feedbackContainer.remove();
	595	+ }
	596	+ });
	597	+ });
	598	+
	599	+ // Initialize color pickers with debouncing
	600	+ $autosaveSections.find('.my-color-field').each(function() {
	601	+ const $colorField = $(this);
	602	+
	603	+ $(this).wpColorPicker({
	604	+ change: useDebounce(function(event, ui) {
	605	+ // Safety check - ensure we have a valid field and value
	606	+ if (!$colorField || !$colorField.val()) {
	607	+ //console.warn('Color picker not ready');
	608	+ return;
	609	+ }
	610	+
	611	+ const name = $colorField.attr('name');
	612	+ const value = $colorField.val();
	613	+
	614	+ if (!name || !value) {
	615	+ //console.warn('Missing required color picker values');
	616	+ return;
	617	+ }
	618	+
	619	+ // Create feedback container
	620	+ const feedbackContainer = $('<div class="feedback-container"></div>');
	621	+ const spinner = $('<div class="saving-spinner"></div>');
	622	+ const successIcon = $('<div class="success-icon">✔</div>');
	623	+
	624	+ // Position feedback container
	625	+ $colorField.closest('.wp-picker-container').after(feedbackContainer);
	626	+ feedbackContainer.append(spinner);
	627	+
	628	+ // Determine which AJAX action and nonce to use:
	629	+ var ajaxAction, nonce;
	630	+ // Use the new AJAX action for submenu fields:
	631	+ if (name.indexOf('mxchat_prompts_options') !== -1 ||
	632	+ name === 'mxchat_auto_sync_posts' ||
	633	+ name === 'mxchat_auto_sync_pages' ||
	634	+ name.indexOf('mxchat_auto_sync_') === 0) { // Modified to catch all auto-sync fields
	635	+ ajaxAction = 'mxchat_save_prompts_setting';
	636	+ nonce = mxchatPromptsAdmin.prompts_setting_nonce;
	637	+ } else {
	638	+ // Otherwise, use the existing AJAX action.
	639	+ ajaxAction = 'mxchat_save_setting';
	640	+ nonce = mxchatAdmin.setting_nonce;
	641	+ }
	642	+ // AJAX save request
	643	+ $.ajax({
	644	+ url: (ajaxAction === 'mxchat_save_prompts_setting') ? mxchatPromptsAdmin.ajax_url : mxchatAdmin.ajax_url,
	645	+ type: 'POST',
	646	+ data: {
	647	+ action: ajaxAction,
	648	+ name: name,
	649	+ value: value,
	650	+ _ajax_nonce: nonce
	651	+ },
	652	+ success: function(response) {
	653	+ if (response.success) {
	654	+ spinner.fadeOut(200, function() {
	655	+ feedbackContainer.append(successIcon);
	656	+ successIcon.fadeIn(200).delay(1000).fadeOut(200, function() {
	657	+ feedbackContainer.remove();
	658	+ });
	659	+ });
	660	+ } else {
	661	+ alert('Error saving: ' + (response.data?.message || 'Unknown error'));
	662	+ feedbackContainer.remove();
	663	+ }
	664	+ },
	665	+ error: function() {
	666	+ alert('An error occurred while saving.');
	667	+ feedbackContainer.remove();
	668	+ }
	669	+ });
	670	+ }, 500)
	671	+ });
	672	+ });
	673	+
	674	+ // Reinitialize color pickers when switching tabs
	675	+ $('.mxchat-tab-button').on('click.mxchat', function() {
	676	+ setTimeout(function() {
	677	+ $('.my-color-field:visible').wpColorPicker('close');
	678	+ }, 100);
	679	+ });
	680	+ }
	681	+
	682	+// Initialize tabs system
	683	+function initTabs() {
	684	+ // Remove any existing handlers first
	685	+ $('.mxchat-tab-button').off('click.mxchat');
	686	+
	687	+ // Add new click handlers
	688	+ $('.mxchat-tab-button').on('click.mxchat', function(e) {
	689	+ e.preventDefault();
	690	+ e.stopPropagation();
	691	+
	692	+ var $this = $(this);
	693	+
	694	+ // Get tab ID from data-tab attribute
	695	+ var tabId = $this.data('tab') || 'chatbot';
	696	+
	697	+ // Safety check for empty tabId
	698	+ if (!tabId) {
	699	+ //console.warn('No tab identifier found');
	700	+ return;
	701	+ }
	702	+
	703	+ // Update tab buttons
	704	+ $('.mxchat-tab-button').removeClass('active');
	705	+ $this.addClass('active');
	706	+
	707	+ // Update content areas - with safety check
	708	+ $('.mxchat-tab-content').removeClass('active');
	709	+ var $targetTab = $('#' + tabId);
	710	+ if ($targetTab.length) {
	711	+ $targetTab.addClass('active');
	712	+ // Removed localStorage saving functionality
	713	+ } else {
	714	+ //console.warn('Tab content #' + tabId + ' not found');
	715	+ }
	716	+ });
	717	+}
	718	+
	719	+// Initialize tabs and handle events
	720	+initTabs();
	721	+$(document).on('widget-added widget-updated postbox-toggled', initTabs);
	722	+
	723	+// Always activate the first tab (Chatbot)
	724	+$('.mxchat-tab-button').first().trigger('click.mxchat');
	725	+
	726	+
	727	+// Toggle visibility handlers
	728	+function toggleVisibility(selector) {
	729	+ $(selector).on('click', function() {
	730	+ var inputField = $(this).prev('input');
	731	+ if (inputField.attr('type') === 'password') {
	732	+ inputField.attr('type', 'text');
	733	+ $(this).text('Hide');
	734	+ } else {
	735	+ inputField.attr('type', 'password');
	736	+ $(this).text('Show');
	737	+ }
	738	+ });
	739	+}
	740	+
	741	+// Initialize all toggle visibility buttons
	742	+[
	743	+ '#toggleApiKeyVisibility',
	744	+ '#toggleWooCommerceSecretVisibility',
	745	+ '#toggleVoyageAPIKeyVisibility',
	746	+ '#toggleLoopsApiKeyVisibility',
	747	+ '#toggleXaiApiKeyVisibility',
	748	+ '#toggleClaudeApiKeyVisibility',
	749	+ '#toggleBraveApiKeyVisibility',
	750	+ '#toggleWebhookUrlVisibility',
	751	+ '#toggleSecretKeyVisibility',
	752	+ '#toggleBotTokenVisibility',
	753	+ '#toggleDeepSeekApiKeyVisibility',
	754	+ '#toggleGeminiApiKeyVisibility',
	755	+ '#toggleOpenRouterApiKeyVisibility'
	756	+].forEach(toggleVisibility);
	757	+
	758	+function setupMxChatModelSelector() {
	759	+ const $modelSelect = $('#model');
	760	+ const $modelSelectorButton = $('<button>', {
	761	+ type: 'button',
	762	+ id: 'mxchat_model_selector_btn',
	763	+ class: 'button-primary mxchat-model-selector-btn',
	764	+ text: 'Select AI Model'
	765	+ });
	766	+
	767	+ // Replace the select dropdown with a button
	768	+ $modelSelect.hide().after($modelSelectorButton);
	769	+
	770	+ // Update button text to show currently selected model
	771	+ function updateButtonText() {
	772	+ const selectedModel = $modelSelect.val();
	773	+
	774	+ // Check if OpenRouter is selected
	775	+ if (selectedModel === 'openrouter') {
	776	+ const openrouterModelId = $('#openrouter_selected_model').val();
	777	+ const openrouterModelName = $('#openrouter_selected_model_name').val();
	778	+
	779	+ if (openrouterModelName && openrouterModelName.trim() !== '') {
	780	+ $modelSelectorButton.text('OpenRouter: ' + openrouterModelName);
	781	+ } else if (openrouterModelId && openrouterModelId.trim() !== '') {
	782	+ $modelSelectorButton.text('OpenRouter: ' + openrouterModelId);
	783	+ } else {
	784	+ $modelSelectorButton.text('OpenRouter - Select Model');
	785	+ }
	786	+ } else {
	787	+ const selectedModelText = $modelSelect.find('option:selected').text();
	788	+ $modelSelectorButton.text(selectedModelText);
	789	+ }
	790	+ }
	791	+
	792	+ // Initialize button text
	793	+ updateButtonText();
	794	+
	795	+ // Create and append modal HTML
	796	+ const modelSelectorModal = `
	797	+ <div id="mxchat_model_selector_modal" class="mxchat-model-selector-modal">
	798	+ <div class="mxchat-model-selector-modal-content">
	799	+ <div class="mxchat-model-selector-modal-header">
	800	+ <h3>Select AI Model</h3>
	801	+ <span class="mxchat-model-selector-modal-close">&times;</span>
	802	+ </div>
	803	+ <div class="mxchat-model-selector-modal-body">
	804	+ <div class="mxchat-model-selector-search-container">
	805	+ <input type="text" id="mxchat_model_search_input" class="mxchat-model-search-input" placeholder="Search models...">
	806	+ </div>
	807	+ <div class="mxchat-model-selector-categories">
	808	+ <button class="mxchat-model-category-btn active" data-category="all">All</button>
	809	+ <button class="mxchat-model-category-btn" data-category="openrouter">OpenRouter</button>
	810	+ <button class="mxchat-model-category-btn" data-category="gemini">Google Gemini</button>
	811	+ <button class="mxchat-model-category-btn" data-category="openai">OpenAI</button>
	812	+ <button class="mxchat-model-category-btn" data-category="claude">Claude</button>
	813	+ <button class="mxchat-model-category-btn" data-category="xai">X.AI</button>
	814	+ <button class="mxchat-model-category-btn" data-category="deepseek">DeepSeek</button>
	815	+ </div>
	816	+ <div class="mxchat-model-selector-grid" id="mxchat_models_grid"></div>
	817	+ </div>
	818	+ <div class="mxchat-model-selector-modal-footer">
	819	+ <button id="mxchat_cancel_model_selection" class="button mxchat-model-cancel-btn">Cancel</button>
	820	+ </div>
	821	+ </div>
	822	+ </div>
	823	+ `;
	824	+
	825	+ $('body').append(modelSelectorModal);
	826	+
	827	+ // MOVE THIS OUTSIDE - Make it a property of the window object so it's accessible globally
	828	+ window.populateModelsGrid = function(filter = '', category = 'all') {
	829	+ const $grid = $('#mxchat_models_grid');
	830	+ $grid.empty();
	831	+
	832	+ const models = {
	833	+ openrouter: [
	834	+ { value: 'openrouter', label: 'OpenRouter', description: 'Access 100+ models from multiple providers (add API key to browse)' }
	835	+ ],
	836	+ gemini: [
	837	+ { value: 'gemini-2.0-flash', label: 'Gemini 2.0 Flash', description: 'Next-Gen features, speed & multimodal generation' },
	838	+ { value: 'gemini-2.0-flash-lite', label: 'Gemini 2.0 Flash-Lite', description: 'Cost-efficient with low latency' },
	839	+ { value: 'gemini-1.5-pro', label: 'Gemini 1.5 Pro', description: 'Complex reasoning tasks requiring more intelligence' },
	840	+ { value: 'gemini-1.5-flash', label: 'Gemini 1.5 Flash', description: 'Fast and versatile performance' },
	841	+ ],
	842	+ openai: [
	843	+ { value: 'gpt-5.2', label: 'GPT-5.2', description: 'Best general-purpose & agentic model with fast responses' },
	844	+ { value: 'gpt-5.1-2025-11-13', label: 'GPT-5.1', description: 'Flagship for coding & agentic tasks with low reasoning (400K context)' },
	845	+ { value: 'gpt-5', label: 'GPT-5', description: 'Flagship for coding, reasoning, and agentic tasks across domains' },
	846	+ { value: 'gpt-5-mini', label: 'GPT-5 Mini', description: 'Faster, more cost-efficient for well-defined tasks and precise prompts' },
	847	+ { value: 'gpt-5-nano', label: 'GPT-5 Nano', description: 'Fastest and cheapest; ideal for summarization and classification' },
	848	+ { value: 'gpt-4.1-2025-04-14', label: 'GPT-4.1', description: 'Flagship model for complex tasks' },
	849	+ { value: 'gpt-4o', label: 'GPT-4o', description: 'Recommended for most use cases' },
	850	+ { value: 'gpt-4o-mini', label: 'GPT-4o Mini', description: 'Fast and lightweight' },
	851	+ { value: 'gpt-4-turbo', label: 'GPT-4 Turbo', description: 'High-performance model' },
	852	+ { value: 'gpt-4', label: 'GPT-4', description: 'High intelligence model' },
	853	+ { value: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo', description: 'Affordable and fast' },
	854	+ ],
	855	+ claude: [
	856	+ { value: 'claude-sonnet-4-5-20250929', label: 'Claude Sonnet 4.5', description: 'Best for complex agents and coding' },
	857	+ { value: 'claude-opus-4-1-20250805', label: 'Claude Opus 4.1', description: 'Exceptional for specialized complex tasks' },
	858	+ { value: 'claude-haiku-4-5-20251001', label: 'Claude Haiku 4.5', description: 'Fastest and most intelligent Haiku' },
	859	+ { value: 'claude-opus-4-20250514', label: 'Claude 4 Opus', description: 'Most capable Claude model' },
	860	+ { value: 'claude-sonnet-4-20250514', label: 'Claude 4 Sonnet', description: 'High performance' },
	861	+ { value: 'claude-3-7-sonnet-20250219', label: 'Claude 3.7 Sonnet', description: 'High intelligence' },
	862	+ { value: 'claude-3-opus-20240229', label: 'Claude 3 Opus', description: 'Highly complex tasks' },
	863	+ { value: 'claude-3-sonnet-20240229', label: 'Claude 3 Sonnet', description: 'Balanced performance' },
	864	+ { value: 'claude-3-haiku-20240307', label: 'Claude 3 Haiku', description: 'Fastest Claude model' },
	865	+ ],
	866	+ xai: [
	867	+ { value: 'grok-4-1-fast-reasoning', label: 'Grok 4.1 Fast (Reasoning)', description: '2M context window and reasoning' },
	868	+ { value: 'grok-4-1-fast-non-reasoning', label: 'Grok 4.1 Fast (Non-Reasoning)', description: '2M context window and faster responses' },
	869	+ { value: 'grok-4-0709', label: 'Grok 4', description: 'Latest flagship model - unparalleled performance in natural language, math and reasoning' },
	870	+ { value: 'grok-3-beta', label: 'Grok-3', description: 'Powerful model with 131K context' },
	871	+ { value: 'grok-3-fast-beta', label: 'Grok-3 Fast', description: 'High performance with faster responses' },
	872	+ { value: 'grok-3-mini-beta', label: 'Grok-3 Mini', description: 'Affordable model with good performance' },
	873	+ { value: 'grok-3-mini-fast-beta', label: 'Grok-3 Mini Fast', description: 'Quick and cost-effective' },
	874	+ { value: 'grok-2', label: 'Grok 2', description: 'Latest X.AI model' },
	875	+ ],
	876	+ deepseek: [
	877	+ { value: 'deepseek-chat', label: 'DeepSeek-V3', description: 'Advanced AI assistant' },
	878	+ ],
	879	+ };
	880	+
	881	+ let allModels = [];
	882	+ Object.keys(models).forEach(key => {
	883	+ if (category === 'all' || category === key) {
	884	+ allModels = allModels.concat(models[key]);
	885	+ }
	886	+ });
	887	+
	888	+ // Filter by search term if present
	889	+ if (filter) {
	890	+ const lowerFilter = filter.toLowerCase();
	891	+ allModels = allModels.filter(model =>
	892	+ model.label.toLowerCase().includes(lowerFilter) ||
	893	+ model.description.toLowerCase().includes(lowerFilter)
	894	+ );
	895	+ }
	896	+
	897	+ // Create model cards
	898	+ allModels.forEach(model => {
	899	+ const isSelected = $modelSelect.val() === model.value;
	900	+ const $modelCard = $(`
	901	+ <div class="mxchat-model-selector-card ${isSelected ? 'mxchat-model-selected' : ''}" data-value="${model.value}">
	902	+ <div class="mxchat-model-selector-icon">${getModelIcon(model.value)}</div>
	903	+ <div class="mxchat-model-selector-info">
	904	+ <h4 class="mxchat-model-selector-title">${model.label}</h4>
	905	+ <p class="mxchat-model-selector-description">${model.description}</p>
	906	+ </div>
	907	+ ${isSelected ? '<div class="mxchat-model-selector-checkmark">✓</div>' : ''}
	908	+ </div>
	909	+ `);
	910	+ $grid.append($modelCard);
	911	+ });
	912	+ };
	913	+
	914	+ // Helper function to get icon for each model
	915	+ function getModelIcon(modelValue) {
	916	+ if (modelValue === 'openrouter') return '<span class="dashicons dashicons-networking" style="font-size: 24px; color: #6750A4;"></span>';
	917	+ if (modelValue.startsWith('gemini-')) return '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" class="mxchat-model-icon-gemini"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"></path></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"></path><path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"></path><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"></path><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"></path></svg>';
	918	+ if (modelValue.startsWith('gpt-')) return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" class="mxchat-model-icon-openai"><path fill="currentColor" d="M297 131a80.6 80.6 0 0 0-93.7-104.2 80.6 80.6 0 0 0-137 29A80.6 80.6 0 0 0 23 189a80.6 80.6 0 0 0 93.7 104.2 80.6 80.6 0 0 0 137-29A80.7 80.7 0 0 0 297.1 131zM176.9 299c-14 .1-27.6-4.8-38.4-13.8l1.9-1 63.7-36.9c3.3-1.8 5.3-5.3 5.2-9v-89.9l27 15.6c.3.1.4.4.5.7v74.4a60 60 0 0 1-60 60zM47.9 244a59.7 59.7 0 0 1-7.1-40.1l1.9 1.1 63.7 36.8c3.2 1.9 7.2 1.9 10.5 0l77.8-45V228c0 .3-.2.6-.4.8L129.9 266a60 60 0 0 1-82-22zM31.2 105c7-12.2 18-21.5 31.2-26.3v75.8c0 3.7 2 7.2 5.2 9l77.8 45-27 15.5a1 1 0 0 1-.9 0L53.1 187a60 60 0 0 1-22-82zm221.2 51.5-77.8-45 27-15.5a1 1 0 0 1 .9 0l64.4 37.1a60 60 0 0 1-9.3 108.2v-75.8c0-3.7-2-7.2-5.2-9zm26.8-40.4-1.9-1.1-63.7-36.8a10.4 10.4 0 0 0-10.5 0L125.4 123V92c0-.3 0-.6.3-.8L190.1 54a60 60 0 0 1 89.1 62.1zm-168.5 55.4-27-15.5a1 1 0 0 1-.4-.7V80.9a60 60 0 0 1 98.3-46.1l-1.9 1L116 72.8a10.3 10.3 0 0 0-5.2 9v89.8zm14.6-31.5 34.7-20 34.6 20v40L160 200l-34.7-20z"></path></svg>';
	919	+ if (modelValue.startsWith('claude-')) return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 176" fill="none" class="mxchat-model-icon-claude"><path fill="currentColor" d="m147.487 0l70.081 175.78H256L185.919 0zM66.183 106.221l23.98-61.774l23.98 61.774zM70.07 0L0 175.78h39.18l14.33-36.914h73.308l14.328 36.914h39.179L110.255 0z"></path></svg>';
	920	+ if (modelValue.startsWith('grok-')) return '<svg fill="currentColor" fill-rule="evenodd" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="mxchat-model-icon-xai"><path d="M6.469 8.776L16.512 23h-4.464L2.005 8.776H6.47zm-.004 7.9l2.233 3.164L6.467 23H2l4.465-6.324zM22 2.582V23h-3.659V7.764L22 2.582zM22 1l-9.952 14.095-2.233-3.163L17.533 1H22z"></path></svg>';
	921	+ if (modelValue.startsWith('deepseek-')) return '<svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" class="mxchat-model-icon-deepseek"><path d="M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z" fill="currentColor"></path></svg>';
	922	+ return '<span class="dashicons dashicons-admin-generic mxchat-model-icon-generic"></span>';
	923	+ }
	924	+
	925	+ // Event handlers
	926	+ $modelSelectorButton.on('click', function() {
	927	+ $('#mxchat_model_selector_modal').show();
	928	+ window.populateModelsGrid('', 'all');
	929	+ });
	930	+
	931	+ $('.mxchat-model-selector-modal-close, #mxchat_cancel_model_selection').on('click', function() {
	932	+ $('#mxchat_model_selector_modal').hide();
	933	+ });
	934	+
	935	+ $('.mxchat-model-category-btn').on('click', function() {
	936	+ $('.mxchat-model-category-btn').removeClass('active');
	937	+ $(this).addClass('active');
	938	+ const category = $(this).data('category');
	939	+ const searchTerm = $('#mxchat_model_search_input').val();
	940	+ window.populateModelsGrid(searchTerm, category);
	941	+ });
	942	+
	943	+ $('#mxchat_model_search_input').on('input', function() {
	944	+ const searchTerm = $(this).val();
	945	+ const activeCategory = $('.mxchat-model-category-btn.active').data('category');
	946	+ window.populateModelsGrid(searchTerm, activeCategory);
	947	+ });
	948	+
	949	+$(document).on('click', '.mxchat-model-selector-card', function() {
	950	+ const modelValue = $(this).data('value');
	951	+ const $modelSelect = $('#model');
	952	+ const $clickedCard = $(this);
	953	+
	954	+ // Check if OpenRouter was selected
	955	+ if (modelValue === 'openrouter') {
	956	+ // Load OpenRouter models instead of closing
	957	+ loadOpenRouterModels();
	958	+ } else {
	959	+ // Remove selection from all other cards
	960	+ $('.mxchat-model-selector-card').removeClass('mxchat-model-selected').find('.mxchat-model-selector-checkmark').remove();
	961	+
	962	+ // Add selection to clicked card immediately for instant feedback
	963	+ $clickedCard.addClass('mxchat-model-selected');
	964	+ if ($clickedCard.find('.mxchat-model-selector-checkmark').length === 0) {
	965	+ $clickedCard.append('<div class="mxchat-model-selector-checkmark">✓</div>');
	966	+ }
	967	+
	968	+ // Brief delay to show the selection, then start saving
	969	+ setTimeout(function() {
	970	+ // Normal model selection
	971	+ $modelSelect.val(modelValue).trigger('change');
	972	+
	973	+ // Show loading state on the card
	974	+ $clickedCard.css('pointer-events', 'none');
	975	+ const originalContent = $clickedCard.find('.mxchat-model-selector-title').html();
	976	+ $clickedCard.find('.mxchat-model-selector-title').html(
	977	+ '<span class="spinner is-active" style="float: none; margin: 0 5px 0 0;"></span> Saving...'
	978	+ );
	979	+
	980	+ // Manually save the model via AJAX
	981	+ jQuery.ajax({
	982	+ url: mxchatAdmin.ajax_url,
	983	+ type: 'POST',
	984	+ data: {
	985	+ action: 'mxchat_save_setting',
	986	+ name: 'model',
	987	+ value: modelValue,
	988	+ _ajax_nonce: mxchatAdmin.setting_nonce
	989	+ },
	990	+ success: function(response) {
	991	+ if (response.success) {
	992	+ // Show success state
	993	+ $clickedCard.find('.mxchat-model-selector-title').html(
	994	+ '<span class="dashicons dashicons-yes" style="color: #46b450; margin-top: 3px;"></span> Saved!'
	995	+ );
	996	+
	997	+ // Update button text after successful save
	998	+ const selectedModelText = $modelSelect.find('option:selected').text();
	999	+ $('#mxchat_model_selector_btn').text(selectedModelText);
	1000	+
	1001	+ // Close modal after a short delay to show the success message
	1002	+ setTimeout(function() {
	1003	+ $('#mxchat_model_selector_modal').hide();
	1004	+ // Restore original content and remove selection for next time
	1005	+ $clickedCard.find('.mxchat-model-selector-title').html(originalContent);
	1006	+ $clickedCard.removeClass('mxchat-model-selected').find('.mxchat-model-selector-checkmark').remove();
	1007	+ $clickedCard.css('pointer-events', 'auto');
	1008	+ }, 600);
	1009	+ } else {
	1010	+ // Show error state
	1011	+ $clickedCard.find('.mxchat-model-selector-title').html(
	1012	+ '<span class="dashicons dashicons-no" style="color: #dc3232;"></span> Error!'
	1013	+ );
	1014	+
	1015	+ setTimeout(function() {
	1016	+ $clickedCard.find('.mxchat-model-selector-title').html(originalContent);
	1017	+ $clickedCard.removeClass('mxchat-model-selected').find('.mxchat-model-selector-checkmark').remove();
	1018	+ $clickedCard.css('pointer-events', 'auto');
	1019	+ }, 1500);
	1020	+ }
	1021	+ },
	1022	+ error: function() {
	1023	+ // Show error state
	1024	+ $clickedCard.find('.mxchat-model-selector-title').html(
	1025	+ '<span class="dashicons dashicons-no" style="color: #dc3232;"></span> Error!'
	1026	+ );
	1027	+
	1028	+ setTimeout(function() {
	1029	+ $clickedCard.find('.mxchat-model-selector-title').html(originalContent);
	1030	+ $clickedCard.removeClass('mxchat-model-selected').find('.mxchat-model-selector-checkmark').remove();
	1031	+ $clickedCard.css('pointer-events', 'auto');
	1032	+ }, 1500);
	1033	+ }
	1034	+ });
	1035	+ }, 300); // 300ms delay to show the selection before starting to save
	1036	+ }
	1037	+});
	1038	+
	1039	+ // Close modal when clicking outside
	1040	+ $(window).on('click', function(event) {
	1041	+ if ($(event.target).is('#mxchat_model_selector_modal')) {
	1042	+ $('#mxchat_model_selector_modal').hide();
	1043	+ }
	1044	+ });
	1045	+}
	1046	+
	1047	+function loadOpenRouterModels() {
	1048	+ const apiKey = $('#openrouter_api_key').val(); // This line already re-checks the field
	1049	+ const $modal = $('#mxchat_model_selector_modal');
	1050	+ const $modalBody = $modal.find('.mxchat-model-selector-modal-body');
	1051	+
	1052	+ if (!apiKey || apiKey.trim() === '') {
	1053	+ // Show error message in modal
	1054	+ $modalBody.html(`
	1055	+ <div style="text-align: center; padding: 40px;">
	1056	+ <span class="dashicons dashicons-warning" style="font-size: 48px; color: #d63638; margin-bottom: 20px;"></span>
	1057	+ <h3>OpenRouter API Key Required</h3>
	1058	+ <p>Please enter your OpenRouter API key in the settings before selecting a model. If you're seeing this message and recently entered API key, try refreshing.</p>
	1059	+ <button class="button button-primary" id="mxchat_back_to_models">Back to Models</button>
	1060	+ </div>
	1061	+ `);
	1062	+
	1063	+ $('#mxchat_back_to_models').on('click', function(e) {
	1064	+ e.preventDefault();
	1065	+ // CHANGE THIS: Instead of reloading, restore the original modal content
	1066	+ $modalBody.html(`
	1067	+ <div class="mxchat-model-selector-search-container">
	1068	+ <input type="text" id="mxchat_model_search_input" class="mxchat-model-search-input" placeholder="Search models...">
	1069	+ </div>
	1070	+ <div class="mxchat-model-selector-categories">
	1071	+ <button class="mxchat-model-category-btn active" data-category="all">All</button>
	1072	+ <button class="mxchat-model-category-btn" data-category="openrouter">OpenRouter</button>
	1073	+ <button class="mxchat-model-category-btn" data-category="gemini">Google Gemini</button>
	1074	+ <button class="mxchat-model-category-btn" data-category="openai">OpenAI</button>
	1075	+ <button class="mxchat-model-category-btn" data-category="claude">Claude</button>
	1076	+ <button class="mxchat-model-category-btn" data-category="xai">X.AI</button>
	1077	+ <button class="mxchat-model-category-btn" data-category="deepseek">DeepSeek</button>
	1078	+ </div>
	1079	+ <div class="mxchat-model-selector-grid" id="mxchat_models_grid"></div>
	1080	+ `);
	1081	+
	1082	+ // Re-populate the grid
	1083	+ populateModelsGrid('', 'all');
	1084	+
	1085	+ // Re-bind event handlers
	1086	+ rebindModalEventHandlers();
	1087	+ });
	1088	+ return;
	1089	+ }
	1090	+
	1091	+ // Show loading state
	1092	+ $modalBody.html(`
	1093	+ <div style="text-align: center; padding: 60px 20px;">
	1094	+ <div class="spinner is-active" style="float: none; margin: 0 auto 20px;"></div>
	1095	+ <h3>Loading OpenRouter Models...</h3>
	1096	+ <p>Fetching available models from OpenRouter</p>
	1097	+ </div>
	1098	+ `);
	1099	+
	1100	+ // Fetch models from OpenRouter
	1101	+ jQuery.ajax({
	1102	+ url: mxchatAdmin.ajax_url,
	1103	+ type: 'POST',
	1104	+ data: {
	1105	+ action: 'mxchat_fetch_openrouter_models',
	1106	+ api_key: apiKey,
	1107	+ nonce: mxchatAdmin.fetch_openrouter_models_nonce
	1108	+ },
	1109	+ success: function(response) {
	1110	+ if (response.success && response.data.models) {
	1111	+ displayOpenRouterModels(response.data.models);
	1112	+ } else {
	1113	+ $modalBody.html(`
	1114	+ <div style="text-align: center; padding: 40px;">
	1115	+ <span class="dashicons dashicons-warning" style="font-size: 48px; color: #d63638; margin-bottom: 20px;"></span>
	1116	+ <h3>Error Loading Models</h3>
	1117	+ <p>${response.data.message || 'Failed to load models from OpenRouter'}</p>
	1118	+ <button class="button button-primary" id="mxchat_back_to_models">Back to Models</button>
	1119	+ </div>
	1120	+ `);
	1121	+
	1122	+ $('#mxchat_back_to_models').on('click', function(e) {
	1123	+ e.preventDefault();
	1124	+ // CHANGE THIS: Restore original content instead of reloading
	1125	+ restoreOriginalModalContent();
	1126	+ });
	1127	+ }
	1128	+ },
	1129	+ error: function() {
	1130	+ $modalBody.html(`
	1131	+ <div style="text-align: center; padding: 40px;">
	1132	+ <span class="dashicons dashicons-warning" style="font-size: 48px; color: #d63638; margin-bottom: 20px;"></span>
	1133	+ <h3>Connection Error</h3>
	1134	+ <p>Failed to connect to OpenRouter. Please check your API key and try again.</p>
	1135	+ <button class="button button-primary" id="mxchat_back_to_models">Back to Models</button>
	1136	+ </div>
	1137	+ `);
	1138	+
	1139	+ $('#mxchat_back_to_models').on('click', function(e) {
	1140	+ e.preventDefault();
	1141	+ // CHANGE THIS: Restore original content instead of reloading
	1142	+ restoreOriginalModalContent();
	1143	+ });
	1144	+ }
	1145	+ });
	1146	+}
	1147	+function restoreOriginalModalContent() {
	1148	+ const $modalBody = $('#mxchat_model_selector_modal').find('.mxchat-model-selector-modal-body');
	1149	+
	1150	+ $modalBody.html(`
	1151	+ <div class="mxchat-model-selector-search-container">
	1152	+ <input type="text" id="mxchat_model_search_input" class="mxchat-model-search-input" placeholder="Search models...">
	1153	+ </div>
	1154	+ <div class="mxchat-model-selector-categories">
	1155	+ <button class="mxchat-model-category-btn active" data-category="all">All</button>
	1156	+ <button class="mxchat-model-category-btn" data-category="openrouter">OpenRouter</button>
	1157	+ <button class="mxchat-model-category-btn" data-category="gemini">Google Gemini</button>
	1158	+ <button class="mxchat-model-category-btn" data-category="openai">OpenAI</button>
	1159	+ <button class="mxchat-model-category-btn" data-category="claude">Claude</button>
	1160	+ <button class="mxchat-model-category-btn" data-category="xai">X.AI</button>
	1161	+ <button class="mxchat-model-category-btn" data-category="deepseek">DeepSeek</button>
	1162	+ </div>
	1163	+ <div class="mxchat-model-selector-grid" id="mxchat_models_grid"></div>
	1164	+ `);
	1165	+
	1166	+ // Re-populate the grid
	1167	+ window.populateModelsGrid('', 'all');
	1168	+
	1169	+ // Re-bind event handlers
	1170	+ rebindModalEventHandlers();
	1171	+}
	1172	+function rebindModalEventHandlers() {
	1173	+ const $modal = $('#mxchat_model_selector_modal');
	1174	+
	1175	+ // Re-bind category button clicks
	1176	+ $('.mxchat-model-category-btn').off('click').on('click', function() {
	1177	+ $('.mxchat-model-category-btn').removeClass('active');
	1178	+ $(this).addClass('active');
	1179	+ const category = $(this).data('category');
	1180	+ const searchTerm = $('#mxchat_model_search_input').val();
	1181	+ window.populateModelsGrid(searchTerm, category);
	1182	+ });
	1183	+
	1184	+ // Re-bind search input
	1185	+ $('#mxchat_model_search_input').off('input').on('input', function() {
	1186	+ const searchTerm = $(this).val();
	1187	+ const activeCategory = $('.mxchat-model-category-btn.active').data('category');
	1188	+ populateModelsGrid(searchTerm, activeCategory);
	1189	+ });
	1190	+}
	1191	+
	1192	+function restoreDefaultModalFooter() {
	1193	+ const $modalFooter = $('#mxchat_model_selector_modal').find('.mxchat-model-selector-modal-footer');
	1194	+
	1195	+ // Restore default footer buttons
	1196	+ $modalFooter.html(`
	1197	+ <button id="mxchat_cancel_model_selection" class="button mxchat-model-cancel-btn">Cancel</button>
	1198	+ `);
	1199	+
	1200	+ // Re-bind cancel button
	1201	+ $('#mxchat_cancel_model_selection').on('click', function() {
	1202	+ $('#mxchat_model_selector_modal').hide();
	1203	+ });
	1204	+}
	1205	+
	1206	+function displayOpenRouterModels(models) {
	1207	+ const $modal = $('#mxchat_model_selector_modal');
	1208	+ const $modalBody = $modal.find('.mxchat-model-selector-modal-body');
	1209	+ const $modalFooter = $modal.find('.mxchat-model-selector-modal-footer');
	1210	+ const currentSelected = $('#openrouter_selected_model').val();
	1211	+
	1212	+ // Variable to store the currently selected model (in the UI, not yet saved)
	1213	+ let pendingSelection = {
	1214	+ modelId: currentSelected || null,
	1215	+ modelName: $('#openrouter_selected_model_name').val() || null
	1216	+ };
	1217	+
	1218	+ // Build new modal content with search and models
	1219	+ const newContent = `
	1220	+ <div class="mxchat-model-selector-search-container">
	1221	+ <input type="text" id="mxchat_openrouter_search" class="mxchat-model-search-input" placeholder="Search OpenRouter models...">
	1222	+ <p style="margin: 10px 0; color: #666; font-size: 13px;">
	1223	+ <strong>${models.length} models available</strong> ·
	1224	+ <a href="#" id="mxchat_back_to_provider_select" style="color: #2271b1;">← Back to providers</a>
	1225	+ </p>
	1226	+ </div>
	1227	+ <div class="mxchat-model-selector-grid" id="mxchat_openrouter_models_grid"></div>
	1228	+ `;
	1229	+
	1230	+ // Update footer with Save button for OpenRouter
	1231	+ const footerContent = `
	1232	+ <button id="mxchat_back_to_models_footer" class="button mxchat-model-cancel-btn">Back to Providers</button>
	1233	+ <button id="mxchat_save_openrouter_model" class="button button-primary" disabled>
	1234	+ <span class="dashicons dashicons-saved" style="margin-top: 3px;"></span> Save Selected Model
	1235	+ </button>
	1236	+ `;
	1237	+
	1238	+ $modalBody.html(newContent);
	1239	+ $modalFooter.html(footerContent);
	1240	+
	1241	+ // Function to render models
	1242	+ function renderOpenRouterModels(filterText = '') {
	1243	+ const $grid = $('#mxchat_openrouter_models_grid');
	1244	+ $grid.empty();
	1245	+
	1246	+ let filteredModels = models;
	1247	+ if (filterText) {
	1248	+ const lowerFilter = filterText.toLowerCase();
	1249	+ filteredModels = models.filter(m =>
	1250	+ m.id.toLowerCase().includes(lowerFilter) ||
	1251	+ m.name.toLowerCase().includes(lowerFilter) ||
	1252	+ (m.description && m.description.toLowerCase().includes(lowerFilter))
	1253	+ );
	1254	+ }
	1255	+
	1256	+ filteredModels.forEach(model => {
	1257	+ const isSelected = pendingSelection.modelId === model.id;
	1258	+ const contextLength = model.context_length ? `${(model.context_length / 1000).toFixed(0)}K` : '';
	1259	+ const promptPrice = model.pricing.prompt ? `$${(model.pricing.prompt * 1000000).toFixed(2)}/1M` : '';
	1260	+
	1261	+ const $card = jQuery(`
	1262	+ <div class="mxchat-openrouter-card ${isSelected ? 'mxchat-model-selected' : ''}" data-model-id="${model.id}" data-model-name="${model.name}">
	1263	+ <div class="mxchat-model-selector-icon">
	1264	+ ${getOpenRouterIcon(model.id)}
	1265	+ </div>
	1266	+ <div class="mxchat-model-selector-info">
	1267	+ <h4 class="mxchat-model-selector-title">${model.name}</h4>
	1268	+ <div style="font-size: 12px; color: #666; margin-top: 5px;">
	1269	+ ${contextLength ? '<span style="margin-right: 12px;">📄 ' + contextLength + '</span>' : ''}
	1270	+ ${promptPrice ? '<span>💰 ' + promptPrice + '</span>' : ''}
	1271	+ </div>
	1272	+ </div>
	1273	+ ${isSelected ? '<div class="mxchat-model-selector-checkmark">✓</div>' : ''}
	1274	+ </div>
	1275	+ `);
	1276	+
	1277	+ $grid.append($card);
	1278	+ });
	1279	+ }
	1280	+
	1281	+ // Helper to get icon
	1282	+ function getOpenRouterIcon(modelId) {
	1283	+ if (modelId.includes('gpt') || modelId.includes('openai')) {
	1284	+ return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" class="mxchat-model-icon-openai"><path fill="currentColor" d="M297 131a80.6 80.6 0 0 0-93.7-104.2 80.6 80.6 0 0 0-137 29A80.6 80.6 0 0 0 23 189a80.6 80.6 0 0 0 93.7 104.2 80.6 80.6 0 0 0 137-29A80.7 80.7 0 0 0 297.1 131zM176.9 299c-14 .1-27.6-4.8-38.4-13.8l1.9-1 63.7-36.9c3.3-1.8 5.3-5.3 5.2-9v-89.9l27 15.6c.3.1.4.4.5.7v74.4a60 60 0 0 1-60 60zM47.9 244a59.7 59.7 0 0 1-7.1-40.1l1.9 1.1 63.7 36.8c3.2 1.9 7.2 1.9 10.5 0l77.8-45V228c0 .3-.2.6-.4.8L129.9 266a60 60 0 0 1-82-22zM31.2 105c7-12.2 18-21.5 31.2-26.3v75.8c0 3.7 2 7.2 5.2 9l77.8 45-27 15.5a1 1 0 0 1-.9 0L53.1 187a60 60 0 0 1-22-82zm221.2 51.5-77.8-45 27-15.5a1 1 0 0 1 .9 0l64.4 37.1a60 60 0 0 1-9.3 108.2v-75.8c0-3.7-2-7.2-5.2-9zm26.8-40.4-1.9-1.1-63.7-36.8a10.4 10.4 0 0 0-10.5 0L125.4 123V92c0-.3 0-.6.3-.8L190.1 54a60 60 0 0 1 89.1 62.1zm-168.5 55.4-27-15.5a1 1 0 0 1-.4-.7V80.9a60 60 0 0 1 98.3-46.1l-1.9 1L116 72.8a10.3 10.3 0 0 0-5.2 9v89.8zm14.6-31.5 34.7-20 34.6 20v40L160 200l-34.7-20z"></path></svg>';
	1285	+ } else if (modelId.includes('claude') || modelId.includes('anthropic')) {
	1286	+ return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 176" fill="none" class="mxchat-model-icon-claude"><path fill="currentColor" d="m147.487 0l70.081 175.78H256L185.919 0zM66.183 106.221l23.98-61.774l23.98 61.774zM70.07 0L0 175.78h39.18l14.33-36.914h73.308l14.328 36.914h39.179L110.255 0z"></path></svg>';
	1287	+ } else if (modelId.includes('gemini') || modelId.includes('google')) {
	1288	+ return '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" class="mxchat-model-icon-gemini"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"></path></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"></path><clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"></path><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"></path><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"></path></svg>';
	1289	+ }
	1290	+ return '<span class="dashicons dashicons-cloud" style="font-size: 24px; color: #6750A4;"></span>';
	1291	+ }
	1292	+
	1293	+ // Initial render
	1294	+ renderOpenRouterModels();
	1295	+
	1296	+ // Search handler
	1297	+ $('#mxchat_openrouter_search').on('input', function() {
	1298	+ renderOpenRouterModels($(this).val());
	1299	+ });
	1300	+
	1301	+ $('#mxchat_back_to_provider_select').on('click', function(e) {
	1302	+ e.preventDefault();
	1303	+ // Restore footer to default state
	1304	+ restoreDefaultModalFooter();
	1305	+ // Instead of location.reload(), restore original content
	1306	+ restoreOriginalModalContent();
	1307	+ });
	1308	+
	1309	+ // Back to providers footer button
	1310	+ $('#mxchat_back_to_models_footer').on('click', function(e) {
	1311	+ e.preventDefault();
	1312	+ // Restore footer to default state
	1313	+ restoreDefaultModalFooter();
	1314	+ // Restore original content
	1315	+ restoreOriginalModalContent();
	1316	+ });
	1317	+
	1318	+ // Model selection - just highlight, don't save yet
	1319	+ $(document).on('click', '.mxchat-openrouter-card', function(e) {
	1320	+ e.stopPropagation(); // Prevent triggering the regular model card handler
	1321	+
	1322	+ const modelId = $(this).data('model-id');
	1323	+ const modelName = $(this).data('model-name');
	1324	+
	1325	+ // Remove selection from all cards
	1326	+ $('.mxchat-openrouter-card').removeClass('mxchat-model-selected').find('.mxchat-model-selector-checkmark').remove();
	1327	+
	1328	+ // Add selection to clicked card
	1329	+ $(this).addClass('mxchat-model-selected');
	1330	+ if ($(this).find('.mxchat-model-selector-checkmark').length === 0) {
	1331	+ $(this).append('<div class="mxchat-model-selector-checkmark">✓</div>');
	1332	+ }
	1333	+
	1334	+ // Update pending selection
	1335	+ pendingSelection.modelId = modelId;
	1336	+ pendingSelection.modelName = modelName;
	1337	+
	1338	+ // Enable the save button
	1339	+ $('#mxchat_save_openrouter_model').prop('disabled', false);
	1340	+ });
	1341	+
	1342	+ // Save button handler
	1343	+ $('#mxchat_save_openrouter_model').on('click', function() {
	1344	+ const $saveButton = $(this);
	1345	+
	1346	+ if (!pendingSelection.modelId) {
	1347	+ return;
	1348	+ }
	1349	+
	1350	+ // Disable button and show loading state
	1351	+ $saveButton.prop('disabled', true).html('<span class="spinner is-active" style="float: none; margin: 0 5px 0 0;"></span> Saving...');
	1352	+
	1353	+ // First, save that we're using OpenRouter
	1354	+ jQuery.ajax({
	1355	+ url: mxchatAdmin.ajax_url,
	1356	+ type: 'POST',
	1357	+ data: {
	1358	+ action: 'mxchat_save_setting',
	1359	+ name: 'model',
	1360	+ value: 'openrouter',
	1361	+ _ajax_nonce: mxchatAdmin.setting_nonce
	1362	+ },
	1363	+ success: function() {
	1364	+ // After model is set, save the model ID
	1365	+ jQuery.ajax({
	1366	+ url: mxchatAdmin.ajax_url,
	1367	+ type: 'POST',
	1368	+ data: {
	1369	+ action: 'mxchat_save_setting',
	1370	+ name: 'openrouter_selected_model',
	1371	+ value: pendingSelection.modelId,
	1372	+ _ajax_nonce: mxchatAdmin.setting_nonce
	1373	+ },
	1374	+ success: function() {
	1375	+ // Update DOM immediately
	1376	+ $('#openrouter_selected_model').val(pendingSelection.modelId);
	1377	+
	1378	+ // After model ID is saved, save the display name
	1379	+ jQuery.ajax({
	1380	+ url: mxchatAdmin.ajax_url,
	1381	+ type: 'POST',
	1382	+ data: {
	1383	+ action: 'mxchat_save_setting',
	1384	+ name: 'openrouter_selected_model_name',
	1385	+ value: pendingSelection.modelName,
	1386	+ _ajax_nonce: mxchatAdmin.setting_nonce
	1387	+ },
	1388	+ success: function() {
	1389	+ // Update DOM immediately
	1390	+ $('#openrouter_selected_model_name').val(pendingSelection.modelName);
	1391	+
	1392	+ // Update button text
	1393	+ $('#mxchat_model_selector_btn').text('OpenRouter: ' + pendingSelection.modelName);
	1394	+
	1395	+ // Update the "Currently using" message
	1396	+ const $currentSelection = $('#openrouter-current-selection');
	1397	+ if ($currentSelection.length) {
	1398	+ $currentSelection.html(
	1399	+ '<span class="dashicons dashicons-yes" style="font-size: 16px; vertical-align: middle;"></span> ' +
	1400	+ 'Currently using: <strong>' + pendingSelection.modelName + '</strong>'
	1401	+ ).show();
	1402	+ }
	1403	+
	1404	+ // Show success state briefly
	1405	+ $saveButton.html('<span class="dashicons dashicons-yes" style="color: #46b450; margin-top: 3px;"></span> Saved!');
	1406	+
	1407	+ // Close modal after short delay
	1408	+ setTimeout(function() {
	1409	+ // Restore footer to default state
	1410	+ restoreDefaultModalFooter();
	1411	+ $modal.hide();
	1412	+ }, 800);
	1413	+ },
	1414	+ error: function() {
	1415	+ $saveButton.prop('disabled', false).html('<span class="dashicons dashicons-saved" style="margin-top: 3px;"></span> Save Selected Model');
	1416	+ alert('Failed to save model name. Please try again.');
	1417	+ }
	1418	+ });
	1419	+ },
	1420	+ error: function() {
	1421	+ $saveButton.prop('disabled', false).html('<span class="dashicons dashicons-saved" style="margin-top: 3px;"></span> Save Selected Model');
	1422	+ alert('Failed to save model ID. Please try again.');
	1423	+ }
	1424	+ });
	1425	+ },
	1426	+ error: function() {
	1427	+ $saveButton.prop('disabled', false).html('<span class="dashicons dashicons-saved" style="margin-top: 3px;"></span> Save Selected Model');
	1428	+ alert('Failed to save OpenRouter selection. Please try again.');
	1429	+ }
	1430	+ });
	1431	+ });
	1432	+
	1433	+}
	1434	+
	1435	+// Embedding model selector - completely separate from chat model selector
	1436	+function setupMxChatEmbeddingModelSelector() {
	1437	+ const $embeddingModelSelect = $('#embedding_model');
	1438	+
	1439	+ // Skip if the element doesn't exist on the page
	1440	+ if ($embeddingModelSelect.length === 0) {
	1441	+ return;
	1442	+ }
	1443	+
	1444	+ const $embeddingModelSelectorButton = $('<button>', {
	1445	+ type: 'button',
	1446	+ id: 'mxchat_embedding_model_selector_btn',
	1447	+ class: 'button-primary mxchat-embedding-model-selector-btn', // Changed class name to be more specific
	1448	+ text: 'Select Embedding Model'
	1449	+ });
	1450	+
	1451	+ // Replace the select dropdown with a button
	1452	+ $embeddingModelSelect.hide().after($embeddingModelSelectorButton);
	1453	+
	1454	+ // Update button text to show currently selected model
	1455	+ function updateButtonText() {
	1456	+ const selectedModel = $embeddingModelSelect.val();
	1457	+ const selectedModelText = $embeddingModelSelect.find('option:selected').text();
	1458	+ $embeddingModelSelectorButton.text(selectedModelText);
	1459	+ }
	1460	+
	1461	+ // Initialize button text
	1462	+ updateButtonText();
	1463	+
	1464	+ // Create a unique ID for the modal to avoid conflicts
	1465	+ const embeddingModalId = 'mxchat_embedding_model_selector_modal';
	1466	+
	1467	+ // Create and append modal HTML with unique IDs
	1468	+ const embeddingModelSelectorModal = `
	1469	+ <div id="${embeddingModalId}" class="mxchat-embedding-model-selector-modal">
	1470	+ <div class="mxchat-embedding-model-selector-modal-content">
	1471	+ <div class="mxchat-embedding-model-selector-modal-header">
	1472	+ <h3>Select Embedding Model</h3>
	1473	+ <span class="mxchat-embedding-model-selector-modal-close">&times;</span>
	1474	+ </div>
	1475	+ <div class="mxchat-embedding-model-selector-modal-body">
	1476	+ <div class="mxchat-embedding-model-selector-search-container">
	1477	+ <input type="text" id="mxchat_embedding_model_search_input" class="mxchat-embedding-model-search-input" placeholder="Search models...">
	1478	+ </div>
	1479	+ <div class="mxchat-embedding-model-selector-categories">
	1480	+ <button class="mxchat-embedding-model-category-btn active" data-category="all">All</button>
	1481	+ <button class="mxchat-embedding-model-category-btn" data-category="openai">OpenAI</button>
	1482	+ <button class="mxchat-embedding-model-category-btn" data-category="voyage">Voyage AI</button>
	1483	+ <button class="mxchat-embedding-model-category-btn" data-category="gemini">Google Gemini</button>
	1484	+ </div>
	1485	+ <div class="mxchat-embedding-model-selector-grid" id="mxchat_embedding_models_grid"></div>
	1486	+ </div>
	1487	+ <div class="mxchat-embedding-model-selector-modal-footer">
	1488	+ <button id="mxchat_cancel_embedding_model_selection" class="button mxchat-embedding-model-cancel-btn">Cancel</button>
	1489	+ </div>
	1490	+ </div>
	1491	+ </div>
	1492	+ `;
	1493	+
	1494	+ // Use jQuery's append to ensure it doesn't clash with existing modals
	1495	+ $('body').append(embeddingModelSelectorModal);
	1496	+
	1497	+ // Populate models grid
	1498	+ function populateEmbeddingModelsGrid(filter = '', category = 'all') {
	1499	+ const $grid = $('#mxchat_embedding_models_grid');
	1500	+ $grid.empty();
	1501	+
	1502	+ // Define embedding models with descriptions and context lengths
	1503	+ const models = {
	1504	+ openai: [
	1505	+ {
	1506	+ value: 'text-embedding-3-small',
	1507	+ label: 'TE3 Small',
	1508	+ description: 'Fast and cost-effective embeddings (1536 dimensions, 8K context)'
	1509	+ },
	1510	+ {
	1511	+ value: 'text-embedding-ada-002',
	1512	+ label: 'Ada 2',
	1513	+ description: 'Balanced performance embeddings (1536 dimensions, 8K context)'
	1514	+ },
	1515	+ {
	1516	+ value: 'text-embedding-3-large',
	1517	+ label: 'TE3 Large',
	1518	+ description: 'High-performance embeddings (3072 dimensions, 8K context)'
	1519	+ }
	1520	+ ],
	1521	+ voyage: [
	1522	+ {
	1523	+ value: 'voyage-3-large',
	1524	+ label: 'Voyage-3 Large',
	1525	+ description: 'Advanced semantic search embeddings (2048 dimensions, 32K context)'
	1526	+ }
	1527	+ ],
	1528	+ gemini: [
	1529	+ {
	1530	+ value: 'gemini-embedding-exp-03-07',
	1531	+ label: 'Gemini Embedding',
	1532	+ description: 'Experimental SOTA embeddings (1536 dimensions, 8K context)'
	1533	+ }
	1534	+ ]
	1535	+ };
	1536	+
	1537	+ let allModels = [];
	1538	+ Object.keys(models).forEach(key => {
	1539	+ if (category === 'all' || category === key) {
	1540	+ allModels = allModels.concat(models[key]);
	1541	+ }
	1542	+ });
	1543	+
	1544	+ // Filter by search term if present
	1545	+ if (filter) {
	1546	+ const lowerFilter = filter.toLowerCase();
	1547	+ allModels = allModels.filter(model =>
	1548	+ model.label.toLowerCase().includes(lowerFilter) ||
	1549	+ model.description.toLowerCase().includes(lowerFilter)
	1550	+ );
	1551	+ }
	1552	+
	1553	+ // Create model cards
	1554	+ allModels.forEach(model => {
	1555	+ const isSelected = $embeddingModelSelect.val() === model.value;
	1556	+ let providerClass = 'mxchat-embedding-model-provider-openai';
	1557	+
	1558	+ if (model.value.startsWith('voyage-')) {
	1559	+ providerClass = 'mxchat-embedding-model-provider-voyage';
	1560	+ } else if (model.value.startsWith('gemini-embedding-')) {
	1561	+ providerClass = 'mxchat-embedding-model-provider-gemini';
	1562	+ }
	1563	+
	1564	+ let iconHTML = '';
	1565	+ if (model.value.startsWith('voyage-')) {
	1566	+ iconHTML = '<span class="dashicons dashicons-chart-line mxchat-embedding-model-icon-voyage"></span>';
	1567	+ } else if (model.value.startsWith('gemini-embedding-')) {
	1568	+ iconHTML = '<span class="dashicons dashicons-google mxchat-embedding-model-icon-gemini"></span>';
	1569	+ } else {
	1570	+ iconHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" class="mxchat-embedding-model-icon-openai"><path fill="currentColor" d="M297 131a80.6 80.6 0 0 0-93.7-104.2 80.6 80.6 0 0 0-137 29A80.6 80.6 0 0 0 23 189a80.6 80.6 0 0 0 93.7 104.2 80.6 80.6 0 0 0 137-29A80.7 80.7 0 0 0 297.1 131zM176.9 299c-14 .1-27.6-4.8-38.4-13.8l1.9-1 63.7-36.9c3.3-1.8 5.3-5.3 5.2-9v-89.9l27 15.6c.3.1.4.4.5.7v74.4a60 60 0 0 1-60 60zM47.9 244a59.7 59.7 0 0 1-7.1-40.1l1.9 1.1 63.7 36.8c3.2 1.9 7.2 1.9 10.5 0l77.8-45V228c0 .3-.2.6-.4.8L129.9 266a60 60 0 0 1-82-22zM31.2 105c7-12.2 18-21.5 31.2-26.3v75.8c0 3.7 2 7.2 5.2 9l77.8 45-27 15.5a1 1 0 0 1-.9 0L53.1 187a60 60 0 0 1-22-82zm221.2 51.5-77.8-45 27-15.5a1 1 0 0 1 .9 0l64.4 37.1a60 60 0 0 1-9.3 108.2v-75.8c0-3.7-2-7.2-5.2-9zm26.8-40.4-1.9-1.1-63.7-36.8a10.4 10.4 0 0 0-10.5 0L125.4 123V92c0-.3 0-.6.3-.8L190.1 54a60 60 0 0 1 89.1 62.1zm-168.5 55.4-27-15.5a1 1 0 0 1-.4-.7V80.9a60 60 0 0 1 98.3-46.1l-1.9 1L116 72.8a10.3 10.3 0 0 0-5.2 9v89.8zm14.6-31.5 34.7-20 34.6 20v40L160 200l-34.7-20z"></path></svg>';
	1571	+ }
	1572	+
	1573	+ const $modelCard = $(`
	1574	+ <div class="mxchat-embedding-model-selector-card ${isSelected ? 'mxchat-embedding-model-selected' : ''} ${providerClass}" data-value="${model.value}">
	1575	+ <div class="mxchat-embedding-model-selector-icon">
	1576	+ ${iconHTML}
	1577	+ </div>
	1578	+ <div class="mxchat-embedding-model-selector-info">
	1579	+ <h4 class="mxchat-embedding-model-selector-title">${model.label}</h4>
	1580	+ <p class="mxchat-embedding-model-selector-description">${model.description}</p>
	1581	+ </div>
	1582	+ ${isSelected ? '<div class="mxchat-embedding-model-selector-checkmark">✓</div>' : ''}
	1583	+ </div>
	1584	+ `);
	1585	+
	1586	+ $grid.append($modelCard);
	1587	+ });
	1588	+ }
	1589	+
	1590	+ // Event handlers - use namespaced events to avoid conflicts
	1591	+ $embeddingModelSelectorButton.on('click.embeddingModelSelector', function(e) {
	1592	+ e.stopPropagation(); // Prevent event bubbling
	1593	+ $('#' + embeddingModalId).show();
	1594	+ populateEmbeddingModelsGrid('', 'all');
	1595	+ });
	1596	+
	1597	+ $('.mxchat-embedding-model-selector-modal-close, #mxchat_cancel_embedding_model_selection').on('click.embeddingModelSelector', function(e) {
	1598	+ e.stopPropagation(); // Prevent event bubbling
	1599	+ $('#' + embeddingModalId).hide();
	1600	+ });
	1601	+
	1602	+ $('.mxchat-embedding-model-selector-categories .mxchat-embedding-model-category-btn').on('click.embeddingModelSelector', function(e) {
	1603	+ e.stopPropagation(); // Prevent event bubbling
	1604	+ $('.mxchat-embedding-model-selector-categories .mxchat-embedding-model-category-btn').removeClass('active');
	1605	+ $(this).addClass('active');
	1606	+ const category = $(this).data('category');
	1607	+ const searchTerm = $('#mxchat_embedding_model_search_input').val();
	1608	+ populateEmbeddingModelsGrid(searchTerm, category);
	1609	+ });
	1610	+
	1611	+ $('#mxchat_embedding_model_search_input').on('input.embeddingModelSelector', function() {
	1612	+ const searchTerm = $(this).val();
	1613	+ const activeCategory = $('.mxchat-embedding-model-selector-categories .mxchat-embedding-model-category-btn.active').data('category');
	1614	+ populateEmbeddingModelsGrid(searchTerm, activeCategory);
	1615	+ });
	1616	+
	1617	+ // Use a direct selector to avoid conflicts with other card elements
	1618	+ $(document).on('click.embeddingModelSelector', '.mxchat-embedding-model-selector-grid .mxchat-embedding-model-selector-card', function(e) {
	1619	+ e.stopPropagation(); // Prevent event bubbling
	1620	+ const modelValue = $(this).data('value');
	1621	+
	1622	+ // Important: Only update this specific select element
	1623	+ $embeddingModelSelect.val(modelValue);
	1624	+
	1625	+ // Manually trigger change only on this element
	1626	+ const changeEvent = new Event('change', { bubbles: true });
	1627	+ $embeddingModelSelect[0].dispatchEvent(changeEvent);
	1628	+
	1629	+ // Update button text
	1630	+ updateButtonText();
	1631	+
	1632	+ // Hide modal
	1633	+ $('#' + embeddingModalId).hide();
	1634	+ });
	1635	+
	1636	+ // Close modal when clicking outside - use namespaced events
	1637	+ $(window).on('click.embeddingModelSelector', function(event) {
	1638	+ if ($(event.target).is('#' + embeddingModalId)) {
	1639	+ $('#' + embeddingModalId).hide();
	1640	+ }
	1641	+ });
	1642	+}
	1643	+
	1644	+// Call this function after the DOM is fully loaded
	1645	+$(document).ready(function() {
	1646	+ setupMxChatModelSelector();
	1647	+ setupMxChatEmbeddingModelSelector();
	1648	+});
	1649	+
	1650	+ // Add Intent Form Submission
	1651	+ $('#mxchat-add-intent-form').on('submit', function(event) {
	1652	+ $('#mxchat-intent-loading').show();
	1653	+ $('#mxchat-intent-loading-text').show();
	1654	+ $(this).find('button[type="submit"]').hide();
	1655	+ });
	1656	+
	1657	+ // Inline Edit Functionality
	1658	+ $('.edit-button').on('click', function() {
	1659	+ var row = $(this).closest('tr');
	1660	+ row.find('.content-view, .url-view').hide();
	1661	+ row.find('.content-edit, .url-edit').show();
	1662	+ row.find('.edit-button').hide();
	1663	+ row.find('.save-button').show();
	1664	+ });
	1665	+
	1666	+ // Save button handler
	1667	+// Save button handler
	1668	+$('.save-button').on('click', function() {
	1669	+ var button = $(this);
	1670	+ var row = button.closest('tr');
	1671	+ var id = button.data('id');
	1672	+ var nonce = button.data('nonce'); // Get nonce from button data attribute
	1673	+ var newContent = row.find('.content-edit').val();
	1674	+ var newUrl = row.find('.url-edit').val();
	1675	+
	1676	+ //console.log('Nonce from button:', nonce); // Debug
	1677	+
	1678	+ button.prop('disabled', true);
	1679	+ button.text('Saving...');
	1680	+
	1681	+ $.ajax({
	1682	+ url: mxchatAdmin.ajax_url,
	1683	+ type: 'POST',
	1684	+ data: {
	1685	+ action: 'mxchat_save_inline_prompt',
	1686	+ id: id,
	1687	+ article_content: newContent,
	1688	+ article_url: newUrl,
	1689	+ _ajax_nonce: nonce // Use nonce from button
	1690	+ },
	1691	+ success: function(response) {
	1692	+ button.prop('disabled', false);
	1693	+ button.text('Save');
	1694	+
	1695	+ if (response.success) {
	1696	+ row.find('.content-view').html(newContent.replace(/\n/g, "<br>"));
	1697	+ if (newUrl) {
	1698	+ row.find('.url-view').html('<a href="' + newUrl + '" target="_blank">' + newUrl + '</a>');
	1699	+ } else {
	1700	+ row.find('.url-view').html('N/A');
	1701	+ }
	1702	+
	1703	+ row.find('.content-edit, .url-edit').hide();
	1704	+ row.find('.content-view, .url-view').show();
	1705	+ row.find('.save-button').hide();
	1706	+ row.find('.edit-button').show();
	1707	+ } else {
	1708	+ alert('Error saving content: ' + (response.data?.message || 'Unknown error'));
	1709	+ }
	1710	+ },
	1711	+ error: function() {
	1712	+ button.prop('disabled', false);
	1713	+ button.text('Save');
	1714	+ alert('An error occurred while saving.');
	1715	+ }
	1716	+ });
	1717	+});
	1718	+
	1719	+
	1720	+ // Questions handling
	1721	+ $('.mxchat-add-question').on('click', function () {
	1722	+ const container = $('#mxchat-additional-questions-container');
	1723	+ const questionCount = container.find('.mxchat-question-row').length + 4;
	1724	+ const questionIndex = container.find('.mxchat-question-row').length;
	1725	+
	1726	+ const newQuestion = `
	1727	+ <div class="mxchat-question-row">
	1728	+ <input type="text"
	1729	+ name="additional_popular_questions[]"
	1730	+ placeholder="Enter Additional Popular Question ${questionCount}"
	1731	+ class="regular-text mxchat-question-input"
	1732	+ data-question-index="${questionIndex}" />
	1733	+ <button type="button" class="button mxchat-remove-question"
	1734	+ aria-label="Remove question">Remove</button>
	1735	+ </div>
	1736	+ `;
	1737	+ container.append(newQuestion);
	1738	+ });
	1739	+
	1740	+ $(document).on('click', '.mxchat-remove-question', function () {
	1741	+ $(this).closest('.mxchat-question-row').remove();
	1742	+ saveQuestions();
	1743	+ });
	1744	+
	1745	+ $(document).on('change', '.mxchat-question-input', function() {
	1746	+ saveQuestions();
	1747	+ });
	1748	+
	1749	+ function saveQuestions() {
	1750	+ const questions = [];
	1751	+ $('.mxchat-question-input').each(function() {
	1752	+ const value = $(this).val().trim();
	1753	+ if (value) {
	1754	+ questions.push(value);
	1755	+ }
	1756	+ });
	1757	+
	1758	+ const feedbackContainer = $('<div class="feedback-container"></div>');
	1759	+ const spinner = $('<div class="saving-spinner"></div>');
	1760	+ const successIcon = $('<div class="success-icon">✔</div>');
	1761	+
	1762	+ // Append feedback after the add button
	1763	+ $('.mxchat-add-question').after(feedbackContainer);
	1764	+ feedbackContainer.append(spinner);
	1765	+
	1766	+ // Save via AJAX
	1767	+ $.ajax({
	1768	+ url: mxchatAdmin.ajax_url,
	1769	+ type: 'POST',
	1770	+ data: {
	1771	+ action: 'mxchat_save_setting',
	1772	+ name: 'additional_popular_questions',
	1773	+ value: JSON.stringify(questions),
	1774	+ _ajax_nonce: mxchatAdmin.setting_nonce
	1775	+ },
	1776	+ success: function(response) {
	1777	+ if (response.success) {
	1778	+ spinner.fadeOut(200, function() {
	1779	+ feedbackContainer.append(successIcon);
	1780	+ successIcon.fadeIn(200).delay(1000).fadeOut(200, function() {
	1781	+ feedbackContainer.remove();
	1782	+ });
	1783	+ });
	1784	+ } else {
	1785	+ alert('Error saving questions: ' + (response.data?.message || 'Unknown error'));
	1786	+ feedbackContainer.remove();
	1787	+ }
	1788	+ },
	1789	+ error: function() {
	1790	+ alert('An error occurred while saving questions.');
	1791	+ feedbackContainer.remove();
	1792	+ }
	1793	+ });
	1794	+ }
	1795	+
	1796	+ // Live agent status handler
	1797	+ const statusToggle = document.getElementById('live_agent_status');
	1798	+ const statusText = statusToggle?.parentElement.nextElementSibling?.querySelector('.status-text');
	1799	+ if (statusToggle && statusText) {
	1800	+ statusToggle.addEventListener('change', function() {
	1801	+ // Update display text
	1802	+ statusText.textContent = this.checked ? 'Online' : 'Offline';
	1803	+
	1804	+ // Send the correct on/off value to the server
	1805	+ if (window.mxchatSaveSetting) {
	1806	+ window.mxchatSaveSetting('live_agent_status', this.checked ? 'on' : 'off');
	1807	+ }
	1808	+ });
	1809	+ }
	1810	+
	1811	+ // Function to adjust the textarea height to content
	1812	+ function adjustTextareaHeight() {
	1813	+ this.style.height = 'auto'; // Reset to auto to calculate scrollHeight
	1814	+ this.style.height = this.scrollHeight + 'px'; // Expand to content height
	1815	+ }
	1816	+
	1817	+ // Function to reset the textarea height to initial
	1818	+ function resetTextareaHeight() {
	1819	+ this.style.height = ''; // Remove inline height, reverting to CSS default
	1820	+ }
	1821	+
	1822	+ // Target the specific textarea by ID
	1823	+ var $textarea = $('#system_prompt_instructions');
	1824	+
	1825	+ // Bind events
	1826	+ $textarea.on('focus input', adjustTextareaHeight) // Expand on focus and input
	1827	+ .on('blur', resetTextareaHeight); // Reset on blur
	1828	+});
	1829	+
	1830	+
	1831	+
	1832	+document.addEventListener('DOMContentLoaded', function() {
	1833	+ // Check if we're on the correct page before initializing
	1834	+ const modal = document.getElementById('mxchat-action-modal');
	1835	+
	1836	+ // Only initialize if the modal exists on this page
	1837	+ if (modal) {
	1838	+ //console.log('MXChat Action Modal JS Loaded');
	1839	+
	1840	+ // Initialize the action modal functionality
	1841	+ initStepBasedActionModal();
	1842	+ }
	1843	+
	1844	+ // Function to initialize the step-based action modal
	1845	+ function initStepBasedActionModal() {
	1846	+ // We already checked for modal existence above, so no need to check again
	1847	+
	1848	+ const actionStep1 = document.getElementById('mxchat-action-step-1');
	1849	+ const actionStep2 = document.getElementById('mxchat-action-step-2');
	1850	+ const backToStep1Btn = document.getElementById('mxchat-back-to-step-1');
	1851	+ const searchInput = document.getElementById('action-type-search');
	1852	+ const categoryButtons = modal.querySelectorAll('.mxchat-category-button');
	1853	+ const actionCards = modal.querySelectorAll('.mxchat-action-type-card');
	1854	+ const actionForm = document.getElementById('mxchat-action-form');
	1855	+ const callbackInput = document.getElementById('callback_function');
	1856	+ const actionIdField = document.getElementById('edit_action_id');
	1857	+ const labelField = document.getElementById('intent_label');
	1858	+ const phrasesField = document.getElementById('action_phrases');
	1859	+ const formActionType = document.getElementById('form_action_type');
	1860	+ const nonceContainer = document.getElementById('action-nonce-container');
	1861	+ const thresholdSlider = document.getElementById('similarity_threshold');
	1862	+ const thresholdDisplay = document.querySelector('.mxchat-threshold-value-display');
	1863	+
	1864	+ // Rest of your initialization code remains the same...
	1865	+
	1866	+ // Log the structure of one action card for debugging
	1867	+ if (actionCards.length > 0) {
	1868	+ //console.log('First action card data attributes:', actionCards[0].dataset);
	1869	+ //console.log('First action card HTML:', actionCards[0].outerHTML);
	1870	+ }
	1871	+
	1872	+ // Add click event listeners to category buttons
	1873	+ categoryButtons.forEach(button => {
	1874	+ button.addEventListener('click', function() {
	1875	+ //console.log('Category button clicked:', this.dataset.category);
	1876	+
	1877	+ // Remove active class from all buttons
	1878	+ categoryButtons.forEach(btn => btn.classList.remove('active'));
	1879	+
	1880	+ // Add active class to clicked button
	1881	+ this.classList.add('active');
	1882	+
	1883	+ // Get selected category
	1884	+ const category = this.dataset.category;
	1885	+
	1886	+ // Filter action cards
	1887	+ filterActionCards(category, searchInput.value);
	1888	+ });
	1889	+ });
	1890	+
	1891	+ // Add search functionality
	1892	+ if (searchInput) {
	1893	+ searchInput.addEventListener('input', function() {
	1894	+ // Get active category
	1895	+ const activeCategory = modal.querySelector('.mxchat-category-button.active')?.dataset.category || 'all';
	1896	+ //console.log('Search input changed, active category:', activeCategory);
	1897	+
	1898	+ // Filter action cards
	1899	+ filterActionCards(activeCategory, this.value);
	1900	+ });
	1901	+ }
	1902	+
	1903	+ // Add click event listeners to action cards
	1904	+ actionCards.forEach(card => {
	1905	+ card.addEventListener('click', function() {
	1906	+ // Get the action data
	1907	+ const isPro = this.dataset.pro === 'true';
	1908	+ const isInstalled = this.dataset.installed === 'true';
	1909	+ const addonName = this.dataset.addon || '';
	1910	+ const actionValue = this.dataset.value;
	1911	+ const actionLabel = this.dataset.label;
	1912	+ const actionIcon = this.querySelector('.dashicons').getAttribute('class').replace('dashicons dashicons-', '');
	1913	+ const actionDescription = this.querySelector('p').textContent;
	1914	+
	1915	+ // Pro check using the proper detection method
	1916	+ const proIsActivated = typeof mxchatAdmin !== 'undefined' &&
	1917	+ (mxchatAdmin.is_activated === '1' ||
	1918	+ mxchatAdmin.is_activated === 'true' ||
	1919	+ mxchatAdmin.is_activated === true);
	1920	+
	1921	+ // Handle different states
	1922	+ if (isPro && !proIsActivated) {
	1923	+ // Pro feature but no Pro license
	1924	+ showProFeatureNotice();
	1925	+ return;
	1926	+ }
	1927	+
	1928	+ if (addonName && !isInstalled) {
	1929	+ // Add-on required but not installed
	1930	+ const addonDisplayName = this.querySelector('.mxchat-addon-info')?.textContent?.replace('Requires ', '') || addonName + ' Add-on';
	1931	+ showAddonRequiredNotice(addonDisplayName);
	1932	+ return;
	1933	+ }
	1934	+
	1935	+ // If we get here, the action is available - proceed as normal
	1936	+ callbackInput.value = actionValue;
	1937	+
	1938	+ // Update the selected action display in step 2
	1939	+ document.getElementById('selected-action-title').textContent = actionLabel;
	1940	+ document.getElementById('selected-action-description').textContent = actionDescription;
	1941	+ document.getElementById('selected-action-icon').innerHTML =
	1942	+ `<span class="dashicons dashicons-${actionIcon}"></span>`;
	1943	+
	1944	+ // Set a default label based on the action type (user can change it)
	1945	+ if (!labelField.value) {
	1946	+ labelField.value = actionLabel;
	1947	+ }
	1948	+
	1949	+ // Move to step 2
	1950	+ actionStep1.classList.remove('active');
	1951	+ actionStep2.classList.add('active');
	1952	+
	1953	+ // Update modal title
	1954	+ });
	1955	+ });
	1956	+
	1957	+ // Back button functionality
	1958	+ if (backToStep1Btn) {
	1959	+ backToStep1Btn.addEventListener('click', function() {
	1960	+ //console.log('Back button clicked');
	1961	+ actionStep2.classList.remove('active');
	1962	+ actionStep1.classList.add('active');
	1963	+ });
	1964	+ }
	1965	+
	1966	+ // Function to filter action cards by category and search term
	1967	+ function filterActionCards(category, searchTerm) {
	1968	+ searchTerm = searchTerm.toLowerCase().trim();
	1969	+ //console.log(`Filtering cards by category: "${category}", search: "${searchTerm}"`);
	1970	+
	1971	+ let visibleCount = 0;
	1972	+
	1973	+ // Show all cards initially with animation
	1974	+ actionCards.forEach((card, index) => {
	1975	+ // Reset animation
	1976	+ card.style.animation = 'none';
	1977	+ // Trigger reflow
	1978	+ void card.offsetWidth;
	1979	+
	1980	+ // Determine if card should be visible based on category and search term
	1981	+ const cardCategory = card.dataset.category || '';
	1982	+ const matchesCategory = category === 'all' || cardCategory === category;
	1983	+
	1984	+ const cardTitle = card.querySelector('h4')?.textContent?.toLowerCase() || '';
	1985	+ const cardDesc = card.querySelector('p')?.textContent?.toLowerCase() || '';
	1986	+ const matchesSearch = searchTerm === '' ||
	1987	+ cardTitle.includes(searchTerm) ||
	1988	+ cardDesc.includes(searchTerm);
	1989	+
	1990	+ // Show/hide card with animation
	1991	+ if (matchesCategory && matchesSearch) {
	1992	+ card.style.display = 'flex';
	1993	+ // Staggered animation for cards
	1994	+ card.style.animation = `fadeIn 0.2s ease forwards ${index * 0.03}s`;
	1995	+ visibleCount++;
	1996	+ } else {
	1997	+ card.style.display = 'none';
	1998	+ }
	1999	+ });
	2000	+
	2001	+ //console.log(`Filter results: ${visibleCount} cards visible out of ${actionCards.length}`);
	2002	+ }
	2003	+
	2004	+ // Function to show notice for Pro features
	2005	+ function showProFeatureNotice() {
	2006	+ //console.log('Showing Pro feature notice');
	2007	+ // Check if we already have a notification container
	2008	+ let noticeContainer = document.querySelector('.mxchat-pro-notice');
	2009	+
	2010	+ if (!noticeContainer) {
	2011	+ // Create the notice container
	2012	+ noticeContainer = document.createElement('div');
	2013	+ noticeContainer.className = 'mxchat-pro-notice';
	2014	+
	2015	+ // Create content
	2016	+ noticeContainer.innerHTML = `
	2017	+ <div class="mxchat-pro-notice-content">
	2018	+ <h3>MxChat Pro Feature</h3>
	2019	+ <p>This action is available in the Pro version only.</p>
	2020	+ <div class="mxchat-pro-notice-buttons">
	2021	+ <button class="mxchat-button-secondary mxchat-pro-notice-close">Close</button>
	2022	+ <a href="https://mxchat.ai/" class="mxchat-button-primary">Upgrade to Pro</a>
	2023	+ </div>
	2024	+ </div>
	2025	+ `;
	2026	+
	2027	+ // Append to body
	2028	+ document.body.appendChild(noticeContainer);
	2029	+
	2030	+ // Add close functionality
	2031	+ const closeButton = noticeContainer.querySelector('.mxchat-pro-notice-close');
	2032	+ closeButton.addEventListener('click', function() {
	2033	+ noticeContainer.classList.remove('active');
	2034	+ setTimeout(() => {
	2035	+ noticeContainer.remove();
	2036	+ }, 300);
	2037	+ });
	2038	+
	2039	+ // Click outside to close
	2040	+ noticeContainer.addEventListener('click', function(e) {
	2041	+ if (e.target === noticeContainer) {
	2042	+ closeButton.click();
	2043	+ }
	2044	+ });
	2045	+
	2046	+ // Show with animation
	2047	+ setTimeout(() => {
	2048	+ noticeContainer.classList.add('active');
	2049	+ }, 10);
	2050	+ } else {
	2051	+ // If it already exists, just make it visible again
	2052	+ noticeContainer.classList.add('active');
	2053	+ }
	2054	+ }
	2055	+
	2056	+ // Function to show notice for add-on requirements
	2057	+ function showAddonRequiredNotice(addonName) {
	2058	+ //console.log(`Showing add-on notice for: ${addonName}`);
	2059	+ // Check if we already have a notification container
	2060	+ let noticeContainer = document.querySelector('.mxchat-addon-notice');
	2061	+
	2062	+ if (!noticeContainer) {
	2063	+ // Create the notice container
	2064	+ noticeContainer = document.createElement('div');
	2065	+ noticeContainer.className = 'mxchat-addon-notice';
	2066	+
	2067	+ // Create content
	2068	+ noticeContainer.innerHTML = `
	2069	+ <div class="mxchat-addon-notice-content">
	2070	+ <span class="mxchat-addon-notice-icon">🧩</span>
	2071	+ <h3>Add-on Required</h3>
	2072	+ <p>This action requires the <strong>${addonName}</strong> add-on to be installed.</p>
	2073	+ <div class="mxchat-addon-notice-buttons">
	2074	+ <button class="mxchat-button-secondary mxchat-addon-notice-close">Close</button>
	2075	+ <a href="admin.php?page=mxchat-addons" class="mxchat-button-primary">Get Add-ons</a>
	2076	+ </div>
	2077	+ </div>
	2078	+ `;
	2079	+
	2080	+ // Append to body
	2081	+ document.body.appendChild(noticeContainer);
	2082	+
	2083	+ // Add close functionality
	2084	+ const closeButton = noticeContainer.querySelector('.mxchat-addon-notice-close');
	2085	+ closeButton.addEventListener('click', function() {
	2086	+ noticeContainer.classList.remove('active');
	2087	+ setTimeout(() => {
	2088	+ noticeContainer.remove();
	2089	+ }, 300);
	2090	+ });
	2091	+
	2092	+ // Click outside to close
	2093	+ noticeContainer.addEventListener('click', function(e) {
	2094	+ if (e.target === noticeContainer) {
	2095	+ closeButton.click();
	2096	+ }
	2097	+ });
	2098	+
	2099	+ // Show with animation
	2100	+ setTimeout(() => {
	2101	+ noticeContainer.classList.add('active');
	2102	+ }, 10);
	2103	+ } else {
	2104	+ // If it already exists, update the content
	2105	+ const addonNameElement = noticeContainer.querySelector('p strong');
	2106	+ if (addonNameElement) {
	2107	+ addonNameElement.textContent = addonName;
	2108	+ }
	2109	+
	2110	+ // Make it visible again
	2111	+ noticeContainer.classList.add('active');
	2112	+ }
	2113	+ }
	2114	+
	2115	+ // Form submission handling
	2116	+ if (actionForm) {
	2117	+ actionForm.addEventListener('submit', function() {
	2118	+ //console.log('Form submitted');
	2119	+ document.getElementById('mxchat-action-loading').style.display = 'flex';
	2120	+ this.querySelector('button[type="submit"]').disabled = true;
	2121	+ });
	2122	+ }
	2123	+ }
	2124	+
	2125	+ // Setup add action buttons (only if we're on the correct page)
	2126	+ if (modal) {
	2127	+ // Update the modal open function to support the step-based flow
	2128	+ window.mxchatOpenActionModal = function(isEdit = false, actionId = '', label = '', phrases = '', threshold = 85, callbackFunction = '', enabledBots = null) {
	2129	+ //console.log('Modal opening, edit mode:', isEdit);
	2130	+
	2131	+ // Get form fields
	2132	+ const actionIdField = document.getElementById('edit_action_id');
	2133	+ const labelField = document.getElementById('intent_label');
	2134	+ const phrasesField = document.getElementById('action_phrases');
	2135	+ const formActionType = document.getElementById('form_action_type');
	2136	+ const callbackInput = document.getElementById('callback_function');
	2137	+ const saveButton = document.getElementById('mxchat-save-action-btn');
	2138	+ const nonceContainer = document.getElementById('action-nonce-container');
	2139	+ const thresholdSlider = document.getElementById('similarity_threshold');
	2140	+ const thresholdDisplay = document.querySelector('.mxchat-threshold-value-display');
	2141	+ const actionStep1 = document.getElementById('mxchat-action-step-1');
	2142	+ const actionStep2 = document.getElementById('mxchat-action-step-2');
	2143	+ const searchInput = document.getElementById('action-type-search');
	2144	+
	2145	+ // Set up modal for edit or create
	2146	+ if (isEdit) {
	2147	+ saveButton.textContent = 'Update Action';
	2148	+ formActionType.value = 'mxchat_edit_intent';
	2149	+ actionIdField.value = actionId;
	2150	+ labelField.value = label;
	2151	+ phrasesField.value = phrases;
	2152	+ callbackInput.value = callbackFunction;
	2153	+ thresholdSlider.value = threshold; // Set the current threshold value
	2154	+ thresholdDisplay.textContent = threshold + '%'; // Update display
	2155	+
	2156	+ // NEW: Handle bot selection checkboxes for editing
	2157	+ // First uncheck all bot checkboxes
	2158	+ document.querySelectorAll('input[name="enabled_bots[]"]').forEach(checkbox => {
	2159	+ checkbox.checked = false;
	2160	+ });
	2161	+
	2162	+ // Then check the ones that should be enabled
	2163	+ if (enabledBots) {
	2164	+ let botsArray;
	2165	+ if (typeof enabledBots === 'string') {
	2166	+ try {
	2167	+ botsArray = JSON.parse(enabledBots);
	2168	+ } catch (e) {
	2169	+ console.warn('Failed to parse enabledBots:', enabledBots);
	2170	+ botsArray = ['default']; // fallback
	2171	+ }
	2172	+ } else if (Array.isArray(enabledBots)) {
	2173	+ botsArray = enabledBots;
	2174	+ } else {
	2175	+ botsArray = ['default']; // fallback
	2176	+ }
	2177	+
	2178	+ botsArray.forEach(botId => {
	2179	+ const checkbox = document.querySelector(`input[name="enabled_bots[]"][value="${botId}"]`);
	2180	+ if (checkbox) {
	2181	+ checkbox.checked = true;
	2182	+ }
	2183	+ });
	2184	+ } else {
	2185	+ // Fallback to default if no bot data
	2186	+ const defaultCheckbox = document.querySelector('input[name="enabled_bots[]"][value="default"]');
	2187	+ if (defaultCheckbox) {
	2188	+ defaultCheckbox.checked = true;
	2189	+ }
	2190	+ }
	2191	+
	2192	+ // Update the nonce field for editing
	2193	+ nonceContainer.innerHTML = ''; // Clear existing nonce
	2194	+ if (typeof mxchatAdmin !== 'undefined' && mxchatAdmin.edit_intent_nonce) {
	2195	+ nonceContainer.innerHTML = `<input type="hidden" name="_wpnonce" value="${mxchatAdmin.edit_intent_nonce}">`;
	2196	+ }
	2197	+
	2198	+ // For editing, go directly to step 2 and update the selected action display
	2199	+ actionStep1.classList.remove('active');
	2200	+ actionStep2.classList.add('active');
	2201	+
	2202	+ // Find the matching action card to get its details
	2203	+ const actionCards = document.querySelectorAll('.mxchat-action-type-card');
	2204	+ let foundCard = null;
	2205	+
	2206	+ actionCards.forEach(card => {
	2207	+ if (card.dataset.value === callbackFunction) {
	2208	+ foundCard = card;
	2209	+ }
	2210	+ });
	2211	+
	2212	+ if (foundCard) {
	2213	+ //console.log('Found matching action card for:', callbackFunction);
	2214	+ const actionLabel = foundCard.dataset.label || foundCard.querySelector('h4')?.textContent || '';
	2215	+ const actionIconElement = foundCard.querySelector('.dashicons');
	2216	+ const actionIcon = actionIconElement
	2217	+ ? actionIconElement.getAttribute('class').replace('dashicons dashicons-', '')
	2218	+ : 'admin-generic';
	2219	+ const actionDescription = foundCard.querySelector('p')?.textContent || '';
	2220	+
	2221	+ document.getElementById('selected-action-title').textContent = actionLabel;
	2222	+ document.getElementById('selected-action-description').textContent = actionDescription;
	2223	+ document.getElementById('selected-action-icon').innerHTML =
	2224	+ `<span class="dashicons dashicons-${actionIcon}"></span>`;
	2225	+ } else {
	2226	+ //console.log('No matching action card found for:', callbackFunction);
	2227	+ // Fallback if we can't find the card
	2228	+ document.getElementById('selected-action-title').textContent = label;
	2229	+ document.getElementById('selected-action-description').textContent = 'Configure this action for your chatbot';
	2230	+ document.getElementById('selected-action-icon').innerHTML =
	2231	+ `<span class="dashicons dashicons-admin-generic"></span>`;
	2232	+ }
	2233	+ } else {
	2234	+ //console.log('Setting up create mode');
	2235	+ saveButton.textContent = 'Save Action';
	2236	+ formActionType.value = 'mxchat_add_intent';
	2237	+ actionIdField.value = '';
	2238	+ labelField.value = '';
	2239	+ phrasesField.value = '';
	2240	+ callbackInput.value = '';
	2241	+ thresholdSlider.value = 85; // Default value for new actions
	2242	+ thresholdDisplay.textContent = '85%'; // Default display
	2243	+
	2244	+ // For new actions, ensure default is checked and others are unchecked
	2245	+ document.querySelectorAll('input[name="enabled_bots[]"]').forEach(checkbox => {
	2246	+ checkbox.checked = (checkbox.value === 'default');
	2247	+ });
	2248	+
	2249	+ // Update the nonce field for adding
	2250	+ nonceContainer.innerHTML = ''; // Clear existing nonce
	2251	+ if (typeof mxchatAdmin !== 'undefined' && mxchatAdmin.add_intent_nonce) {
	2252	+ nonceContainer.innerHTML = `<input type="hidden" name="_wpnonce" value="${mxchatAdmin.add_intent_nonce}">`;
	2253	+ }
	2254	+
	2255	+ // For creating new, start at step 1
	2256	+ actionStep1.classList.add('active');
	2257	+ actionStep2.classList.remove('active');
	2258	+ }
	2259	+
	2260	+ // Show modal with animation
	2261	+ modal.style.display = 'flex';
	2262	+ requestAnimationFrame(() => {
	2263	+ modal.classList.add('active');
	2264	+ });
	2265	+
	2266	+ // Set up close handlers
	2267	+ const closeModal = () => {
	2268	+ //console.log('Closing modal');
	2269	+ modal.classList.remove('active');
	2270	+ setTimeout(() => {
	2271	+ modal.style.display = 'none';
	2272	+ }, 300); // Match the CSS transition time
	2273	+ };
	2274	+
	2275	+ // Close button handler
	2276	+ const closeBtn = modal.querySelector('.mxchat-modal-close');
	2277	+ if (closeBtn) {
	2278	+ closeBtn.onclick = closeModal;
	2279	+ }
	2280	+
	2281	+ // Cancel button handler
	2282	+ const cancelBtns = modal.querySelectorAll('.mxchat-modal-cancel');
	2283	+ if (cancelBtns) {
	2284	+ cancelBtns.forEach(btn => {
	2285	+ btn.onclick = closeModal;
	2286	+ });
	2287	+ }
	2288	+
	2289	+ // Click outside modal to close
	2290	+ modal.onclick = (e) => {
	2291	+ if (e.target === modal) {
	2292	+ closeModal();
	2293	+ }
	2294	+ };
	2295	+
	2296	+ // Escape key to close modal
	2297	+ document.addEventListener('keydown', function(e) {
	2298	+ if (e.key === 'Escape' && modal.classList.contains('active')) {
	2299	+ closeModal();
	2300	+ }
	2301	+ }, { once: true });
	2302	+
	2303	+ // Focus appropriate field based on current step
	2304	+ if (isEdit || actionStep2.classList.contains('active')) {
	2305	+ if (labelField) labelField.focus();
	2306	+ } else {
	2307	+ if (searchInput) searchInput.focus();
	2308	+ }
	2309	+
	2310	+ return closeModal; // Return close function for external use
	2311	+ };
	2312	+ // Setup add action buttons
	2313	+ const addActionBtn = document.getElementById('mxchat-add-action-btn');
	2314	+ if (addActionBtn) {
	2315	+ //console.log('Add action button found');
	2316	+ addActionBtn.onclick = () => window.mxchatOpenActionModal();
	2317	+ }
	2318	+
	2319	+ const createFirstAction = document.getElementById('mxchat-create-first-action');
	2320	+ if (createFirstAction) {
	2321	+ //console.log('Create first action button found');
	2322	+ createFirstAction.onclick = () => window.mxchatOpenActionModal();
	2323	+ }
	2324	+
	2325	+ // Setup edit buttons
	2326	+ const editButtons = document.querySelectorAll('.mxchat-action-card .mxchat-edit-button');
	2327	+ //console.log('Edit buttons found:', editButtons.length);
	2328	+ editButtons.forEach(button => {
	2329	+ button.onclick = () => {
	2330	+ const actionId = button.dataset.actionId;
	2331	+ const phrases = button.dataset.phrases;
	2332	+ const label = button.dataset.label;
	2333	+ const threshold = button.dataset.threshold || 85;
	2334	+ const callbackFunction = button.dataset.callbackFunction;
	2335	+ const enabledBots = button.dataset.enabledBots; // ADD THIS LINE
	2336	+
	2337	+ window.mxchatOpenActionModal(true, actionId, label, phrases, threshold, callbackFunction, enabledBots);
	2338	+ };
	2339	+ });
	2340	+ }
	2341	+});
	2342	+
	2343	+jQuery(document).ready(function($) {
	2344	+ // Toggle custom post types container
	2345	+ $('#mxchat-custom-post-types-toggle').on('click', function(e) {
	2346	+ e.preventDefault();
	2347	+
	2348	+ $('#mxchat-custom-post-types-container').slideToggle(300);
	2349	+
	2350	+ // Rotate the toggle icon
	2351	+ const $icon = $(this).find('.mxchat-accordion-icon');
	2352	+ if ($('#mxchat-custom-post-types-container').is(':visible')) {
	2353	+ $icon.css('transform', 'rotate(180deg)');
	2354	+ $(this).closest('.mxchat-settings-accordion').addClass('active');
	2355	+ } else {
	2356	+ $icon.css('transform', 'rotate(0deg)');
	2357	+ $(this).closest('.mxchat-settings-accordion').removeClass('active');
	2358	+ }
	2359	+ });
	2360	+
	2361	+ // If there are any selections made, auto-expand the container
	2362	+ function autoExpandIfNeeded() {
	2363	+ // Check if any checkbox in the container is checked
	2364	+ const hasCheckedItems = $('#mxchat-custom-post-types-container input[type="checkbox"]:checked').length > 0;
	2365	+
	2366	+ if (hasCheckedItems) {
	2367	+ $('#mxchat-custom-post-types-container').show();
	2368	+ $('#mxchat-custom-post-types-toggle .mxchat-accordion-icon').css('transform', 'rotate(180deg)');
	2369	+ $('.mxchat-settings-accordion').addClass('active');
	2370	+ }
	2371	+ }
	2372	+
	2373	+ // Run on page load
	2374	+ autoExpandIfNeeded();
	2375	+});
	2376	+
	2377	+document.addEventListener('DOMContentLoaded', function() {
	2378	+ var viewSampleBtn = document.getElementById('mxchatViewSampleBtn');
	2379	+ var modal = document.getElementById('mxchatSampleModal');
	2380	+ var modalClose = document.getElementById('mxchatModalClose');
	2381	+ var closeBtn = document.getElementById('mxchatCloseBtn');
	2382	+ var copyBtn = document.getElementById('mxchatCopyBtn');
	2383	+ var instructionsContent = document.querySelector('.mxchat-instructions-content');
	2384	+ var modalContent = document.querySelector('.mxchat-instructions-modal-content');
	2385	+
	2386	+ if (!viewSampleBtn || !modal) {
	2387	+ return;
	2388	+ }
	2389	+
	2390	+ // Open modal
	2391	+ viewSampleBtn.addEventListener('click', function(e) {
	2392	+ e.preventDefault();
	2393	+ e.stopPropagation();
	2394	+ modal.classList.add('mxchat-instructions-show');
	2395	+ });
	2396	+
	2397	+ // Close modal function
	2398	+ function closeModal(e) {
	2399	+ if (e) {
	2400	+ e.preventDefault();
	2401	+ e.stopPropagation();
	2402	+ }
	2403	+ modal.classList.remove('mxchat-instructions-show');
	2404	+ }
	2405	+
	2406	+ // Close modal events
	2407	+ if (modalClose) {
	2408	+ modalClose.addEventListener('click', function(e) {
	2409	+ closeModal(e);
	2410	+ });
	2411	+ }
	2412	+
	2413	+ if (closeBtn) {
	2414	+ closeBtn.addEventListener('click', function(e) {
	2415	+ closeModal(e);
	2416	+ });
	2417	+ }
	2418	+
	2419	+ // Close on backdrop click ONLY (not on hover)
	2420	+ modal.addEventListener('click', function(e) {
	2421	+ // Only close if clicking directly on the overlay, not on child elements
	2422	+ if (e.target === modal) {
	2423	+ closeModal(e);
	2424	+ }
	2425	+ });
	2426	+
	2427	+ // Prevent modal content clicks from closing the modal
	2428	+ if (modalContent) {
	2429	+ modalContent.addEventListener('click', function(e) {
	2430	+ e.stopPropagation();
	2431	+ });
	2432	+ }
	2433	+
	2434	+ // Close on escape key
	2435	+ document.addEventListener('keydown', function(e) {
	2436	+ if (e.key === 'Escape' && modal.classList.contains('mxchat-instructions-show')) {
	2437	+ closeModal();
	2438	+ }
	2439	+ });
	2440	+
	2441	+ // Copy functionality
	2442	+ if (copyBtn && instructionsContent) {
	2443	+ copyBtn.addEventListener('click', function(e) {
	2444	+ e.preventDefault();
	2445	+ e.stopPropagation();
	2446	+
	2447	+ var text = instructionsContent.textContent;
	2448	+
	2449	+ if (navigator.clipboard) {
	2450	+ navigator.clipboard.writeText(text).then(function() {
	2451	+ showCopySuccess();
	2452	+ }).catch(function() {
	2453	+ fallbackCopy(text);
	2454	+ });
	2455	+ } else {
	2456	+ fallbackCopy(text);
	2457	+ }
	2458	+ });
	2459	+ }
	2460	+
	2461	+ function fallbackCopy(text) {
	2462	+ var textArea = document.createElement('textarea');
	2463	+ textArea.value = text;
	2464	+ textArea.style.position = 'fixed';
	2465	+ textArea.style.left = '-999999px';
	2466	+ textArea.style.top = '-999999px';
	2467	+ document.body.appendChild(textArea);
	2468	+ textArea.select();
	2469	+ try {
	2470	+ document.execCommand('copy');
	2471	+ showCopySuccess();
	2472	+ } catch (err) {
	2473	+ console.error('Copy failed');
	2474	+ }
	2475	+ document.body.removeChild(textArea);
	2476	+ }
	2477	+
	2478	+ function showCopySuccess() {
	2479	+ var originalText = copyBtn.innerHTML;
	2480	+ copyBtn.innerHTML = '<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"><polyline points="20,6 9,17 4,12"/></svg>Copied!';
	2481	+
	2482	+ setTimeout(function() {
	2483	+ copyBtn.innerHTML = originalText;
	2484	+ }, 2000);
	2485	+ }
	2486	+});
	2487	+
	2488	+jQuery(document).ready(function($) {
	2489	+ var emailDependentFields = [
	2490	+ '#email_blocker_header_content',
	2491	+ '#email_blocker_button_text',
	2492	+ '#enable_name_field',
	2493	+ '#name_field_placeholder'
	2494	+ ];
	2495	+
	2496	+ // Add visual indicators
	2497	+ emailDependentFields.forEach(function(fieldId) {
	2498	+ var $row = $(fieldId).closest('tr');
	2499	+ $row.addClass('email-dependent-field');
	2500	+
	2501	+ // Add an icon to show it's dependent
	2502	+ var $label = $row.find('th label, th');
	2503	+ $label.prepend('<span class="email-dependent-icon" style="color: #0073aa; margin-right: 5px;">↳</span>');
	2504	+ });
	2505	+
	2506	+ // Hide initially with opacity for smoother transition
	2507	+ emailDependentFields.forEach(function(fieldId) {
	2508	+ $(fieldId).closest('tr').hide().css('opacity', '0');
	2509	+ });
	2510	+
	2511	+ function toggleEmailFields() {
	2512	+ var emailEnabled = $('#enable_email_block').is(':checked');
	2513	+
	2514	+ emailDependentFields.forEach(function(fieldId) {
	2515	+ var $row = $(fieldId).closest('tr');
	2516	+ if (emailEnabled) {
	2517	+ $row.slideDown(400).animate({opacity: 1}, 200);
	2518	+ } else {
	2519	+ $row.animate({opacity: 0}, 200).slideUp(400);
	2520	+ }
	2521	+ });
	2522	+ }
	2523	+
	2524	+ toggleEmailFields();
	2525	+ $('#enable_email_block').on('change', toggleEmailFields);
	2526	+});
	2527	+
	2528	+
	2529	+
	2530	+//Handle role restriction changes
	2531	+jQuery(document).ready(function($) {
	2532	+ //Handle role restriction changes for both data sources
	2533	+ $(document).on('change', '.mxchat-role-select', function() {
	2534	+ const $select = $(this);
	2535	+ const entryId = $select.data('entry-id');
	2536	+ const dataSource = $select.data('data-source');
	2537	+ const roleRestriction = $select.val();
	2538	+ const nonce = $select.data('nonce');
	2539	+
	2540	+ // Visual feedback
	2541	+ $select.prop('disabled', true).addClass('updating');
	2542	+
	2543	+ $.ajax({
	2544	+ url: ajaxurl,
	2545	+ type: 'POST',
	2546	+ data: {
	2547	+ action: 'mxchat_update_role_restriction',
	2548	+ nonce: nonce,
	2549	+ entry_id: entryId,
	2550	+ data_source: dataSource, // NEW: Include data source
	2551	+ role_restriction: roleRestriction
	2552	+ },
	2553	+ success: function(response) {
	2554	+ if (response.success) {
	2555	+ // Show success feedback
	2556	+ $select.removeClass('updating').addClass('updated');
	2557	+ setTimeout(() => {
	2558	+ $select.removeClass('updated');
	2559	+ }, 2000);
	2560	+ } else {
	2561	+ alert('Failed to update role restriction: ' + response.data);
	2562	+ // Revert selection
	2563	+ $select.val($select.data('original-value'));
	2564	+ }
	2565	+ },
	2566	+ error: function() {
	2567	+ alert('Error updating role restriction');
	2568	+ // Revert selection
	2569	+ $select.val($select.data('original-value'));
	2570	+ },
	2571	+ complete: function() {
	2572	+ $select.prop('disabled', false);
	2573	+ }
	2574	+ });
	2575	+
	2576	+ // Store original value for potential revert
	2577	+ $select.data('original-value', roleRestriction);
	2578	+ });
	2579	+
	2580	+ // Store initial values
	2581	+ $('.mxchat-role-select').each(function() {
	2582	+ $(this).data('original-value', $(this).val());
	2583	+ });
	2584	+});
	2585	+
	2586	+// Bot Selector Handler
	2587	+jQuery(document).ready(function($) {
	2588	+ var saveTimer;
	2589	+
	2590	+ // Function to update bot_id in forms
	2591	+ function updateBotIdInForm(formSelector) {
	2592	+ var botId = $('#mxchat-bot-selector').val();
	2593	+ var form = $(formSelector);
	2594	+
	2595	+ if (form.length > 0) {
	2596	+ // Remove existing bot_id hidden input
	2597	+ form.find('input[name="bot_id"]').remove();
	2598	+
	2599	+ // Add new bot_id hidden input if not default
	2600	+ if (botId && botId !== 'default') {
	2601	+ form.append('<input type="hidden" name="bot_id" value="' + botId + '">');
	2602	+ }
	2603	+ }
	2604	+ }
	2605	+
	2606	+ $('#mxchat-bot-selector').on('change', function() {
	2607	+ var botId = $(this).val();
	2608	+
	2609	+ // Clear any existing timer
	2610	+ clearTimeout(saveTimer);
	2611	+
	2612	+ // Update all forms with new bot_id when bot selection changes
	2613	+ updateBotIdInForm('#mxchat-url-form');
	2614	+ updateBotIdInForm('#mxchat-content-form');
	2615	+
	2616	+ // Save the selection via AJAX
	2617	+ $.ajax({
	2618	+ url: ajaxurl,
	2619	+ type: 'POST',
	2620	+ data: {
	2621	+ action: 'mxchat_save_selected_bot',
	2622	+ bot_id: botId,
	2623	+ nonce: mxchatAdmin.setting_nonce
	2624	+ },
	2625	+ success: function(response) {
	2626	+ if (response.success) {
	2627	+ // Show saved indicator
	2628	+ $('#mxchat-bot-save-status').fadeIn().delay(2000).fadeOut();
	2629	+
	2630	+ // Reload the page after a short delay to refresh content
	2631	+ saveTimer = setTimeout(function() {
	2632	+ var currentUrl = new URL(window.location.href);
	2633	+ currentUrl.searchParams.set('bot_id', botId);
	2634	+ currentUrl.searchParams.set('page', 'mxchat-prompts');
	2635	+ window.location.href = currentUrl.toString();
	2636	+ }, 500);
	2637	+ }
	2638	+ },
	2639	+ error: function() {
	2640	+ console.error('Failed to save bot selection');
	2641	+ }
	2642	+ });
	2643	+ });
	2644	+
	2645	+ // Initialize forms with current bot_id when the page loads
	2646	+ setTimeout(function() {
	2647	+ updateBotIdInForm('#mxchat-url-form');
	2648	+ updateBotIdInForm('#mxchat-content-form');
	2649	+ }, 100);
	2650	+});
	2651	+
	2652	+// API Key Status Indicator for Chat Models
	2653	+jQuery(document).ready(function($) {
	2654	+ function updateChatModelAPIStatus(apiKeyStatuses) {
	2655	+ var selectedModel = $('#model').val();
	2656	+
	2657	+ // Hide all status messages
	2658	+ $('.mxchat-api-status').hide();
	2659	+
	2660	+ // Return early if no model is selected
	2661	+ if (!selectedModel) {
	2662	+ return;
	2663	+ }
	2664	+
	2665	+ // Map models to providers
	2666	+ var provider = null;
	2667	+
	2668	+ if (selectedModel.startsWith('gpt-')) {
	2669	+ provider = 'openai';
	2670	+ } else if (selectedModel.startsWith('claude-')) {
	2671	+ provider = 'claude';
	2672	+ } else if (selectedModel.startsWith('grok-')) {
	2673	+ provider = 'xai';
	2674	+ } else if (selectedModel.startsWith('deepseek-')) {
	2675	+ provider = 'deepseek';
	2676	+ } else if (selectedModel.startsWith('gemini-')) {
	2677	+ provider = 'gemini';
	2678	+ } else if (selectedModel === 'openrouter') {
	2679	+ provider = 'openrouter';
	2680	+ }
	2681	+
	2682	+ // If we have fresh API key data, update the messages
	2683	+ if (apiKeyStatuses && provider && apiKeyStatuses[provider] !== undefined) {
	2684	+ var $statusElement = $('.mxchat-api-status[data-provider="' + provider + '"]');
	2685	+ var hasKey = apiKeyStatuses[provider];
	2686	+
	2687	+ if (hasKey) {
	2688	+ $statusElement.html('<span style="color: #00a32a;">✓ API key for ' + getProviderName(provider) + ' detected</span>');
	2689	+ } else {
	2690	+ $statusElement.html('<span style="color: #d63638;">⚠ No API key for ' + getProviderName(provider) + ' detected. Please enter API key in API Keys tab.</span>');
	2691	+ }
	2692	+ }
	2693	+
	2694	+ // Show the appropriate status message
	2695	+ if (provider) {
	2696	+ $('.mxchat-api-status[data-provider="' + provider + '"]').show();
	2697	+ }
	2698	+ }
	2699	+
	2700	+ function updateEmbeddingModelAPIStatus(apiKeyStatuses) {
	2701	+ var selectedModel = $('#embedding_model').val();
	2702	+
	2703	+ // Hide all status messages
	2704	+ $('.mxchat-embedding-api-status').hide();
	2705	+
	2706	+ // Return early if no model is selected
	2707	+ if (!selectedModel) {
	2708	+ return;
	2709	+ }
	2710	+
	2711	+ // Map models to providers
	2712	+ var provider = null;
	2713	+
	2714	+ if (selectedModel.startsWith('text-embedding-')) {
	2715	+ provider = 'openai';
	2716	+ } else if (selectedModel.startsWith('voyage-')) {
	2717	+ provider = 'voyage';
	2718	+ } else if (selectedModel.startsWith('gemini-embedding-')) {
	2719	+ provider = 'gemini';
	2720	+ }
	2721	+
	2722	+ // If we have fresh API key data, update the messages
	2723	+ if (apiKeyStatuses && provider && apiKeyStatuses[provider] !== undefined) {
	2724	+ var $statusElement = $('.mxchat-embedding-api-status[data-provider="' + provider + '"]');
	2725	+ var hasKey = apiKeyStatuses[provider];
	2726	+
	2727	+ if (hasKey) {
	2728	+ $statusElement.html('<span style="color: #00a32a;">✓ API key for ' + getProviderName(provider) + ' detected</span>');
	2729	+ } else {
	2730	+ $statusElement.html('<span style="color: #d63638;">⚠ No API key for ' + getProviderName(provider) + ' detected. Please enter API key in API Keys tab.</span>');
	2731	+ }
	2732	+ }
	2733	+
	2734	+ // Show the appropriate status message
	2735	+ if (provider) {
	2736	+ $('.mxchat-embedding-api-status[data-provider="' + provider + '"]').show();
	2737	+ }
	2738	+ }
	2739	+
	2740	+ function getProviderName(provider) {
	2741	+ var names = {
	2742	+ 'openai': 'OpenAI',
	2743	+ 'claude': 'Anthropic (Claude)',
	2744	+ 'xai': 'X.AI (Grok)',
	2745	+ 'deepseek': 'DeepSeek',
	2746	+ 'gemini': 'Google Gemini',
	2747	+ 'openrouter': 'OpenRouter',
	2748	+ 'voyage': 'Voyage AI'
	2749	+ };
	2750	+ return names[provider] || provider;
	2751	+ }
	2752	+
	2753	+ function refreshAPIKeyStatus() {
	2754	+ $.ajax({
	2755	+ url: ajaxurl,
	2756	+ type: 'POST',
	2757	+ data: {
	2758	+ action: 'mxchat_check_api_keys',
	2759	+ nonce: mxchatAdmin.setting_nonce
	2760	+ },
	2761	+ success: function(response) {
	2762	+ if (response.success && response.data) {
	2763	+ updateChatModelAPIStatus(response.data);
	2764	+ updateEmbeddingModelAPIStatus(response.data);
	2765	+ }
	2766	+ }
	2767	+ });
	2768	+ }
	2769	+
	2770	+ // Expose refresh function globally so auto-save can call it
	2771	+ window.mxchatRefreshAPIKeyStatus = refreshAPIKeyStatus;
	2772	+
	2773	+ // Run on page load
	2774	+ updateChatModelAPIStatus();
	2775	+ updateEmbeddingModelAPIStatus();
	2776	+
	2777	+ // Check if we just saved settings (WordPress redirects with ?settings-updated=true)
	2778	+ var urlParams = new URLSearchParams(window.location.search);
	2779	+ if (urlParams.get('settings-updated') === 'true') {
	2780	+ // Page was just reloaded after save, fetch fresh API key status
	2781	+ refreshAPIKeyStatus();
	2782	+ }
	2783	+
	2784	+ // Run when model changes
	2785	+ $('#model').on('change', function() { updateChatModelAPIStatus(); });
	2786	+ $('#embedding_model').on('change', function() { updateEmbeddingModelAPIStatus(); });
	2787	+});
	2788	+
	2789	+// Transcripts Metrics Dashboard
	2790	+jQuery(document).ready(function($) {
	2791	+ // Tab switching functionality
	2792	+ $('.mxchat-metrics-tab').on('click', function() {
	2793	+ const tabName = $(this).data('tab');
	2794	+
	2795	+ // Update tab buttons
	2796	+ $('.mxchat-metrics-tab').removeClass('active');
	2797	+ $(this).addClass('active');
	2798	+
	2799	+ // Update panels
	2800	+ $('.mxchat-metrics-panel').removeClass('active');
	2801	+ $(`.mxchat-metrics-panel[data-panel="${tabName}"]`).addClass('active');
	2802	+
	2803	+ // Initialize chart if activity tab is shown
	2804	+ if (tabName === 'activity' && typeof mxchatChartData !== 'undefined') {
	2805	+ // Small delay to ensure the canvas is visible
	2806	+ setTimeout(function() {
	2807	+ initActivityChart();
	2808	+ }, 50);
	2809	+ }
	2810	+ });
	2811	+
	2812	+ // Initialize chart function
	2813	+ function initActivityChart() {
	2814	+ const canvas = document.getElementById('mxchat-activity-chart');
	2815	+ if (!canvas) return;
	2816	+
	2817	+ // Check if chart already exists and destroy it
	2818	+ if (canvas.chartInstance) {
	2819	+ canvas.chartInstance.destroy();
	2820	+ }
	2821	+
	2822	+ const ctx = canvas.getContext('2d');
	2823	+
	2824	+ // Create gradient for chats line
	2825	+ const chatsGradient = ctx.createLinearGradient(0, 0, 0, 300);
	2826	+ chatsGradient.addColorStop(0, 'rgba(102, 126, 234, 0.3)');
	2827	+ chatsGradient.addColorStop(1, 'rgba(102, 126, 234, 0.05)');
	2828	+
	2829	+ // Create gradient for messages line
	2830	+ const messagesGradient = ctx.createLinearGradient(0, 0, 0, 300);
	2831	+ messagesGradient.addColorStop(0, 'rgba(118, 75, 162, 0.3)');
	2832	+ messagesGradient.addColorStop(1, 'rgba(118, 75, 162, 0.05)');
	2833	+
	2834	+ // Simple chart without external library
	2835	+ canvas.chartInstance = new SimpleChart(canvas, {
	2836	+ labels: mxchatChartData.labels,
	2837	+ datasets: [
	2838	+ {
	2839	+ label: 'Chats',
	2840	+ data: mxchatChartData.chats,
	2841	+ borderColor: '#667eea',
	2842	+ backgroundColor: chatsGradient,
	2843	+ fill: true
	2844	+ },
	2845	+ {
	2846	+ label: 'Messages',
	2847	+ data: mxchatChartData.messages,
	2848	+ borderColor: '#764ba2',
	2849	+ backgroundColor: messagesGradient,
	2850	+ fill: true
	2851	+ }
	2852	+ ]
	2853	+ });
	2854	+ }
	2855	+
	2856	+ // Simple chart implementation (no external dependencies)
	2857	+ class SimpleChart {
	2858	+ constructor(canvas, config) {
	2859	+ this.canvas = canvas;
	2860	+ this.ctx = canvas.getContext('2d');
	2861	+ this.config = config;
	2862	+ this.padding = { top: 20, right: 20, bottom: 40, left: 50 };
	2863	+ this.render();
	2864	+ }
	2865	+
	2866	+ destroy() {
	2867	+ this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
	2868	+ }
	2869	+
	2870	+ render() {
	2871	+ const dpr = window.devicePixelRatio || 1;
	2872	+ const rect = this.canvas.getBoundingClientRect();
	2873	+
	2874	+ this.canvas.width = rect.width * dpr;
	2875	+ this.canvas.height = rect.height * dpr;
	2876	+ this.ctx.scale(dpr, dpr);
	2877	+
	2878	+ this.canvas.style.width = rect.width + 'px';
	2879	+ this.canvas.style.height = rect.height + 'px';
	2880	+
	2881	+ const width = rect.width - this.padding.left - this.padding.right;
	2882	+ const height = rect.height - this.padding.top - this.padding.bottom;
	2883	+
	2884	+ // Find max value
	2885	+ let maxValue = 0;
	2886	+ this.config.datasets.forEach(dataset => {
	2887	+ const max = Math.max(...dataset.data);
	2888	+ if (max > maxValue) maxValue = max;
	2889	+ });
	2890	+
	2891	+ // Add some padding to max value
	2892	+ maxValue = Math.ceil(maxValue * 1.1);
	2893	+ if (maxValue === 0) maxValue = 10;
	2894	+
	2895	+ // Draw grid lines
	2896	+ this.ctx.strokeStyle = '#e5e7eb';
	2897	+ this.ctx.lineWidth = 1;
	2898	+ const gridLines = 5;
	2899	+
	2900	+ for (let i = 0; i <= gridLines; i++) {
	2901	+ const y = this.padding.top + (height / gridLines) * i;
	2902	+ this.ctx.beginPath();
	2903	+ this.ctx.moveTo(this.padding.left, y);
	2904	+ this.ctx.lineTo(this.padding.left + width, y);
	2905	+ this.ctx.stroke();
	2906	+
	2907	+ // Draw y-axis labels
	2908	+ const value = maxValue - (maxValue / gridLines) * i;
	2909	+ this.ctx.fillStyle = '#6b7280';
	2910	+ this.ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
	2911	+ this.ctx.textAlign = 'right';
	2912	+ this.ctx.fillText(Math.round(value), this.padding.left - 10, y + 4);
	2913	+ }
	2914	+
	2915	+ // Draw datasets
	2916	+ this.config.datasets.forEach(dataset => {
	2917	+ const points = [];
	2918	+ const xStep = width / (this.config.labels.length - 1 || 1);
	2919	+
	2920	+ dataset.data.forEach((value, index) => {
	2921	+ const x = this.padding.left + (xStep * index);
	2922	+ const y = this.padding.top + height - (value / maxValue * height);
	2923	+ points.push({ x, y, value });
	2924	+ });
	2925	+
	2926	+ // Draw filled area
	2927	+ if (dataset.fill && dataset.backgroundColor) {
	2928	+ this.ctx.fillStyle = dataset.backgroundColor;
	2929	+ this.ctx.beginPath();
	2930	+ this.ctx.moveTo(points[0].x, this.padding.top + height);
	2931	+ points.forEach(point => {
	2932	+ this.ctx.lineTo(point.x, point.y);
	2933	+ });
	2934	+ this.ctx.lineTo(points[points.length - 1].x, this.padding.top + height);
	2935	+ this.ctx.closePath();
	2936	+ this.ctx.fill();
	2937	+ }
	2938	+
	2939	+ // Draw line
	2940	+ this.ctx.strokeStyle = dataset.borderColor;
	2941	+ this.ctx.lineWidth = 3;
	2942	+ this.ctx.lineCap = 'round';
	2943	+ this.ctx.lineJoin = 'round';
	2944	+
	2945	+ this.ctx.beginPath();
	2946	+ points.forEach((point, index) => {
	2947	+ if (index === 0) {
	2948	+ this.ctx.moveTo(point.x, point.y);
	2949	+ } else {
	2950	+ this.ctx.lineTo(point.x, point.y);
	2951	+ }
	2952	+ });
	2953	+ this.ctx.stroke();
	2954	+
	2955	+ // Draw points
	2956	+ points.forEach(point => {
	2957	+ this.ctx.fillStyle = '#ffffff';
	2958	+ this.ctx.beginPath();
	2959	+ this.ctx.arc(point.x, point.y, 5, 0, Math.PI * 2);
	2960	+ this.ctx.fill();
	2961	+ this.ctx.strokeStyle = dataset.borderColor;
	2962	+ this.ctx.lineWidth = 2;
	2963	+ this.ctx.stroke();
	2964	+ });
	2965	+ });
	2966	+
	2967	+ // Draw x-axis labels
	2968	+ const xStep = width / (this.config.labels.length - 1 || 1);
	2969	+ this.ctx.fillStyle = '#6b7280';
	2970	+ this.ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
	2971	+ this.ctx.textAlign = 'center';
	2972	+
	2973	+ this.config.labels.forEach((label, index) => {
	2974	+ const x = this.padding.left + (xStep * index);
	2975	+ this.ctx.fillText(label, x, this.padding.top + height + 20);
	2976	+ });
	2977	+
	2978	+ // Draw legend
	2979	+ let legendX = this.padding.left;
	2980	+ const legendY = rect.height - 10;
	2981	+
	2982	+ this.config.datasets.forEach((dataset, index) => {
	2983	+ // Color box
	2984	+ this.ctx.fillStyle = dataset.borderColor;
	2985	+ this.ctx.fillRect(legendX, legendY - 8, 12, 12);
	2986	+
	2987	+ // Label
	2988	+ this.ctx.fillStyle = '#374151';
	2989	+ this.ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
	2990	+ this.ctx.textAlign = 'left';
	2991	+ this.ctx.fillText(dataset.label, legendX + 18, legendY);
	2992	+
	2993	+ legendX += this.ctx.measureText(dataset.label).width + 40;
	2994	+ });
	2995	+ }
	2996	+ }
	2997	+
	2998	+ // Initialize chart on page load if we're on the activity tab
	2999	+ if ($('.mxchat-metrics-tab.active').data('tab') === 'activity' && typeof mxchatChartData !== 'undefined') {
	3000	+ setTimeout(function() {
	3001	+ initActivityChart();
	3002	+ }, 100);
	3003	+ }
3791	3004	});