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 +891 -1486 3.2.3 → 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,29 +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 -
705 +
980 706 if (callback) {
981 707 callback(accumulatedContent);
982 708 }
983 709 return;
@@ -992,15 +718,15 @@
992 718 const data = line.substring(6);
993 719
994 720 if (data === '[DONE]') {
995 721 if (!accumulatedContent) {
996 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
997 - callMxChat(message, callback, botId);
722 + $('.bot-message.temporary-message').remove();
723 + callMxChat(message, callback);
998 724 return;
999 725 }
1000 726
1001 727 // Re-enable chat input after streaming completes
1002 - enableChatInput(botId);
728 + enableChatInput();
1003 729
1004 730 if (callback) {
1005 731 callback(accumulatedContent);
1006 732 }
@@ -1011,9 +737,9 @@
1011 737 const json = JSON.parse(data);
1012 738
1013 739 // IMMEDIATE CHAT MODE UPDATE FOR STREAMING
1014 740 if (json.chat_mode) {
1015 - updateChatModeIndicator(json.chat_mode, botId);
741 + updateChatModeIndicator(json.chat_mode);
1016 742 }
1017 743
1018 744 // Handle testing data
1019 745 if (json.testing_data && !testingDataReceived) {
@@ -1025,13 +751,13 @@
1025 751 // Handle content streaming
1026 752 else if (json.content) {
1027 753 streamingStarted = true;
1028 754 accumulatedContent += json.content;
1029 - updateStreamingMessage(accumulatedContent, botId);
755 + updateStreamingMessage(accumulatedContent);
1030 756 }
1031 757 // Handle complete response in stream (fallback response)
1032 758 else if (json.text || json.message || json.html) {
1033 - handleNonStreamResponse(json, callback, botId);
759 + handleNonStreamResponse(json, callback);
1034 760 return;
1035 761 }
1036 762 // Handle errors
1037 763 else if (json.error) {
@@ -1040,12 +766,12 @@
1040 766 let errorMessage = json.error_message || json.message || json.text ||
1041 767 (typeof json.error === 'string' ? json.error : 'An error occurred. Please try again.');
1042 768
1043 769 // Re-enable chat input on error
1044 - enableChatInput(botId);
770 + enableChatInput();
1045 771
1046 772 // Display the error directly in the chat
1047 - replaceLastMessage("bot", errorMessage, '', [], botId);
773 + replaceLastMessage("bot", errorMessage);
1048 774
1049 775 if (callback) {
1050 776 callback(errorMessage);
1051 777 }
@@ -1058,10 +784,10 @@
1058 784 }
1059 785
1060 786 processStream();
1061 787 }).catch(streamError => {
1062 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1063 - callMxChat(message, callback, botId);
788 + $('.bot-message.temporary-message').remove();
789 + callMxChat(message, callback);
1064 790 });
1065 791 }
1066 792
1067 793 processStream();
@@ -1070,32 +796,30 @@
1070 796 // Check if we have server error data with chat mode
1071 797 if (error && error.isServerError && error.data) {
1072 798 // Check for chat mode in error data
1073 799 if (error.data.chat_mode) {
1074 - updateChatModeIndicator(error.data.chat_mode, botId);
800 + updateChatModeIndicator(error.data.chat_mode);
1075 801 }
1076 802
1077 - handleNonStreamResponse(error.data, callback, botId);
803 + handleNonStreamResponse(error.data, callback);
1078 804 } else {
1079 805 // Only fall back to regular call if we don't have any response data
1080 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1081 - callMxChat(message, callback, botId);
806 + $('.bot-message.temporary-message').remove();
807 + callMxChat(message, callback);
1082 808 }
1083 809 });
1084 810 }
1085 811
1086 812 // Helper function to handle non-streaming responses
1087 -function handleNonStreamResponse(data, callback, botId) {
1088 - botId = botId || 'default';
1089 -
813 +function handleNonStreamResponse(data, callback) {
1090 814 // IMMEDIATE CHAT MODE UPDATE FOR NON-STREAMING RESPONSES
1091 815 if (data.chat_mode) {
1092 - updateChatModeIndicator(data.chat_mode, botId);
816 + updateChatModeIndicator(data.chat_mode);
1093 817 }
1094 818
1095 819 // Also check in data property if response is wrapped
1096 820 if (data.data && data.data.chat_mode) {
1097 - updateChatModeIndicator(data.data.chat_mode, botId);
821 + updateChatModeIndicator(data.data.chat_mode);
1098 822 }
1099 823
1100 824 // NOTE: Don't remove temporary message here - let replaceLastMessage handle it
1101 825 // This prevents a visual gap between thinking dots disappearing and content appearing
@@ -1120,20 +844,25 @@
1120 844 errorMessage = "An error occurred. Please try again or contact support.";
1121 845 }
1122 846
1123 847 // Handle session reset action (IP changed, session expired, etc.)
1124 - // Silent reset — keep chat UI intact, just get a new session and retry
1125 848 if (data.data && data.data.action === 'reset_session') {
1126 - MxChatInstances.silentResetSession(botId);
1127 - // Re-send the original message with the new session (user message is already displayed)
1128 - 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');
1129 853 if (originalMessage) {
1130 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', null);
1131 - 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';
1132 861 if (shouldUseStreaming(currentModel)) {
1133 - callMxChatStream(originalMessage, callback, botId);
862 + callMxChatStream(originalMessage, callback);
1134 863 } else {
1135 - callMxChat(originalMessage, callback, botId);
864 + callMxChat(originalMessage, callback);
1136 865 }
1137 866 }
1138 867 return;
1139 868 }
@@ -1143,9 +872,9 @@
1143 872 if (mxchatChat.is_admin) {
1144 873 displayMessage = errorMessage + (errorCode ? " (Error code: " + errorCode + ")" : "");
1145 874 }
1146 875
1147 - replaceLastMessage("bot", displayMessage, '', [], botId);
876 + replaceLastMessage("bot", displayMessage);
1148 877
1149 878 if (callback) {
1150 879 callback('');
1151 880 }
@@ -1151,22 +880,8 @@
1151 880 }
1152 881 return; // Exit early for errors
1153 882 }
1154 883
1155 - // Check for live agent response
1156 - if (data.success && data.data && data.data.status === 'waiting_for_agent') {
1157 - removeThinkingDots(botId);
1158 - // Also remove any leftover bot-message that lost its temporary-message class
1159 - var $chatBox = getElement(botId, 'chat-box');
1160 - $chatBox.find('.bot-message .thinking-dots').closest('.bot-message').remove();
1161 - updateChatModeIndicator('agent', botId);
1162 - enableChatInput(botId);
1163 - if (callback) {
1164 - callback('');
1165 - }
1166 - return;
1167 - }
1168 -
1169 884 // Handle different response formats
1170 885 if (data.text || data.html || data.message) {
1171 886
1172 887 // Apply response hooks
@@ -1178,23 +893,22 @@
1178 893 }
1179 894
1180 895 // Display the response
1181 896 if (data.text && data.html) {
1182 - replaceLastMessage("bot", data.text, data.html, [], botId);
897 + replaceLastMessage("bot", data.text, data.html);
1183 898 } else if (data.text) {
1184 - replaceLastMessage("bot", data.text, '', [], botId);
899 + replaceLastMessage("bot", data.text);
1185 900 } else if (data.html) {
1186 - replaceLastMessage("bot", "", data.html, [], botId);
901 + replaceLastMessage("bot", "", data.html);
1187 902 } else if (data.message) {
1188 - replaceLastMessage("bot", data.message, '', [], botId);
903 + replaceLastMessage("bot", data.message);
1189 904 }
1190 905 }
1191 906
1192 907 // Handle other response properties
1193 908 if (data.data && data.data.filename) {
1194 - showActivePdf(data.data.filename, botId);
1195 - var instance = MxChatInstances.get(botId);
1196 - instance.activePdfFile = data.data.filename;
909 + showActivePdf(data.data.filename);
910 + activePdfFile = data.data.filename;
1197 911 }
1198 912
1199 913 if (data.redirect_url) {
1200 914 setTimeout(() => {
@@ -1202,9 +916,9 @@
1202 916 }, 1500);
1203 917 }
1204 918
1205 919 // Ensure chat input is re-enabled (safety net for edge cases)
1206 - enableChatInput(botId);
920 + enableChatInput();
1207 921
1208 922 if (callback) {
1209 923 callback(data.text || data.message || '');
1210 924 }
@@ -1210,22 +924,21 @@
1210 924 }
1211 925 }
1212 926
1213 927 // Enhanced updateChatModeIndicator function for immediate DOM updates
1214 -function updateChatModeIndicator(mode, botId) {
1215 - botId = botId || 'default';
1216 - const indicator = getElementDOM(botId, 'chat-mode-indicator');
928 +function updateChatModeIndicator(mode) {
929 + const indicator = document.getElementById('chat-mode-indicator');
1217 930 if (indicator) {
1218 931 const oldText = indicator.textContent;
1219 932
1220 933 if (mode === 'agent') {
1221 934 indicator.textContent = 'Live Agent';
1222 - startPolling(botId);
935 + startPolling();
1223 936 } else {
1224 937 // Everything else is AI mode
1225 938 const customAiText = indicator.getAttribute('data-ai-text') || 'AI Agent';
1226 939 indicator.textContent = customAiText;
1227 - stopPolling(botId);
940 + stopPolling();
1228 941 }
1229 942
1230 943 // Force immediate DOM update and reflow
1231 944 if (oldText !== indicator.textContent) {
@@ -1247,21 +960,18 @@
1247 960 }
1248 961 }
1249 962
1250 963 // Function to update message during streaming
1251 -function updateStreamingMessage(content, botId) {
1252 - botId = botId || 'default';
1253 -
964 +function updateStreamingMessage(content) {
1254 965 // ADD RESPONSE HOOK FOR REAL-TIME STREAMING
1255 966 if (typeof customMxChatFilter === 'function') {
1256 967 content = customMxChatFilter(content, "response");
1257 968 }
1258 -
969 +
1259 970 const formattedContent = linkify(content);
1260 971
1261 - // Find the temporary message in this bot's chat box
1262 - var $chatBox = getElement(botId, 'chat-box');
1263 - const tempMessage = $chatBox.find('.bot-message.temporary-message').last();
972 + // Find the temporary message
973 + const tempMessage = $('.bot-message.temporary-message').last();
1264 974
1265 975 if (tempMessage.length) {
1266 976 // Update existing message
1267 977 tempMessage.html(formattedContent);
@@ -1266,9 +976,9 @@
1266 976 // Update existing message
1267 977 tempMessage.html(formattedContent);
1268 978 } else {
1269 979 // Create new temporary message if it doesn't exist
1270 - appendMessage("bot", content, '', [], true, botId);
980 + appendMessage("bot", content, '', [], true);
1271 981 }
1272 982 }
1273 983
1274 984 function isStreamingSupported(model) {
@@ -1287,33 +997,24 @@
1287 997 return isSupported;
1288 998 }
1289 999
1290 1000 // Update the event handlers to use the correct function names (using event delegation)
1291 -// Use class-based selectors for multi-instance support
1292 -$(document).on('click', '.send-button', function() {
1293 - var botId = getBotIdFromElement(this);
1294 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
1295 - if (!(modeIndicator && modeIndicator.textContent === 'Live Agent')) {
1296 - disableChatInput(botId);
1297 - }
1298 - sendMessage(botId);
1001 +$(document).on('click', '#send-button', function() {
1002 + disableChatInput();
1003 + sendMessage();
1299 1004 });
1300 1005
1301 1006 // Override enter key handler (using event delegation)
1302 -$(document).on('keypress', '.chat-input', function(e) {
1007 +$(document).on('keypress', '#chat-input', function(e) {
1303 1008 if (e.which == 13 && !e.shiftKey) {
1304 1009 e.preventDefault();
1305 - var botId = getBotIdFromElement(this);
1306 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
1307 - if (!(modeIndicator && modeIndicator.textContent === 'Live Agent')) {
1308 - disableChatInput(botId);
1309 - }
1310 - sendMessage(botId);
1010 + disableChatInput();
1011 + sendMessage();
1311 1012 }
1312 1013 });
1313 1014
1314 1015
1315 -function appendMessage(sender, messageText = '', messageHtml = '', images = [], isTemporary = false, botId = 'default') {
1016 +function appendMessage(sender, messageText = '', messageHtml = '', images = [], isTemporary = false) {
1316 1017 try {
1317 1018 // Determine styles based on sender type
1318 1019 let messageClass, bgColor, fontColor;
1319 1020
@@ -1334,29 +1035,25 @@
1334 1035 }
1335 1036
1336 1037 const messageDiv = $('<div>')
1337 1038 .addClass(messageClass)
1338 - .attr('dir', 'auto');
1339 -
1340 - // Only apply inline colors if AI theme is not active (let CSS handle it)
1341 - var skipColors = shouldSkipInlineColors(botId);
1342 - if (skipColors) {
1343 - messageDiv.css({
1344 - 'margin-bottom': '1em'
1345 - });
1346 - } else {
1347 - messageDiv.css({
1039 + .attr('dir', 'auto')
1040 + .css({
1348 1041 'background': bgColor,
1349 1042 'color': fontColor,
1350 1043 'margin-bottom': '1em'
1351 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;
1352 1054 }
1353 1055
1354 - // Process the message content - always run linkify to convert markdown
1355 - // links and format text. linkify() handles existing HTML safely via
1356 - // negative lookaheads that skip URLs already inside <a> tags.
1357 - let fullMessage = linkify(messageText);
1358 -
1359 1056 // Add images if provided
1360 1057 if (images && images.length > 0) {
1361 1058 fullMessage += '<div class="image-gallery" dir="auto">';
1362 1059 images.forEach(img => {
@@ -1362,9 +1059,9 @@
1362 1059 images.forEach(img => {
1363 1060 const safeTitle = sanitizeUserInput(img.title);
1364 1061 const safeUrl = encodeURI(img.image_url);
1365 1062 const safeThumbnail = encodeURI(img.thumbnail_url);
1366 -
1063 +
1367 1064 fullMessage += `
1368 1065 <div style="margin-bottom: 10px;">
1369 1066 <strong>${safeTitle}</strong><br>
1370 1067 <a href="${safeUrl}" target="_blank">
@@ -1390,28 +1087,25 @@
1390 1087 if (isTemporary) {
1391 1088 messageDiv.addClass('temporary-message');
1392 1089 }
1393 1090
1394 - // Append to the correct chatbot instance's chat-box
1395 - var $chatBox = getElement(botId, 'chat-box');
1396 - messageDiv.hide().appendTo($chatBox).fadeIn(300, function() {
1091 + messageDiv.hide().appendTo('#chat-box').fadeIn(300, function() {
1397 1092 // FIXED: Use event delegation for link tracking
1398 1093 if (sender === "bot" || sender === "agent") {
1399 - attachLinkTracking(messageDiv, messageText, botId);
1094 + attachLinkTracking(messageDiv, messageText);
1400 1095 }
1401 -
1096 +
1402 1097 if (sender === "bot") {
1403 - const lastUserMessage = $chatBox.find('.user-message').last();
1098 + const lastUserMessage = $('#chat-box').find('.user-message').last();
1404 1099 if (lastUserMessage.length) {
1405 - scrollElementToTop(lastUserMessage, botId);
1100 + scrollElementToTop(lastUserMessage);
1406 1101 }
1407 1102 }
1408 1103 });
1409 1104
1410 1105 if (messageText.id) {
1411 - var instance = MxChatInstances.get(botId);
1412 - instance.lastSeenMessageId = messageText.id;
1413 - hideNotification(botId);
1106 + lastSeenMessageId = messageText.id;
1107 + hideNotification();
1414 1108 }
1415 1109 } catch (error) {
1416 1110 // Error rendering message - silently continue
1417 1111 }
@@ -1417,35 +1111,34 @@
1417 1111 }
1418 1112 }
1419 1113
1420 1114 // Helper function to attach link tracking with proper event handling
1421 -function attachLinkTracking(messageDiv, messageText, botId) {
1422 - botId = botId || 'default';
1115 +function attachLinkTracking(messageDiv, messageText) {
1423 1116 // Use a slight delay to ensure DOM is ready
1424 1117 setTimeout(function() {
1425 1118 const links = messageDiv.find('a[href]').not('[data-tracked]');
1426 -
1119 +
1427 1120 links.each(function() {
1428 1121 const $link = $(this);
1429 1122 const originalHref = $link.attr('href');
1430 -
1123 +
1431 1124 // Mark as tracked to avoid duplicate handlers
1432 1125 $link.attr('data-tracked', 'true');
1433 -
1126 +
1434 1127 // Only track external URLs
1435 1128 if (originalHref && (originalHref.startsWith('http://') || originalHref.startsWith('https://'))) {
1436 1129 // Remove any existing click handlers first
1437 1130 $link.off('click.tracking');
1438 -
1131 +
1439 1132 // Add new click handler with namespace
1440 1133 $link.on('click.tracking', function(e) {
1441 1134 e.preventDefault();
1442 1135 e.stopPropagation();
1443 -
1444 - const messageContext = typeof messageText === 'string'
1445 - ? messageText.substring(0, 200)
1136 +
1137 + const messageContext = typeof messageText === 'string'
1138 + ? messageText.substring(0, 200)
1446 1139 : '';
1447 -
1140 +
1448 1141 // Track the click
1449 1142 $.ajax({
1450 1143 url: mxchatChat.ajax_url,
1451 1144 type: 'POST',
@@ -1450,9 +1143,9 @@
1450 1143 url: mxchatChat.ajax_url,
1451 1144 type: 'POST',
1452 1145 data: {
1453 1146 action: 'mxchat_track_url_click',
1454 - session_id: getChatSession(botId),
1147 + session_id: getChatSession(),
1455 1148 url: originalHref,
1456 1149 message_context: messageContext,
1457 1150 nonce: mxchatChat.nonce
1458 1151 },
@@ -1464,9 +1157,9 @@
1464 1157 window.location.href = originalHref;
1465 1158 }
1466 1159 }
1467 1160 });
1468 -
1161 +
1469 1162 return false; // Extra insurance to prevent default
1470 1163 });
1471 1164 }
1472 1165 });
@@ -1472,12 +1165,11 @@
1472 1165 });
1473 1166 }, 100); // Small delay to ensure DOM is ready
1474 1167 }
1475 1168
1476 -function replaceLastMessage(sender, responseText, responseHtml = '', images = [], botId = 'default') {
1169 +function replaceLastMessage(sender, responseText, responseHtml = '', images = []) {
1477 1170 var messageClass = sender === "user" ? "user-message" : sender === "agent" ? "agent-message" : "bot-message";
1478 - var $chatBox = getElement(botId, 'chat-box');
1479 - 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();
1480 1172
1481 1173 // Determine styles
1482 1174 let bgColor, fontColor;
1483 1175 if (sender === "user") {
@@ -1490,13 +1182,27 @@
1490 1182 bgColor = botMessageBgColor;
1491 1183 fontColor = botMessageFontColor;
1492 1184 }
1493 1185
1494 - // Always run linkify to convert markdown links and format text.
1495 - // linkify() already handles existing HTML (its URL patterns use negative lookaheads
1496 - // to avoid double-processing URLs that are already inside <a> tags).
1497 - var fullMessage = linkify(responseText);
1498 -
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 +
1499 1205 if (responseHtml) {
1500 1206 // Only add line breaks if there's actual text content before the HTML
1501 1207 if (fullMessage && fullMessage.trim()) {
1502 1208 fullMessage += '<br><br>' + responseHtml;
@@ -1524,87 +1230,62 @@
1524 1230 lastMessageDiv
1525 1231 .html(fullMessage)
1526 1232 .removeClass('bot-message user-message temporary-message')
1527 1233 .addClass(messageClass)
1528 - .attr('dir', 'auto');
1529 -
1530 - // Only apply inline colors if AI theme is not active (let CSS handle it)
1531 - var skipColors = mxchatChat.skip_inline_colors || shouldSkipInlineColors(botId);
1532 - if (!skipColors) {
1533 - lastMessageDiv.css({
1234 + .attr('dir', 'auto')
1235 + .css({
1534 1236 'background-color': bgColor,
1535 1237 'color': fontColor,
1536 1238 });
1537 - }
1538 1239
1539 1240 // Handle link tracking and scroll
1540 1241 if (sender === "bot" || sender === "agent") {
1541 - attachLinkTracking(lastMessageDiv, responseText, botId);
1242 + attachLinkTracking(lastMessageDiv, responseText);
1542 1243
1543 - const lastUserMessage = $chatBox.find('.user-message').last();
1244 + const lastUserMessage = $('#chat-box').find('.user-message').last();
1544 1245 if (lastUserMessage.length) {
1545 - scrollElementToTop(lastUserMessage, botId);
1246 + scrollElementToTop(lastUserMessage);
1546 1247 }
1547 1248 // Show notification if chat is hidden
1548 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
1549 - if ($floatingChatbot.hasClass('hidden')) {
1550 - showNotification(botId);
1249 + if ($('#floating-chatbot').hasClass('hidden')) {
1250 + showNotification();
1551 1251 }
1552 1252 }
1553 1253
1554 1254 // Re-enable chat input after response is displayed
1555 - enableChatInput(botId);
1255 + enableChatInput();
1556 1256 } else {
1557 - appendMessage(sender, responseText, responseHtml, images, false, botId);
1257 + appendMessage(sender, responseText, responseHtml, images);
1558 1258 // Re-enable chat input after response is displayed
1559 - enableChatInput(botId);
1259 + enableChatInput();
1560 1260 }
1561 1261 }
1562 1262
1563 1263
1564 - function appendThinkingMessage(botId) {
1565 - botId = botId || 'default';
1264 + function appendThinkingMessage() {
1265 + // Remove any existing thinking dots first
1266 + $('.thinking-dots').remove();
1566 1267
1567 - // Don't show thinking dots in live agent mode - message is just forwarded to a human
1568 - var indicator = getElementDOM(botId, 'chat-mode-indicator');
1569 - if (indicator && indicator.textContent === 'Live Agent') {
1570 - return;
1571 - }
1572 -
1573 - var $chatBox = getElement(botId, 'chat-box');
1574 -
1575 - // Remove any existing thinking dots in this bot's chat first
1576 - $chatBox.find('.thinking-dots').remove();
1577 -
1578 - // Check if we should skip inline colors (AI theme is active)
1579 - var skipColors = shouldSkipInlineColors(botId);
1580 -
1581 1268 // Retrieve the bot message font color and background color
1582 1269 var botMessageFontColor = mxchatChat.bot_message_font_color;
1583 1270 var botMessageBgColor = mxchatChat.bot_message_bg_color;
1584 1271
1585 - // Build thinking dots HTML - skip inline colors if AI theme is active
1586 - var dotStyle = skipColors ? '' : ' style="background-color: ' + botMessageFontColor + ';"';
1272 +
1587 1273 var thinkingHtml = '<div class="thinking-dots-container">' +
1588 1274 '<div class="thinking-dots">' +
1589 - '<span class="dot"' + dotStyle + '></span>' +
1590 - '<span class="dot"' + dotStyle + '></span>' +
1591 - '<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>' +
1592 1278 '</div>' +
1593 1279 '</div>';
1594 1280
1595 - // Append the thinking dots to this bot's chat container - skip inline colors if AI theme is active
1596 - var messageStyle = skipColors ? '' : ' style="background-color: ' + botMessageBgColor + '; color: ' + botMessageFontColor + ';"';
1597 - $chatBox.append('<div class="bot-message temporary-message"' + messageStyle + '>' + thinkingHtml + '</div>');
1598 - 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();
1599 1284 }
1600 -
1601 - function removeThinkingDots(botId) {
1602 - botId = botId || 'default';
1603 - var $chatBox = getElement(botId, 'chat-box');
1604 - // Remove by temporary-message class first, then fall back to any bot-message containing thinking dots
1605 - $chatBox.find('.thinking-dots').closest('.temporary-message').remove();
1606 - $chatBox.find('.bot-message .thinking-dots').closest('.bot-message').remove();
1285 +
1286 + function removeThinkingDots() {
1287 + $('.thinking-dots').closest('.temporary-message').remove();
1607 1288 }
1608 1289
1609 1290 // ====================================
1610 1291 // TEXT FORMATTING & PROCESSING
@@ -1638,12 +1319,9 @@
1638 1319 processedText = formatTextStyling(processedText);
1639 1320
1640 1321 // Process code blocks BEFORE processing links
1641 1322 processedText = formatCodeBlocks(processedText);
1642 -
1643 - // Process markdown tables BEFORE converting newlines to paragraphs
1644 - processedText = formatMarkdownTables(processedText);
1645 -
1323 +
1646 1324 // NOW convert to paragraphs
1647 1325 processedText = convertNewlinesToBreaks(processedText);
1648 1326
1649 1327 // IMPORTANT: Handle citation-style brackets FIRST [URL]
@@ -1656,63 +1334,37 @@
1656 1334 // Return as a proper link without the brackets
1657 1335 return `<a href="${safeUrl}" target="${linkTarget}">${cleanUrl}</a>`;
1658 1336 });
1659 1337
1660 - // Process markdown links: [text](url) and [](url)
1661 - // Uses balanced parenthesis matching to handle URLs containing parens
1662 - // (e.g. PDF filenames with dates like (2025-08-28).pdf)
1663 - processedText = (function(input) {
1664 - var result = '';
1665 - var i = 0;
1666 - while (i < input.length) {
1667 - // Look for [ at current position
1668 - if (input[i] === '[') {
1669 - // Find closing ]
1670 - var closeBracket = input.indexOf(']', i + 1);
1671 - if (closeBracket === -1 || closeBracket + 1 >= input.length || input[closeBracket + 1] !== '(') {
1672 - result += input[i];
1673 - i++;
1674 - continue;
1675 - }
1676 - var linkText = input.substring(i + 1, closeBracket);
1677 - // Check if URL starts with http
1678 - var urlStart = closeBracket + 2;
1679 - if (!input.substring(urlStart).match(/^https?:\/\//)) {
1680 - result += input[i];
1681 - i++;
1682 - continue;
1683 - }
1684 - // Find balanced closing paren
1685 - var depth = 1;
1686 - var j = urlStart;
1687 - while (j < input.length && depth > 0) {
1688 - if (input[j] === '(') depth++;
1689 - else if (input[j] === ')') depth--;
1690 - if (depth > 0) j++;
1691 - }
1692 - if (depth !== 0) {
1693 - result += input[i];
1694 - i++;
1695 - continue;
1696 - }
1697 - var url = input.substring(urlStart, j);
1698 - var cleanUrl = url.replace(/[\].,;!?]+$/, '');
1699 - var encodedUrl = safeEncodeUrl(cleanUrl);
1700 - if (!linkText || !linkText.trim()) {
1701 - result += '<a href="' + encodedUrl + '" target="' + linkTarget + '">' + cleanUrl + '</a>';
1702 - } else {
1703 - var safeText = sanitizeUserInput(linkText);
1704 - result += '<a href="' + encodedUrl + '" target="' + linkTarget + '">' + safeText + '</a>';
1705 - }
1706 - i = j + 1; // Skip past the closing )
1707 - } else {
1708 - result += input[i];
1709 - i++;
1710 - }
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>`;
1711 1348 }
1712 - return result;
1713 - })(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 + });
1714 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 +
1715 1367 // Process phone numbers: [text](tel:number)
1716 1368 const phonePattern = /\[([^\]]+)\]\((tel:[\d+\-\s()]+)\)/g;
1717 1369 processedText = processedText.replace(phonePattern, (match, text, phone) => {
1718 1370 const safePhone = safeEncodeUrl(phone);
@@ -1864,78 +1516,9 @@
1864 1516 });
1865 1517
1866 1518 return text;
1867 1519 }
1868 -
1869 - function formatMarkdownTables(text) {
1870 - var lines = text.split('\n');
1871 - var result = [];
1872 - var i = 0;
1873 -
1874 - while (i < lines.length) {
1875 - // Check for a table: current line has pipes AND next line is a separator row
1876 - if (i + 1 < lines.length &&
1877 - lines[i].indexOf('|') !== -1 &&
1878 - /^\s*\|?[\s\-:]+(\|[\s\-:]+)+\|?\s*$/.test(lines[i + 1])) {
1879 -
1880 - var tableLines = [];
1881 - var headerLine = lines[i];
1882 - var separatorLine = lines[i + 1];
1883 - tableLines.push(headerLine);
1884 - tableLines.push(separatorLine);
1885 -
1886 - // Collect remaining table rows
1887 - var j = i + 2;
1888 - while (j < lines.length && lines[j].indexOf('|') !== -1 && lines[j].trim() !== '') {
1889 - tableLines.push(lines[j]);
1890 - j++;
1891 - }
1892 -
1893 - // Parse alignment from separator row
1894 - var sepCells = separatorLine.split('|').filter(function(c) { return c.trim() !== ''; });
1895 - var alignments = sepCells.map(function(cell) {
1896 - var trimmed = cell.trim();
1897 - if (trimmed.charAt(0) === ':' && trimmed.charAt(trimmed.length - 1) === ':') return 'center';
1898 - if (trimmed.charAt(trimmed.length - 1) === ':') return 'right';
1899 - return 'left';
1900 - });
1901 -
1902 - // Build HTML table
1903 - var html = '<div class="mxchat-table-wrapper"><table class="mxchat-table">';
1904 -
1905 - // Header row
1906 - var headerCells = tableLines[0].split('|').filter(function(c) { return c.trim() !== ''; });
1907 - html += '<thead><tr>';
1908 - headerCells.forEach(function(cell, idx) {
1909 - var align = alignments[idx] || 'left';
1910 - html += '<th style="text-align:' + align + '">' + cell.trim() + '</th>';
1911 - });
1912 - html += '</tr></thead>';
1913 -
1914 - // Body rows
1915 - html += '<tbody>';
1916 - for (var r = 2; r < tableLines.length; r++) {
1917 - var rowCells = tableLines[r].split('|').filter(function(c) { return c.trim() !== ''; });
1918 - html += '<tr>';
1919 - rowCells.forEach(function(cell, idx) {
1920 - var align = alignments[idx] || 'left';
1921 - html += '<td style="text-align:' + align + '">' + cell.trim() + '</td>';
1922 - });
1923 - html += '</tr>';
1924 - }
1925 - html += '</tbody></table></div>';
1926 -
1927 - result.push(html);
1928 - i = j;
1929 - } else {
1930 - result.push(lines[i]);
1931 - i++;
1932 - }
1933 - }
1934 -
1935 - return result.join('\n');
1936 - }
1937 -
1520 +
1938 1521 function sanitizeUserInput(text) {
1939 1522 const div = document.createElement('div');
1940 1523 div.textContent = text;
1941 1524 return div.innerHTML;
@@ -1965,21 +1548,10 @@
1965 1548 // ====================================
1966 1549 // UI & SCROLLING CONTROLS
1967 1550 // ====================================
1968 1551
1969 - function scrollToBottom(botIdOrInstant, instant) {
1970 - // Handle backward compatibility: scrollToBottom() or scrollToBottom(true/false)
1971 - var botId = 'default';
1972 - if (typeof botIdOrInstant === 'string') {
1973 - botId = botIdOrInstant;
1974 - instant = instant || false;
1975 - } else if (typeof botIdOrInstant === 'boolean') {
1976 - instant = botIdOrInstant;
1977 - } else {
1978 - instant = false;
1979 - }
1980 -
1981 - var chatBox = getElement(botId, 'chat-box');
1552 + function scrollToBottom(instant = false) {
1553 + var chatBox = $('#chat-box');
1982 1554 if (instant) {
1983 1555 // Instantly set the scroll position to the bottom
1984 1556 chatBox.scrollTop(chatBox.prop("scrollHeight"));
1985 1557 } else {
@@ -1988,15 +1560,15 @@
1988 1560 const scrollHeight = chatBox.prop("scrollHeight");
1989 1561 const initialScroll = chatBox.scrollTop();
1990 1562 const distance = scrollHeight - initialScroll;
1991 1563 const duration = 500; // Duration in ms
1992 -
1564 +
1993 1565 function smoothScroll(timestamp) {
1994 1566 if (!start) start = timestamp;
1995 1567 const progress = timestamp - start;
1996 1568 const currentScroll = initialScroll + (distance * (progress / duration));
1997 1569 chatBox.scrollTop(currentScroll);
1998 -
1570 +
1999 1571 if (progress < duration) {
2000 1572 requestAnimationFrame(smoothScroll);
2001 1573 } else {
2002 1574 chatBox.scrollTop(scrollHeight); // Ensure it's exactly at the bottom
@@ -2001,36 +1573,31 @@
2001 1573 } else {
2002 1574 chatBox.scrollTop(scrollHeight); // Ensure it's exactly at the bottom
2003 1575 }
2004 1576 }
2005 -
1577 +
2006 1578 requestAnimationFrame(smoothScroll);
2007 1579 }
2008 1580 }
2009 -
2010 - function scrollElementToTop(element, botId) {
2011 - botId = botId || 'default';
2012 - var chatBox = getElement(botId, 'chat-box');
1581 +
1582 + function scrollElementToTop(element) {
1583 + var chatBox = $('#chat-box');
2013 1584 var elementTop = element.position().top + chatBox.scrollTop();
2014 1585 chatBox.animate({ scrollTop: elementTop }, 500);
2015 1586 }
2016 -
2017 - function showChatWidget(botId) {
2018 - botId = botId || 'default';
2019 - var $button = getElement(botId, 'floating-chatbot-button');
1587 +
1588 + function showChatWidget() {
2020 1589 // First ensure display is set
2021 - $button.css('display', 'flex');
1590 + $('#floating-chatbot-button').css('display', 'flex');
2022 1591 // Then handle the fade
2023 - $button.fadeTo(500, 1);
1592 + $('#floating-chatbot-button').fadeTo(500, 1);
2024 1593 // Force visibility
2025 - $button.removeClass('hidden');
1594 + $('#floating-chatbot-button').removeClass('hidden');
2026 1595 }
2027 1596
2028 - function hideChatWidget(botId) {
2029 - botId = botId || 'default';
2030 - var $button = getElement(botId, 'floating-chatbot-button');
2031 - $button.css('display', 'none');
2032 - $button.addClass('hidden');
1597 + function hideChatWidget() {
1598 + $('#floating-chatbot-button').css('display', 'none');
1599 + $('#floating-chatbot-button').addClass('hidden');
2033 1600 }
2034 1601
2035 1602 function disableScroll() {
2036 1603 if (isMobile()) {
@@ -2089,43 +1656,34 @@
2089 1656 chatButton.appendChild(notificationBadge);
2090 1657
2091 1658 }
2092 1659
2093 - function showNotification(botId) {
2094 - botId = botId || 'default';
2095 - const badge = getElementDOM(botId, 'chat-notification-badge');
2096 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
2097 - if (badge && $floatingChatbot.hasClass('hidden')) {
1660 + function showNotification() {
1661 + const badge = document.getElementById('chat-notification-badge');
1662 + if (badge && $('#floating-chatbot').hasClass('hidden')) {
2098 1663 badge.style.display = 'block';
2099 1664 badge.textContent = '1';
2100 1665 }
2101 1666 }
2102 -
2103 - function hideNotification(botId) {
2104 - botId = botId || 'default';
2105 - const badge = getElementDOM(botId, 'chat-notification-badge');
1667 +
1668 + function hideNotification() {
1669 + const badge = document.getElementById('chat-notification-badge');
2106 1670 if (badge) {
2107 1671 badge.style.display = 'none';
2108 1672 }
2109 1673 }
2110 -
2111 - function startNotificationChecking(botId) {
2112 - botId = botId || 'default';
1674 +
1675 + function startNotificationChecking() {
2113 1676 const chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
2114 1677 if (!chatPersistenceEnabled) return;
2115 -
2116 - createNotificationBadge(botId);
2117 - var instance = MxChatInstances.get(botId);
2118 - instance.notificationCheckInterval = setInterval(function() {
2119 - checkForNewMessages(botId);
2120 - }, 30000); // Check every 30 seconds
1678 +
1679 + createNotificationBadge();
1680 + notificationCheckInterval = setInterval(checkForNewMessages, 30000); // Check every 30 seconds
2121 1681 }
2122 -
2123 - function stopNotificationChecking(botId) {
2124 - botId = botId || 'default';
2125 - var instance = MxChatInstances.get(botId);
2126 - if (instance.notificationCheckInterval) {
2127 - clearInterval(instance.notificationCheckInterval);
1682 +
1683 + function stopNotificationChecking() {
1684 + if (notificationCheckInterval) {
1685 + clearInterval(notificationCheckInterval);
2128 1686 }
2129 1687 }
2130 1688
2131 1689 function checkForNewMessages() {
@@ -2151,35 +1709,28 @@
2151 1709 });
2152 1710 }
2153 1711
2154 1712
2155 -// ====================================
2156 -// LIVE AGENT FUNCTIONALITY
2157 -// ====================================
1713 + // ====================================
1714 + // LIVE AGENT FUNCTIONALITY
1715 + // ====================================
2158 1716
2159 -function startPolling(botId) {
2160 - botId = botId || 'default';
2161 - var instance = MxChatInstances.get(botId);
2162 - // Clear any existing interval first
2163 - stopPolling(botId);
2164 - instance.pollingInterval = setInterval(function() {
2165 - checkForAgentMessages(botId);
2166 - }, 5000);
2167 -}
1717 + function startPolling() {
1718 + // Clear any existing interval first
1719 + stopPolling();
1720 + // Start new polling interval
1721 + pollingInterval = setInterval(checkForAgentMessages, 5000);
1722 + }
2168 1723
2169 -function stopPolling(botId) {
2170 - botId = botId || 'default';
2171 - var instance = MxChatInstances.get(botId);
2172 - if (instance.pollingInterval) {
2173 - clearInterval(instance.pollingInterval);
2174 - instance.pollingInterval = null;
1724 + function stopPolling() {
1725 + if (pollingInterval) {
1726 + clearInterval(pollingInterval);
1727 + pollingInterval = null;
1728 + }
2175 1729 }
2176 -}
2177 -
2178 -function checkForAgentMessages(botId) {
2179 - botId = botId || 'default';
2180 - var instance = MxChatInstances.get(botId);
2181 - const sessionId = getChatSession(botId);
1730 +
1731 +function checkForAgentMessages() {
1732 + const sessionId = getChatSession();
2182 1733 $.ajax({
2183 1734 url: mxchatChat.ajax_url,
2184 1735 type: 'POST',
2185 1736 dataType: 'json',
@@ -2185,41 +1736,32 @@
2185 1736 dataType: 'json',
2186 1737 data: {
2187 1738 action: 'mxchat_fetch_new_messages',
2188 1739 session_id: sessionId,
2189 - last_seen_id: instance.lastSeenMessageId,
2190 - persistence_enabled: 'true',
1740 + last_seen_id: lastSeenMessageId,
1741 + persistence_enabled: 'true', // Add this too
2191 1742 nonce: mxchatChat.nonce
2192 1743 },
2193 1744 success: function (response) {
2194 1745 if (response.success && response.data?.new_messages) {
2195 1746 let hasNewMessage = false;
2196 -
1747 +
2197 1748 response.data.new_messages.forEach(function (message) {
2198 - if (message.role === "agent" && !instance.processedMessageIds.has(message.id)) {
1749 + if (message.role === "agent" && !processedMessageIds.has(message.id)) {
2199 1750 hasNewMessage = true;
2200 - appendMessage("agent", message.content, '', [], false, botId);
2201 - instance.lastSeenMessageId = message.id;
2202 - 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);
2203 1755 }
2204 1756 });
2205 1757
2206 - if (hasNewMessage) {
2207 - enableChatInput(botId);
1758 + if (hasNewMessage && $('#floating-chatbot').hasClass('hidden')) {
1759 + showNotification();
2208 1760 }
2209 -
2210 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
2211 - if (hasNewMessage && $floatingChatbot.hasClass('hidden')) {
2212 - showNotification(botId);
2213 - }
2214 -
2215 - scrollToBottom(botId, true);
1761 +
1762 + scrollToBottom(true);
2216 1763 }
2217 -
2218 - // Handle chat mode transitions (e.g. agent ended chat via !endchat)
2219 - if (response.success && response.data?.chat_mode) {
2220 - updateChatModeIndicator(response.data.chat_mode, botId);
2221 - }
2222 1764 },
2223 1765 error: function (xhr, status, error) {
2224 1766 // Polling error - silently continue
2225 1767 }
@@ -2229,29 +1771,17 @@
2229 1771 // ====================================
2230 1772 // CHAT HISTORY & PERSISTENCE
2231 1773 // ====================================
2232 1774
2233 -function loadChatHistory(botId, onComplete) {
2234 - botId = botId || 'default';
2235 - var instance = MxChatInstances.get(botId);
2236 -
1775 +function loadChatHistory() {
2237 1776 // Prevent duplicate loading
2238 - if (instance.chatHistoryLoaded) {
2239 - if (onComplete) onComplete();
1777 + if (chatHistoryLoaded) {
2240 1778 return;
2241 1779 }
2242 -
2243 - // Use getChatSession which returns null if no session exists (does NOT create one)
2244 - var sessionId = getChatSession(botId);
1780 +
1781 + var sessionId = getChatSession();
2245 1782 var chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
2246 1783
2247 - // No session yet — nothing to load. History will load after first message via ensureSession.
2248 - if (!sessionId) {
2249 - instance.chatHistoryLoaded = true;
2250 - if (onComplete) onComplete();
2251 - return;
2252 - }
2253 -
2254 1784 if (chatPersistenceEnabled && sessionId) {
2255 1785 $.ajax({
2256 1786 url: mxchatChat.ajax_url,
2257 1787 type: 'POST',
@@ -2262,12 +1792,11 @@
2262 1792 },
2263 1793 success: function(response) {
2264 1794 // Handle session reset (IP changed while user was away)
2265 1795 if (response.success === false && response.data && response.data.action === 'reset_session') {
2266 - // Silent reset — new session but don't clear UI
2267 - MxChatInstances.silentResetSession(botId);
2268 - instance.chatHistoryLoaded = true; // Prevent retry loop
2269 - if (onComplete) onComplete();
1796 + // Silently reset session - user will start fresh
1797 + resetChatSession();
1798 + chatHistoryLoaded = true; // Prevent retry loop
2270 1799 return;
2271 1800 }
2272 1801
2273 1802 // Check if the response indicates success
@@ -2273,15 +1802,15 @@
2273 1802 // Check if the response indicates success
2274 1803 if (response.success) {
2275 1804 // Handle case where conversation data exists and is an array
2276 1805 if (response.data && Array.isArray(response.data.conversation)) {
2277 - var $chatBox = getElement(botId, 'chat-box');
1806 + var $chatBox = $('#chat-box');
2278 1807 var $fragment = $(document.createDocumentFragment());
2279 - let highestMessageId = instance.lastSeenMessageId;
1808 + let highestMessageId = lastSeenMessageId;
2280 1809
2281 1810 // Update chat mode if provided
2282 1811 if (response.data.chat_mode) {
2283 - updateChatModeIndicator(response.data.chat_mode, botId);
1812 + updateChatModeIndicator(response.data.chat_mode);
2284 1813 }
2285 1814
2286 1815 // Only process if there are actual messages
2287 1816 if (response.data.conversation.length > 0) {
@@ -2286,9 +1815,9 @@
2286 1815 // Only process if there are actual messages
2287 1816 if (response.data.conversation.length > 0) {
2288 1817 // IMPORTANT: Clear existing messages before loading history
2289 1818 $chatBox.empty();
2290 -
1819 +
2291 1820 $.each(response.data.conversation, function(index, message) {
2292 1821 // Skip agent messages if persistence is off
2293 1822 if (!chatPersistenceEnabled && message.role === 'agent') {
2294 1823 return;
@@ -2323,19 +1852,9 @@
2323 1852 var content = message.content;
2324 1853 content = content.replace(/\\'/g, "'").replace(/\\"/g, '"');
2325 1854 content = decodeHTMLEntities(content);
2326 1855
2327 - // Skip linkify for messages containing structured HTML
2328 - // (forms, product cards, galleries, etc.) to avoid
2329 - // markdown formatting corrupting HTML attributes
2330 - // (e.g. underscores in name="field_name" becoming <em> tags)
2331 - if (content.includes("mxchat-product-card") ||
2332 - content.includes("mxchat-image-gallery") ||
2333 - content.includes("mxchat-featured-products") ||
2334 - content.includes("<form") ||
2335 - content.includes("<input") ||
2336 - content.includes("<select") ||
2337 - content.includes("<textarea")) {
1856 + if (content.includes("mxchat-product-card") || content.includes("mxchat-image-gallery")) {
2338 1857 messageElement.html(content);
2339 1858 } else {
2340 1859 var formattedContent = linkify(content);
2341 1860 messageElement.html(formattedContent);
@@ -2345,47 +1864,42 @@
2345 1864
2346 1865 // Track message IDs
2347 1866 if (message.id) {
2348 1867 highestMessageId = Math.max(highestMessageId, message.id);
2349 - instance.processedMessageIds.add(message.id);
1868 + processedMessageIds.add(message.id);
2350 1869 }
2351 1870 });
2352 1871
2353 1872 // Only append messages and scroll if we have content
2354 1873 $chatBox.append($fragment);
2355 - scrollToBottom(botId, true);
1874 + scrollToBottom(true);
2356 1875
2357 1876 // Collapse quick questions if we have conversation history
2358 - // BUT skip auto-collapse for embedded bots (they should stay expanded)
2359 - if (hasQuickQuestions(botId) && !isEmbeddedBot(botId)) {
2360 - collapseQuickQuestions(botId);
1877 + if (hasQuickQuestions()) {
1878 + collapseQuickQuestions();
2361 1879 }
2362 1880
2363 1881 // Update lastSeenMessageId after history loads
2364 - instance.lastSeenMessageId = highestMessageId;
1882 + lastSeenMessageId = highestMessageId;
2365 1883
2366 1884 // Only update chat mode if persistence is enabled and we have messages
2367 1885 if (chatPersistenceEnabled) {
2368 1886 var lastMessage = response.data.conversation[response.data.conversation.length - 1];
2369 1887 if (lastMessage.role === 'agent') {
2370 - updateChatModeIndicator('agent', botId);
1888 + updateChatModeIndicator('agent');
2371 1889 }
2372 1890 }
2373 -
1891 +
2374 1892 // Mark as loaded ONLY after successful load
2375 - instance.chatHistoryLoaded = true;
1893 + chatHistoryLoaded = true;
2376 1894 }
2377 1895 }
2378 1896 }
2379 - if (onComplete) onComplete();
2380 1897 },
2381 1898 error: function(xhr, status, error) {
2382 1899 // Error loading chat history - silently continue
2383 - if (onComplete) onComplete();
2384 1900 }
2385 1901 });
2386 - } else {
2387 - if (onComplete) onComplete();
2388 1902 }
2389 1903 }
2390 1904
2391 1905
@@ -2399,12 +1913,11 @@
2399 1913 element.addEventListener(eventType, handler);
2400 1914 }
2401 1915 }
2402 1916
2403 - function showActivePdf(filename, botId) {
2404 - botId = botId || 'default';
2405 - const container = getElementDOM(botId, 'active-pdf-container');
2406 - 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');
2407 1920
2408 1921 if (!container || !nameElement) {
2409 1922 return;
2410 1923 }
@@ -2412,12 +1925,11 @@
2412 1925 nameElement.textContent = filename;
2413 1926 container.style.display = 'flex';
2414 1927 }
2415 1928
2416 - function showActiveWord(filename, botId) {
2417 - botId = botId || 'default';
2418 - const container = getElementDOM(botId, 'active-word-container');
2419 - 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');
2420 1932
2421 1933 if (!container || !nameElement) {
2422 1934 return;
2423 1935 }
@@ -2424,17 +1936,15 @@
2424 1936
2425 1937 nameElement.textContent = filename;
2426 1938 container.style.display = 'flex';
2427 1939 }
2428 -
2429 - function removeActivePdf(botId) {
2430 - botId = botId || 'default';
2431 - var instance = MxChatInstances.get(botId);
2432 - const container = getElementDOM(botId, 'active-pdf-container');
2433 - const nameElement = getElementDOM(botId, 'active-pdf-name');
2434 -
2435 - if (!container || !nameElement || !instance.activePdfFile) return;
2436 -
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 +
2437 1947 fetch(mxchatChat.ajax_url, {
2438 1948 method: 'POST',
2439 1949 headers: {
2440 1950 'Content-Type': 'application/x-www-form-urlencoded',
@@ -2440,9 +1950,9 @@
2440 1950 'Content-Type': 'application/x-www-form-urlencoded',
2441 1951 },
2442 1952 body: new URLSearchParams({
2443 1953 'action': 'mxchat_remove_pdf',
2444 - 'session_id': getChatSession(botId),
1954 + 'session_id': sessionId,
2445 1955 'nonce': mxchatChat.nonce
2446 1956 })
2447 1957 })
2448 1958 .then(response => response.json())
@@ -2493,10 +2003,9 @@
2493 2003 // ====================================
2494 2004 // CONSENT & COMPLIANCE (GDPR)
2495 2005 // ====================================
2496 2006
2497 - function initializeChatVisibility(botId) {
2498 - botId = botId || 'default';
2007 + function initializeChatVisibility() {
2499 2008 const complianzEnabled = mxchatChat.complianz_toggle === 'on' ||
2500 2009 mxchatChat.complianz_toggle === '1' ||
2501 2010 mxchatChat.complianz_toggle === 1;
2502 2011
@@ -2501,35 +2010,34 @@
2501 2010 mxchatChat.complianz_toggle === 1;
2502 2011
2503 2012 if (complianzEnabled && typeof cmplz_has_consent === "function" && typeof complianz !== 'undefined') {
2504 2013 // Initial check
2505 - checkConsentAndShowChat(botId);
2014 + checkConsentAndShowChat();
2506 2015
2507 2016 // Listen for consent changes
2508 2017 $(document).on('cmplz_status_change', function(event) {
2509 - checkConsentAndShowChat(botId);
2018 + checkConsentAndShowChat();
2510 2019 });
2511 2020 } else {
2512 2021 // If Complianz is not enabled, always show
2513 - getElement(botId, 'floating-chatbot-button')
2022 + $('#floating-chatbot-button')
2514 2023 .css('display', 'flex')
2515 2024 .removeClass('hidden no-consent')
2516 2025 .fadeTo(500, 1);
2517 -
2026 +
2518 2027 // Also check pre-chat message when Complianz is not enabled
2519 - checkPreChatDismissal(botId);
2028 + checkPreChatDismissal();
2520 2029 }
2521 2030 }
2522 2031
2523 -
2524 - function checkConsentAndShowChat(botId) {
2525 - botId = botId || 'default';
2032 +
2033 + function checkConsentAndShowChat() {
2526 2034 var consentStatus = cmplz_has_consent('marketing');
2527 2035 var consentType = complianz.consenttype;
2528 2036
2529 - let $widget = getElement(botId, 'floating-chatbot-button');
2530 - let $chatbot = getElement(botId, 'floating-chatbot');
2531 - let $preChat = getElement(botId, 'pre-chat-message');
2037 + let $widget = $('#floating-chatbot-button');
2038 + let $chatbot = $('#floating-chatbot');
2039 + let $preChat = $('#pre-chat-message');
2532 2040
2533 2041 if (consentStatus === true) {
2534 2042 $widget
2535 2043 .removeClass('no-consent')
@@ -2538,9 +2046,9 @@
2538 2046 .fadeTo(500, 1);
2539 2047 $chatbot.removeClass('no-consent');
2540 2048
2541 2049 // Show pre-chat message if not dismissed
2542 - checkPreChatDismissal(botId);
2050 + checkPreChatDismissal();
2543 2051 } else {
2544 2052 $widget
2545 2053 .addClass('no-consent')
2546 2054 .fadeTo(500, 0, function() {
@@ -2558,38 +2066,46 @@
2558 2066
2559 2067 // ====================================
2560 2068 // PRE-CHAT MESSAGE HANDLING
2561 2069 // ====================================
2562 -
2563 - function checkPreChatDismissal(botId) {
2564 - botId = botId || 'default';
2565 - try {
2566 - var dismissedAt = localStorage.getItem('mxchat_pre_chat_dismissed_' + botId);
2567 - if (dismissedAt) {
2568 - // Re-show after 24 hours
2569 - var elapsed = Date.now() - parseInt(dismissedAt, 10);
2570 - if (elapsed < 86400000) {
2571 - getElement(botId, 'pre-chat-message').hide();
2572 - 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();
2573 2084 }
2574 - // Expired — clear and show again
2575 - localStorage.removeItem('mxchat_pre_chat_dismissed_' + botId);
2085 + },
2086 + error: function() {
2087 + // Error checking pre-chat dismissal - silently continue
2576 2088 }
2577 - getElement(botId, 'pre-chat-message').fadeIn(250);
2578 - } catch (e) {
2579 - // localStorage unavailable — show the message
2580 - getElement(botId, 'pre-chat-message').fadeIn(250);
2581 - }
2089 + });
2582 2090 }
2583 2091
2584 - function handlePreChatDismissal(botId) {
2585 - botId = botId || 'default';
2586 - getElement(botId, 'pre-chat-message').fadeOut(200);
2587 - try {
2588 - localStorage.setItem('mxchat_pre_chat_dismissed_' + botId, String(Date.now()));
2589 - } catch (e) {
2590 - // localStorage unavailable — dismissal won't persist
2591 - }
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 + });
2592 2108 }
2593 2109
2594 2110
2595 2111 // ====================================
@@ -2615,104 +2131,78 @@
2615 2131 // ====================================
2616 2132
2617 2133 $(document).on('click', '.mxchat-popular-question', function () {
2618 2134 var question = $(this).text();
2619 - var botId = getBotIdFromElement(this);
2620 -
2135 +
2621 2136 // Append the question as if the user typed it
2622 - appendMessage("user", question, '', [], false, botId);
2623 -
2137 + appendMessage("user", question);
2138 +
2624 2139 // Only collapse if there are questions
2625 - if (hasQuickQuestions(botId)) {
2626 - collapseQuickQuestions(botId);
2140 + if (hasQuickQuestions()) {
2141 + collapseQuickQuestions();
2627 2142 }
2628 -
2143 +
2629 2144 // Send the question to the server
2630 - sendMessageToChatbot(question, botId);
2145 + sendMessageToChatbot(question);
2631 2146 });
2632 2147
2633 2148 $(document).on('click', '.questions-toggle-btn', function(e) {
2634 2149 e.preventDefault();
2635 2150 e.stopPropagation();
2636 - var botId = getBotIdFromElement(this);
2637 - expandQuickQuestions(botId);
2151 + expandQuickQuestions();
2638 2152 });
2639 2153
2640 2154 $(document).on('click', '.questions-collapse-btn', function(e) {
2641 2155 e.preventDefault();
2642 2156 e.stopPropagation();
2643 - var botId = getBotIdFromElement(this);
2644 - collapseQuickQuestions(botId);
2157 + collapseQuickQuestions();
2645 2158 });
2646 2159
2647 - // Chatbot visibility toggle handlers - use class selector for multi-instance support
2648 - $(document).on('click', '.floating-chatbot-button', function() {
2649 - var botId = getBotIdFromElement(this);
2650 - var $chatbot = getElement(botId, 'floating-chatbot');
2651 - var $badge = getElement(botId, 'chat-notification-badge');
2652 - var $preChat = getElement(botId, 'pre-chat-message');
2653 -
2654 - if ($chatbot.hasClass('hidden')) {
2655 - $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');
2656 2165 $(this).addClass('hidden');
2657 - $badge.hide(); // Hide notification when opening chat
2166 + $('#chat-notification-badge').hide(); // Hide notification when opening chat
2658 2167 disableScroll();
2659 - $preChat.fadeOut(250);
2660 -
2661 - // Load chat history for returning visitors (persistence)
2662 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
2663 - if (chatPersistenceEnabled) {
2664 - MxChatInstances.ensureSession(botId);
2665 - }
2666 -
2667 - // Deferred email check — only on first widget open
2668 - var emailBlocker = getElementDOM(botId, 'email-blocker');
2669 - var instance = MxChatInstances.get(botId);
2670 - if (emailBlocker && !instance.emailCheckDone) {
2671 - instance.emailCheckDone = true;
2672 - resolveEmailState(botId);
2673 - } else if (!emailBlocker) {
2674 - // No email collection — still route through showChatContainerForBot
2675 - // so the loader is shown while chat history loads
2676 - showChatContainerForBot(botId);
2677 - }
2168 + $('#pre-chat-message').fadeOut(250);
2678 2169 } else {
2679 - $chatbot.removeClass('visible').addClass('hidden');
2170 + chatbot.removeClass('visible').addClass('hidden');
2680 2171 $(this).removeClass('hidden');
2681 2172 enableScroll();
2682 - checkPreChatDismissal(botId);
2173 + checkPreChatDismissal();
2683 2174 }
2684 2175 });
2685 -
2686 - // Allow clicking anywhere on the title bar to close the chatbot
2687 - $(document).on('click', '.chatbot-top-bar', function() {
2688 - var botId = getBotIdFromElement(this);
2689 - getElement(botId, 'floating-chatbot').addClass('hidden').removeClass('visible');
2690 - 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');
2691 2180 enableScroll();
2692 2181 });
2693 -
2182 +
2694 2183 $(document).on('click', '.close-pre-chat-message', function(e) {
2695 2184 e.stopPropagation(); // Prevent triggering the parent .pre-chat-message click
2696 - var botId = getBotIdFromElement(this);
2697 - handlePreChatDismissal(botId);
2185 + $('#pre-chat-message').fadeOut(200, function() {
2186 + $(this).remove();
2187 + });
2698 2188 });
2189 +
2699 2190
2700 -
2701 - // PDF upload button handlers - use class selector
2702 - $(document).on('click', '.pdf-upload-btn', function() {
2703 - var botId = getBotIdFromElement(this);
2704 - var pdfInput = getElementDOM(botId, 'pdf-upload');
2705 - if (pdfInput) pdfInput.click();
2706 - });
2707 -
2708 - // Word upload button handlers - use class selector
2709 - $(document).on('click', '.word-upload-btn', function() {
2710 - var botId = getBotIdFromElement(this);
2711 - var wordInput = getElementDOM(botId, 'word-upload');
2712 - if (wordInput) wordInput.click();
2713 - });
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 + }
2714 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 +
2715 2205 // PDF file input change handler
2716 2206 addSafeEventListener('pdf-upload', 'change', async function(e) {
2717 2207 const file = e.target.files[0];
2718 2208
@@ -2896,497 +2386,431 @@
2896 2386 });
2897 2387
2898 2388
2899 2389 // ====================================
2900 -// INIT LOADER & CHAT CONTAINER HELPERS
2390 +// EMAIL COLLECTION SETUP - FIXED VERSION
2901 2391 // ====================================
2902 -// These must be outside the email collection block so they're always available
2903 -// (used by persistence loading even when email collection is off)
2904 -
2905 -function showInitLoader(botId) {
2906 - var loader = getElementDOM(botId, 'mxchat-init-loader');
2907 - if (loader) loader.style.display = 'flex';
2908 -}
2909 -
2910 -function hideInitLoader(botId) {
2911 - var loader = getElementDOM(botId, 'mxchat-init-loader');
2912 - if (loader) loader.style.display = 'none';
2913 -}
2914 -
2915 -function showEmailFormForBot(botId) {
2916 - hideInitLoader(botId);
2917 - var emailBlocker = getElementDOM(botId, 'email-blocker');
2918 - var chatContainer = getElementDOM(botId, 'chat-container');
2919 - if (emailBlocker) emailBlocker.style.display = 'flex';
2920 - if (chatContainer) chatContainer.style.display = 'none';
2921 -}
2922 -
2923 -function showChatContainerForBot(botId) {
2924 - var emailBlocker = getElementDOM(botId, 'email-blocker');
2925 - var chatContainer = getElementDOM(botId, 'chat-container');
2926 - if (emailBlocker) emailBlocker.style.display = 'none';
2927 -
2928 - var instance = MxChatInstances.get(botId);
2929 - var chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
2930 -
2931 - // If persistence is on and history hasn't loaded yet, show loader
2932 - // while history loads to prevent flash of empty chat
2933 - if (chatPersistenceEnabled && !instance.chatHistoryLoaded) {
2934 - if (chatContainer) chatContainer.style.display = 'none';
2935 - showInitLoader(botId);
2936 - loadChatHistory(botId, function() {
2937 - hideInitLoader(botId);
2938 - if (chatContainer) chatContainer.style.display = 'flex';
2939 - scrollToBottom(botId, true);
2940 - });
2941 - } else {
2942 - hideInitLoader(botId);
2943 - if (chatContainer) chatContainer.style.display = 'flex';
2944 - if (typeof loadChatHistory === 'function') {
2945 - loadChatHistory(botId);
2946 - }
2947 - }
2948 -}
2949 -
2950 -// ====================================
2951 -// EMAIL COLLECTION SETUP - MULTI-INSTANCE VERSION
2952 -// ====================================
2953 2392 // Only run email collection setup if it's enabled
2954 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');
2955 2398
2956 - // Track submitting state per bot
2957 - 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 + }
2958 2409
2959 - // Add CSS animations for email form (once globally)
2960 - if (!document.getElementById('email-error-styles')) {
2961 - const style = document.createElement('style');
2962 - style.id = 'email-error-styles';
2963 - style.textContent = `
2964 - @keyframes fadeInError {
2965 - from { opacity: 0; transform: translateY(-5px); }
2966 - 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();
2967 2418 }
2968 - .email-input-shake {
2969 - animation: shake 0.5s ease-in-out;
2970 - }
2971 - @keyframes shake {
2972 - 0%, 100% { transform: translateX(0); }
2973 - 25% { transform: translateX(-5px); }
2974 - 75% { transform: translateX(5px); }
2975 - }
2976 - @keyframes spin {
2977 - from { transform: rotate(0deg); }
2978 - to { transform: rotate(360deg); }
2979 - }
2980 - .email-spinner {
2981 - display: inline-block;
2982 - vertical-align: middle;
2983 - }
2984 - `;
2985 - document.head.appendChild(style);
2986 - }
2419 + }
2987 2420
2988 - function isValidEmailAddress(email) {
2989 - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
2990 - return emailRegex.test(email.trim()) && email.length <= 254;
2991 - }
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 + }
2992 2426
2993 - function isValidNameInput(name) {
2994 - return name && name.trim().length >= 2 && name.trim().length <= 100;
2995 - }
2427 + // Enhanced name validation
2428 + function isValidName(name) {
2429 + return name && name.trim().length >= 2 && name.trim().length <= 100;
2430 + }
2996 2431
2997 - /**
2998 - * Replace {visitor_name} placeholder in intro message with actual visitor name
2999 - * @param {string} botId - The bot instance ID
3000 - * @param {string} visitorName - The visitor's name to insert
3001 - */
3002 - function replaceVisitorNamePlaceholder(botId, visitorName) {
3003 - var chatBox = getElementDOM(botId, 'chat-box');
3004 - if (!chatBox) return;
3005 -
3006 - // Find the first bot message (intro message)
3007 - var introMessage = chatBox.querySelector('.bot-message');
3008 - if (!introMessage) return;
3009 -
3010 - var messageContent = introMessage.querySelector('div[dir="auto"]');
3011 - if (!messageContent) return;
3012 -
3013 - var html = messageContent.innerHTML;
3014 -
3015 - // Replace {visitor_name} placeholder (case-insensitive)
3016 - if (visitorName && visitorName.trim()) {
3017 - // Escape HTML to prevent XSS
3018 - var safeName = $('<div>').text(visitorName.trim()).html();
3019 - html = html.replace(/\{visitor_name\}/gi, safeName);
3020 - } else {
3021 - // Remove placeholder and clean up spacing if no name provided
3022 - html = html.replace(/\{visitor_name\}/gi, '');
3023 - // Clean up any double spaces that might result
3024 - 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 + }
3025 2477 }
3026 2478
3027 - messageContent.innerHTML = html;
3028 - }
3029 -
3030 - function setEmailSubmissionState(botId, loading) {
3031 - var submitButton = getElementDOM(botId, 'email-submit-button');
3032 - var emailInput = getElementDOM(botId, 'user-email');
3033 - var nameInput = getElementDOM(botId, 'user-name');
3034 -
3035 - if (loading) {
3036 - emailSubmittingState[botId] = true;
3037 - if (submitButton) submitButton.disabled = true;
3038 - if (emailInput) emailInput.disabled = true;
3039 - if (nameInput) nameInput.disabled = true;
3040 -
3041 - if (submitButton && !submitButton.getAttribute('data-original-html')) {
3042 - submitButton.setAttribute('data-original-html', submitButton.innerHTML);
3043 - const originalText = submitButton.textContent;
3044 - submitButton.innerHTML = `
3045 - <svg class="email-spinner" style="width: 16px; height: 16px; margin-right: 8px; animation: spin 1s linear infinite;" viewBox="0 0 24 24">
3046 - <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="31.416" stroke-dashoffset="31.416">
3047 - <animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/>
3048 - <animate attributeName="stroke-dashoffset" dur="2s" values="0;-15.708;-31.416" repeatCount="indefinite"/>
3049 - </circle>
3050 - </svg>
3051 - ${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 + }
3052 2519 `;
3053 - submitButton.style.opacity = '0.8';
2520 + document.head.appendChild(style);
3054 2521 }
3055 - } else {
3056 - emailSubmittingState[botId] = false;
3057 - if (submitButton) submitButton.disabled = false;
3058 - if (emailInput) emailInput.disabled = false;
3059 - if (nameInput) nameInput.disabled = false;
3060 -
3061 - if (submitButton) {
3062 - const originalHtml = submitButton.getAttribute('data-original-html');
3063 - if (originalHtml) {
3064 - submitButton.innerHTML = originalHtml;
3065 - }
3066 - 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);
3067 2534 }
2535 +
2536 + if (nameInput) {
2537 + nameInput.classList.add('email-input-shake');
2538 + setTimeout(() => {
2539 + nameInput.classList.remove('email-input-shake');
2540 + }, 500);
2541 + }
3068 2542 }
3069 - }
3070 2543
3071 - function showEmailError(botId, message) {
3072 - clearEmailError(botId);
3073 -
3074 - var emailForm = getElementDOM(botId, 'email-collection-form');
3075 - if (!emailForm) return;
3076 -
3077 - const errorDiv = document.createElement('div');
3078 - errorDiv.className = 'email-error';
3079 - errorDiv.style.cssText = `
3080 - color: #e74c3c;
3081 - font-size: 12px;
3082 - margin-top: 8px;
3083 - padding: 4px 0;
3084 - animation: fadeInError 0.3s ease;
3085 - `;
3086 - errorDiv.textContent = message;
3087 - emailForm.appendChild(errorDiv);
3088 -
3089 - // Add shake animation to inputs
3090 - var emailInput = getElementDOM(botId, 'user-email');
3091 - var nameInput = getElementDOM(botId, 'user-name');
3092 -
3093 - if (emailInput) {
3094 - emailInput.classList.add('email-input-shake');
3095 - setTimeout(() => emailInput.classList.remove('email-input-shake'), 500);
3096 - }
3097 - if (nameInput) {
3098 - nameInput.classList.add('email-input-shake');
3099 - setTimeout(() => nameInput.classList.remove('email-input-shake'), 500);
3100 - }
3101 - }
3102 -
3103 - function clearEmailError(botId) {
3104 - var emailForm = getElementDOM(botId, 'email-collection-form');
3105 - if (emailForm) {
2544 + function clearEmailError() {
3106 2545 const existingErrors = emailForm.querySelectorAll('.email-error');
3107 2546 existingErrors.forEach(error => error.remove());
3108 2547 }
3109 - }
3110 2548
3111 - // Resolve email state using server-side data when available, AJAX fallback otherwise
3112 - function resolveEmailState(botId) {
3113 - if (mxchatChat.skip_email_check && mxchatChat.initial_email_state) {
3114 - if (mxchatChat.initial_email_state.show_email_form) {
3115 - showEmailFormForBot(botId);
3116 - } else {
3117 - showChatContainerForBot(botId);
3118 - }
3119 - } else {
3120 - checkSessionAndEmailForBot(botId);
3121 - }
3122 - }
2549 + // MAIN FORM SUBMIT HANDLER
2550 + // Remove any existing event listeners first
2551 + emailForm.removeEventListener('submit', handleFormSubmit);
3123 2552
3124 - function checkSessionAndEmailForBot(botId) {
3125 - const sessionId = MxChatInstances.ensureSession(botId);
2553 + // Add the form submit handler
2554 + emailForm.addEventListener('submit', handleFormSubmit);
3126 2555
3127 - // Hide both panels while we check — show loader instead
3128 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3129 - var chatContainer = getElementDOM(botId, 'chat-container');
3130 - if (emailBlocker) emailBlocker.style.display = 'none';
3131 - if (chatContainer) chatContainer.style.display = 'none';
3132 - showInitLoader(botId);
2556 + function handleFormSubmit(event) {
2557 + event.preventDefault();
2558 + event.stopPropagation();
3133 2559
3134 - fetch(mxchatChat.ajax_url, {
3135 - method: 'POST',
3136 - headers: {
3137 - 'Content-Type': 'application/x-www-form-urlencoded',
3138 - },
3139 - body: new URLSearchParams({
3140 - action: 'mxchat_check_email_provided',
3141 - session_id: sessionId,
3142 - nonce: mxchatChat.nonce,
3143 - })
3144 - })
3145 - .then((response) => {
3146 - if (!response.ok) {
3147 - throw new Error(`HTTP error! status: ${response.status}`);
2560 + // Prevent double submission
2561 + if (isSubmitting) {
2562 + return false;
3148 2563 }
3149 - return response.json();
3150 - })
3151 - .then((data) => {
3152 - if (data.success) {
3153 - if (data.data.logged_in || data.data.email) {
3154 - showChatContainerForBot(botId);
3155 - } else {
3156 - showEmailFormForBot(botId);
3157 - }
3158 - } else {
3159 - showEmailFormForBot(botId);
3160 - }
3161 - })
3162 - .catch((error) => {
3163 - showEmailFormForBot(botId);
3164 - });
3165 - }
3166 2564
3167 - // Event delegation for email form submission
3168 - $(document).on('submit', '.email-collection-form', function(e) {
3169 - e.preventDefault();
3170 - 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();
3171 2569
3172 - var botId = getBotIdFromElement(this);
2570 + // Validate email before submission
2571 + if (!userEmail) {
2572 + showEmailError('Please enter your email address.');
2573 + return false;
2574 + }
3173 2575
3174 - // Prevent double submission
3175 - if (emailSubmittingState[botId]) {
3176 - return false;
3177 - }
2576 + if (!isValidEmail(userEmail)) {
2577 + showEmailError('Please enter a valid email address.');
2578 + return false;
2579 + }
3178 2580
3179 - var emailInput = getElementDOM(botId, 'user-email');
3180 - var nameInput = getElementDOM(botId, 'user-name');
3181 - var userEmail = emailInput ? emailInput.value.trim() : '';
3182 - var userName = nameInput ? nameInput.value.trim() : '';
3183 - 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 + }
3184 2586
3185 - // Validate email
3186 - if (!userEmail) {
3187 - showEmailError(botId, 'Please enter your email address.');
3188 - return false;
3189 - }
2587 + // Clear any existing errors
2588 + clearEmailError();
2589 + setSubmissionState(true);
3190 2590
3191 - if (!isValidEmailAddress(userEmail)) {
3192 - showEmailError(botId, 'Please enter a valid email address.');
3193 - return false;
3194 - }
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 + });
3195 2598
3196 - // Validate name if field exists and has content
3197 - if (nameInput && userName && !isValidNameInput(userName)) {
3198 - showEmailError(botId, 'Please enter a valid name (2-100 characters).');
3199 - return false;
3200 - }
2599 + // Add name to form data if provided
2600 + if (userName) {
2601 + formData.append('name', userName);
2602 + }
3201 2603
3202 - clearEmailError(botId);
3203 - 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);
3204 2619
3205 - // Prepare form data
3206 - const formData = new URLSearchParams({
3207 - action: 'mxchat_handle_save_email_and_response',
3208 - email: userEmail,
3209 - session_id: sessionId,
3210 - nonce: mxchatChat.nonce,
3211 - });
2620 + if (data.success) {
2621 + // Show chat immediately
2622 + showChatContainer();
3212 2623
3213 - if (userName) {
3214 - 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
3215 2643 }
3216 2644
3217 - fetch(mxchatChat.ajax_url, {
3218 - method: 'POST',
3219 - headers: {
3220 - 'Content-Type': 'application/x-www-form-urlencoded',
3221 - },
3222 - body: formData
3223 - })
3224 - .then((response) => {
3225 - if (!response.ok) {
3226 - throw new Error(`HTTP error! status: ${response.status}`);
3227 - }
3228 - return response.json();
3229 - })
3230 - .then((data) => {
3231 - 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 + });
3232 2666
3233 - if (data.success) {
3234 - 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 + }
3235 2675
3236 - // Replace {visitor_name} placeholder in intro message with actual name
3237 - if (userName) {
3238 - replaceVisitorNamePlaceholder(botId, userName);
3239 - } else {
3240 - // Remove placeholder if no name provided
3241 - 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);
3242 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 + });
3243 2697
3244 - if (data.message && typeof appendMessage === 'function') {
3245 - setTimeout(() => {
3246 - appendMessage('bot', data.message, '', [], false, botId);
3247 - if (typeof scrollToBottom === 'function') {
3248 - scrollToBottom(botId);
3249 - }
3250 - }, 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'));
3251 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();
3252 2712 } else {
3253 - showEmailError(botId, data.message || 'Failed to save email. Please try again.');
2713 + showChatContainer();
3254 2714 }
3255 - })
3256 - .catch((error) => {
3257 - setEmailSubmissionState(botId, false);
3258 - showEmailError(botId, 'An error occurred. Please try again.');
3259 - });
3260 -
3261 - return false;
3262 - });
3263 -
3264 - // Real-time email validation using event delegation
3265 - $(document).on('input', '.mxchat-email-input', function() {
3266 - var botId = getBotIdFromElement(this);
3267 - var $input = $(this);
3268 -
3269 - // Clear previous timeout
3270 - clearTimeout($input.data('validationTimeout'));
3271 -
3272 - // Debounce validation
3273 - var timeout = setTimeout(() => {
3274 - var email = this.value.trim();
3275 - clearEmailError(botId);
3276 -
3277 - if (email && !isValidEmailAddress(email)) {
3278 - showEmailError(botId, 'Please enter a valid email address.');
3279 - }
3280 - }, 500);
3281 -
3282 - $input.data('validationTimeout', timeout);
3283 - });
3284 -
3285 - // Handle Enter key in email input
3286 - $(document).on('keypress', '.mxchat-email-input', function(e) {
3287 - if (e.key === 'Enter') {
3288 - e.preventDefault();
3289 - var botId = getBotIdFromElement(this);
3290 - if (!emailSubmittingState[botId]) {
3291 - $(this).closest('.email-collection-form').submit();
3292 - }
2715 + } else {
2716 + // Check email status via AJAX
2717 + setTimeout(checkSessionAndEmail, 100);
3293 2718 }
3294 - });
3295 2719
3296 - // Handle Enter key in name input
3297 - $(document).on('keypress', '.mxchat-name-input', function(e) {
3298 - if (e.key === 'Enter') {
3299 - e.preventDefault();
3300 - var botId = getBotIdFromElement(this);
3301 - if (!emailSubmittingState[botId]) {
3302 - $(this).closest('.email-collection-form').submit();
3303 - }
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 + });
3304 2757 }
3305 - });
3306 2758
3307 - // Initialize email check for all bot instances
3308 - // For floating bots: defer until widget is opened (zero passive AJAX)
3309 - // For embedded bots: check immediately since the form is visible
3310 - $('.mxchat-chatbot-wrapper').each(function() {
3311 - var botId = $(this).data('bot-id') || 'default';
3312 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3313 -
3314 - if (emailBlocker) {
3315 - if (isEmbeddedBot(botId)) {
3316 - // Embedded bots are always visible — check now
3317 - resolveEmailState(botId);
3318 - }
3319 - // Floating bots: handled in the widget open handler
3320 - } else if (isEmbeddedBot(botId)) {
3321 - // Embedded bot, no email collection — load history with loader
3322 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
3323 - if (chatPersistenceEnabled) {
3324 - MxChatInstances.ensureSession(botId);
3325 - showChatContainerForBot(botId);
3326 - }
3327 - }
3328 - });
2759 + } else {
2760 + // Email collection is enabled but essential elements are missing - silently continue
2761 + }
3329 2762 }
3330 2763
3331 - // Open chatbot when pre-chat message is clicked - use class selector for multi-instance
3332 - $(document).on('click', '.pre-chat-message', function() {
3333 - var botId = getBotIdFromElement(this);
3334 - var $chatbot = getElement(botId, 'floating-chatbot');
3335 - if ($chatbot.hasClass('hidden')) {
3336 - $chatbot.removeClass('hidden').addClass('visible');
3337 - getElement(botId, 'floating-chatbot-button').addClass('hidden');
3338 - 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
3339 2771 disableScroll(); // Disable scroll when chatbot opens
3340 -
3341 - // Load chat history for returning visitors (persistence)
3342 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
3343 - if (chatPersistenceEnabled) {
3344 - MxChatInstances.ensureSession(botId);
3345 - }
3346 -
3347 - // Deferred email check — only on first widget open
3348 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3349 - var instance = MxChatInstances.get(botId);
3350 - if (emailBlocker && !instance.emailCheckDone) {
3351 - instance.emailCheckDone = true;
3352 - resolveEmailState(botId);
3353 - } else if (!emailBlocker) {
3354 - showChatContainerForBot(botId);
3355 - }
3356 2772 }
3357 2773 });
3358 2774
3359 - // 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
3360 2779
3361 -
3362 -function hasQuickQuestions(botId) {
3363 - botId = botId || 'default';
3364 - var questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
3365 - if (!questionsContainer) return false;
3366 - 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');
3367 2802 return questionButtons.length > 0;
3368 2803 }
3369 2804
3370 -/**
3371 - * Check if a bot is embedded (not floating)
3372 - * Embedded bots don't have a .floating-chatbot wrapper
3373 - */
3374 -function isEmbeddedBot(botId) {
3375 - botId = botId || 'default';
3376 - var floatingWrapper = document.getElementById('floating-chatbot-' + botId);
3377 - return !floatingWrapper;
3378 -}
3379 -
3380 -function collapseQuickQuestions(botId) {
3381 - botId = botId || 'default';
3382 - const questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
3383 - if (questionsContainer && hasQuickQuestions(botId)) {
2805 +function collapseQuickQuestions() {
2806 + const questionsContainer = document.getElementById('mxchat-popular-questions');
2807 + if (questionsContainer && hasQuickQuestions()) {
3384 2808 questionsContainer.classList.add('collapsed');
3385 2809 questionsContainer.classList.add('has-been-collapsed');
3386 2810 try {
3387 - sessionStorage.setItem('mxchat_questions_collapsed_' + botId, 'true');
3388 - 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');
3389 2813 } catch (e) {
3390 2814 // Ignore if sessionStorage is not available
3391 2815 }
3392 2816 }
@@ -3391,15 +2815,14 @@
3391 2815 }
3392 2816 }
3393 2817 }
3394 2818
3395 -function expandQuickQuestions(botId) {
3396 - botId = botId || 'default';
3397 - const questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
3398 - if (questionsContainer && hasQuickQuestions(botId)) {
2819 +function expandQuickQuestions() {
2820 + const questionsContainer = document.getElementById('mxchat-popular-questions');
2821 + if (questionsContainer && hasQuickQuestions()) {
3399 2822 questionsContainer.classList.remove('collapsed');
3400 2823 try {
3401 - sessionStorage.setItem('mxchat_questions_collapsed_' + botId, 'false');
2824 + sessionStorage.setItem('mxchat_questions_collapsed', 'false');
3402 2825 } catch (e) {
3403 2826 // Ignore if sessionStorage is not available
3404 2827 }
3405 2828 }
@@ -3404,24 +2827,18 @@
3404 2827 }
3405 2828 }
3406 2829 }
3407 2830
3408 -function checkQuickQuestionsState(botId) {
3409 - botId = botId || 'default';
3410 - if (!hasQuickQuestions(botId)) {
2831 +function checkQuickQuestionsState() {
2832 + if (!hasQuickQuestions()) {
3411 2833 return; // Don't do anything if no questions exist
3412 2834 }
3413 -
3414 - // Skip restoring collapsed state for embedded bots - they should always start expanded
3415 - if (isEmbeddedBot(botId)) {
3416 - return;
3417 - }
3418 -
2835 +
3419 2836 try {
3420 - const isCollapsed = sessionStorage.getItem('mxchat_questions_collapsed_' + botId);
3421 - const hasBeenCollapsed = sessionStorage.getItem('mxchat_questions_has_been_collapsed_' + botId);
3422 -
3423 - 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');
3424 2841 if (questionsContainer) {
3425 2842 if (hasBeenCollapsed === 'true') {
3426 2843 questionsContainer.classList.add('has-been-collapsed');
3427 2844 }
@@ -3434,36 +2851,32 @@
3434 2851 }
3435 2852 }
3436 2853
3437 2854 // Global delegation for dynamically added links as fallback
3438 -// Use class selector for multi-instance support
3439 -$(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) {
3440 2856 const $link = $(this);
3441 2857 const messageDiv = $link.closest('.bot-message, .agent-message');
3442 -
2858 +
3443 2859 // Only process bot/agent message links
3444 2860 if (messageDiv.length > 0) {
3445 2861 const originalHref = $link.attr('href');
3446 -
2862 +
3447 2863 if (originalHref && (originalHref.startsWith('http://') || originalHref.startsWith('https://'))) {
3448 2864 e.preventDefault();
3449 2865 e.stopPropagation();
3450 -
2866 +
3451 2867 // Mark as tracked
3452 2868 $link.attr('data-tracked', 'true');
3453 -
3454 - // Get bot ID from the chat box context
3455 - var botId = getBotIdFromElement(this);
3456 -
2869 +
3457 2870 // Get message context from the message div
3458 2871 const messageText = messageDiv.text().substring(0, 200);
3459 -
2872 +
3460 2873 $.ajax({
3461 2874 url: mxchatChat.ajax_url,
3462 2875 type: 'POST',
3463 2876 data: {
3464 2877 action: 'mxchat_track_url_click',
3465 - session_id: getChatSession(botId),
2878 + session_id: getChatSession(),
3466 2879 url: originalHref,
3467 2880 message_context: messageText,
3468 2881 nonce: mxchatChat.nonce
3469 2882 },
@@ -3474,57 +2887,49 @@
3474 2887 window.location.href = originalHref;
3475 2888 }
3476 2889 }
3477 2890 });
3478 -
2891 +
3479 2892 return false;
3480 2893 }
3481 2894 }
3482 2895 });
3483 2896
3484 - // ====================================
3485 - // MAIN INITIALIZATION
3486 - // ====================================
2897 +
2898 +
2899 +
2900 +// ====================================
2901 +// MAIN INITIALIZATION
2902 +// ====================================
3487 2903
3488 - // Initialize all chatbot instances on the page
3489 - initializeAllInstances();
2904 +if ($('#floating-chatbot').hasClass('hidden')) {
2905 + $('#floating-chatbot-button').removeClass('hidden');
2906 +}
2907 +// Initialize when document is ready
2908 +setFullHeight();
2909 +trackOriginatingPage();
3490 2910
3491 - // Legacy initialization for single bot compatibility
3492 - $('.floating-chatbot.hidden').each(function() {
3493 - var botId = getBotIdFromElement(this);
3494 - getElement(botId, 'floating-chatbot-button').removeClass('hidden');
3495 - });
2911 +// Only load chat history if email collection is disabled
2912 +if (mxchatChat.email_collection_enabled !== 'on') {
2913 + loadChatHistory();
2914 +}
3496 2915
3497 - // Initialize when document is ready
3498 - setFullHeight();
2916 +initializeChatVisibility();
3499 2917
3500 - // Note: trackOriginatingPage() and loadChatHistory() are now deferred
3501 - // until the user's first interaction via MxChatInstances.ensureSession()
3502 -
3503 - // Initialize chat visibility for all instances
3504 - $('.mxchat-chatbot-wrapper').each(function() {
3505 - var botId = $(this).data('bot-id') || 'default';
3506 - initializeChatVisibility(botId);
3507 - });
3508 -
3509 - // Make functions globally available for add-ons
3510 - window.hasQuickQuestions = hasQuickQuestions;
3511 - window.collapseQuickQuestions = collapseQuickQuestions;
3512 - window.appendMessage = appendMessage;
3513 - window.appendThinkingMessage = appendThinkingMessage;
3514 - window.scrollToBottom = scrollToBottom;
3515 - window.scrollElementToTop = scrollElementToTop;
3516 - window.replaceLastMessage = replaceLastMessage;
3517 - window.callMxChat = callMxChat;
3518 - window.callMxChatStream = callMxChatStream;
3519 - window.shouldUseStreaming = shouldUseStreaming;
3520 - window.getChatSession = getChatSession;
3521 - window.getPageContext = getPageContext;
3522 - window.updateStreamingMessage = updateStreamingMessage;
3523 - window.MxChatInstances = MxChatInstances;
3524 - window.getElement = getElement;
3525 - window.getElementDOM = getElementDOM;
3526 - 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;
3527 2932
3528 2933 }); // End of jQuery ready
3529 2934
3530 2935