PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 2.6.3
MxChat – AI Chatbot & Content Generation for WordPress v2.6.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/chat-script.js +892 -1504 3.2.4 → 2.6.3 View file →
@@ -1,228 +1,12 @@
1 1 jQuery(document).ready(function($) {
2 -
3 - // Nonce refresh is deferred until first user interaction (ensureSession)
4 - // to avoid admin-ajax calls on passive page loads.
5 - var nonceRefreshed = false;
6 - function refreshNonceIfNeeded(callback) {
7 - if (nonceRefreshed || typeof mxchatChat === 'undefined' || !mxchatChat.ajax_url) {
8 - if (callback) callback();
9 - return;
10 - }
11 - nonceRefreshed = true;
12 - $.post(mxchatChat.ajax_url, { action: 'mxchat_refresh_nonce' }, function(res) {
13 - if (res && res.success && res.data && res.data.nonce) {
14 - mxchatChat.nonce = res.data.nonce;
15 - }
16 - if (callback) callback();
17 - });
18 - }
19 -
2 +
20 3 // ====================================
21 - // MULTI-INSTANCE MANAGEMENT SYSTEM
22 - // ====================================
23 -
24 - // Instance registry - tracks all chatbot instances on the page
25 - const MxChatInstances = {
26 - instances: {},
27 -
28 - // Initialize an instance for a bot
29 - init: function(botId) {
30 - if (!this.instances[botId]) {
31 - // When persistence is OFF, track when this session started
32 - // so the AI only sees messages from this page load
33 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
34 -
35 - this.instances[botId] = {
36 - botId: botId,
37 - sessionId: null,
38 - lastSeenMessageId: '',
39 - notificationCheckInterval: null,
40 - pollingInterval: null,
41 - processedMessageIds: new Set(),
42 - activePdfFile: null,
43 - activeWordFile: null,
44 - chatHistoryLoaded: false,
45 - isStreaming: false,
46 - // Fresh context timestamp - only used when persistence is OFF
47 - sessionStartTimestamp: chatPersistenceEnabled ? 0 : Date.now()
48 - };
49 - }
50 - return this.instances[botId];
51 - },
52 -
53 - // Get instance by botId
54 - get: function(botId) {
55 - return this.instances[botId] || this.init(botId);
56 - },
57 -
58 - // Get all active bot IDs
59 - getAllBotIds: function() {
60 - return Object.keys(this.instances);
61 - },
62 -
63 - // Session management per bot
64 - // Returns existing session ID from cookie or localStorage (with in-memory fallback),
65 - // or null if none exists. Does NOT create a new session — use ensureSession() for that.
66 - getChatSession: function(botId) {
67 - var cookieName = 'mxchat_session_id_' + botId;
68 - var storageKey = 'mxchat_session_id_' + botId;
69 - var sessionId = getCookie(cookieName);
70 -
71 - // Fallback to localStorage if cookie is missing (e.g. cleared by browser/consent)
72 - if (!sessionId) {
73 - try { sessionId = localStorage.getItem(storageKey); } catch (e) {}
74 - }
75 -
76 - // Fallback to in-memory instance when cookie AND localStorage are both blocked
77 - // (Safari ITP, strict tracking prevention, cross-origin iframes with partitioned
78 - // storage). Without this, ensureSession() can generate and store an ID that
79 - // getChatSession() then can't read back, causing null session_ids on send.
80 - if (!sessionId && this.instances[botId] && this.instances[botId].sessionId) {
81 - sessionId = this.instances[botId].sessionId;
82 - }
83 -
84 - // Guard against stored sentinel values that indicate earlier broken writes.
85 - if (sessionId === 'null' || sessionId === 'undefined') {
86 - sessionId = null;
87 - }
88 -
89 - // Re-sync cookie from localStorage if cookie was lost
90 - if (sessionId && !getCookie(cookieName)) {
91 - document.cookie = cookieName + "=" + sessionId + "; path=/; max-age=86400; SameSite=Lax";
92 - }
93 -
94 - return sessionId || null;
95 - },
96 -
97 - // Lazy session initializer — called on first user interaction
98 - ensureSession: function(botId) {
99 - botId = botId || 'default';
100 - var instance = this.instances[botId] || this.init(botId);
101 -
102 - if (instance.sessionId) {
103 - return instance.sessionId;
104 - }
105 -
106 - // Check for existing session from cookie or localStorage
107 - var existingSession = this.getChatSession(botId);
108 -
109 - if (existingSession) {
110 - instance.sessionId = existingSession;
111 - } else {
112 - // Brand new session
113 - var newId = generateSessionId();
114 - this.setChatSession(botId, newId);
115 - instance.sessionId = newId;
116 - }
117 -
118 - // Now that we have a session, do the deferred work
119 - refreshNonceIfNeeded();
120 - trackOriginatingPage();
121 -
122 - // Note: loadChatHistory is handled by showChatContainerForBot with loader UI,
123 - // so we do NOT call it here to avoid a race condition.
124 -
125 - return instance.sessionId;
126 - },
127 -
128 - setChatSession: function(botId, sessionId) {
129 - var cookieName = 'mxchat_session_id_' + botId;
130 - var storageKey = 'mxchat_session_id_' + botId;
131 - document.cookie = cookieName + "=" + sessionId + "; path=/; max-age=86400; SameSite=Lax";
132 - try { localStorage.setItem(storageKey, sessionId); } catch (e) {}
133 - if (this.instances[botId]) {
134 - this.instances[botId].sessionId = sessionId;
135 - }
136 - },
137 -
138 - resetChatSession: function(botId) {
139 - // Clear old session from localStorage before setting new one
140 - try { localStorage.removeItem('mxchat_session_id_' + botId); } catch (e) {}
141 - var newSessionId = generateSessionId();
142 - this.setChatSession(botId, newSessionId);
143 - var $chatBox = getElement(botId, 'chat-box');
144 - if ($chatBox.length) {
145 - $chatBox.find('.user-message, .bot-message:not(:first), .agent-message').remove();
146 - }
147 - if (this.instances[botId]) {
148 - this.instances[botId].chatHistoryLoaded = false;
149 - this.instances[botId].processedMessageIds = new Set();
150 - }
151 - },
152 -
153 - // Silent reset — new session ID without clearing the chat UI
154 - // Used when IP changes mid-conversation so the user doesn't see messages vanish
155 - silentResetSession: function(botId) {
156 - try { localStorage.removeItem('mxchat_session_id_' + botId); } catch (e) {}
157 - var newSessionId = generateSessionId();
158 - this.setChatSession(botId, newSessionId);
159 - if (this.instances[botId]) {
160 - this.instances[botId].sessionId = newSessionId;
161 - }
162 - return newSessionId;
163 - }
164 - };
165 -
166 - // ====================================
167 - // ELEMENT SELECTOR HELPERS
168 - // ====================================
169 -
170 - // Check if a specific bot has an AI theme assigned (skip inline colors)
171 - function shouldSkipInlineColors(botId) {
172 - // If global AI theme is active, skip inline colors for all bots
173 - if (mxchatChat.skip_inline_colors) {
174 - return true;
175 - }
176 - // Check if this specific bot has a theme assignment
177 - var botAssignments = mxchatChat.bot_theme_assignments || {};
178 - return botAssignments.hasOwnProperty(botId);
179 - }
180 -
181 - // Get element by ID with bot suffix - returns jQuery object
182 - function getElement(botId, elementName) {
183 - return $('#' + elementName + '-' + botId);
184 - }
185 -
186 - // Get element by ID with bot suffix - returns DOM element
187 - function getElementDOM(botId, elementName) {
188 - return document.getElementById(elementName + '-' + botId);
189 - }
190 -
191 - // Get bot ID from any element within a chatbot instance
192 - function getBotIdFromElement(element) {
193 - var $wrapper = $(element).closest('.mxchat-chatbot-wrapper');
194 - if ($wrapper.length) {
195 - return $wrapper.data('bot-id') || 'default';
196 - }
197 - // Fallback: try to find from floating container
198 - var $floating = $(element).closest('.floating-chatbot');
199 - if ($floating.length) {
200 - var id = $floating.attr('id') || '';
201 - var match = id.match(/floating-chatbot-(.+)/);
202 - if (match) return match[1];
203 - }
204 - // Fallback: check if element itself has an ID with bot suffix (e.g., floating-chatbot-button-{bot_id})
205 - var elementId = $(element).attr('id') || '';
206 - if (elementId) {
207 - // Match patterns like: floating-chatbot-button-{bot_id}, pre-chat-message-{bot_id}
208 - var idMatch = elementId.match(/^(?:floating-chatbot-button|pre-chat-message|chat-notification-badge)-(.+)$/);
209 - if (idMatch) return idMatch[1];
210 - }
211 - return 'default';
212 - }
213 -
214 - // Get wrapper element for a bot
215 - function getWrapper(botId) {
216 - return getElement(botId, 'mxchat-chatbot-wrapper');
217 - }
218 -
219 - // ====================================
220 4 // GLOBAL VARIABLES & CONFIGURATION
221 5 // ====================================
222 6 const toolbarIconColor = mxchatChat.toolbar_icon_color || '#212121';
223 -
224 - // Initialize color settings (these are global as they come from PHP)
7 +
8 + // Initialize color settings
225 9 var userMessageBgColor = mxchatChat.user_message_bg_color;
226 10 var userMessageFontColor = mxchatChat.user_message_font_color;
227 11 var botMessageBgColor = mxchatChat.bot_message_bg_color;
228 12 var botMessageFontColor = mxchatChat.bot_message_font_color;
@@ -227,64 +11,61 @@
227 11 var botMessageBgColor = mxchatChat.bot_message_bg_color;
228 12 var botMessageFontColor = mxchatChat.bot_message_font_color;
229 13 var liveAgentMessageBgColor = mxchatChat.live_agent_message_bg_color;
230 14 var liveAgentMessageFontColor = mxchatChat.live_agent_message_font_color;
231 -
15 +
232 16 var linkTarget = mxchatChat.link_target_toggle === 'on' ? '_blank' : '_self';
17 + let lastSeenMessageId = '';
18 + let notificationCheckInterval;
19 + let notificationBadge;
20 + var sessionId = getChatSession();
21 + let pollingInterval;
22 + let processedMessageIds = new Set();
23 + let activePdfFile = null;
24 + let activeWordFile = null;
25 + let chatHistoryLoaded = false;
233 26
234 27 // ====================================
235 - // SESSION MANAGEMENT (Legacy compatibility)
28 + // SESSION MANAGEMENT
236 29 // ====================================
30 +
31 + function getChatSession() {
32 + var sessionId = getCookie('mxchat_session_id');
237 33
34 + if (!sessionId) {
35 + sessionId = generateSessionId();
36 + setChatSession(sessionId);
37 + }
38 +
39 + return sessionId;
40 + }
41 +
42 + function setChatSession(sessionId) {
43 + // Set the cookie with a 24-hour expiration (86400 seconds)
44 + document.cookie = "mxchat_session_id=" + sessionId + "; path=/; max-age=86400; SameSite=Lax";
45 + }
46 +
238 47 function getCookie(name) {
239 48 let value = "; " + document.cookie;
240 49 let parts = value.split("; " + name + "=");
241 50 if (parts.length == 2) return parts.pop().split(";").shift();
242 51 }
243 -
52 +
244 53 function generateSessionId() {
245 54 return 'mxchat_chat_' + Math.random().toString(36).substr(2, 9);
246 55 }
247 56
248 - // Legacy function - now delegates to instance manager
249 - function getChatSession(botId) {
250 - botId = botId || 'default';
251 - return MxChatInstances.getChatSession(botId);
57 + function resetChatSession() {
58 + // Generate a new session ID
59 + var newSessionId = generateSessionId();
60 + // Update the cookie with the new session
61 + setChatSession(newSessionId);
62 + // Clear the chat history display
63 + $('.mxchat-messages').empty();
64 + // Reset the chat history loaded flag
65 + chatHistoryLoaded = false;
252 66 }
253 67
254 - function setChatSession(sessionId, botId) {
255 - botId = botId || 'default';
256 - MxChatInstances.setChatSession(botId, sessionId);
257 - }
258 -
259 - function resetChatSession(botId) {
260 - botId = botId || 'default';
261 - MxChatInstances.resetChatSession(botId);
262 - }
263 -
264 - // ====================================
265 - // INITIALIZE ALL CHATBOT INSTANCES
266 - // ====================================
267 -
268 - function initializeAllInstances() {
269 - // Find all chatbot wrappers on the page
270 - $('.mxchat-chatbot-wrapper').each(function() {
271 - var botId = $(this).data('bot-id') || 'default';
272 - MxChatInstances.init(botId);
273 - initializeBotInstance(botId);
274 - });
275 - }
276 -
277 - function initializeBotInstance(botId) {
278 - var instance = MxChatInstances.get(botId);
279 -
280 - // Initialize quick questions state for this bot
281 - checkQuickQuestionsState(botId);
282 -
283 - // Note: Event handlers use event delegation with class selectors,
284 - // so they work automatically for all instances without per-bot setup
285 - }
286 -
287 68 // ====================================
288 69 // CONTEXTUAL AWARENESS FUNCTIONALITY
289 70 // ====================================
290 71
@@ -431,12 +212,11 @@
431 212 // CORE CHAT FUNCTIONALITY
432 213 // ====================================
433 214
434 215 // Helper functions to disable/enable chat input while waiting for response
435 -function disableChatInput(botId) {
436 - botId = botId || 'default';
437 - var chatInput = getElementDOM(botId, 'chat-input');
438 - var sendButton = getElementDOM(botId, 'send-button');
216 +function disableChatInput() {
217 + var chatInput = document.getElementById('chat-input');
218 + var sendButton = document.getElementById('send-button');
439 219 if (chatInput) {
440 220 chatInput.disabled = true;
441 221 chatInput.style.opacity = '0.6';
442 222 }
@@ -446,12 +226,11 @@
446 226 sendButton.style.pointerEvents = 'none';
447 227 }
448 228 }
449 229
450 -function enableChatInput(botId) {
451 - botId = botId || 'default';
452 - var chatInput = getElementDOM(botId, 'chat-input');
453 - var sendButton = getElementDOM(botId, 'send-button');
230 +function enableChatInput() {
231 + var chatInput = document.getElementById('chat-input');
232 + var sendButton = document.getElementById('send-button');
454 233 if (chatInput) {
455 234 chatInput.disabled = false;
456 235 chatInput.style.opacity = '1';
457 236 chatInput.focus();
@@ -463,13 +242,10 @@
463 242 }
464 243 }
465 244
466 245 // Update your existing sendMessage function
467 -function sendMessage(botId) {
468 - botId = botId || 'default';
469 - MxChatInstances.ensureSession(botId);
470 - var $chatInput = getElement(botId, 'chat-input');
471 - var message = $chatInput.val();
246 +function sendMessage() {
247 + var message = $('#chat-input').val();
472 248
473 249 // ADD PROMPT HOOK HERE
474 250 if (typeof customMxChatFilter === 'function') {
475 251 message = customMxChatFilter(message, "prompt");
@@ -475,77 +251,66 @@
475 251 message = customMxChatFilter(message, "prompt");
476 252 }
477 253
478 254 if (message) {
479 - // Don't disable input in live agent mode - let users chat freely
480 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
481 - var isAgentMode = modeIndicator && modeIndicator.textContent === 'Live Agent';
482 - if (!isAgentMode) {
483 - disableChatInput(botId);
484 - }
255 + // Disable input while waiting for response
256 + disableChatInput();
485 257
486 - appendMessage("user", message, '', [], false, botId);
487 - $chatInput.val('');
488 - $chatInput.css('height', 'auto');
258 + appendMessage("user", message);
259 + $('#chat-input').val('');
260 + $('#chat-input').css('height', 'auto');
489 261
490 - if (hasQuickQuestions(botId)) {
491 - collapseQuickQuestions(botId);
262 + if (hasQuickQuestions()) {
263 + collapseQuickQuestions();
492 264 }
493 - appendThinkingMessage(botId);
494 - scrollToBottom(botId);
265 + appendThinkingMessage();
266 + scrollToBottom();
495 267
496 - const currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
268 + const currentModel = mxchatChat.model || 'gpt-4o';
497 269
498 270 // Check if streaming is enabled AND supported for this model
499 271 if (shouldUseStreaming(currentModel)) {
500 272 callMxChatStream(message, function(response) {
501 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message');
502 - }, botId);
273 + $('.bot-message.temporary-message').removeClass('temporary-message');
274 + });
503 275 } else {
504 276 callMxChat(message, function(response) {
505 - replaceLastMessage("bot", response, '', [], botId);
506 - }, botId);
277 + replaceLastMessage("bot", response);
278 + });
507 279 }
508 280 }
509 281 }
510 282
511 283 // Update your existing sendMessageToChatbot function
512 -function sendMessageToChatbot(message, botId) {
513 - botId = botId || 'default';
514 - MxChatInstances.ensureSession(botId);
515 -
284 +function sendMessageToChatbot(message) {
516 285 // ADD PROMPT HOOK HERE
517 286 if (typeof customMxChatFilter === 'function') {
518 287 message = customMxChatFilter(message, "prompt");
519 288 }
520 289
521 - // Don't disable input in live agent mode - let users chat freely
522 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
523 - var isAgentMode = modeIndicator && modeIndicator.textContent === 'Live Agent';
524 - if (!isAgentMode) {
525 - disableChatInput(botId);
526 - }
290 + // Disable input while waiting for response
291 + disableChatInput();
527 292
528 - var sessionId = getChatSession(botId);
293 + var sessionId = getChatSession();
529 294
530 - if (hasQuickQuestions(botId)) {
531 - collapseQuickQuestions(botId);
295 + if (hasQuickQuestions()) {
296 + collapseQuickQuestions();
532 297 }
533 - appendThinkingMessage(botId);
534 - scrollToBottom(botId);
298 + appendThinkingMessage();
299 + scrollToBottom();
535 300
536 - const currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
301 + const currentModel = mxchatChat.model || 'gpt-4o';
537 302
538 303 // Check if streaming is enabled AND supported for this model
539 304 if (shouldUseStreaming(currentModel)) {
540 305 callMxChatStream(message, function(response) {
541 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message');
542 - }, botId);
306 + $('.bot-message.temporary-message').removeClass('temporary-message');
307 + });
543 308 } else {
544 309 callMxChat(message, function(response) {
545 - getElement(botId, 'chat-box').find('.temporary-message').remove();
546 - replaceLastMessage("bot", response, '', [], botId);
547 - }, botId);
310 + $('.temporary-message').remove();
311 + replaceLastMessage("bot", response);
312 + });
548 313 }
549 314 }
550 315
551 316 // Updated shouldUseStreaming function with debugging
@@ -588,53 +353,33 @@
588 353 updateChatModeIndicator('agent');
589 354 }
590 355 }
591 356
592 -// Function to get bot ID from any element or wrapper
593 -// If element is provided, finds the bot ID from its wrapper
594 -// If no element, returns 'default' (for backward compatibility)
595 -function getMxChatBotId(element) {
596 - if (element) {
597 - return getBotIdFromElement(element);
598 - }
599 - // Fallback: find first chatbot wrapper on page
600 - const chatbotWrapper = document.querySelector('.mxchat-chatbot-wrapper');
357 +//Function to get bot ID from the chatbot wrapper
358 +function getMxChatBotId() {
359 + const chatbotWrapper = document.getElementById('mxchat-chatbot-wrapper');
601 360 return chatbotWrapper ? chatbotWrapper.getAttribute('data-bot-id') || 'default' : 'default';
602 361 }
603 362
604 -function callMxChat(message, callback, botId) {
605 - botId = botId || getMxChatBotId();
606 -
363 +function callMxChat(message, callback) {
607 364 // Store the message in case we need to retry after session reset
608 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', message);
365 + $('.mxchat-input-holder textarea').data('pending-message', message);
609 366
610 367 // Get page context if contextual awareness is enabled
611 368 const pageContext = getPageContext();
612 369
613 - // Get instance for session start timestamp (used when persistence is OFF)
614 - var instance = MxChatInstances.get(botId);
370 + // Get bot ID
371 + const botId = getMxChatBotId();
615 372
616 - // Guarantee a non-null session_id before the AJAX leaves. ensureSession() is idempotent
617 - // and returns the guaranteed-present session id from the in-memory instance even when
618 - // cookie/localStorage writes are silently blocked by the browser.
619 - var sessionId = MxChatInstances.ensureSession(botId);
620 - if (!sessionId || sessionId === 'null' || sessionId === 'undefined') {
621 - // Last-resort generation to ensure we never POST a null marker.
622 - sessionId = generateSessionId();
623 - MxChatInstances.setChatSession(botId, sessionId);
624 - }
625 -
626 373 // Prepare AJAX data
627 374 const ajaxData = {
628 375 action: 'mxchat_handle_chat_request',
629 376 message: message,
630 - session_id: sessionId,
377 + session_id: getChatSession(),
631 378 nonce: mxchatChat.nonce,
632 379 current_page_url: window.location.href,
633 380 current_page_title: document.title,
634 - bot_id: botId,
635 - // Pass session start timestamp so AI context matches what user sees
636 - session_start_timestamp: instance.sessionStartTimestamp || 0
381 + bot_id: botId // Include bot ID
637 382 };
638 383
639 384 // Add page context if available
640 385 if (pageContext) {
@@ -659,14 +404,14 @@
659 404 data: ajaxData,
660 405 success: function(response) {
661 406 // IMMEDIATE CHAT MODE UPDATE - This should be FIRST
662 407 if (response.chat_mode) {
663 - updateChatModeIndicator(response.chat_mode, botId);
408 + updateChatModeIndicator(response.chat_mode);
664 409 }
665 410
666 411 // Also check in data property if response is wrapped
667 412 if (response.data && response.data.chat_mode) {
668 - updateChatModeIndicator(response.data.chat_mode, botId);
413 + updateChatModeIndicator(response.data.chat_mode);
669 414 }
670 415
671 416 // SECURITY FIX: Check for errors FIRST before checking for success
672 417 // This ensures API errors (quota exceeded, invalid key, rate limit) are properly displayed
@@ -690,24 +435,31 @@
690 435 errorMessage = "An error occurred. Please try again or contact support.";
691 436 }
692 437
693 438 // Handle session reset action (IP changed, session expired, etc.)
694 - // Silent reset — keep chat UI intact, just get a new session and retry
695 439 if (response.data && response.data.action === 'reset_session') {
696 - MxChatInstances.silentResetSession(botId);
697 - // Re-send the original message with the new session (user message is already displayed)
698 - var originalMessage = getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message');
440 + // Clear the old session and generate a new one
441 + resetChatSession();
442 + // Remove the temporary loading message
443 + $('.bot-message.temporary-message').remove();
444 + // Re-send the original message with the new session
445 + var originalMessage = $('.mxchat-input-holder textarea').data('pending-message');
699 446 if (originalMessage) {
700 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', null);
701 - var currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
447 + $('.mxchat-input-holder textarea').data('pending-message', null);
448 + // Re-add the user message and thinking indicator
449 + appendMessage("user", originalMessage);
450 + appendThinkingMessage();
451 + scrollToBottom();
452 + // Determine whether to use streaming
453 + const currentModel = mxchatChat.model || 'gpt-4o';
702 454 if (shouldUseStreaming(currentModel)) {
703 455 callMxChatStream(originalMessage, function(response) {
704 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message');
705 - }, botId);
456 + $('.bot-message.temporary-message').removeClass('temporary-message');
457 + });
706 458 } else {
707 459 callMxChat(originalMessage, function(response) {
708 - replaceLastMessage("bot", response, '', [], botId);
709 - }, botId);
460 + replaceLastMessage("bot", response);
461 + });
710 462 }
711 463 }
712 464 return;
713 465 }
@@ -720,9 +472,9 @@
720 472 // For admin users, show more technical details including error code
721 473 displayMessage = errorMessage + (errorCode ? " (Error code: " + errorCode + ")" : "");
722 474 }
723 475
724 - replaceLastMessage("bot", displayMessage, '', [], botId);
476 + replaceLastMessage("bot", displayMessage);
725 477 return; // Exit early for errors
726 478 }
727 479
728 480 // NOW check if this is a successful response by looking for text, html, or message fields
@@ -738,17 +490,16 @@
738 490 let responseMessage = response.message || '';
739 491
740 492 // Add PDF filename handling
741 493 if (response.data && response.data.filename) {
742 - showActivePdf(response.data.filename, botId);
743 - var instance = MxChatInstances.get(botId);
744 - instance.activePdfFile = response.data.filename;
494 + showActivePdf(response.data.filename);
495 + activePdfFile = response.data.filename;
745 496 }
746 497
747 498 // Add redirect check here
748 499 if (response.redirect_url) {
749 500 if (responseText) {
750 - replaceLastMessage("bot", responseText, '', [], botId);
501 + replaceLastMessage("bot", responseText);
751 502 }
752 503 setTimeout(() => {
753 504 window.location.href = response.redirect_url;
754 505 }, 1500);
@@ -756,11 +507,9 @@
756 507 }
757 508
758 509 // Check for live agent response
759 510 if (response.success && response.data && response.data.status === 'waiting_for_agent') {
760 - removeThinkingDots(botId);
761 - updateChatModeIndicator('agent', botId);
762 - enableChatInput(botId);
511 + updateChatModeIndicator('agent');
763 512 return;
764 513 }
765 514
766 515 // Handle the message and show notification if chat is hidden
@@ -775,36 +524,30 @@
775 524 }
776 525
777 526 // Update the messages as before
778 527 if (responseText && responseHtml) {
779 - replaceLastMessage("bot", responseText, responseHtml, [], botId);
528 + replaceLastMessage("bot", responseText, responseHtml);
780 529 } else if (responseText) {
781 - replaceLastMessage("bot", responseText, '', [], botId);
530 + replaceLastMessage("bot", responseText);
782 531 } else if (responseHtml) {
783 - replaceLastMessage("bot", "", responseHtml, [], botId);
532 + replaceLastMessage("bot", "", responseHtml);
784 533 } else if (responseMessage) {
785 - replaceLastMessage("bot", responseMessage, '', [], botId);
534 + replaceLastMessage("bot", responseMessage);
786 535 }
787 536
788 537 // Check if chat is hidden and show notification
789 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
790 - if ($floatingChatbot.hasClass('hidden')) {
791 - var $badge = getElement(botId, 'chat-notification-badge');
792 - if ($badge.length) {
793 - $badge.show();
538 + if ($('#floating-chatbot').hasClass('hidden')) {
539 + const badge = $('#chat-notification-badge');
540 + if (badge.length) {
541 + badge.show();
794 542 }
795 543 }
796 544 } else {
797 - var emptyMsg = "I received an empty response. Please try again or contact support if this persists.";
798 - if (response.vectorstore_error) {
799 - emptyMsg = "I received an empty response. Debug info: " + response.vectorstore_error;
800 - }
801 - replaceLastMessage("bot", emptyMsg, '', [], botId);
545 + replaceLastMessage("bot", "I received an empty response. Please try again or contact support if this persists.");
802 546 }
803 547
804 548 if (response.message_id) {
805 - var instance = MxChatInstances.get(botId);
806 - instance.lastSeenMessageId = response.message_id;
549 + lastSeenMessageId = response.message_id;
807 550 }
808 551
809 552 return;
810 553 }
@@ -809,9 +552,9 @@
809 552 return;
810 553 }
811 554
812 555 // Fallback for truly unexpected response formats
813 - replaceLastMessage("bot", "Unexpected response format. Please try again or contact support.", '', [], botId);
556 + replaceLastMessage("bot", "Unexpected response format. Please try again or contact support.");
814 557 },
815 558 error: function(xhr, status, error) {
816 559 let errorMessage = "An unexpected error occurred.";
817 560
@@ -838,52 +581,38 @@
838 581 errorMessage = "Server error: The server encountered an issue. Please try again later.";
839 582 }
840 583 }
841 584
842 - replaceLastMessage("bot", errorMessage, '', [], botId);
585 + replaceLastMessage("bot", errorMessage);
843 586 }
844 587 });
845 588 }
846 589
847 -function callMxChatStream(message, callback, botId) {
848 - botId = botId || getMxChatBotId();
849 -
590 +function callMxChatStream(message, callback) {
850 591 // Store the message in case we need to retry after session reset
851 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', message);
592 + $('.mxchat-input-holder textarea').data('pending-message', message);
852 593
853 - const currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
594 + const currentModel = mxchatChat.model || 'gpt-4o';
854 595 if (!isStreamingSupported(currentModel)) {
855 - callMxChat(message, callback, botId);
596 + callMxChat(message, callback);
856 597 return;
857 598 }
858 599
859 600 // Get page context if contextual awareness is enabled
860 601 const pageContext = getPageContext();
602 +
603 + // Get bot ID
604 + const botId = getMxChatBotId();
861 605
862 - // Get instance for session start timestamp (used when persistence is OFF)
863 - var instance = MxChatInstances.get(botId);
864 -
865 - // Guarantee a non-null session_id before the fetch. FormData.append() stringifies any
866 - // non-string value via String(), so passing `null` would POST the literal string "null"
867 - // and land in the transcripts table as a ghost session. ensureSession() always returns
868 - // a real string even when cookies/localStorage are blocked.
869 - var streamSessionId = MxChatInstances.ensureSession(botId);
870 - if (!streamSessionId || streamSessionId === 'null' || streamSessionId === 'undefined') {
871 - streamSessionId = generateSessionId();
872 - MxChatInstances.setChatSession(botId, streamSessionId);
873 - }
874 -
875 606 const formData = new FormData();
876 607 formData.append('action', 'mxchat_stream_chat');
877 608 formData.append('message', message);
878 - formData.append('session_id', streamSessionId);
609 + formData.append('session_id', getChatSession());
879 610 formData.append('nonce', mxchatChat.nonce);
880 611 formData.append('current_page_url', window.location.href);
881 612 formData.append('current_page_title', document.title);
882 - formData.append('bot_id', botId);
883 - // Pass session start timestamp so AI context matches what user sees
884 - formData.append('session_start_timestamp', instance.sessionStartTimestamp || 0);
885 -
613 + formData.append('bot_id', botId); // Include bot ID
614 +
886 615 // Add page context if available
887 616 if (pageContext) {
888 617 formData.append('page_context', JSON.stringify(pageContext));
889 618 }
@@ -926,9 +655,9 @@
926 655 if (contentType && contentType.includes('application/json')) {
927 656 return responseClone.json().then(data => {
928 657 // IMMEDIATE CHAT MODE UPDATE for JSON response
929 658 if (data.chat_mode) {
930 - updateChatModeIndicator(data.chat_mode, botId);
659 + updateChatModeIndicator(data.chat_mode);
931 660 }
932 661
933 662 // Check for testing panel
934 663 if (window.mxchatTestPanelInstance && data.testing_data) {
@@ -935,9 +664,9 @@
935 664 window.mxchatTestPanelInstance.handleTestingData(data.testing_data);
936 665 }
937 666
938 667 // Handle the JSON response directly
939 - handleNonStreamResponse(data, callback, botId);
668 + handleNonStreamResponse(data, callback);
940 669 return Promise.resolve(); // Prevent further processing
941 670 });
942 671 }
943 672
@@ -955,37 +684,26 @@
955 684 responseClone.text().then(text => {
956 685 try {
957 686 const data = JSON.parse(text);
958 687 if (data.text || data.message || data.html) {
959 - handleNonStreamResponse(data, callback, botId);
688 + handleNonStreamResponse(data, callback);
960 689 } else {
961 690 // No valid data, fall back to regular call
962 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
963 - callMxChat(message, callback, botId);
691 + $('.bot-message.temporary-message').remove();
692 + callMxChat(message, callback);
964 693 }
965 694 } catch (e) {
966 695 // Could not parse, fall back to regular call
967 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
968 - callMxChat(message, callback, botId);
696 + $('.bot-message.temporary-message').remove();
697 + callMxChat(message, callback);
969 698 }
970 699 }).catch(() => {
971 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
972 - callMxChat(message, callback, botId);
700 + $('.bot-message.temporary-message').remove();
701 + callMxChat(message, callback);
973 702 });
974 703 return;
975 704 }
976 -
977 - // Re-enable chat input when stream ends with content
978 - enableChatInput(botId);
979 -
980 - // Scroll the user's last message to the top now that the
981 - // bot's full reply has rendered (gives max reading room).
982 - var $chatBoxDone = getElement(botId, 'chat-box');
983 - var $lastUserMsgDone = $chatBoxDone.find('.user-message').last();
984 - if ($lastUserMsgDone.length) {
985 - scrollElementToTop($lastUserMsgDone, botId);
986 - }
987 -
705 +
988 706 if (callback) {
989 707 callback(accumulatedContent);
990 708 }
991 709 return;
@@ -1000,24 +718,16 @@
1000 718 const data = line.substring(6);
1001 719
1002 720 if (data === '[DONE]') {
1003 721 if (!accumulatedContent) {
1004 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1005 - callMxChat(message, callback, botId);
722 + $('.bot-message.temporary-message').remove();
723 + callMxChat(message, callback);
1006 724 return;
1007 725 }
1008 726
1009 727 // Re-enable chat input after streaming completes
1010 - enableChatInput(botId);
728 + enableChatInput();
1011 729
1012 - // Scroll the user's last message to the top now
1013 - // that the bot's full reply has rendered.
1014 - var $chatBoxStreamDone = getElement(botId, 'chat-box');
1015 - var $lastUserMsgStreamDone = $chatBoxStreamDone.find('.user-message').last();
1016 - if ($lastUserMsgStreamDone.length) {
1017 - scrollElementToTop($lastUserMsgStreamDone, botId);
1018 - }
1019 -
1020 730 if (callback) {
1021 731 callback(accumulatedContent);
1022 732 }
1023 733 return;
@@ -1027,9 +737,9 @@
1027 737 const json = JSON.parse(data);
1028 738
1029 739 // IMMEDIATE CHAT MODE UPDATE FOR STREAMING
1030 740 if (json.chat_mode) {
1031 - updateChatModeIndicator(json.chat_mode, botId);
741 + updateChatModeIndicator(json.chat_mode);
1032 742 }
1033 743
1034 744 // Handle testing data
1035 745 if (json.testing_data && !testingDataReceived) {
@@ -1041,13 +751,13 @@
1041 751 // Handle content streaming
1042 752 else if (json.content) {
1043 753 streamingStarted = true;
1044 754 accumulatedContent += json.content;
1045 - updateStreamingMessage(accumulatedContent, botId);
755 + updateStreamingMessage(accumulatedContent);
1046 756 }
1047 757 // Handle complete response in stream (fallback response)
1048 758 else if (json.text || json.message || json.html) {
1049 - handleNonStreamResponse(json, callback, botId);
759 + handleNonStreamResponse(json, callback);
1050 760 return;
1051 761 }
1052 762 // Handle errors
1053 763 else if (json.error) {
@@ -1056,12 +766,12 @@
1056 766 let errorMessage = json.error_message || json.message || json.text ||
1057 767 (typeof json.error === 'string' ? json.error : 'An error occurred. Please try again.');
1058 768
1059 769 // Re-enable chat input on error
1060 - enableChatInput(botId);
770 + enableChatInput();
1061 771
1062 772 // Display the error directly in the chat
1063 - replaceLastMessage("bot", errorMessage, '', [], botId);
773 + replaceLastMessage("bot", errorMessage);
1064 774
1065 775 if (callback) {
1066 776 callback(errorMessage);
1067 777 }
@@ -1074,10 +784,10 @@
1074 784 }
1075 785
1076 786 processStream();
1077 787 }).catch(streamError => {
1078 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1079 - callMxChat(message, callback, botId);
788 + $('.bot-message.temporary-message').remove();
789 + callMxChat(message, callback);
1080 790 });
1081 791 }
1082 792
1083 793 processStream();
@@ -1086,32 +796,30 @@
1086 796 // Check if we have server error data with chat mode
1087 797 if (error && error.isServerError && error.data) {
1088 798 // Check for chat mode in error data
1089 799 if (error.data.chat_mode) {
1090 - updateChatModeIndicator(error.data.chat_mode, botId);
800 + updateChatModeIndicator(error.data.chat_mode);
1091 801 }
1092 802
1093 - handleNonStreamResponse(error.data, callback, botId);
803 + handleNonStreamResponse(error.data, callback);
1094 804 } else {
1095 805 // Only fall back to regular call if we don't have any response data
1096 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1097 - callMxChat(message, callback, botId);
806 + $('.bot-message.temporary-message').remove();
807 + callMxChat(message, callback);
1098 808 }
1099 809 });
1100 810 }
1101 811
1102 812 // Helper function to handle non-streaming responses
1103 -function handleNonStreamResponse(data, callback, botId) {
1104 - botId = botId || 'default';
1105 -
813 +function handleNonStreamResponse(data, callback) {
1106 814 // IMMEDIATE CHAT MODE UPDATE FOR NON-STREAMING RESPONSES
1107 815 if (data.chat_mode) {
1108 - updateChatModeIndicator(data.chat_mode, botId);
816 + updateChatModeIndicator(data.chat_mode);
1109 817 }
1110 818
1111 819 // Also check in data property if response is wrapped
1112 820 if (data.data && data.data.chat_mode) {
1113 - updateChatModeIndicator(data.data.chat_mode, botId);
821 + updateChatModeIndicator(data.data.chat_mode);
1114 822 }
1115 823
1116 824 // NOTE: Don't remove temporary message here - let replaceLastMessage handle it
1117 825 // This prevents a visual gap between thinking dots disappearing and content appearing
@@ -1136,20 +844,25 @@
1136 844 errorMessage = "An error occurred. Please try again or contact support.";
1137 845 }
1138 846
1139 847 // Handle session reset action (IP changed, session expired, etc.)
1140 - // Silent reset — keep chat UI intact, just get a new session and retry
1141 848 if (data.data && data.data.action === 'reset_session') {
1142 - MxChatInstances.silentResetSession(botId);
1143 - // Re-send the original message with the new session (user message is already displayed)
1144 - var originalMessage = getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message');
849 + // Clear the old session and generate a new one
850 + resetChatSession();
851 + // Re-send the original message with the new session
852 + var originalMessage = $('.mxchat-input-holder textarea').data('pending-message');
1145 853 if (originalMessage) {
1146 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', null);
1147 - var currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
854 + $('.mxchat-input-holder textarea').data('pending-message', null);
855 + // Re-add the user message and thinking indicator
856 + appendMessage("user", originalMessage);
857 + appendThinkingMessage();
858 + scrollToBottom();
859 + // Determine whether to use streaming
860 + const currentModel = mxchatChat.model || 'gpt-4o';
1148 861 if (shouldUseStreaming(currentModel)) {
1149 - callMxChatStream(originalMessage, callback, botId);
862 + callMxChatStream(originalMessage, callback);
1150 863 } else {
1151 - callMxChat(originalMessage, callback, botId);
864 + callMxChat(originalMessage, callback);
1152 865 }
1153 866 }
1154 867 return;
1155 868 }
@@ -1159,9 +872,9 @@
1159 872 if (mxchatChat.is_admin) {
1160 873 displayMessage = errorMessage + (errorCode ? " (Error code: " + errorCode + ")" : "");
1161 874 }
1162 875
1163 - replaceLastMessage("bot", displayMessage, '', [], botId);
876 + replaceLastMessage("bot", displayMessage);
1164 877
1165 878 if (callback) {
1166 879 callback('');
1167 880 }
@@ -1167,22 +880,8 @@
1167 880 }
1168 881 return; // Exit early for errors
1169 882 }
1170 883
1171 - // Check for live agent response
1172 - if (data.success && data.data && data.data.status === 'waiting_for_agent') {
1173 - removeThinkingDots(botId);
1174 - // Also remove any leftover bot-message that lost its temporary-message class
1175 - var $chatBox = getElement(botId, 'chat-box');
1176 - $chatBox.find('.bot-message .thinking-dots').closest('.bot-message').remove();
1177 - updateChatModeIndicator('agent', botId);
1178 - enableChatInput(botId);
1179 - if (callback) {
1180 - callback('');
1181 - }
1182 - return;
1183 - }
1184 -
1185 884 // Handle different response formats
1186 885 if (data.text || data.html || data.message) {
1187 886
1188 887 // Apply response hooks
@@ -1194,23 +893,22 @@
1194 893 }
1195 894
1196 895 // Display the response
1197 896 if (data.text && data.html) {
1198 - replaceLastMessage("bot", data.text, data.html, [], botId);
897 + replaceLastMessage("bot", data.text, data.html);
1199 898 } else if (data.text) {
1200 - replaceLastMessage("bot", data.text, '', [], botId);
899 + replaceLastMessage("bot", data.text);
1201 900 } else if (data.html) {
1202 - replaceLastMessage("bot", "", data.html, [], botId);
901 + replaceLastMessage("bot", "", data.html);
1203 902 } else if (data.message) {
1204 - replaceLastMessage("bot", data.message, '', [], botId);
903 + replaceLastMessage("bot", data.message);
1205 904 }
1206 905 }
1207 906
1208 907 // Handle other response properties
1209 908 if (data.data && data.data.filename) {
1210 - showActivePdf(data.data.filename, botId);
1211 - var instance = MxChatInstances.get(botId);
1212 - instance.activePdfFile = data.data.filename;
909 + showActivePdf(data.data.filename);
910 + activePdfFile = data.data.filename;
1213 911 }
1214 912
1215 913 if (data.redirect_url) {
1216 914 setTimeout(() => {
@@ -1218,9 +916,9 @@
1218 916 }, 1500);
1219 917 }
1220 918
1221 919 // Ensure chat input is re-enabled (safety net for edge cases)
1222 - enableChatInput(botId);
920 + enableChatInput();
1223 921
1224 922 if (callback) {
1225 923 callback(data.text || data.message || '');
1226 924 }
@@ -1226,22 +924,21 @@
1226 924 }
1227 925 }
1228 926
1229 927 // Enhanced updateChatModeIndicator function for immediate DOM updates
1230 -function updateChatModeIndicator(mode, botId) {
1231 - botId = botId || 'default';
1232 - const indicator = getElementDOM(botId, 'chat-mode-indicator');
928 +function updateChatModeIndicator(mode) {
929 + const indicator = document.getElementById('chat-mode-indicator');
1233 930 if (indicator) {
1234 931 const oldText = indicator.textContent;
1235 932
1236 933 if (mode === 'agent') {
1237 934 indicator.textContent = 'Live Agent';
1238 - startPolling(botId);
935 + startPolling();
1239 936 } else {
1240 937 // Everything else is AI mode
1241 938 const customAiText = indicator.getAttribute('data-ai-text') || 'AI Agent';
1242 939 indicator.textContent = customAiText;
1243 - stopPolling(botId);
940 + stopPolling();
1244 941 }
1245 942
1246 943 // Force immediate DOM update and reflow
1247 944 if (oldText !== indicator.textContent) {
@@ -1263,21 +960,18 @@
1263 960 }
1264 961 }
1265 962
1266 963 // Function to update message during streaming
1267 -function updateStreamingMessage(content, botId) {
1268 - botId = botId || 'default';
1269 -
964 +function updateStreamingMessage(content) {
1270 965 // ADD RESPONSE HOOK FOR REAL-TIME STREAMING
1271 966 if (typeof customMxChatFilter === 'function') {
1272 967 content = customMxChatFilter(content, "response");
1273 968 }
1274 -
969 +
1275 970 const formattedContent = linkify(content);
1276 971
1277 - // Find the temporary message in this bot's chat box
1278 - var $chatBox = getElement(botId, 'chat-box');
1279 - const tempMessage = $chatBox.find('.bot-message.temporary-message').last();
972 + // Find the temporary message
973 + const tempMessage = $('.bot-message.temporary-message').last();
1280 974
1281 975 if (tempMessage.length) {
1282 976 // Update existing message
1283 977 tempMessage.html(formattedContent);
@@ -1282,9 +976,9 @@
1282 976 // Update existing message
1283 977 tempMessage.html(formattedContent);
1284 978 } else {
1285 979 // Create new temporary message if it doesn't exist
1286 - appendMessage("bot", content, '', [], true, botId);
980 + appendMessage("bot", content, '', [], true);
1287 981 }
1288 982 }
1289 983
1290 984 function isStreamingSupported(model) {
@@ -1303,33 +997,24 @@
1303 997 return isSupported;
1304 998 }
1305 999
1306 1000 // Update the event handlers to use the correct function names (using event delegation)
1307 -// Use class-based selectors for multi-instance support
1308 -$(document).on('click', '.send-button', function() {
1309 - var botId = getBotIdFromElement(this);
1310 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
1311 - if (!(modeIndicator && modeIndicator.textContent === 'Live Agent')) {
1312 - disableChatInput(botId);
1313 - }
1314 - sendMessage(botId);
1001 +$(document).on('click', '#send-button', function() {
1002 + disableChatInput();
1003 + sendMessage();
1315 1004 });
1316 1005
1317 1006 // Override enter key handler (using event delegation)
1318 -$(document).on('keypress', '.chat-input', function(e) {
1007 +$(document).on('keypress', '#chat-input', function(e) {
1319 1008 if (e.which == 13 && !e.shiftKey) {
1320 1009 e.preventDefault();
1321 - var botId = getBotIdFromElement(this);
1322 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
1323 - if (!(modeIndicator && modeIndicator.textContent === 'Live Agent')) {
1324 - disableChatInput(botId);
1325 - }
1326 - sendMessage(botId);
1010 + disableChatInput();
1011 + sendMessage();
1327 1012 }
1328 1013 });
1329 1014
1330 1015
1331 -function appendMessage(sender, messageText = '', messageHtml = '', images = [], isTemporary = false, botId = 'default') {
1016 +function appendMessage(sender, messageText = '', messageHtml = '', images = [], isTemporary = false) {
1332 1017 try {
1333 1018 // Determine styles based on sender type
1334 1019 let messageClass, bgColor, fontColor;
1335 1020
@@ -1350,29 +1035,25 @@
1350 1035 }
1351 1036
1352 1037 const messageDiv = $('<div>')
1353 1038 .addClass(messageClass)
1354 - .attr('dir', 'auto');
1355 -
1356 - // Only apply inline colors if AI theme is not active (let CSS handle it)
1357 - var skipColors = shouldSkipInlineColors(botId);
1358 - if (skipColors) {
1359 - messageDiv.css({
1360 - 'margin-bottom': '1em'
1361 - });
1362 - } else {
1363 - messageDiv.css({
1039 + .attr('dir', 'auto')
1040 + .css({
1364 1041 'background': bgColor,
1365 1042 'color': fontColor,
1366 1043 'margin-bottom': '1em'
1367 1044 });
1045 +
1046 + // Process the message content based on sender
1047 + let fullMessage;
1048 + if (sender === "user") {
1049 + // For user messages, apply linkify after sanitization
1050 + fullMessage = linkify(messageText);
1051 + } else {
1052 + // For bot/agent messages, preserve HTML
1053 + fullMessage = messageText;
1368 1054 }
1369 1055
1370 - // Process the message content - always run linkify to convert markdown
1371 - // links and format text. linkify() handles existing HTML safely via
1372 - // negative lookaheads that skip URLs already inside <a> tags.
1373 - let fullMessage = linkify(messageText);
1374 -
1375 1056 // Add images if provided
1376 1057 if (images && images.length > 0) {
1377 1058 fullMessage += '<div class="image-gallery" dir="auto">';
1378 1059 images.forEach(img => {
@@ -1378,9 +1059,9 @@
1378 1059 images.forEach(img => {
1379 1060 const safeTitle = sanitizeUserInput(img.title);
1380 1061 const safeUrl = encodeURI(img.image_url);
1381 1062 const safeThumbnail = encodeURI(img.thumbnail_url);
1382 -
1063 +
1383 1064 fullMessage += `
1384 1065 <div style="margin-bottom: 10px;">
1385 1066 <strong>${safeTitle}</strong><br>
1386 1067 <a href="${safeUrl}" target="_blank">
@@ -1406,28 +1087,25 @@
1406 1087 if (isTemporary) {
1407 1088 messageDiv.addClass('temporary-message');
1408 1089 }
1409 1090
1410 - // Append to the correct chatbot instance's chat-box
1411 - var $chatBox = getElement(botId, 'chat-box');
1412 - messageDiv.hide().appendTo($chatBox).fadeIn(300, function() {
1091 + messageDiv.hide().appendTo('#chat-box').fadeIn(300, function() {
1413 1092 // FIXED: Use event delegation for link tracking
1414 1093 if (sender === "bot" || sender === "agent") {
1415 - attachLinkTracking(messageDiv, messageText, botId);
1094 + attachLinkTracking(messageDiv, messageText);
1416 1095 }
1417 -
1096 +
1418 1097 if (sender === "bot") {
1419 - const lastUserMessage = $chatBox.find('.user-message').last();
1098 + const lastUserMessage = $('#chat-box').find('.user-message').last();
1420 1099 if (lastUserMessage.length) {
1421 - scrollElementToTop(lastUserMessage, botId);
1100 + scrollElementToTop(lastUserMessage);
1422 1101 }
1423 1102 }
1424 1103 });
1425 1104
1426 1105 if (messageText.id) {
1427 - var instance = MxChatInstances.get(botId);
1428 - instance.lastSeenMessageId = messageText.id;
1429 - hideNotification(botId);
1106 + lastSeenMessageId = messageText.id;
1107 + hideNotification();
1430 1108 }
1431 1109 } catch (error) {
1432 1110 // Error rendering message - silently continue
1433 1111 }
@@ -1433,35 +1111,34 @@
1433 1111 }
1434 1112 }
1435 1113
1436 1114 // Helper function to attach link tracking with proper event handling
1437 -function attachLinkTracking(messageDiv, messageText, botId) {
1438 - botId = botId || 'default';
1115 +function attachLinkTracking(messageDiv, messageText) {
1439 1116 // Use a slight delay to ensure DOM is ready
1440 1117 setTimeout(function() {
1441 1118 const links = messageDiv.find('a[href]').not('[data-tracked]');
1442 -
1119 +
1443 1120 links.each(function() {
1444 1121 const $link = $(this);
1445 1122 const originalHref = $link.attr('href');
1446 -
1123 +
1447 1124 // Mark as tracked to avoid duplicate handlers
1448 1125 $link.attr('data-tracked', 'true');
1449 -
1126 +
1450 1127 // Only track external URLs
1451 1128 if (originalHref && (originalHref.startsWith('http://') || originalHref.startsWith('https://'))) {
1452 1129 // Remove any existing click handlers first
1453 1130 $link.off('click.tracking');
1454 -
1131 +
1455 1132 // Add new click handler with namespace
1456 1133 $link.on('click.tracking', function(e) {
1457 1134 e.preventDefault();
1458 1135 e.stopPropagation();
1459 -
1460 - const messageContext = typeof messageText === 'string'
1461 - ? messageText.substring(0, 200)
1136 +
1137 + const messageContext = typeof messageText === 'string'
1138 + ? messageText.substring(0, 200)
1462 1139 : '';
1463 -
1140 +
1464 1141 // Track the click
1465 1142 $.ajax({
1466 1143 url: mxchatChat.ajax_url,
1467 1144 type: 'POST',
@@ -1466,9 +1143,9 @@
1466 1143 url: mxchatChat.ajax_url,
1467 1144 type: 'POST',
1468 1145 data: {
1469 1146 action: 'mxchat_track_url_click',
1470 - session_id: getChatSession(botId),
1147 + session_id: getChatSession(),
1471 1148 url: originalHref,
1472 1149 message_context: messageContext,
1473 1150 nonce: mxchatChat.nonce
1474 1151 },
@@ -1480,9 +1157,9 @@
1480 1157 window.location.href = originalHref;
1481 1158 }
1482 1159 }
1483 1160 });
1484 -
1161 +
1485 1162 return false; // Extra insurance to prevent default
1486 1163 });
1487 1164 }
1488 1165 });
@@ -1488,12 +1165,11 @@
1488 1165 });
1489 1166 }, 100); // Small delay to ensure DOM is ready
1490 1167 }
1491 1168
1492 -function replaceLastMessage(sender, responseText, responseHtml = '', images = [], botId = 'default') {
1169 +function replaceLastMessage(sender, responseText, responseHtml = '', images = []) {
1493 1170 var messageClass = sender === "user" ? "user-message" : sender === "agent" ? "agent-message" : "bot-message";
1494 - var $chatBox = getElement(botId, 'chat-box');
1495 - var lastMessageDiv = $chatBox.find('.bot-message.temporary-message, .agent-message.temporary-message').last();
1171 + var lastMessageDiv = $('#chat-box').find('.bot-message.temporary-message, .agent-message.temporary-message').last();
1496 1172
1497 1173 // Determine styles
1498 1174 let bgColor, fontColor;
1499 1175 if (sender === "user") {
@@ -1506,13 +1182,27 @@
1506 1182 bgColor = botMessageBgColor;
1507 1183 fontColor = botMessageFontColor;
1508 1184 }
1509 1185
1510 - // Always run linkify to convert markdown links and format text.
1511 - // linkify() already handles existing HTML (its URL patterns use negative lookaheads
1512 - // to avoid double-processing URLs that are already inside <a> tags).
1513 - var fullMessage = linkify(responseText);
1514 -
1186 + // FIXED: Only linkify if response doesn't already contain HTML links or tags
1187 + // This prevents double-processing of URLs that are already formatted as HTML
1188 + var fullMessage;
1189 + if (sender === "user") {
1190 + // Always linkify user messages (they're plain text)
1191 + fullMessage = linkify(responseText);
1192 + } else {
1193 + // For bot/agent messages, check if HTML already exists
1194 + if (responseText.includes('<a href=') || responseText.includes('</a>') ||
1195 + responseText.includes('<img') || responseText.includes('<div') ||
1196 + responseText.includes('<p>') || responseText.includes('<br>')) {
1197 + // Response already has HTML, don't process it
1198 + fullMessage = responseText;
1199 + } else {
1200 + // Plain text response, apply linkify
1201 + fullMessage = linkify(responseText);
1202 + }
1203 + }
1204 +
1515 1205 if (responseHtml) {
1516 1206 // Only add line breaks if there's actual text content before the HTML
1517 1207 if (fullMessage && fullMessage.trim()) {
1518 1208 fullMessage += '<br><br>' + responseHtml;
@@ -1540,87 +1230,62 @@
1540 1230 lastMessageDiv
1541 1231 .html(fullMessage)
1542 1232 .removeClass('bot-message user-message temporary-message')
1543 1233 .addClass(messageClass)
1544 - .attr('dir', 'auto');
1545 -
1546 - // Only apply inline colors if AI theme is not active (let CSS handle it)
1547 - var skipColors = mxchatChat.skip_inline_colors || shouldSkipInlineColors(botId);
1548 - if (!skipColors) {
1549 - lastMessageDiv.css({
1234 + .attr('dir', 'auto')
1235 + .css({
1550 1236 'background-color': bgColor,
1551 1237 'color': fontColor,
1552 1238 });
1553 - }
1554 1239
1555 1240 // Handle link tracking and scroll
1556 1241 if (sender === "bot" || sender === "agent") {
1557 - attachLinkTracking(lastMessageDiv, responseText, botId);
1242 + attachLinkTracking(lastMessageDiv, responseText);
1558 1243
1559 - const lastUserMessage = $chatBox.find('.user-message').last();
1244 + const lastUserMessage = $('#chat-box').find('.user-message').last();
1560 1245 if (lastUserMessage.length) {
1561 - scrollElementToTop(lastUserMessage, botId);
1246 + scrollElementToTop(lastUserMessage);
1562 1247 }
1563 1248 // Show notification if chat is hidden
1564 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
1565 - if ($floatingChatbot.hasClass('hidden')) {
1566 - showNotification(botId);
1249 + if ($('#floating-chatbot').hasClass('hidden')) {
1250 + showNotification();
1567 1251 }
1568 1252 }
1569 1253
1570 1254 // Re-enable chat input after response is displayed
1571 - enableChatInput(botId);
1255 + enableChatInput();
1572 1256 } else {
1573 - appendMessage(sender, responseText, responseHtml, images, false, botId);
1257 + appendMessage(sender, responseText, responseHtml, images);
1574 1258 // Re-enable chat input after response is displayed
1575 - enableChatInput(botId);
1259 + enableChatInput();
1576 1260 }
1577 1261 }
1578 1262
1579 1263
1580 - function appendThinkingMessage(botId) {
1581 - botId = botId || 'default';
1264 + function appendThinkingMessage() {
1265 + // Remove any existing thinking dots first
1266 + $('.thinking-dots').remove();
1582 1267
1583 - // Don't show thinking dots in live agent mode - message is just forwarded to a human
1584 - var indicator = getElementDOM(botId, 'chat-mode-indicator');
1585 - if (indicator && indicator.textContent === 'Live Agent') {
1586 - return;
1587 - }
1588 -
1589 - var $chatBox = getElement(botId, 'chat-box');
1590 -
1591 - // Remove any existing thinking dots in this bot's chat first
1592 - $chatBox.find('.thinking-dots').remove();
1593 -
1594 - // Check if we should skip inline colors (AI theme is active)
1595 - var skipColors = shouldSkipInlineColors(botId);
1596 -
1597 1268 // Retrieve the bot message font color and background color
1598 1269 var botMessageFontColor = mxchatChat.bot_message_font_color;
1599 1270 var botMessageBgColor = mxchatChat.bot_message_bg_color;
1600 1271
1601 - // Build thinking dots HTML - skip inline colors if AI theme is active
1602 - var dotStyle = skipColors ? '' : ' style="background-color: ' + botMessageFontColor + ';"';
1272 +
1603 1273 var thinkingHtml = '<div class="thinking-dots-container">' +
1604 1274 '<div class="thinking-dots">' +
1605 - '<span class="dot"' + dotStyle + '></span>' +
1606 - '<span class="dot"' + dotStyle + '></span>' +
1607 - '<span class="dot"' + dotStyle + '></span>' +
1275 + '<span class="dot" style="background-color: ' + botMessageFontColor + ';"></span>' +
1276 + '<span class="dot" style="background-color: ' + botMessageFontColor + ';"></span>' +
1277 + '<span class="dot" style="background-color: ' + botMessageFontColor + ';"></span>' +
1608 1278 '</div>' +
1609 1279 '</div>';
1610 1280
1611 - // Append the thinking dots to this bot's chat container - skip inline colors if AI theme is active
1612 - var messageStyle = skipColors ? '' : ' style="background-color: ' + botMessageBgColor + '; color: ' + botMessageFontColor + ';"';
1613 - $chatBox.append('<div class="bot-message temporary-message"' + messageStyle + '>' + thinkingHtml + '</div>');
1614 - scrollToBottom(botId);
1281 + // Append the thinking dots to the chat container (or within the temporary message div)
1282 + $("#chat-box").append('<div class="bot-message temporary-message" style="background-color: ' + botMessageBgColor + ';">' + thinkingHtml + '</div>');
1283 + scrollToBottom();
1615 1284 }
1616 -
1617 - function removeThinkingDots(botId) {
1618 - botId = botId || 'default';
1619 - var $chatBox = getElement(botId, 'chat-box');
1620 - // Remove by temporary-message class first, then fall back to any bot-message containing thinking dots
1621 - $chatBox.find('.thinking-dots').closest('.temporary-message').remove();
1622 - $chatBox.find('.bot-message .thinking-dots').closest('.bot-message').remove();
1285 +
1286 + function removeThinkingDots() {
1287 + $('.thinking-dots').closest('.temporary-message').remove();
1623 1288 }
1624 1289
1625 1290 // ====================================
1626 1291 // TEXT FORMATTING & PROCESSING
@@ -1654,12 +1319,9 @@
1654 1319 processedText = formatTextStyling(processedText);
1655 1320
1656 1321 // Process code blocks BEFORE processing links
1657 1322 processedText = formatCodeBlocks(processedText);
1658 -
1659 - // Process markdown tables BEFORE converting newlines to paragraphs
1660 - processedText = formatMarkdownTables(processedText);
1661 -
1323 +
1662 1324 // NOW convert to paragraphs
1663 1325 processedText = convertNewlinesToBreaks(processedText);
1664 1326
1665 1327 // IMPORTANT: Handle citation-style brackets FIRST [URL]
@@ -1672,63 +1334,37 @@
1672 1334 // Return as a proper link without the brackets
1673 1335 return `<a href="${safeUrl}" target="${linkTarget}">${cleanUrl}</a>`;
1674 1336 });
1675 1337
1676 - // Process markdown links: [text](url) and [](url)
1677 - // Uses balanced parenthesis matching to handle URLs containing parens
1678 - // (e.g. PDF filenames with dates like (2025-08-28).pdf)
1679 - processedText = (function(input) {
1680 - var result = '';
1681 - var i = 0;
1682 - while (i < input.length) {
1683 - // Look for [ at current position
1684 - if (input[i] === '[') {
1685 - // Find closing ]
1686 - var closeBracket = input.indexOf(']', i + 1);
1687 - if (closeBracket === -1 || closeBracket + 1 >= input.length || input[closeBracket + 1] !== '(') {
1688 - result += input[i];
1689 - i++;
1690 - continue;
1691 - }
1692 - var linkText = input.substring(i + 1, closeBracket);
1693 - // Check if URL starts with http
1694 - var urlStart = closeBracket + 2;
1695 - if (!input.substring(urlStart).match(/^https?:\/\//)) {
1696 - result += input[i];
1697 - i++;
1698 - continue;
1699 - }
1700 - // Find balanced closing paren
1701 - var depth = 1;
1702 - var j = urlStart;
1703 - while (j < input.length && depth > 0) {
1704 - if (input[j] === '(') depth++;
1705 - else if (input[j] === ')') depth--;
1706 - if (depth > 0) j++;
1707 - }
1708 - if (depth !== 0) {
1709 - result += input[i];
1710 - i++;
1711 - continue;
1712 - }
1713 - var url = input.substring(urlStart, j);
1714 - var cleanUrl = url.replace(/[\].,;!?]+$/, '');
1715 - var encodedUrl = safeEncodeUrl(cleanUrl);
1716 - if (!linkText || !linkText.trim()) {
1717 - result += '<a href="' + encodedUrl + '" target="' + linkTarget + '">' + cleanUrl + '</a>';
1718 - } else {
1719 - var safeText = sanitizeUserInput(linkText);
1720 - result += '<a href="' + encodedUrl + '" target="' + linkTarget + '">' + safeText + '</a>';
1721 - }
1722 - i = j + 1; // Skip past the closing )
1723 - } else {
1724 - result += input[i];
1725 - i++;
1726 - }
1338 + // Process proper markdown links with text: [text](url)
1339 + // This MUST have non-empty text in the first brackets
1340 + const markdownLinkPattern = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
1341 + processedText = processedText.replace(markdownLinkPattern, (match, text, url) => {
1342 + // Make sure we have actual text (not just whitespace)
1343 + if (!text || !text.trim()) {
1344 + // If no text, treat the URL as the text
1345 + let cleanUrl = url.replace(/[.,;!?]+$/, '');
1346 + const safeUrl = safeEncodeUrl(cleanUrl);
1347 + return `<a href="${safeUrl}" target="${linkTarget}">${cleanUrl}</a>`;
1727 1348 }
1728 - return result;
1729 - })(processedText);
1349 +
1350 + // Clean the URL
1351 + let cleanUrl = url.replace(/[\].,;!?]+$/, '');
1352 + const safeUrl = safeEncodeUrl(cleanUrl);
1353 + const safeText = sanitizeUserInput(text);
1354 + return `<a href="${safeUrl}" target="${linkTarget}">${safeText}</a>`;
1355 + });
1730 1356
1357 + // Handle empty markdown links: [](url)
1358 + // This is a specific case where there's no text
1359 + const emptyMarkdownPattern = /\[\]\((https?:\/\/[^\s)]+)\)/g;
1360 + processedText = processedText.replace(emptyMarkdownPattern, (match, url) => {
1361 + let cleanUrl = url.replace(/[.,;!?]+$/, '');
1362 + const safeUrl = safeEncodeUrl(cleanUrl);
1363 + // Use the URL itself as the link text
1364 + return `<a href="${safeUrl}" target="${linkTarget}">${cleanUrl}</a>`;
1365 + });
1366 +
1731 1367 // Process phone numbers: [text](tel:number)
1732 1368 const phonePattern = /\[([^\]]+)\]\((tel:[\d+\-\s()]+)\)/g;
1733 1369 processedText = processedText.replace(phonePattern, (match, text, phone) => {
1734 1370 const safePhone = safeEncodeUrl(phone);
@@ -1880,78 +1516,9 @@
1880 1516 });
1881 1517
1882 1518 return text;
1883 1519 }
1884 -
1885 - function formatMarkdownTables(text) {
1886 - var lines = text.split('\n');
1887 - var result = [];
1888 - var i = 0;
1889 -
1890 - while (i < lines.length) {
1891 - // Check for a table: current line has pipes AND next line is a separator row
1892 - if (i + 1 < lines.length &&
1893 - lines[i].indexOf('|') !== -1 &&
1894 - /^\s*\|?[\s\-:]+(\|[\s\-:]+)+\|?\s*$/.test(lines[i + 1])) {
1895 -
1896 - var tableLines = [];
1897 - var headerLine = lines[i];
1898 - var separatorLine = lines[i + 1];
1899 - tableLines.push(headerLine);
1900 - tableLines.push(separatorLine);
1901 -
1902 - // Collect remaining table rows
1903 - var j = i + 2;
1904 - while (j < lines.length && lines[j].indexOf('|') !== -1 && lines[j].trim() !== '') {
1905 - tableLines.push(lines[j]);
1906 - j++;
1907 - }
1908 -
1909 - // Parse alignment from separator row
1910 - var sepCells = separatorLine.split('|').filter(function(c) { return c.trim() !== ''; });
1911 - var alignments = sepCells.map(function(cell) {
1912 - var trimmed = cell.trim();
1913 - if (trimmed.charAt(0) === ':' && trimmed.charAt(trimmed.length - 1) === ':') return 'center';
1914 - if (trimmed.charAt(trimmed.length - 1) === ':') return 'right';
1915 - return 'left';
1916 - });
1917 -
1918 - // Build HTML table
1919 - var html = '<div class="mxchat-table-wrapper"><table class="mxchat-table">';
1920 -
1921 - // Header row
1922 - var headerCells = tableLines[0].split('|').filter(function(c) { return c.trim() !== ''; });
1923 - html += '<thead><tr>';
1924 - headerCells.forEach(function(cell, idx) {
1925 - var align = alignments[idx] || 'left';
1926 - html += '<th style="text-align:' + align + '">' + cell.trim() + '</th>';
1927 - });
1928 - html += '</tr></thead>';
1929 -
1930 - // Body rows
1931 - html += '<tbody>';
1932 - for (var r = 2; r < tableLines.length; r++) {
1933 - var rowCells = tableLines[r].split('|').filter(function(c) { return c.trim() !== ''; });
1934 - html += '<tr>';
1935 - rowCells.forEach(function(cell, idx) {
1936 - var align = alignments[idx] || 'left';
1937 - html += '<td style="text-align:' + align + '">' + cell.trim() + '</td>';
1938 - });
1939 - html += '</tr>';
1940 - }
1941 - html += '</tbody></table></div>';
1942 -
1943 - result.push(html);
1944 - i = j;
1945 - } else {
1946 - result.push(lines[i]);
1947 - i++;
1948 - }
1949 - }
1950 -
1951 - return result.join('\n');
1952 - }
1953 -
1520 +
1954 1521 function sanitizeUserInput(text) {
1955 1522 const div = document.createElement('div');
1956 1523 div.textContent = text;
1957 1524 return div.innerHTML;
@@ -1981,21 +1548,10 @@
1981 1548 // ====================================
1982 1549 // UI & SCROLLING CONTROLS
1983 1550 // ====================================
1984 1551
1985 - function scrollToBottom(botIdOrInstant, instant) {
1986 - // Handle backward compatibility: scrollToBottom() or scrollToBottom(true/false)
1987 - var botId = 'default';
1988 - if (typeof botIdOrInstant === 'string') {
1989 - botId = botIdOrInstant;
1990 - instant = instant || false;
1991 - } else if (typeof botIdOrInstant === 'boolean') {
1992 - instant = botIdOrInstant;
1993 - } else {
1994 - instant = false;
1995 - }
1996 -
1997 - var chatBox = getElement(botId, 'chat-box');
1552 + function scrollToBottom(instant = false) {
1553 + var chatBox = $('#chat-box');
1998 1554 if (instant) {
1999 1555 // Instantly set the scroll position to the bottom
2000 1556 chatBox.scrollTop(chatBox.prop("scrollHeight"));
2001 1557 } else {
@@ -2004,15 +1560,15 @@
2004 1560 const scrollHeight = chatBox.prop("scrollHeight");
2005 1561 const initialScroll = chatBox.scrollTop();
2006 1562 const distance = scrollHeight - initialScroll;
2007 1563 const duration = 500; // Duration in ms
2008 -
1564 +
2009 1565 function smoothScroll(timestamp) {
2010 1566 if (!start) start = timestamp;
2011 1567 const progress = timestamp - start;
2012 1568 const currentScroll = initialScroll + (distance * (progress / duration));
2013 1569 chatBox.scrollTop(currentScroll);
2014 -
1570 +
2015 1571 if (progress < duration) {
2016 1572 requestAnimationFrame(smoothScroll);
2017 1573 } else {
2018 1574 chatBox.scrollTop(scrollHeight); // Ensure it's exactly at the bottom
@@ -2017,37 +1573,31 @@
2017 1573 } else {
2018 1574 chatBox.scrollTop(scrollHeight); // Ensure it's exactly at the bottom
2019 1575 }
2020 1576 }
2021 -
1577 +
2022 1578 requestAnimationFrame(smoothScroll);
2023 1579 }
2024 1580 }
2025 -
2026 - function scrollElementToTop(element, botId, topOffset) {
2027 - botId = botId || 'default';
2028 - topOffset = (typeof topOffset === 'number') ? topOffset : 2;
2029 - var chatBox = getElement(botId, 'chat-box');
1581 +
1582 + function scrollElementToTop(element) {
1583 + var chatBox = $('#chat-box');
2030 1584 var elementTop = element.position().top + chatBox.scrollTop();
2031 - chatBox.animate({ scrollTop: Math.max(0, elementTop - topOffset) }, 500);
1585 + chatBox.animate({ scrollTop: elementTop }, 500);
2032 1586 }
2033 -
2034 - function showChatWidget(botId) {
2035 - botId = botId || 'default';
2036 - var $button = getElement(botId, 'floating-chatbot-button');
1587 +
1588 + function showChatWidget() {
2037 1589 // First ensure display is set
2038 - $button.css('display', 'flex');
1590 + $('#floating-chatbot-button').css('display', 'flex');
2039 1591 // Then handle the fade
2040 - $button.fadeTo(500, 1);
1592 + $('#floating-chatbot-button').fadeTo(500, 1);
2041 1593 // Force visibility
2042 - $button.removeClass('hidden');
1594 + $('#floating-chatbot-button').removeClass('hidden');
2043 1595 }
2044 1596
2045 - function hideChatWidget(botId) {
2046 - botId = botId || 'default';
2047 - var $button = getElement(botId, 'floating-chatbot-button');
2048 - $button.css('display', 'none');
2049 - $button.addClass('hidden');
1597 + function hideChatWidget() {
1598 + $('#floating-chatbot-button').css('display', 'none');
1599 + $('#floating-chatbot-button').addClass('hidden');
2050 1600 }
2051 1601
2052 1602 function disableScroll() {
2053 1603 if (isMobile()) {
@@ -2106,43 +1656,34 @@
2106 1656 chatButton.appendChild(notificationBadge);
2107 1657
2108 1658 }
2109 1659
2110 - function showNotification(botId) {
2111 - botId = botId || 'default';
2112 - const badge = getElementDOM(botId, 'chat-notification-badge');
2113 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
2114 - if (badge && $floatingChatbot.hasClass('hidden')) {
1660 + function showNotification() {
1661 + const badge = document.getElementById('chat-notification-badge');
1662 + if (badge && $('#floating-chatbot').hasClass('hidden')) {
2115 1663 badge.style.display = 'block';
2116 1664 badge.textContent = '1';
2117 1665 }
2118 1666 }
2119 -
2120 - function hideNotification(botId) {
2121 - botId = botId || 'default';
2122 - const badge = getElementDOM(botId, 'chat-notification-badge');
1667 +
1668 + function hideNotification() {
1669 + const badge = document.getElementById('chat-notification-badge');
2123 1670 if (badge) {
2124 1671 badge.style.display = 'none';
2125 1672 }
2126 1673 }
2127 -
2128 - function startNotificationChecking(botId) {
2129 - botId = botId || 'default';
1674 +
1675 + function startNotificationChecking() {
2130 1676 const chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
2131 1677 if (!chatPersistenceEnabled) return;
2132 -
2133 - createNotificationBadge(botId);
2134 - var instance = MxChatInstances.get(botId);
2135 - instance.notificationCheckInterval = setInterval(function() {
2136 - checkForNewMessages(botId);
2137 - }, 30000); // Check every 30 seconds
1678 +
1679 + createNotificationBadge();
1680 + notificationCheckInterval = setInterval(checkForNewMessages, 30000); // Check every 30 seconds
2138 1681 }
2139 -
2140 - function stopNotificationChecking(botId) {
2141 - botId = botId || 'default';
2142 - var instance = MxChatInstances.get(botId);
2143 - if (instance.notificationCheckInterval) {
2144 - clearInterval(instance.notificationCheckInterval);
1682 +
1683 + function stopNotificationChecking() {
1684 + if (notificationCheckInterval) {
1685 + clearInterval(notificationCheckInterval);
2145 1686 }
2146 1687 }
2147 1688
2148 1689 function checkForNewMessages() {
@@ -2168,35 +1709,28 @@
2168 1709 });
2169 1710 }
2170 1711
2171 1712
2172 -// ====================================
2173 -// LIVE AGENT FUNCTIONALITY
2174 -// ====================================
1713 + // ====================================
1714 + // LIVE AGENT FUNCTIONALITY
1715 + // ====================================
2175 1716
2176 -function startPolling(botId) {
2177 - botId = botId || 'default';
2178 - var instance = MxChatInstances.get(botId);
2179 - // Clear any existing interval first
2180 - stopPolling(botId);
2181 - instance.pollingInterval = setInterval(function() {
2182 - checkForAgentMessages(botId);
2183 - }, 5000);
2184 -}
1717 + function startPolling() {
1718 + // Clear any existing interval first
1719 + stopPolling();
1720 + // Start new polling interval
1721 + pollingInterval = setInterval(checkForAgentMessages, 5000);
1722 + }
2185 1723
2186 -function stopPolling(botId) {
2187 - botId = botId || 'default';
2188 - var instance = MxChatInstances.get(botId);
2189 - if (instance.pollingInterval) {
2190 - clearInterval(instance.pollingInterval);
2191 - instance.pollingInterval = null;
1724 + function stopPolling() {
1725 + if (pollingInterval) {
1726 + clearInterval(pollingInterval);
1727 + pollingInterval = null;
1728 + }
2192 1729 }
2193 -}
2194 -
2195 -function checkForAgentMessages(botId) {
2196 - botId = botId || 'default';
2197 - var instance = MxChatInstances.get(botId);
2198 - const sessionId = getChatSession(botId);
1730 +
1731 +function checkForAgentMessages() {
1732 + const sessionId = getChatSession();
2199 1733 $.ajax({
2200 1734 url: mxchatChat.ajax_url,
2201 1735 type: 'POST',
2202 1736 dataType: 'json',
@@ -2202,41 +1736,32 @@
2202 1736 dataType: 'json',
2203 1737 data: {
2204 1738 action: 'mxchat_fetch_new_messages',
2205 1739 session_id: sessionId,
2206 - last_seen_id: instance.lastSeenMessageId,
2207 - persistence_enabled: 'true',
1740 + last_seen_id: lastSeenMessageId,
1741 + persistence_enabled: 'true', // Add this too
2208 1742 nonce: mxchatChat.nonce
2209 1743 },
2210 1744 success: function (response) {
2211 1745 if (response.success && response.data?.new_messages) {
2212 1746 let hasNewMessage = false;
2213 -
1747 +
2214 1748 response.data.new_messages.forEach(function (message) {
2215 - if (message.role === "agent" && !instance.processedMessageIds.has(message.id)) {
1749 + if (message.role === "agent" && !processedMessageIds.has(message.id)) {
2216 1750 hasNewMessage = true;
2217 - appendMessage("agent", message.content, '', [], false, botId);
2218 - instance.lastSeenMessageId = message.id;
2219 - instance.processedMessageIds.add(message.id);
1751 + // CHANGE THIS LINE:
1752 + appendMessage("agent", message.content); // Instead of replaceLastMessage
1753 + lastSeenMessageId = message.id;
1754 + processedMessageIds.add(message.id);
2220 1755 }
2221 1756 });
2222 1757
2223 - if (hasNewMessage) {
2224 - enableChatInput(botId);
1758 + if (hasNewMessage && $('#floating-chatbot').hasClass('hidden')) {
1759 + showNotification();
2225 1760 }
2226 -
2227 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
2228 - if (hasNewMessage && $floatingChatbot.hasClass('hidden')) {
2229 - showNotification(botId);
2230 - }
2231 -
2232 - scrollToBottom(botId, true);
1761 +
1762 + scrollToBottom(true);
2233 1763 }
2234 -
2235 - // Handle chat mode transitions (e.g. agent ended chat via !endchat)
2236 - if (response.success && response.data?.chat_mode) {
2237 - updateChatModeIndicator(response.data.chat_mode, botId);
2238 - }
2239 1764 },
2240 1765 error: function (xhr, status, error) {
2241 1766 // Polling error - silently continue
2242 1767 }
@@ -2246,29 +1771,17 @@
2246 1771 // ====================================
2247 1772 // CHAT HISTORY & PERSISTENCE
2248 1773 // ====================================
2249 1774
2250 -function loadChatHistory(botId, onComplete) {
2251 - botId = botId || 'default';
2252 - var instance = MxChatInstances.get(botId);
2253 -
1775 +function loadChatHistory() {
2254 1776 // Prevent duplicate loading
2255 - if (instance.chatHistoryLoaded) {
2256 - if (onComplete) onComplete();
1777 + if (chatHistoryLoaded) {
2257 1778 return;
2258 1779 }
2259 -
2260 - // Use getChatSession which returns null if no session exists (does NOT create one)
2261 - var sessionId = getChatSession(botId);
1780 +
1781 + var sessionId = getChatSession();
2262 1782 var chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
2263 1783
2264 - // No session yet — nothing to load. History will load after first message via ensureSession.
2265 - if (!sessionId) {
2266 - instance.chatHistoryLoaded = true;
2267 - if (onComplete) onComplete();
2268 - return;
2269 - }
2270 -
2271 1784 if (chatPersistenceEnabled && sessionId) {
2272 1785 $.ajax({
2273 1786 url: mxchatChat.ajax_url,
2274 1787 type: 'POST',
@@ -2279,12 +1792,11 @@
2279 1792 },
2280 1793 success: function(response) {
2281 1794 // Handle session reset (IP changed while user was away)
2282 1795 if (response.success === false && response.data && response.data.action === 'reset_session') {
2283 - // Silent reset — new session but don't clear UI
2284 - MxChatInstances.silentResetSession(botId);
2285 - instance.chatHistoryLoaded = true; // Prevent retry loop
2286 - if (onComplete) onComplete();
1796 + // Silently reset session - user will start fresh
1797 + resetChatSession();
1798 + chatHistoryLoaded = true; // Prevent retry loop
2287 1799 return;
2288 1800 }
2289 1801
2290 1802 // Check if the response indicates success
@@ -2290,15 +1802,15 @@
2290 1802 // Check if the response indicates success
2291 1803 if (response.success) {
2292 1804 // Handle case where conversation data exists and is an array
2293 1805 if (response.data && Array.isArray(response.data.conversation)) {
2294 - var $chatBox = getElement(botId, 'chat-box');
1806 + var $chatBox = $('#chat-box');
2295 1807 var $fragment = $(document.createDocumentFragment());
2296 - let highestMessageId = instance.lastSeenMessageId;
1808 + let highestMessageId = lastSeenMessageId;
2297 1809
2298 1810 // Update chat mode if provided
2299 1811 if (response.data.chat_mode) {
2300 - updateChatModeIndicator(response.data.chat_mode, botId);
1812 + updateChatModeIndicator(response.data.chat_mode);
2301 1813 }
2302 1814
2303 1815 // Only process if there are actual messages
2304 1816 if (response.data.conversation.length > 0) {
@@ -2303,9 +1815,9 @@
2303 1815 // Only process if there are actual messages
2304 1816 if (response.data.conversation.length > 0) {
2305 1817 // IMPORTANT: Clear existing messages before loading history
2306 1818 $chatBox.empty();
2307 -
1819 +
2308 1820 $.each(response.data.conversation, function(index, message) {
2309 1821 // Skip agent messages if persistence is off
2310 1822 if (!chatPersistenceEnabled && message.role === 'agent') {
2311 1823 return;
@@ -2340,19 +1852,9 @@
2340 1852 var content = message.content;
2341 1853 content = content.replace(/\\'/g, "'").replace(/\\"/g, '"');
2342 1854 content = decodeHTMLEntities(content);
2343 1855
2344 - // Skip linkify for messages containing structured HTML
2345 - // (forms, product cards, galleries, etc.) to avoid
2346 - // markdown formatting corrupting HTML attributes
2347 - // (e.g. underscores in name="field_name" becoming <em> tags)
2348 - if (content.includes("mxchat-product-card") ||
2349 - content.includes("mxchat-image-gallery") ||
2350 - content.includes("mxchat-featured-products") ||
2351 - content.includes("<form") ||
2352 - content.includes("<input") ||
2353 - content.includes("<select") ||
2354 - content.includes("<textarea")) {
1856 + if (content.includes("mxchat-product-card") || content.includes("mxchat-image-gallery")) {
2355 1857 messageElement.html(content);
2356 1858 } else {
2357 1859 var formattedContent = linkify(content);
2358 1860 messageElement.html(formattedContent);
@@ -2362,47 +1864,42 @@
2362 1864
2363 1865 // Track message IDs
2364 1866 if (message.id) {
2365 1867 highestMessageId = Math.max(highestMessageId, message.id);
2366 - instance.processedMessageIds.add(message.id);
1868 + processedMessageIds.add(message.id);
2367 1869 }
2368 1870 });
2369 1871
2370 1872 // Only append messages and scroll if we have content
2371 1873 $chatBox.append($fragment);
2372 - scrollToBottom(botId, true);
1874 + scrollToBottom(true);
2373 1875
2374 1876 // Collapse quick questions if we have conversation history
2375 - // BUT skip auto-collapse for embedded bots (they should stay expanded)
2376 - if (hasQuickQuestions(botId) && !isEmbeddedBot(botId)) {
2377 - collapseQuickQuestions(botId);
1877 + if (hasQuickQuestions()) {
1878 + collapseQuickQuestions();
2378 1879 }
2379 1880
2380 1881 // Update lastSeenMessageId after history loads
2381 - instance.lastSeenMessageId = highestMessageId;
1882 + lastSeenMessageId = highestMessageId;
2382 1883
2383 1884 // Only update chat mode if persistence is enabled and we have messages
2384 1885 if (chatPersistenceEnabled) {
2385 1886 var lastMessage = response.data.conversation[response.data.conversation.length - 1];
2386 1887 if (lastMessage.role === 'agent') {
2387 - updateChatModeIndicator('agent', botId);
1888 + updateChatModeIndicator('agent');
2388 1889 }
2389 1890 }
2390 -
1891 +
2391 1892 // Mark as loaded ONLY after successful load
2392 - instance.chatHistoryLoaded = true;
1893 + chatHistoryLoaded = true;
2393 1894 }
2394 1895 }
2395 1896 }
2396 - if (onComplete) onComplete();
2397 1897 },
2398 1898 error: function(xhr, status, error) {
2399 1899 // Error loading chat history - silently continue
2400 - if (onComplete) onComplete();
2401 1900 }
2402 1901 });
2403 - } else {
2404 - if (onComplete) onComplete();
2405 1902 }
2406 1903 }
2407 1904
2408 1905
@@ -2416,12 +1913,11 @@
2416 1913 element.addEventListener(eventType, handler);
2417 1914 }
2418 1915 }
2419 1916
2420 - function showActivePdf(filename, botId) {
2421 - botId = botId || 'default';
2422 - const container = getElementDOM(botId, 'active-pdf-container');
2423 - const nameElement = getElementDOM(botId, 'active-pdf-name');
1917 + function showActivePdf(filename) {
1918 + const container = document.getElementById('active-pdf-container');
1919 + const nameElement = document.getElementById('active-pdf-name');
2424 1920
2425 1921 if (!container || !nameElement) {
2426 1922 return;
2427 1923 }
@@ -2429,12 +1925,11 @@
2429 1925 nameElement.textContent = filename;
2430 1926 container.style.display = 'flex';
2431 1927 }
2432 1928
2433 - function showActiveWord(filename, botId) {
2434 - botId = botId || 'default';
2435 - const container = getElementDOM(botId, 'active-word-container');
2436 - const nameElement = getElementDOM(botId, 'active-word-name');
1929 + function showActiveWord(filename) {
1930 + const container = document.getElementById('active-word-container');
1931 + const nameElement = document.getElementById('active-word-name');
2437 1932
2438 1933 if (!container || !nameElement) {
2439 1934 return;
2440 1935 }
@@ -2441,17 +1936,15 @@
2441 1936
2442 1937 nameElement.textContent = filename;
2443 1938 container.style.display = 'flex';
2444 1939 }
2445 -
2446 - function removeActivePdf(botId) {
2447 - botId = botId || 'default';
2448 - var instance = MxChatInstances.get(botId);
2449 - const container = getElementDOM(botId, 'active-pdf-container');
2450 - const nameElement = getElementDOM(botId, 'active-pdf-name');
2451 -
2452 - if (!container || !nameElement || !instance.activePdfFile) return;
2453 -
1940 +
1941 + function removeActivePdf() {
1942 + const container = document.getElementById('active-pdf-container');
1943 + const nameElement = document.getElementById('active-pdf-name');
1944 +
1945 + if (!container || !nameElement || !activePdfFile) return;
1946 +
2454 1947 fetch(mxchatChat.ajax_url, {
2455 1948 method: 'POST',
2456 1949 headers: {
2457 1950 'Content-Type': 'application/x-www-form-urlencoded',
@@ -2457,9 +1950,9 @@
2457 1950 'Content-Type': 'application/x-www-form-urlencoded',
2458 1951 },
2459 1952 body: new URLSearchParams({
2460 1953 'action': 'mxchat_remove_pdf',
2461 - 'session_id': getChatSession(botId),
1954 + 'session_id': sessionId,
2462 1955 'nonce': mxchatChat.nonce
2463 1956 })
2464 1957 })
2465 1958 .then(response => response.json())
@@ -2510,10 +2003,9 @@
2510 2003 // ====================================
2511 2004 // CONSENT & COMPLIANCE (GDPR)
2512 2005 // ====================================
2513 2006
2514 - function initializeChatVisibility(botId) {
2515 - botId = botId || 'default';
2007 + function initializeChatVisibility() {
2516 2008 const complianzEnabled = mxchatChat.complianz_toggle === 'on' ||
2517 2009 mxchatChat.complianz_toggle === '1' ||
2518 2010 mxchatChat.complianz_toggle === 1;
2519 2011
@@ -2518,35 +2010,34 @@
2518 2010 mxchatChat.complianz_toggle === 1;
2519 2011
2520 2012 if (complianzEnabled && typeof cmplz_has_consent === "function" && typeof complianz !== 'undefined') {
2521 2013 // Initial check
2522 - checkConsentAndShowChat(botId);
2014 + checkConsentAndShowChat();
2523 2015
2524 2016 // Listen for consent changes
2525 2017 $(document).on('cmplz_status_change', function(event) {
2526 - checkConsentAndShowChat(botId);
2018 + checkConsentAndShowChat();
2527 2019 });
2528 2020 } else {
2529 2021 // If Complianz is not enabled, always show
2530 - getElement(botId, 'floating-chatbot-button')
2022 + $('#floating-chatbot-button')
2531 2023 .css('display', 'flex')
2532 2024 .removeClass('hidden no-consent')
2533 2025 .fadeTo(500, 1);
2534 -
2026 +
2535 2027 // Also check pre-chat message when Complianz is not enabled
2536 - checkPreChatDismissal(botId);
2028 + checkPreChatDismissal();
2537 2029 }
2538 2030 }
2539 2031
2540 -
2541 - function checkConsentAndShowChat(botId) {
2542 - botId = botId || 'default';
2032 +
2033 + function checkConsentAndShowChat() {
2543 2034 var consentStatus = cmplz_has_consent('marketing');
2544 2035 var consentType = complianz.consenttype;
2545 2036
2546 - let $widget = getElement(botId, 'floating-chatbot-button');
2547 - let $chatbot = getElement(botId, 'floating-chatbot');
2548 - let $preChat = getElement(botId, 'pre-chat-message');
2037 + let $widget = $('#floating-chatbot-button');
2038 + let $chatbot = $('#floating-chatbot');
2039 + let $preChat = $('#pre-chat-message');
2549 2040
2550 2041 if (consentStatus === true) {
2551 2042 $widget
2552 2043 .removeClass('no-consent')
@@ -2555,9 +2046,9 @@
2555 2046 .fadeTo(500, 1);
2556 2047 $chatbot.removeClass('no-consent');
2557 2048
2558 2049 // Show pre-chat message if not dismissed
2559 - checkPreChatDismissal(botId);
2050 + checkPreChatDismissal();
2560 2051 } else {
2561 2052 $widget
2562 2053 .addClass('no-consent')
2563 2054 .fadeTo(500, 0, function() {
@@ -2575,38 +2066,46 @@
2575 2066
2576 2067 // ====================================
2577 2068 // PRE-CHAT MESSAGE HANDLING
2578 2069 // ====================================
2579 -
2580 - function checkPreChatDismissal(botId) {
2581 - botId = botId || 'default';
2582 - try {
2583 - var dismissedAt = localStorage.getItem('mxchat_pre_chat_dismissed_' + botId);
2584 - if (dismissedAt) {
2585 - // Re-show after 24 hours
2586 - var elapsed = Date.now() - parseInt(dismissedAt, 10);
2587 - if (elapsed < 86400000) {
2588 - getElement(botId, 'pre-chat-message').hide();
2589 - return;
2070 +
2071 + function checkPreChatDismissal() {
2072 + $.ajax({
2073 + url: mxchatChat.ajax_url,
2074 + type: 'POST',
2075 + data: {
2076 + action: 'mxchat_check_pre_chat_message_status',
2077 + _ajax_nonce: mxchatChat.nonce
2078 + },
2079 + success: function(response) {
2080 + if (response.success && !response.data.dismissed) {
2081 + $('#pre-chat-message').fadeIn(250);
2082 + } else {
2083 + $('#pre-chat-message').hide();
2590 2084 }
2591 - // Expired — clear and show again
2592 - localStorage.removeItem('mxchat_pre_chat_dismissed_' + botId);
2085 + },
2086 + error: function() {
2087 + // Error checking pre-chat dismissal - silently continue
2593 2088 }
2594 - getElement(botId, 'pre-chat-message').fadeIn(250);
2595 - } catch (e) {
2596 - // localStorage unavailable — show the message
2597 - getElement(botId, 'pre-chat-message').fadeIn(250);
2598 - }
2089 + });
2599 2090 }
2600 2091
2601 - function handlePreChatDismissal(botId) {
2602 - botId = botId || 'default';
2603 - getElement(botId, 'pre-chat-message').fadeOut(200);
2604 - try {
2605 - localStorage.setItem('mxchat_pre_chat_dismissed_' + botId, String(Date.now()));
2606 - } catch (e) {
2607 - // localStorage unavailable — dismissal won't persist
2608 - }
2092 + function handlePreChatDismissal() {
2093 + $('#pre-chat-message').fadeOut(200);
2094 + $.ajax({
2095 + url: mxchatChat.ajax_url,
2096 + type: 'POST',
2097 + data: {
2098 + action: 'mxchat_dismiss_pre_chat_message',
2099 + _ajax_nonce: mxchatChat.nonce
2100 + },
2101 + success: function() {
2102 + $('#pre-chat-message').hide();
2103 + },
2104 + error: function() {
2105 + // Error dismissing pre-chat message - silently continue
2106 + }
2107 + });
2609 2108 }
2610 2109
2611 2110
2612 2111 // ====================================
@@ -2632,104 +2131,78 @@
2632 2131 // ====================================
2633 2132
2634 2133 $(document).on('click', '.mxchat-popular-question', function () {
2635 2134 var question = $(this).text();
2636 - var botId = getBotIdFromElement(this);
2637 -
2135 +
2638 2136 // Append the question as if the user typed it
2639 - appendMessage("user", question, '', [], false, botId);
2640 -
2137 + appendMessage("user", question);
2138 +
2641 2139 // Only collapse if there are questions
2642 - if (hasQuickQuestions(botId)) {
2643 - collapseQuickQuestions(botId);
2140 + if (hasQuickQuestions()) {
2141 + collapseQuickQuestions();
2644 2142 }
2645 -
2143 +
2646 2144 // Send the question to the server
2647 - sendMessageToChatbot(question, botId);
2145 + sendMessageToChatbot(question);
2648 2146 });
2649 2147
2650 2148 $(document).on('click', '.questions-toggle-btn', function(e) {
2651 2149 e.preventDefault();
2652 2150 e.stopPropagation();
2653 - var botId = getBotIdFromElement(this);
2654 - expandQuickQuestions(botId);
2151 + expandQuickQuestions();
2655 2152 });
2656 2153
2657 2154 $(document).on('click', '.questions-collapse-btn', function(e) {
2658 2155 e.preventDefault();
2659 2156 e.stopPropagation();
2660 - var botId = getBotIdFromElement(this);
2661 - collapseQuickQuestions(botId);
2157 + collapseQuickQuestions();
2662 2158 });
2663 2159
2664 - // Chatbot visibility toggle handlers - use class selector for multi-instance support
2665 - $(document).on('click', '.floating-chatbot-button', function() {
2666 - var botId = getBotIdFromElement(this);
2667 - var $chatbot = getElement(botId, 'floating-chatbot');
2668 - var $badge = getElement(botId, 'chat-notification-badge');
2669 - var $preChat = getElement(botId, 'pre-chat-message');
2670 -
2671 - if ($chatbot.hasClass('hidden')) {
2672 - $chatbot.removeClass('hidden').addClass('visible');
2160 + // Chatbot visibility toggle handlers
2161 + $(document).on('click', '#floating-chatbot-button', function() {
2162 + var chatbot = $('#floating-chatbot');
2163 + if (chatbot.hasClass('hidden')) {
2164 + chatbot.removeClass('hidden').addClass('visible');
2673 2165 $(this).addClass('hidden');
2674 - $badge.hide(); // Hide notification when opening chat
2166 + $('#chat-notification-badge').hide(); // Hide notification when opening chat
2675 2167 disableScroll();
2676 - $preChat.fadeOut(250);
2677 -
2678 - // Load chat history for returning visitors (persistence)
2679 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
2680 - if (chatPersistenceEnabled) {
2681 - MxChatInstances.ensureSession(botId);
2682 - }
2683 -
2684 - // Deferred email check — only on first widget open
2685 - var emailBlocker = getElementDOM(botId, 'email-blocker');
2686 - var instance = MxChatInstances.get(botId);
2687 - if (emailBlocker && !instance.emailCheckDone) {
2688 - instance.emailCheckDone = true;
2689 - resolveEmailState(botId);
2690 - } else if (!emailBlocker) {
2691 - // No email collection — still route through showChatContainerForBot
2692 - // so the loader is shown while chat history loads
2693 - showChatContainerForBot(botId);
2694 - }
2168 + $('#pre-chat-message').fadeOut(250);
2695 2169 } else {
2696 - $chatbot.removeClass('visible').addClass('hidden');
2170 + chatbot.removeClass('visible').addClass('hidden');
2697 2171 $(this).removeClass('hidden');
2698 2172 enableScroll();
2699 - checkPreChatDismissal(botId);
2173 + checkPreChatDismissal();
2700 2174 }
2701 2175 });
2702 -
2703 - // Allow clicking anywhere on the title bar to close the chatbot
2704 - $(document).on('click', '.chatbot-top-bar', function() {
2705 - var botId = getBotIdFromElement(this);
2706 - getElement(botId, 'floating-chatbot').addClass('hidden').removeClass('visible');
2707 - getElement(botId, 'floating-chatbot-button').removeClass('hidden');
2176 +
2177 + $(document).on('click', '#exit-chat-button', function() {
2178 + $('#floating-chatbot').addClass('hidden').removeClass('visible');
2179 + $('#floating-chatbot-button').removeClass('hidden');
2708 2180 enableScroll();
2709 2181 });
2710 -
2182 +
2711 2183 $(document).on('click', '.close-pre-chat-message', function(e) {
2712 2184 e.stopPropagation(); // Prevent triggering the parent .pre-chat-message click
2713 - var botId = getBotIdFromElement(this);
2714 - handlePreChatDismissal(botId);
2185 + $('#pre-chat-message').fadeOut(200, function() {
2186 + $(this).remove();
2187 + });
2715 2188 });
2189 +
2716 2190
2717 -
2718 - // PDF upload button handlers - use class selector
2719 - $(document).on('click', '.pdf-upload-btn', function() {
2720 - var botId = getBotIdFromElement(this);
2721 - var pdfInput = getElementDOM(botId, 'pdf-upload');
2722 - if (pdfInput) pdfInput.click();
2723 - });
2724 -
2725 - // Word upload button handlers - use class selector
2726 - $(document).on('click', '.word-upload-btn', function() {
2727 - var botId = getBotIdFromElement(this);
2728 - var wordInput = getElementDOM(botId, 'word-upload');
2729 - if (wordInput) wordInput.click();
2730 - });
2191 + // PDF upload button handlers
2192 + if (document.getElementById('pdf-upload-btn')) {
2193 + document.getElementById('pdf-upload-btn').addEventListener('click', function() {
2194 + document.getElementById('pdf-upload').click();
2195 + });
2196 + }
2731 2197
2198 + // Word upload button handlers
2199 + if (document.getElementById('word-upload-btn')) {
2200 + document.getElementById('word-upload-btn').addEventListener('click', function() {
2201 + document.getElementById('word-upload').click();
2202 + });
2203 + }
2204 +
2732 2205 // PDF file input change handler
2733 2206 addSafeEventListener('pdf-upload', 'change', async function(e) {
2734 2207 const file = e.target.files[0];
2735 2208
@@ -2913,497 +2386,431 @@
2913 2386 });
2914 2387
2915 2388
2916 2389 // ====================================
2917 -// INIT LOADER & CHAT CONTAINER HELPERS
2390 +// EMAIL COLLECTION SETUP - FIXED VERSION
2918 2391 // ====================================
2919 -// These must be outside the email collection block so they're always available
2920 -// (used by persistence loading even when email collection is off)
2921 -
2922 -function showInitLoader(botId) {
2923 - var loader = getElementDOM(botId, 'mxchat-init-loader');
2924 - if (loader) loader.style.display = 'flex';
2925 -}
2926 -
2927 -function hideInitLoader(botId) {
2928 - var loader = getElementDOM(botId, 'mxchat-init-loader');
2929 - if (loader) loader.style.display = 'none';
2930 -}
2931 -
2932 -function showEmailFormForBot(botId) {
2933 - hideInitLoader(botId);
2934 - var emailBlocker = getElementDOM(botId, 'email-blocker');
2935 - var chatContainer = getElementDOM(botId, 'chat-container');
2936 - if (emailBlocker) emailBlocker.style.display = 'flex';
2937 - if (chatContainer) chatContainer.style.display = 'none';
2938 -}
2939 -
2940 -function showChatContainerForBot(botId) {
2941 - var emailBlocker = getElementDOM(botId, 'email-blocker');
2942 - var chatContainer = getElementDOM(botId, 'chat-container');
2943 - if (emailBlocker) emailBlocker.style.display = 'none';
2944 -
2945 - var instance = MxChatInstances.get(botId);
2946 - var chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
2947 -
2948 - // If persistence is on and history hasn't loaded yet, show loader
2949 - // while history loads to prevent flash of empty chat
2950 - if (chatPersistenceEnabled && !instance.chatHistoryLoaded) {
2951 - if (chatContainer) chatContainer.style.display = 'none';
2952 - showInitLoader(botId);
2953 - loadChatHistory(botId, function() {
2954 - hideInitLoader(botId);
2955 - if (chatContainer) chatContainer.style.display = 'flex';
2956 - scrollToBottom(botId, true);
2957 - });
2958 - } else {
2959 - hideInitLoader(botId);
2960 - if (chatContainer) chatContainer.style.display = 'flex';
2961 - if (typeof loadChatHistory === 'function') {
2962 - loadChatHistory(botId);
2963 - }
2964 - }
2965 -}
2966 -
2967 -// ====================================
2968 -// EMAIL COLLECTION SETUP - MULTI-INSTANCE VERSION
2969 -// ====================================
2970 2392 // Only run email collection setup if it's enabled
2971 2393 if (mxchatChat && mxchatChat.email_collection_enabled === 'on') {
2394 + // Email collection form setup and handlers
2395 + const emailForm = document.getElementById('email-collection-form');
2396 + const emailBlocker = document.getElementById('email-blocker');
2397 + const chatbotWrapper = document.getElementById('chat-container');
2972 2398
2973 - // Track submitting state per bot
2974 - const emailSubmittingState = {};
2399 + if (emailForm && emailBlocker && chatbotWrapper) {
2400 +
2401 + // Add loading state management
2402 + let isSubmitting = false;
2403 +
2404 + // Optimized UI transition functions
2405 + function showEmailForm() {
2406 + emailBlocker.style.display = 'flex';
2407 + chatbotWrapper.style.display = 'none';
2408 + }
2975 2409
2976 - // Add CSS animations for email form (once globally)
2977 - if (!document.getElementById('email-error-styles')) {
2978 - const style = document.createElement('style');
2979 - style.id = 'email-error-styles';
2980 - style.textContent = `
2981 - @keyframes fadeInError {
2982 - from { opacity: 0; transform: translateY(-5px); }
2983 - to { opacity: 1; transform: translateY(0); }
2410 + function showChatContainer() {
2411 + // Show chat immediately without delay
2412 + emailBlocker.style.display = 'none';
2413 + chatbotWrapper.style.display = 'flex';
2414 +
2415 + // Load chat history only after showing chat container
2416 + if (typeof loadChatHistory === 'function') {
2417 + loadChatHistory();
2984 2418 }
2985 - .email-input-shake {
2986 - animation: shake 0.5s ease-in-out;
2987 - }
2988 - @keyframes shake {
2989 - 0%, 100% { transform: translateX(0); }
2990 - 25% { transform: translateX(-5px); }
2991 - 75% { transform: translateX(5px); }
2992 - }
2993 - @keyframes spin {
2994 - from { transform: rotate(0deg); }
2995 - to { transform: rotate(360deg); }
2996 - }
2997 - .email-spinner {
2998 - display: inline-block;
2999 - vertical-align: middle;
3000 - }
3001 - `;
3002 - document.head.appendChild(style);
3003 - }
2419 + }
3004 2420
3005 - function isValidEmailAddress(email) {
3006 - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
3007 - return emailRegex.test(email.trim()) && email.length <= 254;
3008 - }
2421 + // Enhanced email validation
2422 + function isValidEmail(email) {
2423 + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
2424 + return emailRegex.test(email.trim()) && email.length <= 254; // RFC 5321 limit
2425 + }
3009 2426
3010 - function isValidNameInput(name) {
3011 - return name && name.trim().length >= 2 && name.trim().length <= 100;
3012 - }
2427 + // Enhanced name validation
2428 + function isValidName(name) {
2429 + return name && name.trim().length >= 2 && name.trim().length <= 100;
2430 + }
3013 2431
3014 - /**
3015 - * Replace {visitor_name} placeholder in intro message with actual visitor name
3016 - * @param {string} botId - The bot instance ID
3017 - * @param {string} visitorName - The visitor's name to insert
3018 - */
3019 - function replaceVisitorNamePlaceholder(botId, visitorName) {
3020 - var chatBox = getElementDOM(botId, 'chat-box');
3021 - if (!chatBox) return;
3022 -
3023 - // Find the first bot message (intro message)
3024 - var introMessage = chatBox.querySelector('.bot-message');
3025 - if (!introMessage) return;
3026 -
3027 - var messageContent = introMessage.querySelector('div[dir="auto"]');
3028 - if (!messageContent) return;
3029 -
3030 - var html = messageContent.innerHTML;
3031 -
3032 - // Replace {visitor_name} placeholder (case-insensitive)
3033 - if (visitorName && visitorName.trim()) {
3034 - // Escape HTML to prevent XSS
3035 - var safeName = $('<div>').text(visitorName.trim()).html();
3036 - html = html.replace(/\{visitor_name\}/gi, safeName);
3037 - } else {
3038 - // Remove placeholder and clean up spacing if no name provided
3039 - html = html.replace(/\{visitor_name\}/gi, '');
3040 - // Clean up any double spaces that might result
3041 - html = html.replace(/\s{2,}/g, ' ').trim();
2432 + // Show loading state with spinner
2433 + function setSubmissionState(loading) {
2434 + const submitButton = document.getElementById('email-submit-button');
2435 + const emailInput = document.getElementById('user-email');
2436 + const nameInput = document.getElementById('user-name');
2437 +
2438 + if (loading) {
2439 + isSubmitting = true;
2440 + if (submitButton) submitButton.disabled = true;
2441 + if (emailInput) emailInput.disabled = true;
2442 + if (nameInput) nameInput.disabled = true;
2443 +
2444 + // Store original content and add spinner
2445 + if (submitButton && !submitButton.getAttribute('data-original-html')) {
2446 + submitButton.setAttribute('data-original-html', submitButton.innerHTML);
2447 +
2448 + // Add loading spinner while keeping original text
2449 + const originalText = submitButton.textContent;
2450 + submitButton.innerHTML = `
2451 + <svg class="email-spinner" style="width: 16px; height: 16px; margin-right: 8px; animation: spin 1s linear infinite;" viewBox="0 0 24 24">
2452 + <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="31.416" stroke-dashoffset="31.416">
2453 + <animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/>
2454 + <animate attributeName="stroke-dashoffset" dur="2s" values="0;-15.708;-31.416" repeatCount="indefinite"/>
2455 + </circle>
2456 + </svg>
2457 + ${originalText}
2458 + `;
2459 +
2460 + submitButton.style.opacity = '0.8';
2461 + }
2462 + } else {
2463 + isSubmitting = false;
2464 + if (submitButton) submitButton.disabled = false;
2465 + if (emailInput) emailInput.disabled = false;
2466 + if (nameInput) nameInput.disabled = false;
2467 +
2468 + // Restore original content
2469 + if (submitButton) {
2470 + const originalHtml = submitButton.getAttribute('data-original-html');
2471 + if (originalHtml) {
2472 + submitButton.innerHTML = originalHtml;
2473 + }
2474 + submitButton.style.opacity = '1';
2475 + }
2476 + }
3042 2477 }
3043 2478
3044 - messageContent.innerHTML = html;
3045 - }
3046 -
3047 - function setEmailSubmissionState(botId, loading) {
3048 - var submitButton = getElementDOM(botId, 'email-submit-button');
3049 - var emailInput = getElementDOM(botId, 'user-email');
3050 - var nameInput = getElementDOM(botId, 'user-name');
3051 -
3052 - if (loading) {
3053 - emailSubmittingState[botId] = true;
3054 - if (submitButton) submitButton.disabled = true;
3055 - if (emailInput) emailInput.disabled = true;
3056 - if (nameInput) nameInput.disabled = true;
3057 -
3058 - if (submitButton && !submitButton.getAttribute('data-original-html')) {
3059 - submitButton.setAttribute('data-original-html', submitButton.innerHTML);
3060 - const originalText = submitButton.textContent;
3061 - submitButton.innerHTML = `
3062 - <svg class="email-spinner" style="width: 16px; height: 16px; margin-right: 8px; animation: spin 1s linear infinite;" viewBox="0 0 24 24">
3063 - <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="31.416" stroke-dashoffset="31.416">
3064 - <animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/>
3065 - <animate attributeName="stroke-dashoffset" dur="2s" values="0;-15.708;-31.416" repeatCount="indefinite"/>
3066 - </circle>
3067 - </svg>
3068 - ${originalText}
2479 + // Error display functions
2480 + function showEmailError(message) {
2481 + clearEmailError();
2482 +
2483 + const errorDiv = document.createElement('div');
2484 + errorDiv.className = 'email-error';
2485 + errorDiv.style.cssText = `
2486 + color: #e74c3c;
2487 + font-size: 12px;
2488 + margin-top: 8px;
2489 + padding: 4px 0;
2490 + animation: fadeInError 0.3s ease;
2491 + `;
2492 + errorDiv.textContent = message;
2493 +
2494 + // Add CSS animation if not already present
2495 + if (!document.getElementById('email-error-styles')) {
2496 + const style = document.createElement('style');
2497 + style.id = 'email-error-styles';
2498 + style.textContent = `
2499 + @keyframes fadeInError {
2500 + from { opacity: 0; transform: translateY(-5px); }
2501 + to { opacity: 1; transform: translateY(0); }
2502 + }
2503 + .email-input-shake {
2504 + animation: shake 0.5s ease-in-out;
2505 + }
2506 + @keyframes shake {
2507 + 0%, 100% { transform: translateX(0); }
2508 + 25% { transform: translateX(-5px); }
2509 + 75% { transform: translateX(5px); }
2510 + }
2511 + @keyframes spin {
2512 + from { transform: rotate(0deg); }
2513 + to { transform: rotate(360deg); }
2514 + }
2515 + .email-spinner {
2516 + display: inline-block;
2517 + vertical-align: middle;
2518 + }
3069 2519 `;
3070 - submitButton.style.opacity = '0.8';
2520 + document.head.appendChild(style);
3071 2521 }
3072 - } else {
3073 - emailSubmittingState[botId] = false;
3074 - if (submitButton) submitButton.disabled = false;
3075 - if (emailInput) emailInput.disabled = false;
3076 - if (nameInput) nameInput.disabled = false;
3077 -
3078 - if (submitButton) {
3079 - const originalHtml = submitButton.getAttribute('data-original-html');
3080 - if (originalHtml) {
3081 - submitButton.innerHTML = originalHtml;
3082 - }
3083 - submitButton.style.opacity = '1';
2522 +
2523 + emailForm.appendChild(errorDiv);
2524 +
2525 + // Add shake animation to inputs
2526 + const emailInput = document.getElementById('user-email');
2527 + const nameInput = document.getElementById('user-name');
2528 +
2529 + if (emailInput) {
2530 + emailInput.classList.add('email-input-shake');
2531 + setTimeout(() => {
2532 + emailInput.classList.remove('email-input-shake');
2533 + }, 500);
3084 2534 }
2535 +
2536 + if (nameInput) {
2537 + nameInput.classList.add('email-input-shake');
2538 + setTimeout(() => {
2539 + nameInput.classList.remove('email-input-shake');
2540 + }, 500);
2541 + }
3085 2542 }
3086 - }
3087 2543
3088 - function showEmailError(botId, message) {
3089 - clearEmailError(botId);
3090 -
3091 - var emailForm = getElementDOM(botId, 'email-collection-form');
3092 - if (!emailForm) return;
3093 -
3094 - const errorDiv = document.createElement('div');
3095 - errorDiv.className = 'email-error';
3096 - errorDiv.style.cssText = `
3097 - color: #e74c3c;
3098 - font-size: 12px;
3099 - margin-top: 8px;
3100 - padding: 4px 0;
3101 - animation: fadeInError 0.3s ease;
3102 - `;
3103 - errorDiv.textContent = message;
3104 - emailForm.appendChild(errorDiv);
3105 -
3106 - // Add shake animation to inputs
3107 - var emailInput = getElementDOM(botId, 'user-email');
3108 - var nameInput = getElementDOM(botId, 'user-name');
3109 -
3110 - if (emailInput) {
3111 - emailInput.classList.add('email-input-shake');
3112 - setTimeout(() => emailInput.classList.remove('email-input-shake'), 500);
3113 - }
3114 - if (nameInput) {
3115 - nameInput.classList.add('email-input-shake');
3116 - setTimeout(() => nameInput.classList.remove('email-input-shake'), 500);
3117 - }
3118 - }
3119 -
3120 - function clearEmailError(botId) {
3121 - var emailForm = getElementDOM(botId, 'email-collection-form');
3122 - if (emailForm) {
2544 + function clearEmailError() {
3123 2545 const existingErrors = emailForm.querySelectorAll('.email-error');
3124 2546 existingErrors.forEach(error => error.remove());
3125 2547 }
3126 - }
3127 2548
3128 - // Resolve email state using server-side data when available, AJAX fallback otherwise
3129 - function resolveEmailState(botId) {
3130 - if (mxchatChat.skip_email_check && mxchatChat.initial_email_state) {
3131 - if (mxchatChat.initial_email_state.show_email_form) {
3132 - showEmailFormForBot(botId);
3133 - } else {
3134 - showChatContainerForBot(botId);
3135 - }
3136 - } else {
3137 - checkSessionAndEmailForBot(botId);
3138 - }
3139 - }
2549 + // MAIN FORM SUBMIT HANDLER
2550 + // Remove any existing event listeners first
2551 + emailForm.removeEventListener('submit', handleFormSubmit);
3140 2552
3141 - function checkSessionAndEmailForBot(botId) {
3142 - const sessionId = MxChatInstances.ensureSession(botId);
2553 + // Add the form submit handler
2554 + emailForm.addEventListener('submit', handleFormSubmit);
3143 2555
3144 - // Hide both panels while we check — show loader instead
3145 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3146 - var chatContainer = getElementDOM(botId, 'chat-container');
3147 - if (emailBlocker) emailBlocker.style.display = 'none';
3148 - if (chatContainer) chatContainer.style.display = 'none';
3149 - showInitLoader(botId);
2556 + function handleFormSubmit(event) {
2557 + event.preventDefault();
2558 + event.stopPropagation();
3150 2559
3151 - fetch(mxchatChat.ajax_url, {
3152 - method: 'POST',
3153 - headers: {
3154 - 'Content-Type': 'application/x-www-form-urlencoded',
3155 - },
3156 - body: new URLSearchParams({
3157 - action: 'mxchat_check_email_provided',
3158 - session_id: sessionId,
3159 - nonce: mxchatChat.nonce,
3160 - })
3161 - })
3162 - .then((response) => {
3163 - if (!response.ok) {
3164 - throw new Error(`HTTP error! status: ${response.status}`);
2560 + // Prevent double submission
2561 + if (isSubmitting) {
2562 + return false;
3165 2563 }
3166 - return response.json();
3167 - })
3168 - .then((data) => {
3169 - if (data.success) {
3170 - if (data.data.logged_in || data.data.email) {
3171 - showChatContainerForBot(botId);
3172 - } else {
3173 - showEmailFormForBot(botId);
3174 - }
3175 - } else {
3176 - showEmailFormForBot(botId);
3177 - }
3178 - })
3179 - .catch((error) => {
3180 - showEmailFormForBot(botId);
3181 - });
3182 - }
3183 2564
3184 - // Event delegation for email form submission
3185 - $(document).on('submit', '.email-collection-form', function(e) {
3186 - e.preventDefault();
3187 - e.stopPropagation();
2565 + const userEmail = document.getElementById('user-email').value.trim();
2566 + const nameInput = document.getElementById('user-name');
2567 + const userName = nameInput ? nameInput.value.trim() : '';
2568 + const sessionId = getChatSession();
3188 2569
3189 - var botId = getBotIdFromElement(this);
2570 + // Validate email before submission
2571 + if (!userEmail) {
2572 + showEmailError('Please enter your email address.');
2573 + return false;
2574 + }
3190 2575
3191 - // Prevent double submission
3192 - if (emailSubmittingState[botId]) {
3193 - return false;
3194 - }
2576 + if (!isValidEmail(userEmail)) {
2577 + showEmailError('Please enter a valid email address.');
2578 + return false;
2579 + }
3195 2580
3196 - var emailInput = getElementDOM(botId, 'user-email');
3197 - var nameInput = getElementDOM(botId, 'user-name');
3198 - var userEmail = emailInput ? emailInput.value.trim() : '';
3199 - var userName = nameInput ? nameInput.value.trim() : '';
3200 - var sessionId = MxChatInstances.ensureSession(botId);
2581 + // Validate name if field exists
2582 + if (nameInput && !isValidName(userName)) {
2583 + showEmailError('Please enter a valid name (2-100 characters).');
2584 + return false;
2585 + }
3201 2586
3202 - // Validate email
3203 - if (!userEmail) {
3204 - showEmailError(botId, 'Please enter your email address.');
3205 - return false;
3206 - }
2587 + // Clear any existing errors
2588 + clearEmailError();
2589 + setSubmissionState(true);
3207 2590
3208 - if (!isValidEmailAddress(userEmail)) {
3209 - showEmailError(botId, 'Please enter a valid email address.');
3210 - return false;
3211 - }
2591 + // Prepare form data with optional name
2592 + const formData = new URLSearchParams({
2593 + action: 'mxchat_handle_save_email_and_response',
2594 + email: userEmail,
2595 + session_id: sessionId,
2596 + nonce: mxchatChat.nonce,
2597 + });
3212 2598
3213 - // Validate name if field exists and has content
3214 - if (nameInput && userName && !isValidNameInput(userName)) {
3215 - showEmailError(botId, 'Please enter a valid name (2-100 characters).');
3216 - return false;
3217 - }
2599 + // Add name to form data if provided
2600 + if (userName) {
2601 + formData.append('name', userName);
2602 + }
3218 2603
3219 - clearEmailError(botId);
3220 - setEmailSubmissionState(botId, true);
2604 + fetch(mxchatChat.ajax_url, {
2605 + method: 'POST',
2606 + headers: {
2607 + 'Content-Type': 'application/x-www-form-urlencoded',
2608 + },
2609 + body: formData
2610 + })
2611 + .then((response) => {
2612 + if (!response.ok) {
2613 + throw new Error(`HTTP error! status: ${response.status}`);
2614 + }
2615 + return response.json();
2616 + })
2617 + .then((data) => {
2618 + setSubmissionState(false);
3221 2619
3222 - // Prepare form data
3223 - const formData = new URLSearchParams({
3224 - action: 'mxchat_handle_save_email_and_response',
3225 - email: userEmail,
3226 - session_id: sessionId,
3227 - nonce: mxchatChat.nonce,
3228 - });
2620 + if (data.success) {
2621 + // Show chat immediately
2622 + showChatContainer();
3229 2623
3230 - if (userName) {
3231 - formData.append('name', userName);
2624 + // Handle bot response if provided
2625 + if (data.message && typeof appendMessage === 'function') {
2626 + setTimeout(() => {
2627 + appendMessage('bot', data.message);
2628 + if (typeof scrollToBottom === 'function') {
2629 + scrollToBottom();
2630 + }
2631 + }, 100);
2632 + }
2633 + } else {
2634 + showEmailError(data.message || 'Failed to save email. Please try again.');
2635 + }
2636 + })
2637 + .catch((error) => {
2638 + setSubmissionState(false);
2639 + showEmailError('An error occurred. Please try again.');
2640 + });
2641 +
2642 + return false; // Extra prevention
3232 2643 }
3233 2644
3234 - fetch(mxchatChat.ajax_url, {
3235 - method: 'POST',
3236 - headers: {
3237 - 'Content-Type': 'application/x-www-form-urlencoded',
3238 - },
3239 - body: formData
3240 - })
3241 - .then((response) => {
3242 - if (!response.ok) {
3243 - throw new Error(`HTTP error! status: ${response.status}`);
3244 - }
3245 - return response.json();
3246 - })
3247 - .then((data) => {
3248 - setEmailSubmissionState(botId, false);
2645 + // Real-time email validation
2646 + const emailInput = document.getElementById('user-email');
2647 + if (emailInput) {
2648 + let validationTimeout;
2649 +
2650 + emailInput.addEventListener('input', function() {
2651 + // Clear previous validation timeout
2652 + if (validationTimeout) {
2653 + clearTimeout(validationTimeout);
2654 + }
2655 +
2656 + // Debounce validation
2657 + validationTimeout = setTimeout(() => {
2658 + const email = this.value.trim();
2659 + clearEmailError();
2660 +
2661 + if (email && !isValidEmail(email)) {
2662 + showEmailError('Please enter a valid email address.');
2663 + }
2664 + }, 500);
2665 + });
3249 2666
3250 - if (data.success) {
3251 - showChatContainerForBot(botId);
2667 + // Handle Enter key
2668 + emailInput.addEventListener('keypress', function(e) {
2669 + if (e.key === 'Enter' && !isSubmitting) {
2670 + e.preventDefault();
2671 + emailForm.dispatchEvent(new Event('submit'));
2672 + }
2673 + });
2674 + }
3252 2675
3253 - // Replace {visitor_name} placeholder in intro message with actual name
3254 - if (userName) {
3255 - replaceVisitorNamePlaceholder(botId, userName);
3256 - } else {
3257 - // Remove placeholder if no name provided
3258 - replaceVisitorNamePlaceholder(botId, '');
2676 + // Real-time name validation
2677 + const nameInput = document.getElementById('user-name');
2678 + if (nameInput) {
2679 + let nameValidationTimeout;
2680 +
2681 + nameInput.addEventListener('input', function() {
2682 + // Clear previous validation timeout
2683 + if (nameValidationTimeout) {
2684 + clearTimeout(nameValidationTimeout);
3259 2685 }
2686 +
2687 + // Debounce validation
2688 + nameValidationTimeout = setTimeout(() => {
2689 + const name = this.value.trim();
2690 + clearEmailError();
2691 +
2692 + if (name && !isValidName(name)) {
2693 + showEmailError('Name must be between 2 and 100 characters.');
2694 + }
2695 + }, 500);
2696 + });
3260 2697
3261 - if (data.message && typeof appendMessage === 'function') {
3262 - setTimeout(() => {
3263 - appendMessage('bot', data.message, '', [], false, botId);
3264 - if (typeof scrollToBottom === 'function') {
3265 - scrollToBottom(botId);
3266 - }
3267 - }, 100);
2698 + // Handle Enter key
2699 + nameInput.addEventListener('keypress', function(e) {
2700 + if (e.key === 'Enter' && !isSubmitting) {
2701 + e.preventDefault();
2702 + emailForm.dispatchEvent(new Event('submit'));
3268 2703 }
2704 + });
2705 + }
2706 +
2707 + // Initial state check
2708 + if (mxchatChat.skip_email_check && mxchatChat.initial_email_state) {
2709 + const emailState = mxchatChat.initial_email_state;
2710 + if (emailState.show_email_form) {
2711 + showEmailForm();
3269 2712 } else {
3270 - showEmailError(botId, data.message || 'Failed to save email. Please try again.');
2713 + showChatContainer();
3271 2714 }
3272 - })
3273 - .catch((error) => {
3274 - setEmailSubmissionState(botId, false);
3275 - showEmailError(botId, 'An error occurred. Please try again.');
3276 - });
3277 -
3278 - return false;
3279 - });
3280 -
3281 - // Real-time email validation using event delegation
3282 - $(document).on('input', '.mxchat-email-input', function() {
3283 - var botId = getBotIdFromElement(this);
3284 - var $input = $(this);
3285 -
3286 - // Clear previous timeout
3287 - clearTimeout($input.data('validationTimeout'));
3288 -
3289 - // Debounce validation
3290 - var timeout = setTimeout(() => {
3291 - var email = this.value.trim();
3292 - clearEmailError(botId);
3293 -
3294 - if (email && !isValidEmailAddress(email)) {
3295 - showEmailError(botId, 'Please enter a valid email address.');
3296 - }
3297 - }, 500);
3298 -
3299 - $input.data('validationTimeout', timeout);
3300 - });
3301 -
3302 - // Handle Enter key in email input
3303 - $(document).on('keypress', '.mxchat-email-input', function(e) {
3304 - if (e.key === 'Enter') {
3305 - e.preventDefault();
3306 - var botId = getBotIdFromElement(this);
3307 - if (!emailSubmittingState[botId]) {
3308 - $(this).closest('.email-collection-form').submit();
3309 - }
2715 + } else {
2716 + // Check email status via AJAX
2717 + setTimeout(checkSessionAndEmail, 100);
3310 2718 }
3311 - });
3312 2719
3313 - // Handle Enter key in name input
3314 - $(document).on('keypress', '.mxchat-name-input', function(e) {
3315 - if (e.key === 'Enter') {
3316 - e.preventDefault();
3317 - var botId = getBotIdFromElement(this);
3318 - if (!emailSubmittingState[botId]) {
3319 - $(this).closest('.email-collection-form').submit();
3320 - }
2720 + // Check if email exists for the current session
2721 + function checkSessionAndEmail() {
2722 + const sessionId = getChatSession();
2723 +
2724 + fetch(mxchatChat.ajax_url, {
2725 + method: 'POST',
2726 + headers: {
2727 + 'Content-Type': 'application/x-www-form-urlencoded',
2728 + },
2729 + body: new URLSearchParams({
2730 + action: 'mxchat_check_email_provided',
2731 + session_id: sessionId,
2732 + nonce: mxchatChat.nonce,
2733 + })
2734 + })
2735 + .then((response) => {
2736 + if (!response.ok) {
2737 + throw new Error(`HTTP error! status: ${response.status}`);
2738 + }
2739 + return response.json();
2740 + })
2741 + .then((data) => {
2742 + if (data.success) {
2743 + if (data.data.logged_in || data.data.email) {
2744 + showChatContainer();
2745 + } else {
2746 + showEmailForm();
2747 + }
2748 + } else {
2749 + // On error, default to showing email form
2750 + showEmailForm();
2751 + }
2752 + })
2753 + .catch((error) => {
2754 + // Email check failed - default to email form
2755 + showEmailForm();
2756 + });
3321 2757 }
3322 - });
3323 2758
3324 - // Initialize email check for all bot instances
3325 - // For floating bots: defer until widget is opened (zero passive AJAX)
3326 - // For embedded bots: check immediately since the form is visible
3327 - $('.mxchat-chatbot-wrapper').each(function() {
3328 - var botId = $(this).data('bot-id') || 'default';
3329 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3330 -
3331 - if (emailBlocker) {
3332 - if (isEmbeddedBot(botId)) {
3333 - // Embedded bots are always visible — check now
3334 - resolveEmailState(botId);
3335 - }
3336 - // Floating bots: handled in the widget open handler
3337 - } else if (isEmbeddedBot(botId)) {
3338 - // Embedded bot, no email collection — load history with loader
3339 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
3340 - if (chatPersistenceEnabled) {
3341 - MxChatInstances.ensureSession(botId);
3342 - showChatContainerForBot(botId);
3343 - }
3344 - }
3345 - });
2759 + } else {
2760 + // Email collection is enabled but essential elements are missing - silently continue
2761 + }
3346 2762 }
3347 2763
3348 - // Open chatbot when pre-chat message is clicked - use class selector for multi-instance
3349 - $(document).on('click', '.pre-chat-message', function() {
3350 - var botId = getBotIdFromElement(this);
3351 - var $chatbot = getElement(botId, 'floating-chatbot');
3352 - if ($chatbot.hasClass('hidden')) {
3353 - $chatbot.removeClass('hidden').addClass('visible');
3354 - getElement(botId, 'floating-chatbot-button').addClass('hidden');
3355 - handlePreChatDismissal(botId);
2764 + // Open chatbot when pre-chat message is clicked
2765 + $(document).on('click', '#pre-chat-message', function() {
2766 + var chatbot = $('#floating-chatbot');
2767 + if (chatbot.hasClass('hidden')) {
2768 + chatbot.removeClass('hidden').addClass('visible');
2769 + $('#floating-chatbot-button').addClass('hidden');
2770 + $('#pre-chat-message').fadeOut(250); // Hide pre-chat message
3356 2771 disableScroll(); // Disable scroll when chatbot opens
3357 -
3358 - // Load chat history for returning visitors (persistence)
3359 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
3360 - if (chatPersistenceEnabled) {
3361 - MxChatInstances.ensureSession(botId);
3362 - }
3363 -
3364 - // Deferred email check — only on first widget open
3365 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3366 - var instance = MxChatInstances.get(botId);
3367 - if (emailBlocker && !instance.emailCheckDone) {
3368 - instance.emailCheckDone = true;
3369 - resolveEmailState(botId);
3370 - } else if (!emailBlocker) {
3371 - showChatContainerForBot(botId);
3372 - }
3373 2772 }
3374 2773 });
3375 2774
3376 - // Legacy duplicate close handler removed — handled by single event delegation above
2775 + var closeButton = document.querySelector('.close-pre-chat-message');
2776 + if (closeButton) {
2777 + closeButton.addEventListener('click', function() {
2778 + $('#pre-chat-message').fadeOut(200); // Hide the message
3377 2779
3378 -
3379 -function hasQuickQuestions(botId) {
3380 - botId = botId || 'default';
3381 - var questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
3382 - if (!questionsContainer) return false;
3383 - const questionButtons = questionsContainer.querySelectorAll('.mxchat-popular-question');
2780 + // Send an AJAX request to set the transient flag for 24 hours
2781 + $.ajax({
2782 + url: mxchatChat.ajax_url,
2783 + type: 'POST',
2784 + data: {
2785 + action: 'mxchat_dismiss_pre_chat_message',
2786 + _ajax_nonce: mxchatChat.nonce
2787 + },
2788 + success: function() {
2789 + // Ensure the message is hidden after dismissal
2790 + $('#pre-chat-message').hide();
2791 + },
2792 + error: function() {
2793 + // Error dismissing pre-chat message - silently continue
2794 + }
2795 + });
2796 + });
2797 + }
2798 +
2799 +
2800 +function hasQuickQuestions() {
2801 + const questionButtons = document.querySelectorAll('#mxchat-popular-questions .mxchat-popular-question');
3384 2802 return questionButtons.length > 0;
3385 2803 }
3386 2804
3387 -/**
3388 - * Check if a bot is embedded (not floating)
3389 - * Embedded bots don't have a .floating-chatbot wrapper
3390 - */
3391 -function isEmbeddedBot(botId) {
3392 - botId = botId || 'default';
3393 - var floatingWrapper = document.getElementById('floating-chatbot-' + botId);
3394 - return !floatingWrapper;
3395 -}
3396 -
3397 -function collapseQuickQuestions(botId) {
3398 - botId = botId || 'default';
3399 - const questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
3400 - if (questionsContainer && hasQuickQuestions(botId)) {
2805 +function collapseQuickQuestions() {
2806 + const questionsContainer = document.getElementById('mxchat-popular-questions');
2807 + if (questionsContainer && hasQuickQuestions()) {
3401 2808 questionsContainer.classList.add('collapsed');
3402 2809 questionsContainer.classList.add('has-been-collapsed');
3403 2810 try {
3404 - sessionStorage.setItem('mxchat_questions_collapsed_' + botId, 'true');
3405 - sessionStorage.setItem('mxchat_questions_has_been_collapsed_' + botId, 'true');
2811 + sessionStorage.setItem('mxchat_questions_collapsed', 'true');
2812 + sessionStorage.setItem('mxchat_questions_has_been_collapsed', 'true');
3406 2813 } catch (e) {
3407 2814 // Ignore if sessionStorage is not available
3408 2815 }
3409 2816 }
@@ -3408,15 +2815,14 @@
3408 2815 }
3409 2816 }
3410 2817 }
3411 2818
3412 -function expandQuickQuestions(botId) {
3413 - botId = botId || 'default';
3414 - const questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
3415 - if (questionsContainer && hasQuickQuestions(botId)) {
2819 +function expandQuickQuestions() {
2820 + const questionsContainer = document.getElementById('mxchat-popular-questions');
2821 + if (questionsContainer && hasQuickQuestions()) {
3416 2822 questionsContainer.classList.remove('collapsed');
3417 2823 try {
3418 - sessionStorage.setItem('mxchat_questions_collapsed_' + botId, 'false');
2824 + sessionStorage.setItem('mxchat_questions_collapsed', 'false');
3419 2825 } catch (e) {
3420 2826 // Ignore if sessionStorage is not available
3421 2827 }
3422 2828 }
@@ -3421,24 +2827,18 @@
3421 2827 }
3422 2828 }
3423 2829 }
3424 2830
3425 -function checkQuickQuestionsState(botId) {
3426 - botId = botId || 'default';
3427 - if (!hasQuickQuestions(botId)) {
2831 +function checkQuickQuestionsState() {
2832 + if (!hasQuickQuestions()) {
3428 2833 return; // Don't do anything if no questions exist
3429 2834 }
3430 -
3431 - // Skip restoring collapsed state for embedded bots - they should always start expanded
3432 - if (isEmbeddedBot(botId)) {
3433 - return;
3434 - }
3435 -
2835 +
3436 2836 try {
3437 - const isCollapsed = sessionStorage.getItem('mxchat_questions_collapsed_' + botId);
3438 - const hasBeenCollapsed = sessionStorage.getItem('mxchat_questions_has_been_collapsed_' + botId);
3439 -
3440 - const questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
2837 + const isCollapsed = sessionStorage.getItem('mxchat_questions_collapsed');
2838 + const hasBeenCollapsed = sessionStorage.getItem('mxchat_questions_has_been_collapsed');
2839 +
2840 + const questionsContainer = document.getElementById('mxchat-popular-questions');
3441 2841 if (questionsContainer) {
3442 2842 if (hasBeenCollapsed === 'true') {
3443 2843 questionsContainer.classList.add('has-been-collapsed');
3444 2844 }
@@ -3451,36 +2851,32 @@
3451 2851 }
3452 2852 }
3453 2853
3454 2854 // Global delegation for dynamically added links as fallback
3455 -// Use class selector for multi-instance support
3456 -$(document).on('click', '.chat-box a[href]:not([data-tracked])', function(e) {
2855 +$(document).on('click', '#chat-box a[href]:not([data-tracked])', function(e) {
3457 2856 const $link = $(this);
3458 2857 const messageDiv = $link.closest('.bot-message, .agent-message');
3459 -
2858 +
3460 2859 // Only process bot/agent message links
3461 2860 if (messageDiv.length > 0) {
3462 2861 const originalHref = $link.attr('href');
3463 -
2862 +
3464 2863 if (originalHref && (originalHref.startsWith('http://') || originalHref.startsWith('https://'))) {
3465 2864 e.preventDefault();
3466 2865 e.stopPropagation();
3467 -
2866 +
3468 2867 // Mark as tracked
3469 2868 $link.attr('data-tracked', 'true');
3470 -
3471 - // Get bot ID from the chat box context
3472 - var botId = getBotIdFromElement(this);
3473 -
2869 +
3474 2870 // Get message context from the message div
3475 2871 const messageText = messageDiv.text().substring(0, 200);
3476 -
2872 +
3477 2873 $.ajax({
3478 2874 url: mxchatChat.ajax_url,
3479 2875 type: 'POST',
3480 2876 data: {
3481 2877 action: 'mxchat_track_url_click',
3482 - session_id: getChatSession(botId),
2878 + session_id: getChatSession(),
3483 2879 url: originalHref,
3484 2880 message_context: messageText,
3485 2881 nonce: mxchatChat.nonce
3486 2882 },
@@ -3491,57 +2887,49 @@
3491 2887 window.location.href = originalHref;
3492 2888 }
3493 2889 }
3494 2890 });
3495 -
2891 +
3496 2892 return false;
3497 2893 }
3498 2894 }
3499 2895 });
3500 2896
3501 - // ====================================
3502 - // MAIN INITIALIZATION
3503 - // ====================================
2897 +
2898 +
2899 +
2900 +// ====================================
2901 +// MAIN INITIALIZATION
2902 +// ====================================
3504 2903
3505 - // Initialize all chatbot instances on the page
3506 - initializeAllInstances();
2904 +if ($('#floating-chatbot').hasClass('hidden')) {
2905 + $('#floating-chatbot-button').removeClass('hidden');
2906 +}
2907 +// Initialize when document is ready
2908 +setFullHeight();
2909 +trackOriginatingPage();
3507 2910
3508 - // Legacy initialization for single bot compatibility
3509 - $('.floating-chatbot.hidden').each(function() {
3510 - var botId = getBotIdFromElement(this);
3511 - getElement(botId, 'floating-chatbot-button').removeClass('hidden');
3512 - });
2911 +// Only load chat history if email collection is disabled
2912 +if (mxchatChat.email_collection_enabled !== 'on') {
2913 + loadChatHistory();
2914 +}
3513 2915
3514 - // Initialize when document is ready
3515 - setFullHeight();
2916 +initializeChatVisibility();
3516 2917
3517 - // Note: trackOriginatingPage() and loadChatHistory() are now deferred
3518 - // until the user's first interaction via MxChatInstances.ensureSession()
3519 -
3520 - // Initialize chat visibility for all instances
3521 - $('.mxchat-chatbot-wrapper').each(function() {
3522 - var botId = $(this).data('bot-id') || 'default';
3523 - initializeChatVisibility(botId);
3524 - });
3525 -
3526 - // Make functions globally available for add-ons
3527 - window.hasQuickQuestions = hasQuickQuestions;
3528 - window.collapseQuickQuestions = collapseQuickQuestions;
3529 - window.appendMessage = appendMessage;
3530 - window.appendThinkingMessage = appendThinkingMessage;
3531 - window.scrollToBottom = scrollToBottom;
3532 - window.scrollElementToTop = scrollElementToTop;
3533 - window.replaceLastMessage = replaceLastMessage;
3534 - window.callMxChat = callMxChat;
3535 - window.callMxChatStream = callMxChatStream;
3536 - window.shouldUseStreaming = shouldUseStreaming;
3537 - window.getChatSession = getChatSession;
3538 - window.getPageContext = getPageContext;
3539 - window.updateStreamingMessage = updateStreamingMessage;
3540 - window.MxChatInstances = MxChatInstances;
3541 - window.getElement = getElement;
3542 - window.getElementDOM = getElementDOM;
3543 - window.getBotIdFromElement = getBotIdFromElement;
2918 +// Make functions globally available for add-ons
2919 +window.hasQuickQuestions = hasQuickQuestions;
2920 +window.collapseQuickQuestions = collapseQuickQuestions;
2921 +window.appendMessage = appendMessage;
2922 +window.appendThinkingMessage = appendThinkingMessage;
2923 +window.scrollToBottom = scrollToBottom;
2924 +window.scrollElementToTop = scrollElementToTop;
2925 +window.replaceLastMessage = replaceLastMessage;
2926 +window.callMxChat = callMxChat;
2927 +window.callMxChatStream = callMxChatStream;
2928 +window.shouldUseStreaming = shouldUseStreaming;
2929 +window.getChatSession = getChatSession;
2930 +window.getPageContext = getPageContext;
2931 +window.updateStreamingMessage = updateStreamingMessage;
3544 2932
3545 2933 }); // End of jQuery ready
3546 2934
3547 2935