PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 3.0.3
MxChat – AI Chatbot & Content Generation for WordPress v3.0.3
3.2.21 3.2.20 3.2.19 3.2.18 3.2.17 3.2.16 3.2.15 3.2.14 3.2.12 3.2.13 3.2.11 3.2.10 3.2.9 3.2.8 3.2.7 3.2.6 3.2.5 3.2.4 3.2.3 3.2.2 3.2.1 2.0.3 2.0.4 2.0.5 2.0.6 All 152 releases
← All changes | js/mxchat_transcripts.js +82 -1070 3.2.213.0.3 View file →
@@ -178,11 +178,9 @@
178 178 $('.mxch-chat-checkbox').prop('checked', isChecked);
179 179
180 180 if (isChecked) {
181 181 $('.mxch-chat-item').each(function() {
182 - // Use .attr() — jQuery's .data() coerces "null"/"true"/numeric strings to JS types,
183 - // which causes fetch/delete of those sessions to silently fail.
184 - selectedSessions.add($(this).attr('data-session-id'));
182 + selectedSessions.add($(this).data('session-id'));
185 183 $(this).addClass('selected');
186 184 });
187 185 $('#mxch-chat-list').addClass('selection-mode');
188 186 } else {
@@ -216,104 +214,29 @@
216 214 $('#mxch-select-all').prop('checked', totalItems > 0 && checkedItems === totalItems);
217 215 $('#mxch-select-all').prop('indeterminate', checkedItems > 0 && checkedItems < totalItems);
218 216 }
219 217
220 - // Sort button — opens a small menu with 4 sort modes (plan-a5b006 adds rating sorts).
221 - $('#mxch-sort-btn').on('click', function(e) {
222 - e.stopPropagation();
223 - const $btn = $(this);
224 - let $menu = $('#mxch-sort-menu');
225 - if (!$menu.length) {
226 - $menu = $(
227 - '<div id="mxch-sort-menu" class="mxch-sort-menu" role="menu">' +
228 - ' <button type="button" class="mxch-sort-option" data-sort="desc" role="menuitem">Newest first</button>' +
229 - ' <button type="button" class="mxch-sort-option" data-sort="asc" role="menuitem">Oldest first</button>' +
230 - ' <button type="button" class="mxch-sort-option" data-sort="rating_positive" role="menuitem"><span class="mxch-sort-option-icon mxch-rating-thumb-up"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H7"/><path d="M3 10h4"/></svg></span>Positive ratings first</button>' +
231 - ' <button type="button" class="mxch-sort-option" data-sort="rating_negative" role="menuitem"><span class="mxch-sort-option-icon mxch-rating-thumb-down"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H17"/><path d="M21 14h-4"/></svg></span>Negative ratings first</button>' +
232 - '</div>'
233 - );
234 - $('body').append($menu);
235 - $menu.on('click', '.mxch-sort-option', function() {
236 - currentSortOrder = $(this).data('sort');
237 - $menu.find('.mxch-sort-option').removeClass('active');
238 - $(this).addClass('active');
239 - $menu.hide();
240 - loadChatList(1, $('#mxch-search-transcripts').val());
241 - });
242 - $(document).on('click.mxchSortMenu', function(ev) {
243 - if (!$(ev.target).closest('#mxch-sort-menu, #mxch-sort-btn').length) {
244 - $menu.hide();
245 - }
246 - });
247 - }
248 - $menu.find('.mxch-sort-option').removeClass('active');
249 - $menu.find('[data-sort="' + currentSortOrder + '"]').addClass('active');
250 - const offset = $btn.offset();
251 - const btnHeight = $btn.outerHeight();
252 - $menu.css({
253 - position: 'absolute',
254 - top: (offset.top + btnHeight + 4) + 'px',
255 - left: offset.left + 'px'
256 - }).toggle();
218 + // Sort button
219 + $('#mxch-sort-btn').on('click', function() {
220 + currentSortOrder = currentSortOrder === 'desc' ? 'asc' : 'desc';
221 + $(this).find('svg').css('transform', currentSortOrder === 'asc' ? 'rotate(180deg)' : 'rotate(0deg)');
222 + loadChatList(currentPage, $('#mxch-search-transcripts').val());
257 223 });
258 224
259 - // Render a rating badge for a session row. Uses inline SVG so the glyph
260 - // renders the same across OSes (emoji fonts vary). Tooltip surfaces the
261 - // optional feedback text.
262 - function renderRatingBadge(session) {
263 - const value = (session && typeof session.rating_value === 'number') ? session.rating_value : null;
264 - const feedback = (session && session.rating_feedback) ? session.rating_feedback : '';
265 - if (value === 1) {
266 - const title = feedback ? ('Visitor: ' + feedback) : 'Visitor rated this chat positively';
267 - return '<span class="mxch-chat-rating mxch-chat-rating-up" title="' + escapeHtml(title) + '" aria-label="' + escapeHtml(title) + '"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H7"/><path d="M3 10h4"/></svg></span>';
268 - }
269 - if (value === -1) {
270 - const title = feedback ? ('Visitor: ' + feedback) : 'Visitor rated this chat negatively';
271 - return '<span class="mxch-chat-rating mxch-chat-rating-down" title="' + escapeHtml(title) + '" aria-label="' + escapeHtml(title) + '"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H17"/><path d="M21 14h-4"/></svg></span>';
272 - }
273 - return '<span class="mxch-chat-rating mxch-chat-rating-empty" title="No rating yet" aria-label="No rating yet">—</span>';
274 - }
275 -
276 - // Delete selected button — opens the shared confirm modal with the "also delete lead" checkbox.
225 + // Delete selected button
277 226 $('#mxch-delete-selected').on('click', function() {
278 227 const count = selectedSessions.size;
279 228 if (count === 0) return;
280 - openTranscriptConfirm(Array.from(selectedSessions), count);
281 - });
282 229
283 - // Transcript delete confirm (shared by bulk + individual) ---------------------------
284 - let transcriptConfirmSessionIds = [];
230 + if (!confirm('Are you sure you want to delete ' + count + ' conversation(s)? This action cannot be undone.')) {
231 + return;
232 + }
285 233
286 - function openTranscriptConfirm(sessionIds, count) {
287 - transcriptConfirmSessionIds = sessionIds.slice();
288 - const n = count || sessionIds.length;
289 - $('#mxch-transcript-confirm-title').text(n === 1 ? 'Delete conversation?' : 'Delete ' + n + ' conversations?');
290 - $('#mxch-transcript-confirm-body').text(
291 - n === 1
292 - ? 'This removes the conversation and its messages.'
293 - : 'This removes ' + n + ' conversations and their messages.'
294 - );
295 - $('#mxch-transcript-also-delete-lead').prop('checked', false);
296 - $('#mxch-transcript-confirm').fadeIn(120);
297 - }
298 -
299 - function closeTranscriptConfirm() {
300 - $('#mxch-transcript-confirm').fadeOut(120);
301 - transcriptConfirmSessionIds = [];
302 - }
303 -
304 - $(document).on('click', '[data-mxch-transcript-close]', closeTranscriptConfirm);
305 -
306 - $('#mxch-transcript-confirm-go').on('click', function() {
307 - const ids = transcriptConfirmSessionIds.slice();
308 - if (!ids.length) { closeTranscriptConfirm(); return; }
309 - const alsoDeleteLead = $('#mxch-transcript-also-delete-lead').is(':checked');
310 - closeTranscriptConfirm();
311 - deleteMultipleSessions(ids, alsoDeleteLead);
234 + deleteMultipleSessions(Array.from(selectedSessions));
312 235 });
313 236
314 237 // Delete multiple sessions
315 - function deleteMultipleSessions(sessionIds, alsoDeleteLead) {
238 + function deleteMultipleSessions(sessionIds) {
316 239 $.ajax({
317 240 url: ajaxurl,
318 241 type: 'POST',
319 242 data: {
@@ -318,9 +241,8 @@
318 241 type: 'POST',
319 242 data: {
320 243 action: 'mxchat_delete_chat_history',
321 244 delete_session_ids: sessionIds,
322 - also_delete_lead: alsoDeleteLead ? '1' : '0',
323 245 security: $('#mxchat_delete_chat_nonce').val()
324 246 },
325 247 success: function(response) {
326 248 try {
@@ -341,13 +263,8 @@
341 263 }
342 264
343 265 // Reload list
344 266 loadChatList(currentPage, $('#mxch-search-transcripts').val());
345 -
346 - // The Leads tab shares this data (Chat deleted pill, nav badge,
347 - // stats) — invalidate it so switching tabs re-fetches instead of
348 - // showing stale "active lead" rows.
349 - invalidateLeadsData();
350 267 } else if (jsonResponse.error) {
351 268 alert('Error: ' + jsonResponse.error);
352 269 }
353 270 } catch (e) {
@@ -415,9 +332,8 @@
415 332 <div class="mxch-chat-name">${escapeHtml(session.display_name)}</div>
416 333 <div class="mxch-chat-preview">${escapeHtml(session.preview)}</div>
417 334 </div>
418 335 <div class="mxch-chat-meta">
419 - ${renderRatingBadge(session)}
420 336 <span class="mxch-chat-time">${escapeHtml(session.time_display)}</span>
421 337 <span class="mxch-chat-count">${session.message_count}</span>
422 338 </div>
423 339 </div>
@@ -429,9 +345,9 @@
429 345 // Attach checkbox handlers
430 346 $('.mxch-chat-checkbox').on('click', function(e) {
431 347 e.stopPropagation(); // Prevent triggering chat item click
432 348 const $item = $(this).closest('.mxch-chat-item');
433 - const sessionId = $item.attr('data-session-id');
349 + const sessionId = $item.data('session-id');
434 350
435 351 if ($(this).is(':checked')) {
436 352 selectedSessions.add(sessionId);
437 353 $item.addClass('selected');
@@ -447,9 +363,9 @@
447 363 $('.mxch-chat-item').on('click', function(e) {
448 364 // Don't trigger if clicking on checkbox
449 365 if ($(e.target).is('.mxch-chat-checkbox')) return;
450 366
451 - const sessionId = $(this).attr('data-session-id');
367 + const sessionId = $(this).data('session-id');
452 368 selectChat(sessionId);
453 369
454 370 // Update active state
455 371 $('.mxch-chat-item').removeClass('active');
@@ -510,13 +426,8 @@
510 426 // Select and load a chat conversation
511 427 function selectChat(sessionId) {
512 428 currentSessionId = sessionId;
513 429
514 - // Reset translation state when selecting new chat
515 - if (typeof resetTranslationState === 'function') {
516 - resetTranslationState();
517 - }
518 -
519 430 // Show loading in conversation panel
520 431 $('#mxch-conversation-empty').hide();
521 432 $('#mxch-conversation-content').show();
522 433 $('#mxch-messages-area').html('<div class="mxch-messages-loading"><span class="spinner is-active"></span> Loading conversation...</div>');
@@ -530,14 +441,8 @@
530 441 },
531 442 success: function(response) {
532 443 if (response.success) {
533 444 renderConversation(response);
534 - // Load saved translation after rendering
535 - if (typeof loadSavedTranslation === 'function') {
536 - setTimeout(function() {
537 - loadSavedTranslation(sessionId);
538 - }, 100);
539 - }
540 445 } else {
541 446 $('#mxch-messages-area').html('<div class="mxch-messages-error">Failed to load conversation</div>');
542 447 }
543 448 },
@@ -570,18 +475,8 @@
570 475 } else {
571 476 $('#mxch-detail-email-row').hide();
572 477 }
573 478
574 - // Feedback row — .text() (not .html()) for XSS-safe display of user-submitted text.
575 - // rating_feedback is already sanitize_text_field()'d + mb_substr(200) on save.
576 - var feedback = (data && data.rating_feedback) ? String(data.rating_feedback).trim() : '';
577 - if (feedback) {
578 - $('#mxch-detail-feedback').text(feedback);
579 - $('#mxch-detail-feedback-row').show();
580 - } else {
581 - $('#mxch-detail-feedback-row').hide();
582 - }
583 -
584 479 // Clicked links
585 480 if (data.clicked_urls && data.clicked_urls.length > 0) {
586 481 let linksHtml = '';
587 482 data.clicked_urls.forEach(function(url) {
@@ -607,19 +502,13 @@
607 502 <div class="mxch-message-time">${escapeHtml(msg.timestamp)}</div>
608 503 </div>
609 504 `;
610 505 } else {
611 - // Live-agent replies (role 'agent') get their own label and never
612 - // carry a Sources link; bot/assistant rows render exactly as before.
613 - const isAgent = !!msg.is_agent;
614 - const ragLink = (!isAgent && msg.has_rag) ? `<a href="#" class="mxch-rag-link" data-message-id="${msg.id}">Sources</a>` : '';
615 - const senderLabel = isAgent
616 - ? '<span class="mxch-agent-label">Live Agent</span>'
617 - : '<span class="mxch-bot-label">AI Assistant</span>';
506 + const ragLink = msg.has_rag ? `<a href="#" class="mxch-rag-link" data-message-id="${msg.id}">Sources</a>` : '';
618 507 messagesHtml += `
619 - <div class="mxch-message mxch-message-bot${isAgent ? ' mxch-message-agent' : ''}" data-message-id="${msg.id}">
508 + <div class="mxch-message mxch-message-bot" data-message-id="${msg.id}">
620 509 <div class="mxch-message-header">
621 - ${senderLabel}
510 + <span class="mxch-bot-label">AI Assistant</span>
622 511 ${ragLink}
623 512 </div>
624 513 <div class="mxch-message-row">
625 514 <div class="mxch-message-bubble">
@@ -661,16 +550,21 @@
661 550 $btn.addClass('active');
662 551 }
663 552 });
664 553
665 - // Delete current chat — opens the shared confirm modal.
554 + // Delete current chat
666 555 $('#mxch-delete-current').on('click', function() {
667 556 if (!currentSessionId) return;
668 - openTranscriptConfirm([currentSessionId], 1);
557 +
558 + if (!confirm('Are you sure you want to delete this conversation? This action cannot be undone.')) {
559 + return;
560 + }
561 +
562 + deleteSession(currentSessionId);
669 563 });
670 564
671 565 // Delete session function
672 - function deleteSession(sessionId, alsoDeleteLead) {
566 + function deleteSession(sessionId) {
673 567 $.ajax({
674 568 url: ajaxurl,
675 569 type: 'POST',
676 570 data: {
@@ -675,9 +569,8 @@
675 569 type: 'POST',
676 570 data: {
677 571 action: 'mxchat_delete_chat_history',
678 572 delete_session_ids: [sessionId],
679 - also_delete_lead: alsoDeleteLead ? '1' : '0',
680 573 security: $('#mxchat_delete_chat_nonce').val()
681 574 },
682 575 success: function(response) {
683 576 try {
@@ -737,194 +630,19 @@
737 630 }, 2000);
738 631 });
739 632
740 633 // ==========================================================================
741 - // Translation Functionality
634 + // RAG Context Modal
742 635 // ==========================================================================
743 636
744 - // Store original messages for reverting
745 - let originalMessages = null;
746 - let isTranslated = false;
747 - let currentTranslationLang = null;
748 -
749 - // Load saved language preference from localStorage
750 - const savedLang = localStorage.getItem('mxch_translate_lang');
751 - if (savedLang) {
752 - $('#mxch-translate-lang').val(savedLang);
753 - }
754 -
755 - // Save language preference when changed
756 - $('#mxch-translate-lang').on('change', function() {
757 - localStorage.setItem('mxch_translate_lang', $(this).val());
758 - });
759 -
760 - // Apply translations to messages
761 - function applyTranslations(translations) {
762 - // Store original messages if not already stored
763 - if (!originalMessages) {
764 - originalMessages = [];
765 - $('#mxch-messages-area .mxch-message-bubble').each(function() {
766 - originalMessages.push($(this).html());
767 - });
768 - }
769 -
770 - // Apply translations
771 - translations.forEach(function(item) {
772 - const $bubble = $('#mxch-messages-area .mxch-message-bubble').eq(item.index);
773 - if ($bubble.length) {
774 - $bubble.html(item.translated);
775 - $bubble.addClass('translated');
776 - }
777 - });
778 -
779 - isTranslated = true;
780 - $('#mxch-show-original-btn').show();
781 - }
782 -
783 - // Load saved translation for current session
784 - function loadSavedTranslation(sessionId) {
785 - $.ajax({
786 - url: ajaxurl,
787 - type: 'POST',
788 - data: {
789 - action: 'mxchat_get_transcript_translation',
790 - session_id: sessionId
791 - },
792 - success: function(response) {
793 - if (response.success && response.has_translation) {
794 - currentTranslationLang = response.language;
795 - applyTranslations(response.translations);
796 - // Update language selector to show saved language
797 - $('#mxch-translate-lang').val(response.language);
798 - }
799 - }
800 - });
801 - }
802 -
803 - // Translate button click handler
804 - $('#mxch-translate-btn').on('click', function() {
805 - if (!currentSessionId) return;
806 -
807 - const $btn = $(this);
808 - const targetLang = $('#mxch-translate-lang').val();
809 -
810 - // Disable button and show loading state
811 - $btn.prop('disabled', true);
812 - $btn.find('.mxch-translate-text').text('Translating...');
813 - $btn.find('svg').addClass('mxch-translate-spinner');
814 -
815 - // Store original messages before translation
816 - if (!originalMessages) {
817 - originalMessages = [];
818 - $('#mxch-messages-area .mxch-message-bubble').each(function() {
819 - originalMessages.push($(this).html());
820 - });
821 - }
822 -
823 - // If already translated, restore originals first before re-translating
824 - if (isTranslated) {
825 - $('#mxch-messages-area .mxch-message-bubble').each(function(index) {
826 - if (originalMessages[index]) {
827 - $(this).html(originalMessages[index]);
828 - $(this).removeClass('translated');
829 - }
830 - });
831 - }
832 -
833 - // Collect all message content (from originals)
834 - const messages = [];
835 - originalMessages.forEach(function(html, index) {
836 - // Create temp element to get text content
837 - const $temp = $('<div>').html(html);
838 - messages.push({
839 - index: index,
840 - content: $temp.text().trim()
841 - });
842 - });
843 -
844 - // Send translation request
845 - $.ajax({
846 - url: ajaxurl,
847 - type: 'POST',
848 - data: {
849 - action: 'mxchat_translate_messages',
850 - session_id: currentSessionId,
851 - target_lang: targetLang,
852 - messages: JSON.stringify(messages),
853 - security: mxchatAdmin.translate_nonce || ''
854 - },
855 - success: function(response) {
856 - if (response.success && response.translations) {
857 - currentTranslationLang = response.language;
858 - applyTranslations(response.translations);
859 - $btn.find('.mxch-translate-text').text('Translate');
860 - } else {
861 - alert(response.error || 'Translation failed. Please try again.');
862 - $btn.find('.mxch-translate-text').text('Translate');
863 - }
864 - },
865 - error: function() {
866 - alert('Translation request failed. Please try again.');
867 - $btn.find('.mxch-translate-text').text('Translate');
868 - },
869 - complete: function() {
870 - $btn.prop('disabled', false);
871 - $btn.find('svg').removeClass('mxch-translate-spinner');
872 - }
873 - });
874 - });
875 -
876 - // Show original button click handler
877 - $('#mxch-show-original-btn').on('click', function() {
878 - if (!originalMessages) return;
879 -
880 - // Restore original messages
881 - $('#mxch-messages-area .mxch-message-bubble').each(function(index) {
882 - if (originalMessages[index]) {
883 - $(this).html(originalMessages[index]);
884 - $(this).removeClass('translated');
885 - }
886 - });
887 -
888 - isTranslated = false;
889 - $(this).hide();
890 - });
891 -
892 - // Reset translation state (called when selecting new chat)
893 - function resetTranslationState() {
894 - originalMessages = null;
895 - isTranslated = false;
896 - currentTranslationLang = null;
897 - $('#mxch-show-original-btn').hide();
898 - }
899 -
900 - // Make functions available to selectChat
901 - window.resetTranslationState = resetTranslationState;
902 - window.loadSavedTranslation = loadSavedTranslation;
903 -
904 - // ==========================================================================
905 - // RAG Context Modal (Sources & Actions Tabs)
906 - // ==========================================================================
907 -
908 637 function openRagContextModal(messageId) {
909 638 const $modal = $('#mxch-rag-modal');
910 639 const $loading = $modal.find('.mxch-rag-loading');
911 - const $sourcesContent = $modal.find('.mxch-rag-content');
912 - const $actionsContent = $modal.find('.mxch-actions-content');
640 + const $content = $modal.find('.mxch-rag-content');
913 641
914 - // Reset to Sources tab
915 - $modal.find('.mxch-context-tab').removeClass('active');
916 - $modal.find('.mxch-context-tab[data-tab="sources"]').addClass('active');
917 - $('#mxch-tab-sources').show();
918 - $('#mxch-tab-actions').hide();
919 -
920 - // Reset badge counts
921 - $('#mxch-sources-count, #mxch-actions-count').hide().text('0');
922 -
923 642 $modal.fadeIn(200);
924 643 $loading.show();
925 - $sourcesContent.html('');
926 - $actionsContent.html('');
644 + $content.html('');
927 645
928 646 $.ajax({
929 647 url: ajaxurl,
930 648 type: 'POST',
@@ -935,318 +653,97 @@
935 653 success: function(response) {
936 654 $loading.hide();
937 655
938 656 if (response.success && response.data) {
939 - // Render sources tab
940 - renderRagContext(response.data, $sourcesContent);
941 -
942 - // Render actions tab
943 - renderActionsContext(response.data, $actionsContent);
944 -
945 - // Update badge counts
946 - const sourcesCount = response.data.top_matches ? response.data.top_matches.length : 0;
947 - // 470f68: the Actions tab now carries two mechanisms — tools
948 - // that ran and trigger phrases that scored. Badge counts both.
949 - const toolCallsCount = response.data.tool_calls ? response.data.tool_calls.length : 0;
950 - const actionsCount = (response.data.action_analysis ? response.data.action_analysis.length : 0) + toolCallsCount;
951 -
952 - if (sourcesCount > 0) {
953 - $('#mxch-sources-count').text(sourcesCount).show();
954 - }
955 - if (actionsCount > 0) {
956 - $('#mxch-actions-count').text(actionsCount).show();
957 - }
657 + renderRagContext(response.data, $content);
958 658 } else {
959 - $sourcesContent.html('<div class="mxch-rag-error">Unable to load document context.</div>');
960 - $actionsContent.html('<div class="mxch-rag-error">No action data available.</div>');
659 + $content.html('<div class="mxch-rag-error">Unable to load document context.</div>');
961 660 }
962 661 },
963 662 error: function() {
964 663 $loading.hide();
965 - $sourcesContent.html('<div class="mxch-rag-error">Error loading context. Please try again.</div>');
966 - $actionsContent.html('<div class="mxch-rag-error">Error loading context. Please try again.</div>');
664 + $content.html('<div class="mxch-rag-error">Error loading document context. Please try again.</div>');
967 665 }
968 666 });
969 667 }
970 668
971 - // Tab switching
972 - $(document).on('click', '.mxch-context-tab', function() {
973 - const $tab = $(this);
974 - const tabName = $tab.data('tab');
975 -
976 - // Update active tab
977 - $('.mxch-context-tab').removeClass('active');
978 - $tab.addClass('active');
979 -
980 - // Show/hide content
981 - $('.mxch-tab-content').hide();
982 - $('#mxch-tab-' + tabName).show();
983 - });
984 -
985 669 function renderRagContext(data, $container) {
986 670 let html = '';
987 671
988 - // 67fc92: "the KB was searched and nothing matched" and "nothing was
989 - // recorded for this row" are different facts. Retrieval keys present
990 - // means the search ran and was recorded (top_matches may be empty);
991 - // no retrieval keys means there is simply no record (older rows, or
992 - // turns that never consulted the knowledge base).
993 - const retrievalRecorded = typeof data.total_documents_checked !== 'undefined'
994 - || (data.top_matches && data.top_matches.length > 0);
995 -
996 - if (!retrievalRecorded) {
997 - html += '<div class="mxch-no-results"><p>No retrieval data was recorded for this response.</p></div>';
998 - $container.html(html);
999 - return;
1000 - }
1001 -
1002 - // Hybrid keyword boost (38ffa1): rows carry matched_via + fused_rank
1003 - // when hybrid retrieval was on for this response. Cosine % stays the
1004 - // anchor; the chip explains WHY a low-% row ranked high.
1005 - const topMatches = data.top_matches || [];
1006 - const hybridOn = topMatches.some(function(m) { return m.matched_via; });
1007 -
1008 672 html += '<div class="mxch-rag-summary">';
1009 673 html += '<div class="mxch-rag-summary-item"><span class="mxch-rag-label">Knowledge Base:</span> <span class="mxch-rag-value">' + escapeHtml(data.knowledge_base_type || 'WordPress Database') + '</span></div>';
1010 674 html += '<div class="mxch-rag-summary-item"><span class="mxch-rag-label">Similarity Threshold:</span> <span class="mxch-rag-value">' + Math.round((data.similarity_threshold || 0.35) * 100) + '%</span></div>';
1011 675 html += '<div class="mxch-rag-summary-item"><span class="mxch-rag-label">Documents Checked:</span> <span class="mxch-rag-value">' + (data.total_documents_checked || 0) + '</span></div>';
1012 - if (hybridOn) {
1013 - html += '<div class="mxch-rag-summary-item"><span class="mxch-rag-label">Retrieval:</span> <span class="mxch-rag-value">Hybrid</span></div>';
1014 - }
1015 676 html += '</div>';
1016 677
1017 - if (topMatches.length === 0) {
1018 - html += '<div class="mxch-no-results"><p>The knowledge base was searched &mdash; no documents matched this response.</p></div>';
1019 - $container.html(html);
1020 - return;
1021 - }
678 + if (data.top_matches && data.top_matches.length > 0) {
679 + const groupedByUrl = {};
1022 680
1023 - const groupedByUrl = {};
681 + data.top_matches.forEach(function(match) {
682 + const url = match.source_display || 'Unknown';
683 + if (!groupedByUrl[url]) {
684 + groupedByUrl[url] = {
685 + url: url,
686 + isUrl: url.startsWith('http'),
687 + bestScore: 0,
688 + usedForContext: false,
689 + matchedChunks: []
690 + };
691 + }
1024 692
1025 - data.top_matches.forEach(function(match) {
1026 - const url = match.source_display || 'Unknown';
1027 - if (!groupedByUrl[url]) {
1028 - groupedByUrl[url] = {
1029 - url: url,
1030 - isUrl: url.startsWith('http'),
1031 - bestScore: 0,
1032 - usedForContext: false,
1033 - matchedChunks: [],
1034 - bestFusedRank: Infinity,
1035 - viaSet: {}
1036 - };
1037 - }
693 + if (match.similarity_percentage > groupedByUrl[url].bestScore) {
694 + groupedByUrl[url].bestScore = match.similarity_percentage;
695 + }
1038 696
1039 - if (match.similarity_percentage > groupedByUrl[url].bestScore) {
1040 - groupedByUrl[url].bestScore = match.similarity_percentage;
1041 - }
697 + if (match.used_for_context) {
698 + groupedByUrl[url].usedForContext = true;
699 + }
1042 700
1043 - if (match.used_for_context) {
1044 - groupedByUrl[url].usedForContext = true;
1045 - }
1046 -
1047 - if (match.fused_rank && match.fused_rank < groupedByUrl[url].bestFusedRank) {
1048 - groupedByUrl[url].bestFusedRank = match.fused_rank;
1049 - }
1050 - if (match.matched_via) {
1051 - groupedByUrl[url].viaSet[match.matched_via] = true;
1052 - }
1053 -
1054 - groupedByUrl[url].matchedChunks.push({
1055 - chunkIndex: match.chunk_index,
1056 - score: match.similarity_percentage,
1057 - usedForContext: match.used_for_context
701 + groupedByUrl[url].matchedChunks.push({
702 + chunkIndex: match.chunk_index,
703 + score: match.similarity_percentage,
704 + usedForContext: match.used_for_context
705 + });
1058 706 });
1059 - });
1060 707
1061 - // Hybrid on: order by fused rank (rows without one sort last);
1062 - // otherwise by cosine, exactly as before.
1063 - const urlGroups = Object.values(groupedByUrl).sort(function(a, b) {
1064 - if (hybridOn && a.bestFusedRank !== b.bestFusedRank) {
1065 - return a.bestFusedRank - b.bestFusedRank;
1066 - }
1067 - return b.bestScore - a.bestScore;
1068 - });
1069 - const usedUrlCount = data.sources_used > 0 ? data.sources_used : urlGroups.filter(g => g.usedForContext).length;
1070 - const chunksInfo = data.total_chunks_used > 0 ? data.total_chunks_used + ' chunks sent to AI' : '';
708 + const urlGroups = Object.values(groupedByUrl).sort((a, b) => b.bestScore - a.bestScore);
709 + const usedUrlCount = urlGroups.filter(g => g.usedForContext).length;
1071 710
1072 - html += '<div class="mxch-rag-matches">';
1073 - html += '<h3>Retrieved Documents</h3>';
1074 - html += '<p style="color: var(--mxch-text-secondary); font-size: 13px; margin-bottom: 16px;">' + usedUrlCount + ' source' + (usedUrlCount === 1 ? '' : 's') + ' used for response' + (chunksInfo ? ' &middot; ' + chunksInfo : '') + '</p>';
711 + html += '<div class="mxch-rag-matches">';
712 + html += '<h3>Retrieved Documents</h3>';
713 + html += '<p style="color: var(--mxch-text-secondary); font-size: 13px; margin-bottom: 16px;">' + usedUrlCount + ' entr' + (usedUrlCount === 1 ? 'y' : 'ies') + ' used for response</p>';
1075 714
1076 - urlGroups.forEach(function(group) {
1077 - const cardClass = group.usedForContext ? 'mxch-rag-match-used' : 'mxch-rag-match-below';
1078 - const statusIcon = group.usedForContext ? '&#10003;' : '&#10007;';
1079 - const statusLabel = group.usedForContext ? 'Used' : 'Not Used';
715 + urlGroups.forEach(function(group) {
716 + const cardClass = group.usedForContext ? 'mxch-rag-match-used' : 'mxch-rag-match-below';
717 + const statusIcon = group.usedForContext ? '&#10003;' : '&#10007;';
718 + const statusLabel = group.usedForContext ? 'Used' : 'Not Used';
1080 719
1081 - html += '<div class="mxch-rag-match-card ' + cardClass + '">';
1082 - html += '<div class="mxch-rag-match-header">';
1083 - html += '<span class="mxch-rag-match-score">' + group.bestScore + '%</span>';
720 + html += '<div class="mxch-rag-match-card ' + cardClass + '">';
721 + html += '<div class="mxch-rag-match-header">';
722 + html += '<span class="mxch-rag-match-score">' + group.bestScore + '%</span>';
1084 723
1085 - if (hybridOn) {
1086 - const vias = Object.keys(group.viaSet);
1087 - if (vias.length) {
1088 - const viaLabel = (vias.length > 1 || vias[0] === 'both') ? 'Both'
1089 - : (vias[0] === 'keyword' ? 'Keyword' : 'Vector');
1090 - html += '<span class="mxch-rag-via-chip mxch-rag-via-' + viaLabel.toLowerCase() + '">' + viaLabel + '</span>';
724 + if (group.matchedChunks.length > 1) {
725 + html += '<span class="mxch-rag-chunk-badge">' + group.matchedChunks.length + ' chunks</span>';
1091 726 }
1092 - }
1093 727
1094 - if (group.matchedChunks.length > 1) {
1095 - html += '<span class="mxch-rag-chunk-badge">' + group.matchedChunks.length + ' chunks</span>';
1096 - }
728 + html += '<span class="mxch-rag-match-status ' + (group.usedForContext ? 'status-used' : 'status-below') + '">' + statusIcon + ' ' + statusLabel + '</span>';
729 + html += '</div>';
1097 730
1098 - html += '<span class="mxch-rag-match-status ' + (group.usedForContext ? 'status-used' : 'status-below') + '">' + statusIcon + ' ' + statusLabel + '</span>';
1099 - html += '</div>';
731 + html += '<div class="mxch-rag-match-source">';
732 + if (group.isUrl) {
733 + html += '<a href="' + escapeHtml(group.url) + '" target="_blank">' + escapeHtml(group.url) + '</a>';
734 + } else {
735 + html += escapeHtml(group.url);
736 + }
737 + html += '</div>';
738 + html += '</div>';
739 + });
1100 740
1101 - html += '<div class="mxch-rag-match-source">';
1102 - if (group.isUrl) {
1103 - html += '<a href="' + escapeHtml(group.url) + '" target="_blank">' + escapeHtml(group.url) + '</a>';
1104 - } else {
1105 - html += escapeHtml(group.url);
1106 - }
1107 741 html += '</div>';
1108 - html += '</div>';
1109 - });
1110 -
1111 - html += '</div>';
1112 - $container.html(html);
1113 - }
1114 -
1115 - // AI Tools trace (470f68): one card per tool EXECUTION for this message.
1116 - // Rendered ABOVE the trigger-phrase scores — a tool that actually ran
1117 - // outranks a phrase that merely scored.
1118 - function renderToolCalls(toolCalls) {
1119 - const failed = toolCalls.filter(function(t) { return !t.ok; }).length;
1120 -
1121 - let html = '<div class="mxch-rag-summary">';
1122 - html += '<div class="mxch-rag-summary-item"><span class="mxch-rag-label">Tools Used:</span> <span class="mxch-rag-value">' + toolCalls.length + '</span></div>';
1123 - if (failed > 0) {
1124 - html += '<div class="mxch-rag-summary-item"><span class="mxch-rag-label">Failed:</span> <span class="mxch-rag-value" style="color: #ef4444; font-weight: 600;">' + failed + '</span></div>';
742 + } else {
743 + html += '<div class="mxch-no-results"><p>No document matches found for this response.</p></div>';
1125 744 }
1126 - html += '</div>';
1127 745
1128 - html += '<div class="mxch-rag-matches">';
1129 - html += '<h3>AI Tools</h3>';
1130 - html += '<p style="color: var(--mxch-text-secondary); font-size: 13px; margin-bottom: 16px;">Tools the assistant chose and ran for this message, in order.</p>';
1131 -
1132 - toolCalls.forEach(function(tool) {
1133 - const ok = !!tool.ok;
1134 - const cardClass = ok ? 'mxch-rag-match-used' : 'mxch-tool-failed';
1135 - const statusClass = ok ? 'status-used' : 'status-failed';
1136 - const statusIcon = ok ? '&#10003;' : '&#10007;';
1137 - const statusLabel = ok ? 'Ran' : 'Failed';
1138 -
1139 - html += '<div class="mxch-rag-match-card ' + cardClass + '">';
1140 - html += '<div class="mxch-rag-match-header">';
1141 - html += '<span class="mxch-rag-match-score">&#9889;</span>';
1142 - if (typeof tool.ms === 'number') {
1143 - html += '<span class="mxch-tool-duration">' + tool.ms + ' ms</span>';
1144 - }
1145 - html += '<span class="mxch-rag-match-status ' + statusClass + '">' + statusIcon + ' ' + statusLabel + '</span>';
1146 - html += '</div>';
1147 -
1148 - html += '<div class="mxch-action-details">';
1149 - html += '<div class="mxch-action-label">' + escapeHtml(tool.label || tool.name) + '</div>';
1150 - html += '<div class="mxch-action-callback"><span class="mxch-action-callback-label">Tool:</span> ' + escapeHtml(tool.name) + '</div>';
1151 - html += '</div>';
1152 -
1153 - if (!ok && tool.error) {
1154 - html += '<div class="mxch-tool-error">' + escapeHtml(tool.error) + '</div>';
1155 - }
1156 -
1157 - if (tool.args_redacted === 'sensitive') {
1158 - html += '<div class="mxch-tool-redacted">Arguments not recorded &mdash; this tool is marked sensitive.</div>';
1159 - } else if (tool.args_excerpt) {
1160 - html += '<details class="mxch-tool-args"><summary>Arguments</summary>';
1161 - html += '<div class="mxch-tool-args-body">' + escapeHtml(tool.args_excerpt) + '</div></details>';
1162 - }
1163 -
1164 - html += '</div>';
1165 - });
1166 -
1167 - html += '</div>';
1168 - return html;
1169 - }
1170 -
1171 - function renderActionsContext(data, $container) {
1172 - let html = '';
1173 -
1174 - const toolCalls = (data.tool_calls && data.tool_calls.length) ? data.tool_calls : [];
1175 - const actions = (data.action_analysis && data.action_analysis.length) ? data.action_analysis : [];
1176 -
1177 - // 95d79d's empty state now shows only when NEITHER mechanism produced
1178 - // anything — the string itself is unchanged.
1179 - if (toolCalls.length === 0 && actions.length === 0) {
1180 - html += '<div class="mxch-no-results"><p>No trigger-phrase analysis for this message.</p><p style="color: var(--mxch-text-secondary); font-size: 13px; margin-top: 8px;">This panel shows how your <strong>Trigger Phrases</strong> scored &mdash; it stays empty if you have none enabled for this bot, or if the answer came from <strong>AI Tools</strong>, which don\'t produce similarity scores. It\'s recorded when the answer is generated, so it won\'t appear on older conversations.</p></div>';
1181 - $container.html(html);
1182 - return;
1183 - }
1184 -
1185 - if (toolCalls.length > 0) {
1186 - html += renderToolCalls(toolCalls);
1187 - }
1188 -
1189 - if (actions.length === 0) {
1190 - $container.html(html);
1191 - return;
1192 - }
1193 - const triggeredAction = actions.find(a => a.triggered);
1194 - const actionsAboveThreshold = actions.filter(a => a.above_threshold).length;
1195 -
1196 - // Summary section
1197 - html += '<div class="mxch-rag-summary">';
1198 - html += '<div class="mxch-rag-summary-item"><span class="mxch-rag-label">Actions Evaluated:</span> <span class="mxch-rag-value">' + actions.length + '</span></div>';
1199 - html += '<div class="mxch-rag-summary-item"><span class="mxch-rag-label">Above Threshold:</span> <span class="mxch-rag-value">' + actionsAboveThreshold + '</span></div>';
1200 - if (triggeredAction) {
1201 - html += '<div class="mxch-rag-summary-item"><span class="mxch-rag-label">Triggered:</span> <span class="mxch-rag-value" style="color: #10b981; font-weight: 600;">' + escapeHtml(triggeredAction.intent_label) + '</span></div>';
1202 - }
1203 - html += '</div>';
1204 -
1205 - // Actions list
1206 - html += '<div class="mxch-rag-matches">';
1207 - html += '<h3>Action Scores</h3>';
1208 - html += '<p style="color: var(--mxch-text-secondary); font-size: 13px; margin-bottom: 16px;">Showing all evaluated actions sorted by similarity score</p>';
1209 -
1210 - actions.forEach(function(action) {
1211 - let cardClass = 'mxch-rag-match-below';
1212 - let statusIcon = '&#10007;';
1213 - let statusLabel = 'Below Threshold';
1214 -
1215 - if (action.triggered) {
1216 - cardClass = 'mxch-action-triggered';
1217 - statusIcon = '&#9889;';
1218 - statusLabel = 'Triggered';
1219 - } else if (action.above_threshold) {
1220 - cardClass = 'mxch-rag-match-used';
1221 - statusIcon = '&#10003;';
1222 - statusLabel = 'Above Threshold';
1223 - }
1224 -
1225 - html += '<div class="mxch-rag-match-card ' + cardClass + '">';
1226 - html += '<div class="mxch-rag-match-header">';
1227 - html += '<span class="mxch-rag-match-score">' + action.similarity_percentage + '%</span>';
1228 - html += '<span class="mxch-action-threshold-badge">Threshold: ' + action.threshold_percentage + '%</span>';
1229 - html += '<span class="mxch-rag-match-status ' + (action.triggered ? 'status-triggered' : (action.above_threshold ? 'status-used' : 'status-below')) + '">' + statusIcon + ' ' + statusLabel + '</span>';
1230 - html += '</div>';
1231 -
1232 - html += '<div class="mxch-action-details">';
1233 - html += '<div class="mxch-action-label">' + escapeHtml(action.intent_label) + '</div>';
1234 - html += '<div class="mxch-action-callback"><span class="mxch-action-callback-label">Callback:</span> ' + escapeHtml(action.callback_function) + '</div>';
1235 - html += '</div>';
1236 -
1237 - // Score bar visualization
1238 - const scoreBarWidth = Math.min(action.similarity_percentage, 100);
1239 - const thresholdPos = Math.min(action.threshold_percentage, 100);
1240 - html += '<div class="mxch-action-score-bar">';
1241 - html += '<div class="mxch-action-score-fill" style="width: ' + scoreBarWidth + '%;"></div>';
1242 - html += '<div class="mxch-action-threshold-marker" style="left: ' + thresholdPos + '%;"></div>';
1243 - html += '</div>';
1244 -
1245 - html += '</div>';
1246 - });
1247 -
1248 - html += '</div>';
1249 746 $container.html(html);
1250 747 }
1251 748
1252 749 function escapeHtml(text) {
@@ -1487,491 +984,6 @@
1487 984 clearTimeout(resizeTimeout);
1488 985 resizeTimeout = setTimeout(function() {
1489 986 initActivityChart();
1490 987 }, 250);
1491 - });
1492 -
1493 - // ==========================================================================
1494 - // Leads Tab
1495 - // ==========================================================================
1496 -
1497 - const leadsState = {
1498 - loaded: false,
1499 - page: 1,
1500 - perPage: 25,
1501 - totalPages: 1,
1502 - totalCount: 0,
1503 - selected: new Set(),
1504 - filters: {
1505 - search: '',
1506 - dateRange: 'all',
1507 - status: 'all',
1508 - pageUrl: '',
1509 - pageTitle: ''
1510 - },
1511 - pendingDelete: [],
1512 - leadsRows: [] // last-rendered rows for quick lookup
1513 - };
1514 -
1515 - function $leads() { return $('#leads'); }
1516 -
1517 - // Called after a transcript delete from the All Chats side. Marks the Leads tab
1518 - // data stale so the next tab visit re-fetches, and refreshes immediately if the
1519 - // Leads tab happens to already be visible.
1520 - function invalidateLeadsData() {
1521 - leadsState.loaded = false;
1522 - if ($('#leads').hasClass('active')) {
1523 - loadLeads(1);
1524 - }
1525 - }
1526 -
1527 - function escapeHtmlLeads(s) {
1528 - if (s === null || typeof s === 'undefined') return '';
1529 - return String(s)
1530 - .replace(/&/g, '&amp;')
1531 - .replace(/</g, '&lt;')
1532 - .replace(/>/g, '&gt;')
1533 - .replace(/"/g, '&quot;')
1534 - .replace(/'/g, '&#039;');
1535 - }
1536 -
1537 - function leadsFiltersActive() {
1538 - const f = leadsState.filters;
1539 - return f.search !== '' || f.dateRange !== 'all' || f.status !== 'all' || f.pageUrl !== '';
1540 - }
1541 -
1542 - function updateClearFiltersButton() {
1543 - if (leadsFiltersActive()) {
1544 - $('#mxch-leads-clear-filters').show();
1545 - } else {
1546 - $('#mxch-leads-clear-filters').hide();
1547 - }
1548 - }
1549 -
1550 - function setPageFilterChip(url, title) {
1551 - leadsState.filters.pageUrl = url || '';
1552 - leadsState.filters.pageTitle = title || url || '';
1553 - const $chip = $('#mxch-leads-active-page-filter');
1554 - if (url) {
1555 - $chip.find('.mxch-leads-page-chip-label').text('Page: ' + (title || url));
1556 - $chip.show();
1557 - } else {
1558 - $chip.hide();
1559 - }
1560 - updateClearFiltersButton();
1561 - }
1562 -
1563 - function loadLeads(page) {
1564 - if (typeof page === 'number') leadsState.page = page;
1565 -
1566 - const $tbody = $('#mxch-leads-tbody');
1567 - $tbody.html('<tr><td colspan="6" class="mxch-leads-loading"><span class="spinner is-active"></span></td></tr>');
1568 -
1569 - $.ajax({
1570 - url: ajaxurl,
1571 - type: 'POST',
1572 - data: {
1573 - action: 'mxchat_fetch_leads',
1574 - page: leadsState.page,
1575 - per_page: leadsState.perPage,
1576 - search: leadsState.filters.search,
1577 - date_range: leadsState.filters.dateRange,
1578 - status: leadsState.filters.status,
1579 - page_url: leadsState.filters.pageUrl
1580 - },
1581 - success: function(response) {
1582 - leadsState.loaded = true;
1583 - if (!response || !response.success) {
1584 - $tbody.html('<tr><td colspan="7" class="mxch-leads-empty">Error loading leads</td></tr>');
1585 - return;
1586 - }
1587 - leadsState.totalPages = response.total_pages || 1;
1588 - leadsState.totalCount = response.total_count || 0;
1589 - leadsState.leadsRows = response.leads || [];
1590 -
1591 - renderLeadsStats(response.stats || {});
1592 - renderLeadsTopPages(response.top_pages || []);
1593 - renderLeadsTable(response.leads || []);
1594 - renderLeadsCount(response.showing_start, response.showing_end, response.total_count);
1595 - renderLeadsPagination(response.page, response.total_pages);
1596 -
1597 - // Nav badge
1598 - if (response.stats && typeof response.stats.total_leads === 'number') {
1599 - const $badge = $('#mxch-leads-nav-badge');
1600 - if (response.stats.total_leads > 0) {
1601 - $badge.text(response.stats.total_leads).show();
1602 - } else {
1603 - $badge.hide();
1604 - }
1605 - }
1606 - },
1607 - error: function() {
1608 - $tbody.html('<tr><td colspan="7" class="mxch-leads-empty">Error loading leads</td></tr>');
1609 - }
1610 - });
1611 - }
1612 -
1613 - function renderLeadsStats(stats) {
1614 - $('#mxch-leads-stat-total').text(stats.total_leads || 0);
1615 - $('#mxch-leads-stat-new').text(stats.new_this_week || 0);
1616 - $('#mxch-leads-stat-avg').text(stats.avg_convos || 0);
1617 - const pct = stats.orphan_pct || 0;
1618 - $('#mxch-leads-stat-orphan').text(pct + '%');
1619 - const orphanCount = stats.orphan_count || 0;
1620 - $('#mxch-leads-stat-orphan-sub').text(orphanCount + (orphanCount === 1 ? ' lead captured but never chatted' : ' leads captured but never chatted'));
1621 - }
1622 -
1623 - function renderLeadsTopPages(pages) {
1624 - const $wrap = $('#mxch-leads-toppages-list');
1625 - if (!pages || pages.length === 0) {
1626 - $wrap.html('<div class="mxch-leads-empty-mini">No page data yet.</div>');
1627 - return;
1628 - }
1629 - let html = '';
1630 - pages.forEach(function(p) {
1631 - const isActive = leadsState.filters.pageUrl === p.url ? ' is-active' : '';
1632 - html += `
1633 - <button type="button" class="mxch-leads-toppage-row${isActive}" data-url="${escapeHtmlLeads(p.url)}" data-title="${escapeHtmlLeads(p.title)}">
1634 - <span class="mxch-leads-toppage-title">${escapeHtmlLeads(p.title || p.url)}</span>
1635 - <span class="mxch-leads-toppage-count">${p.lead_count}</span>
1636 - </button>
1637 - `;
1638 - });
1639 - $wrap.html(html);
1640 - }
1641 -
1642 - function renderLeadsTable(rows) {
1643 - const $tbody = $('#mxch-leads-tbody');
1644 - if (!rows || rows.length === 0) {
1645 - $tbody.html(`
1646 - <tr><td colspan="7" class="mxch-leads-empty">
1647 - <div class="mxch-leads-empty-wrap">
1648 - <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
1649 - <p>No leads match the current filters.</p>
1650 - </div>
1651 - </td></tr>
1652 - `);
1653 - return;
1654 - }
1655 -
1656 - let html = '';
1657 - rows.forEach(function(r) {
1658 - const emailKey = (r.email || '').toLowerCase();
1659 - const isChecked = leadsState.selected.has(emailKey) ? ' checked' : '';
1660 - // Status: 'active' (has conversations), 'chat_deleted' (admin removed the chat), 'orphan' (no chat ever).
1661 - const status = r.status || (r.is_orphan ? 'orphan' : 'active');
1662 - const isOrphan = (status === 'orphan');
1663 - const isChatDeleted = (status === 'chat_deleted');
1664 - const nameLine = r.name
1665 - ? `<span class="mxch-leads-lead-name">${escapeHtmlLeads(r.name)}</span>`
1666 - : '';
1667 - const leadCell = `
1668 - <div class="mxch-leads-lead-cell">
1669 - <span class="mxch-leads-lead-email" title="${escapeHtmlLeads(r.email)}">${escapeHtmlLeads(r.email)}</span>
1670 - ${nameLine}
1671 - </div>`;
1672 - let countCell;
1673 - if (isOrphan) {
1674 - countCell = `<span class="mxch-leads-pill mxch-leads-pill-orphan">Orphan</span>`;
1675 - } else if (isChatDeleted) {
1676 - countCell = `<span class="mxch-leads-pill mxch-leads-pill-deleted" title="Chat was deleted by an admin">Chat deleted</span>`;
1677 - } else {
1678 - countCell = `<span class="mxch-leads-pill">${r.conversation_count}</span>`;
1679 - }
1680 - const lastCell = escapeHtmlLeads(r.last_seen_display || (isOrphan ? 'No conversation yet' : ''));
1681 - const pageCell = r.top_page_url
1682 - ? `<a href="${escapeHtmlLeads(r.top_page_url)}" target="_blank" rel="noopener" class="mxch-leads-page-link" title="${escapeHtmlLeads(r.top_page_url)}">${escapeHtmlLeads(r.top_page_title || r.top_page_url)}</a>`
1683 - : '<span class="mxch-leads-muted">—</span>';
1684 - // Consent (b062c4): 'yes'/'no' are recorded decisions; '' means the
1685 - // capture predates the checkbox — "Not recorded", never "No".
1686 - let consentCell;
1687 - if (r.consent === 'yes' || r.consent === 'no') {
1688 - const consentTitle = (r.consent_at ? 'Recorded ' + r.consent_at : '') +
1689 - (r.consent_label ? (r.consent_at ? ' — ' : '') + '"' + r.consent_label + '"' : '');
1690 - consentCell = `<span class="mxch-leads-pill${r.consent === 'yes' ? ' mxch-leads-pill-consent-yes' : ' mxch-leads-pill-consent-no'}" title="${escapeHtmlLeads(consentTitle)}">${r.consent === 'yes' ? 'Yes' : 'No'}</span>`;
1691 - } else {
1692 - consentCell = '<span class="mxch-leads-muted" title="Captured before the consent checkbox was enabled">Not recorded</span>';
1693 - }
1694 - // View Convo only for active leads (orphans and chat_deleted have no viewable session).
1695 - const viewBtn = (status === 'active' && r.latest_session_id)
1696 - ? `<button type="button" class="mxch-btn mxch-btn-ghost mxch-btn-sm mxch-leads-view" data-session-id="${escapeHtmlLeads(r.latest_session_id)}" title="View latest conversation">
1697 - <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
1698 - <span>View convo</span>
1699 - </button>`
1700 - : '';
1701 - const deleteBtn = `<button type="button" class="mxch-btn mxch-btn-ghost mxch-btn-sm mxch-btn-danger-ghost mxch-leads-delete-row" data-email="${escapeHtmlLeads(r.email)}" title="Delete lead">
1702 - <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
1703 - </button>`;
1704 -
1705 - const rowStateClass = isOrphan ? ' is-orphan' : (isChatDeleted ? ' is-chat-deleted' : '');
1706 - html += `
1707 - <tr class="mxch-leads-row${rowStateClass}" data-email="${escapeHtmlLeads(r.email)}">
1708 - <td class="mxch-leads-col-check"><input type="checkbox" class="mxch-leads-rowcheck"${isChecked}></td>
1709 - <td class="mxch-leads-col-lead">${leadCell}</td>
1710 - <td class="mxch-leads-col-count">${countCell}</td>
1711 - <td class="mxch-leads-col-last">${lastCell}</td>
1712 - <td class="mxch-leads-col-page">${pageCell}</td>
1713 - <td class="mxch-leads-col-consent">${consentCell}</td>
1714 - <td class="mxch-leads-col-actions">${viewBtn}${deleteBtn}</td>
1715 - </tr>
1716 - `;
1717 - });
1718 -
1719 - $tbody.html(html);
1720 - updateLeadsSelectionUI();
1721 - }
1722 -
1723 - function renderLeadsCount(start, end, total) {
1724 - if (!total) {
1725 - $('#mxch-leads-count').text('0 leads');
1726 - } else {
1727 - $('#mxch-leads-count').text(start + '-' + end + ' / ' + total + ' leads');
1728 - }
1729 - }
1730 -
1731 - function renderLeadsPagination(currentPage, totalPages) {
1732 - const $c = $('#mxch-leads-pagination');
1733 - if (!totalPages || totalPages <= 1) { $c.html(''); return; }
1734 - let html = '<div class="mxch-pagination-btns">';
1735 - if (currentPage > 1) {
1736 - html += `<button class="mxch-page-btn" data-page="${currentPage - 1}">&laquo;</button>`;
1737 - }
1738 - html += `<span class="mxch-page-info">${currentPage} / ${totalPages}</span>`;
1739 - if (currentPage < totalPages) {
1740 - html += `<button class="mxch-page-btn" data-page="${currentPage + 1}">&raquo;</button>`;
1741 - }
1742 - html += '</div>';
1743 - $c.html(html);
1744 - }
1745 -
1746 - function updateLeadsSelectionUI() {
1747 - const count = leadsState.selected.size;
1748 - const $countEl = $('#mxch-leads-selected-count');
1749 - const $del = $('#mxch-leads-delete-selected');
1750 - if (count > 0) {
1751 - $countEl.text(count + ' selected').addClass('has-selection');
1752 - $del.prop('disabled', false);
1753 - } else {
1754 - $countEl.text('0').removeClass('has-selection');
1755 - $del.prop('disabled', true);
1756 - }
1757 - // Selected-scope export menu items
1758 - $('#mxch-leads-export-menu button[data-scope="selected"]').prop('disabled', count === 0);
1759 -
1760 - // Select-all checkbox state
1761 - const $checks = $('.mxch-leads-rowcheck');
1762 - const checked = $checks.filter(':checked').length;
1763 - const total = $checks.length;
1764 - $('#mxch-leads-select-all').prop('checked', total > 0 && checked === total);
1765 - $('#mxch-leads-select-all').prop('indeterminate', checked > 0 && checked < total);
1766 - }
1767 -
1768 - // Trigger leads load when switching to the tab (works alongside the main nav handler above).
1769 - $('.mxch-nav-link[data-target="leads"], .mxch-mobile-nav-link[data-target="leads"]').on('click', function() {
1770 - if (!leadsState.loaded) {
1771 - loadLeads(1);
1772 - }
1773 - });
1774 -
1775 - // Filter: search (debounced)
1776 - let leadsSearchTimer;
1777 - $('#mxch-leads-search').on('input', function() {
1778 - clearTimeout(leadsSearchTimer);
1779 - const val = $(this).val();
1780 - leadsSearchTimer = setTimeout(function() {
1781 - leadsState.filters.search = (val || '').trim();
1782 - updateClearFiltersButton();
1783 - loadLeads(1);
1784 - }, 300);
1785 - });
1786 -
1787 - // Filter: date range
1788 - $('#mxch-leads-date-range').on('change', function() {
1789 - leadsState.filters.dateRange = $(this).val();
1790 - updateClearFiltersButton();
1791 - loadLeads(1);
1792 - });
1793 -
1794 - // Filter: status
1795 - $('#mxch-leads-status').on('change', function() {
1796 - leadsState.filters.status = $(this).val();
1797 - updateClearFiltersButton();
1798 - loadLeads(1);
1799 - });
1800 -
1801 - // Clear filters
1802 - $('#mxch-leads-clear-filters').on('click', function() {
1803 - leadsState.filters = { search: '', dateRange: 'all', status: 'all', pageUrl: '', pageTitle: '' };
1804 - $('#mxch-leads-search').val('');
1805 - $('#mxch-leads-date-range').val('all');
1806 - $('#mxch-leads-status').val('all');
1807 - setPageFilterChip('', '');
1808 - loadLeads(1);
1809 - });
1810 -
1811 - // Remove page chip
1812 - $leads().on('click', '.mxch-leads-page-chip-remove', function() {
1813 - setPageFilterChip('', '');
1814 - loadLeads(1);
1815 - });
1816 -
1817 - // Top Pages click -> set filter
1818 - $leads().on('click', '.mxch-leads-toppage-row', function() {
1819 - const url = $(this).data('url') || '';
1820 - const title = $(this).data('title') || '';
1821 - setPageFilterChip(url, title);
1822 - loadLeads(1);
1823 - });
1824 -
1825 - // Pagination click
1826 - $leads().on('click', '#mxch-leads-pagination .mxch-page-btn', function() {
1827 - const p = parseInt($(this).data('page'), 10);
1828 - if (p > 0) loadLeads(p);
1829 - });
1830 -
1831 - // Select-all
1832 - $('#mxch-leads-select-all').on('change', function() {
1833 - const on = $(this).is(':checked');
1834 - $('.mxch-leads-rowcheck').prop('checked', on);
1835 - $('.mxch-leads-row').each(function() {
1836 - const email = ($(this).data('email') || '').toString().toLowerCase();
1837 - if (on) {
1838 - leadsState.selected.add(email);
1839 - } else {
1840 - leadsState.selected.delete(email);
1841 - }
1842 - });
1843 - updateLeadsSelectionUI();
1844 - });
1845 -
1846 - // Row checkbox
1847 - $leads().on('change', '.mxch-leads-rowcheck', function() {
1848 - const email = ($(this).closest('.mxch-leads-row').data('email') || '').toString().toLowerCase();
1849 - if ($(this).is(':checked')) {
1850 - leadsState.selected.add(email);
1851 - } else {
1852 - leadsState.selected.delete(email);
1853 - }
1854 - updateLeadsSelectionUI();
1855 - });
1856 -
1857 - // View convo -> jump to All Chats tab and open the session
1858 - $leads().on('click', '.mxch-leads-view', function() {
1859 - const sid = $(this).attr('data-session-id');
1860 - if (!sid) return;
1861 - $('.mxch-nav-link[data-target="all-chats"]').trigger('click');
1862 - // selectChat is defined earlier in this closure
1863 - if (typeof selectChat === 'function') {
1864 - setTimeout(function() { selectChat(sid); }, 30);
1865 - }
1866 - });
1867 -
1868 - // Row delete -> confirm for one
1869 - $leads().on('click', '.mxch-leads-delete-row', function() {
1870 - const email = $(this).data('email');
1871 - if (!email) return;
1872 - openLeadsConfirm([String(email)]);
1873 - });
1874 -
1875 - // Bulk delete -> confirm for N
1876 - $('#mxch-leads-delete-selected').on('click', function() {
1877 - if (leadsState.selected.size === 0) return;
1878 - openLeadsConfirm(Array.from(leadsState.selected));
1879 - });
1880 -
1881 - function openLeadsConfirm(emails) {
1882 - leadsState.pendingDelete = emails;
1883 - const count = emails.length;
1884 - const msg = count === 1
1885 - ? 'Delete lead "' + emails[0] + '" and all of their conversations?'
1886 - : 'Delete ' + count + ' leads and all of their conversations?';
1887 - $('#mxch-leads-confirm-body').text(msg);
1888 - $('#mxch-leads-confirm').fadeIn(120);
1889 - }
1890 -
1891 - function closeLeadsConfirm() {
1892 - $('#mxch-leads-confirm').fadeOut(120);
1893 - leadsState.pendingDelete = [];
1894 - }
1895 -
1896 - $leads().on('click', '[data-mxch-leads-close]', closeLeadsConfirm);
1897 -
1898 - $('#mxch-leads-confirm-go').on('click', function() {
1899 - const emails = leadsState.pendingDelete.slice();
1900 - if (!emails.length) { closeLeadsConfirm(); return; }
1901 -
1902 - const $btn = $(this).prop('disabled', true).text('Deleting...');
1903 -
1904 - $.ajax({
1905 - url: ajaxurl,
1906 - type: 'POST',
1907 - data: {
1908 - action: 'mxchat_delete_leads',
1909 - security: $('#mxchat_leads_delete_nonce').val(),
1910 - emails: emails
1911 - },
1912 - success: function(response) {
1913 - $btn.prop('disabled', false).text('Delete permanently');
1914 - closeLeadsConfirm();
1915 - if (response && response.success) {
1916 - emails.forEach(function(e) { leadsState.selected.delete(e.toLowerCase()); });
1917 - loadLeads(leadsState.page);
1918 - } else {
1919 - alert((response && response.data && response.data.message) || 'Failed to delete leads.');
1920 - }
1921 - },
1922 - error: function() {
1923 - $btn.prop('disabled', false).text('Delete permanently');
1924 - alert('Network error while deleting.');
1925 - }
1926 - });
1927 - });
1928 -
1929 - // Export dropdown
1930 - $('#mxch-leads-export-btn').on('click', function(e) {
1931 - e.stopPropagation();
1932 - $('#mxch-leads-export-menu').toggleClass('is-open');
1933 - });
1934 -
1935 - $(document).on('click', function() {
1936 - $('#mxch-leads-export-menu').removeClass('is-open');
1937 - });
1938 -
1939 - $('#mxch-leads-export-menu').on('click', function(e) { e.stopPropagation(); });
1940 -
1941 - $('#mxch-leads-export-menu button').on('click', function() {
1942 - if ($(this).prop('disabled')) return;
1943 - const scope = $(this).data('scope') || 'all';
1944 - const fields = $(this).data('fields') || 'email_and_name';
1945 - submitLeadsExport(scope, fields);
1946 - $('#mxch-leads-export-menu').removeClass('is-open');
1947 - });
1948 -
1949 - function submitLeadsExport(scope, fields) {
1950 - const $form = $('<form>', { method: 'POST', action: ajaxurl, style: 'display:none;' });
1951 - $form.append($('<input>', { type: 'hidden', name: 'action', value: 'mxchat_export_leads' }));
1952 - $form.append($('<input>', { type: 'hidden', name: 'security', value: $('#mxchat_leads_export_nonce').val() }));
1953 - $form.append($('<input>', { type: 'hidden', name: 'scope', value: scope }));
1954 - $form.append($('<input>', { type: 'hidden', name: 'fields', value: fields }));
1955 - if (scope === 'selected') {
1956 - Array.from(leadsState.selected).forEach(function(e) {
1957 - $form.append($('<input>', { type: 'hidden', name: 'emails[]', value: e }));
1958 - });
1959 - }
1960 - $form.appendTo('body').submit().remove();
1961 - }
1962 -
1963 - // Preload leads metadata on page load (for the nav badge count only) without rendering.
1964 - // We keep this light — the full fetch only runs when the tab is clicked.
1965 - $.ajax({
1966 - url: ajaxurl,
1967 - type: 'POST',
1968 - data: { action: 'mxchat_fetch_leads', page: 1, per_page: 1 },
1969 - success: function(response) {
1970 - if (response && response.success && response.stats) {
1971 - const total = response.stats.total_leads || 0;
1972 - const $badge = $('#mxch-leads-nav-badge');
1973 - if (total > 0) $badge.text(total).show();
1974 - }
1975 - }
1976 988 });
1977 989 });