PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 2.5.7
MxChat – AI Chatbot & Content Generation for WordPress v2.5.7
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 +1112 -2287 3.2.72.5.7 View file →
@@ -1,316 +1,12 @@
1 1 jQuery(document).ready(function($) {
2 -
3 - // Nonce refresh — v2 (plan-6a68c9).
4 - //
5 - // The widget no longer relies on a nonce embedded in inline cached HTML.
6 - // Before each chat-send / stream-send / upload, we call the REST endpoint
7 - // GET /wp-json/mxchat/v1/nonce and use the freshly-issued value. The
8 - // endpoint creates the nonce with action `mxchat_chat_send`; the server-side
9 - // verifier ALSO still accepts the legacy `mxchat_chat_nonce` action for a
10 - // 30-day backwards-compat window so cached pages still in users' browsers
11 - // (which carry the legacy inline-localized nonce) keep working.
12 - //
13 - // Cache: a single module-scoped slot. TTL 12h conservatively (WP nonces are
14 - // 24h but we refetch at half-life so a freshly-cached-page user never sees
15 - // a borderline-stale nonce).
16 - var cachedFreshNonce = null;
17 - var cachedFreshNonceFetchedAt = 0;
18 - var NONCE_TTL_MS = 12 * 60 * 60 * 1000;
19 - var nonceRefreshState = 'idle'; // 'idle' | 'pending' | 'done'
20 - var nonceRefreshCallbacks = [];
21 -
22 - function getRestNonceUrl() {
23 - if (typeof mxchatChat !== 'undefined' && mxchatChat.rest_url) {
24 - return mxchatChat.rest_url.replace(/\/+$/, '') + '/nonce';
25 - }
26 - // Fallback: derive from current origin if mxchatChat.rest_url isn't set.
27 - return window.location.origin + '/wp-json/mxchat/v1/nonce';
28 - }
29 -
30 - function fetchFreshNonceFromRest() {
31 - return fetch(getRestNonceUrl(), {
32 - credentials: 'same-origin',
33 - headers: { 'Accept': 'application/json' }
34 - }).then(function (resp) {
35 - if (!resp.ok) {
36 - throw new Error('REST nonce fetch failed: ' + resp.status);
37 - }
38 - return resp.json();
39 - }).then(function (data) {
40 - if (data && data.nonce) {
41 - return data.nonce;
42 - }
43 - throw new Error('REST nonce response had no nonce field.');
44 - });
45 - }
46 -
47 - /**
48 - * withFreshNonce(cb) — invoke cb() after ensuring mxchatChat.nonce is fresh.
49 - * Tries REST endpoint first (cache-bypass design); falls back to the legacy
50 - * admin-ajax refresh path if REST is unavailable. Idempotent — concurrent
51 - * calls share the same in-flight refresh.
52 - */
53 - function withFreshNonce(callback) {
54 - if (typeof mxchatChat === 'undefined') {
55 - if (callback) callback();
56 - return;
57 - }
58 - var now = Date.now();
59 - if (cachedFreshNonce && (now - cachedFreshNonceFetchedAt) < NONCE_TTL_MS) {
60 - mxchatChat.nonce = cachedFreshNonce;
61 - if (callback) callback();
62 - return;
63 - }
64 - if (callback) nonceRefreshCallbacks.push(callback);
65 - if (nonceRefreshState === 'pending') return;
66 - nonceRefreshState = 'pending';
67 -
68 - var resolved = function (nonce) {
69 - if (nonce) {
70 - cachedFreshNonce = nonce;
71 - cachedFreshNonceFetchedAt = Date.now();
72 - mxchatChat.nonce = nonce;
73 - }
74 - nonceRefreshState = 'done';
75 - var pending = nonceRefreshCallbacks;
76 - nonceRefreshCallbacks = [];
77 - pending.forEach(function (cb) { try { cb(); } catch (e) {} });
78 - };
79 -
80 - fetchFreshNonceFromRest()
81 - .then(resolved)
82 - .catch(function () {
83 - // Fallback to the legacy admin-ajax refresh path (issued with the
84 - // old action `mxchat_chat_nonce`; the server still accepts both
85 - // during the compat window).
86 - if (mxchatChat.ajax_url) {
87 - $.post(mxchatChat.ajax_url, { action: 'mxchat_refresh_nonce' })
88 - .done(function (res) {
89 - if (res && res.success && res.data && res.data.nonce) {
90 - resolved(res.data.nonce);
91 - return;
92 - }
93 - resolved(null);
94 - })
95 - .fail(function () { resolved(null); });
96 - } else {
97 - resolved(null);
98 - }
99 - });
100 - }
101 -
102 - // Backwards-compat alias — every existing caller in this file (and any
103 - // out-of-tree consumer that hit this internal API) keeps working unchanged.
104 - function refreshNonceIfNeeded(callback) {
105 - return withFreshNonce(callback);
106 - }
107 -
2 +
108 3 // ====================================
109 - // MULTI-INSTANCE MANAGEMENT SYSTEM
110 - // ====================================
111 -
112 - // Instance registry - tracks all chatbot instances on the page
113 - const MxChatInstances = {
114 - instances: {},
115 -
116 - // Initialize an instance for a bot
117 - init: function(botId) {
118 - if (!this.instances[botId]) {
119 - // When persistence is OFF, track when this session started
120 - // so the AI only sees messages from this page load
121 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
122 -
123 - this.instances[botId] = {
124 - botId: botId,
125 - sessionId: null,
126 - lastSeenMessageId: '',
127 - notificationCheckInterval: null,
128 - pollingInterval: null,
129 - processedMessageIds: new Set(),
130 - activePdfFile: null,
131 - activeWordFile: null,
132 - chatHistoryLoaded: false,
133 - isStreaming: false,
134 - // Fresh context timestamp - only used when persistence is OFF
135 - sessionStartTimestamp: chatPersistenceEnabled ? 0 : Date.now()
136 - };
137 - }
138 - return this.instances[botId];
139 - },
140 -
141 - // Get instance by botId
142 - get: function(botId) {
143 - return this.instances[botId] || this.init(botId);
144 - },
145 -
146 - // Get all active bot IDs
147 - getAllBotIds: function() {
148 - return Object.keys(this.instances);
149 - },
150 -
151 - // Session management per bot
152 - // Returns existing session ID from cookie or localStorage (with in-memory fallback),
153 - // or null if none exists. Does NOT create a new session — use ensureSession() for that.
154 - getChatSession: function(botId) {
155 - var cookieName = 'mxchat_session_id_' + botId;
156 - var storageKey = 'mxchat_session_id_' + botId;
157 - var sessionId = getCookie(cookieName);
158 -
159 - // Fallback to localStorage if cookie is missing (e.g. cleared by browser/consent)
160 - if (!sessionId) {
161 - try { sessionId = localStorage.getItem(storageKey); } catch (e) {}
162 - }
163 -
164 - // Fallback to in-memory instance when cookie AND localStorage are both blocked
165 - // (Safari ITP, strict tracking prevention, cross-origin iframes with partitioned
166 - // storage). Without this, ensureSession() can generate and store an ID that
167 - // getChatSession() then can't read back, causing null session_ids on send.
168 - if (!sessionId && this.instances[botId] && this.instances[botId].sessionId) {
169 - sessionId = this.instances[botId].sessionId;
170 - }
171 -
172 - // Guard against stored sentinel values that indicate earlier broken writes.
173 - if (sessionId === 'null' || sessionId === 'undefined') {
174 - sessionId = null;
175 - }
176 -
177 - // Re-sync cookie from localStorage if cookie was lost
178 - if (sessionId && !getCookie(cookieName)) {
179 - document.cookie = cookieName + "=" + sessionId + "; path=/; max-age=86400; SameSite=Lax";
180 - }
181 -
182 - return sessionId || null;
183 - },
184 -
185 - // Lazy session initializer — called on first user interaction
186 - ensureSession: function(botId) {
187 - botId = botId || 'default';
188 - var instance = this.instances[botId] || this.init(botId);
189 -
190 - if (instance.sessionId) {
191 - return instance.sessionId;
192 - }
193 -
194 - // Check for existing session from cookie or localStorage
195 - var existingSession = this.getChatSession(botId);
196 -
197 - if (existingSession) {
198 - instance.sessionId = existingSession;
199 - } else {
200 - // Brand new session
201 - var newId = generateSessionId();
202 - this.setChatSession(botId, newId);
203 - instance.sessionId = newId;
204 - }
205 -
206 - // Now that we have a session, do the deferred work
207 - refreshNonceIfNeeded();
208 - trackOriginatingPage();
209 -
210 - // Note: loadChatHistory is handled by showChatContainerForBot with loader UI,
211 - // so we do NOT call it here to avoid a race condition.
212 -
213 - return instance.sessionId;
214 - },
215 -
216 - setChatSession: function(botId, sessionId) {
217 - var cookieName = 'mxchat_session_id_' + botId;
218 - var storageKey = 'mxchat_session_id_' + botId;
219 - document.cookie = cookieName + "=" + sessionId + "; path=/; max-age=86400; SameSite=Lax";
220 - try { localStorage.setItem(storageKey, sessionId); } catch (e) {}
221 - if (this.instances[botId]) {
222 - this.instances[botId].sessionId = sessionId;
223 - }
224 - },
225 -
226 - resetChatSession: function(botId) {
227 - // Clear old session from localStorage before setting new one
228 - try { localStorage.removeItem('mxchat_session_id_' + botId); } catch (e) {}
229 - var newSessionId = generateSessionId();
230 - this.setChatSession(botId, newSessionId);
231 - var $chatBox = getElement(botId, 'chat-box');
232 - if ($chatBox.length) {
233 - $chatBox.find('.user-message, .bot-message:not(:first), .agent-message').remove();
234 - }
235 - if (this.instances[botId]) {
236 - this.instances[botId].chatHistoryLoaded = false;
237 - this.instances[botId].processedMessageIds = new Set();
238 - }
239 - },
240 -
241 - // Silent reset — new session ID without clearing the chat UI
242 - // Used when IP changes mid-conversation so the user doesn't see messages vanish
243 - silentResetSession: function(botId) {
244 - try { localStorage.removeItem('mxchat_session_id_' + botId); } catch (e) {}
245 - var newSessionId = generateSessionId();
246 - this.setChatSession(botId, newSessionId);
247 - if (this.instances[botId]) {
248 - this.instances[botId].sessionId = newSessionId;
249 - }
250 - return newSessionId;
251 - }
252 - };
253 -
254 - // ====================================
255 - // ELEMENT SELECTOR HELPERS
256 - // ====================================
257 -
258 - // Check if a specific bot has an AI theme assigned (skip inline colors)
259 - function shouldSkipInlineColors(botId) {
260 - // If global AI theme is active, skip inline colors for all bots
261 - if (mxchatChat.skip_inline_colors) {
262 - return true;
263 - }
264 - // Check if this specific bot has a theme assignment
265 - var botAssignments = mxchatChat.bot_theme_assignments || {};
266 - return botAssignments.hasOwnProperty(botId);
267 - }
268 -
269 - // Get element by ID with bot suffix - returns jQuery object
270 - function getElement(botId, elementName) {
271 - return $('#' + elementName + '-' + botId);
272 - }
273 -
274 - // Get element by ID with bot suffix - returns DOM element
275 - function getElementDOM(botId, elementName) {
276 - return document.getElementById(elementName + '-' + botId);
277 - }
278 -
279 - // Get bot ID from any element within a chatbot instance
280 - function getBotIdFromElement(element) {
281 - var $wrapper = $(element).closest('.mxchat-chatbot-wrapper');
282 - if ($wrapper.length) {
283 - return $wrapper.data('bot-id') || 'default';
284 - }
285 - // Fallback: try to find from floating container
286 - var $floating = $(element).closest('.floating-chatbot');
287 - if ($floating.length) {
288 - var id = $floating.attr('id') || '';
289 - var match = id.match(/floating-chatbot-(.+)/);
290 - if (match) return match[1];
291 - }
292 - // Fallback: check if element itself has an ID with bot suffix (e.g., floating-chatbot-button-{bot_id})
293 - var elementId = $(element).attr('id') || '';
294 - if (elementId) {
295 - // Match patterns like: floating-chatbot-button-{bot_id}, pre-chat-message-{bot_id}
296 - var idMatch = elementId.match(/^(?:floating-chatbot-button|pre-chat-message|chat-notification-badge)-(.+)$/);
297 - if (idMatch) return idMatch[1];
298 - }
299 - return 'default';
300 - }
301 -
302 - // Get wrapper element for a bot
303 - function getWrapper(botId) {
304 - return getElement(botId, 'mxchat-chatbot-wrapper');
305 - }
306 -
307 - // ====================================
308 4 // GLOBAL VARIABLES & CONFIGURATION
309 5 // ====================================
310 6 const toolbarIconColor = mxchatChat.toolbar_icon_color || '#212121';
311 -
312 - // Initialize color settings (these are global as they come from PHP)
7 +
8 + // Initialize color settings
313 9 var userMessageBgColor = mxchatChat.user_message_bg_color;
314 10 var userMessageFontColor = mxchatChat.user_message_font_color;
315 11 var botMessageBgColor = mxchatChat.bot_message_bg_color;
316 12 var botMessageFontColor = mxchatChat.bot_message_font_color;
@@ -315,64 +11,53 @@
315 11 var botMessageBgColor = mxchatChat.bot_message_bg_color;
316 12 var botMessageFontColor = mxchatChat.bot_message_font_color;
317 13 var liveAgentMessageBgColor = mxchatChat.live_agent_message_bg_color;
318 14 var liveAgentMessageFontColor = mxchatChat.live_agent_message_font_color;
319 -
15 +
320 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;
321 26
322 27 // ====================================
323 - // SESSION MANAGEMENT (Legacy compatibility)
28 + // SESSION MANAGEMENT
324 29 // ====================================
325 -
30 +
31 + function getChatSession() {
32 + var sessionId = getCookie('mxchat_session_id');
33 + //console.log("Session ID retrieved from cookie: ", sessionId);
34 +
35 + if (!sessionId) {
36 + sessionId = generateSessionId();
37 + //console.log("Generated new session ID: ", sessionId);
38 + setChatSession(sessionId);
39 + }
40 +
41 + //console.log("Final session ID: ", sessionId);
42 + return sessionId;
43 + }
44 +
45 + function setChatSession(sessionId) {
46 + // Set the cookie with a 24-hour expiration (86400 seconds)
47 + document.cookie = "mxchat_session_id=" + sessionId + "; path=/; max-age=86400; SameSite=Lax";
48 + }
49 +
326 50 function getCookie(name) {
327 51 let value = "; " + document.cookie;
328 52 let parts = value.split("; " + name + "=");
329 53 if (parts.length == 2) return parts.pop().split(";").shift();
330 54 }
331 -
55 +
332 56 function generateSessionId() {
333 57 return 'mxchat_chat_' + Math.random().toString(36).substr(2, 9);
334 58 }
335 59
336 - // Legacy function - now delegates to instance manager
337 - function getChatSession(botId) {
338 - botId = botId || 'default';
339 - return MxChatInstances.getChatSession(botId);
340 - }
341 -
342 - function setChatSession(sessionId, botId) {
343 - botId = botId || 'default';
344 - MxChatInstances.setChatSession(botId, sessionId);
345 - }
346 -
347 - function resetChatSession(botId) {
348 - botId = botId || 'default';
349 - MxChatInstances.resetChatSession(botId);
350 - }
351 -
352 - // ====================================
353 - // INITIALIZE ALL CHATBOT INSTANCES
354 - // ====================================
355 -
356 - function initializeAllInstances() {
357 - // Find all chatbot wrappers on the page
358 - $('.mxchat-chatbot-wrapper').each(function() {
359 - var botId = $(this).data('bot-id') || 'default';
360 - MxChatInstances.init(botId);
361 - initializeBotInstance(botId);
362 - });
363 - }
364 -
365 - function initializeBotInstance(botId) {
366 - var instance = MxChatInstances.get(botId);
367 -
368 - // Initialize quick questions state for this bot
369 - checkQuickQuestionsState(botId);
370 -
371 - // Note: Event handlers use event delegation with class selectors,
372 - // so they work automatically for all instances without per-bot setup
373 - }
374 -
375 60 // ====================================
376 61 // CONTEXTUAL AWARENESS FUNCTIONALITY
377 62 // ====================================
378 63
@@ -517,123 +202,70 @@
517 202
518 203 // ====================================
519 204 // CORE CHAT FUNCTIONALITY
520 205 // ====================================
521 -
522 -// Helper functions to disable/enable chat input while waiting for response
523 -function disableChatInput(botId) {
524 - botId = botId || 'default';
525 - var chatInput = getElementDOM(botId, 'chat-input');
526 - var sendButton = getElementDOM(botId, 'send-button');
527 - if (chatInput) {
528 - chatInput.disabled = true;
529 - chatInput.style.opacity = '0.6';
530 - }
531 - if (sendButton) {
532 - sendButton.disabled = true;
533 - sendButton.style.opacity = '0.5';
534 - sendButton.style.pointerEvents = 'none';
535 - }
536 -}
537 -
538 -function enableChatInput(botId) {
539 - botId = botId || 'default';
540 - var chatInput = getElementDOM(botId, 'chat-input');
541 - var sendButton = getElementDOM(botId, 'send-button');
542 - if (chatInput) {
543 - chatInput.disabled = false;
544 - chatInput.style.opacity = '1';
545 - chatInput.focus();
546 - }
547 - if (sendButton) {
548 - sendButton.disabled = false;
549 - sendButton.style.opacity = '1';
550 - sendButton.style.pointerEvents = 'auto';
551 - }
552 -}
553 -
554 206 // Update your existing sendMessage function
555 -function sendMessage(botId) {
556 - botId = botId || 'default';
557 - MxChatInstances.ensureSession(botId);
558 - var $chatInput = getElement(botId, 'chat-input');
559 - var message = $chatInput.val();
560 -
207 +function sendMessage() {
208 + var message = $('#chat-input').val();
209 +
561 210 // ADD PROMPT HOOK HERE
562 - if (typeof customMxChatFilter === 'function') {
563 - message = customMxChatFilter(message, "prompt");
211 + if (typeof customMxChatFilter === 'function') {
212 + message = customMxChatFilter(message, "prompt");
564 213 }
565 -
214 +
566 215 if (message) {
567 - // Don't disable input in live agent mode - let users chat freely
568 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
569 - var isAgentMode = modeIndicator && modeIndicator.textContent === 'Live Agent';
570 - if (!isAgentMode) {
571 - disableChatInput(botId);
572 - }
216 + appendMessage("user", message);
217 + $('#chat-input').val('');
218 + $('#chat-input').css('height', 'auto');
573 219
574 - appendMessage("user", message, '', [], false, botId);
575 - $chatInput.val('');
576 - $chatInput.css('height', 'auto');
577 -
578 - if (hasQuickQuestions(botId)) {
579 - collapseQuickQuestions(botId);
220 + if (hasQuickQuestions()) {
221 + collapseQuickQuestions();
580 222 }
581 - appendThinkingMessage(botId);
582 - scrollToBottom(botId);
223 + appendThinkingMessage();
224 + scrollToBottom();
583 225
584 - const currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
226 + const currentModel = mxchatChat.model || 'gpt-4o';
585 227
586 228 // Check if streaming is enabled AND supported for this model
587 229 if (shouldUseStreaming(currentModel)) {
588 230 callMxChatStream(message, function(response) {
589 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message');
590 - }, botId);
231 + $('.bot-message.temporary-message').removeClass('temporary-message');
232 + });
591 233 } else {
592 234 callMxChat(message, function(response) {
593 - replaceLastMessage("bot", response, '', [], botId);
594 - }, botId);
235 + replaceLastMessage("bot", response);
236 + });
595 237 }
596 238 }
597 239 }
598 240
599 241 // Update your existing sendMessageToChatbot function
600 -function sendMessageToChatbot(message, botId) {
601 - botId = botId || 'default';
602 - MxChatInstances.ensureSession(botId);
603 -
242 +function sendMessageToChatbot(message) {
604 243 // ADD PROMPT HOOK HERE
605 244 if (typeof customMxChatFilter === 'function') {
606 245 message = customMxChatFilter(message, "prompt");
607 246 }
247 +
248 + var sessionId = getChatSession();
608 249
609 - // Don't disable input in live agent mode - let users chat freely
610 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
611 - var isAgentMode = modeIndicator && modeIndicator.textContent === 'Live Agent';
612 - if (!isAgentMode) {
613 - disableChatInput(botId);
250 + if (hasQuickQuestions()) {
251 + collapseQuickQuestions();
614 252 }
253 + appendThinkingMessage();
254 + scrollToBottom();
615 255
616 - var sessionId = getChatSession(botId);
256 + const currentModel = mxchatChat.model || 'gpt-4o';
617 257
618 - if (hasQuickQuestions(botId)) {
619 - collapseQuickQuestions(botId);
620 - }
621 - appendThinkingMessage(botId);
622 - scrollToBottom(botId);
623 -
624 - const currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
625 -
626 258 // Check if streaming is enabled AND supported for this model
627 259 if (shouldUseStreaming(currentModel)) {
628 260 callMxChatStream(message, function(response) {
629 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message');
630 - }, botId);
261 + $('.bot-message.temporary-message').removeClass('temporary-message');
262 + });
631 263 } else {
632 264 callMxChat(message, function(response) {
633 - getElement(botId, 'chat-box').find('.temporary-message').remove();
634 - replaceLastMessage("bot", response, '', [], botId);
635 - }, botId);
265 + $('.temporary-message').remove();
266 + replaceLastMessage("bot", response);
267 + });
636 268 }
637 269 }
638 270
639 271 // Updated shouldUseStreaming function with debugging
@@ -676,65 +308,37 @@
676 308 updateChatModeIndicator('agent');
677 309 }
678 310 }
679 311
680 -// Function to get bot ID from any element or wrapper
681 -// If element is provided, finds the bot ID from its wrapper
682 -// If no element, returns 'default' (for backward compatibility)
683 -function getMxChatBotId(element) {
684 - if (element) {
685 - return getBotIdFromElement(element);
686 - }
687 - // Fallback: find first chatbot wrapper on page
688 - const chatbotWrapper = document.querySelector('.mxchat-chatbot-wrapper');
312 +//Function to get bot ID from the chatbot wrapper
313 +function getMxChatBotId() {
314 + const chatbotWrapper = document.getElementById('mxchat-chatbot-wrapper');
689 315 return chatbotWrapper ? chatbotWrapper.getAttribute('data-bot-id') || 'default' : 'default';
690 316 }
691 317
692 -function callMxChat(message, callback, botId) {
693 - botId = botId || getMxChatBotId();
694 -
695 - // Store the message in case we need to retry after session reset
696 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', message);
697 -
318 +function callMxChat(message, callback) {
698 319 // Get page context if contextual awareness is enabled
699 320 const pageContext = getPageContext();
700 -
701 - // Get instance for session start timestamp (used when persistence is OFF)
702 - var instance = MxChatInstances.get(botId);
703 -
704 - // Guarantee a non-null session_id before the AJAX leaves. ensureSession() is idempotent
705 - // and returns the guaranteed-present session id from the in-memory instance even when
706 - // cookie/localStorage writes are silently blocked by the browser.
707 - var sessionId = MxChatInstances.ensureSession(botId);
708 - if (!sessionId || sessionId === 'null' || sessionId === 'undefined') {
709 - // Last-resort generation to ensure we never POST a null marker.
710 - sessionId = generateSessionId();
711 - MxChatInstances.setChatSession(botId, sessionId);
712 - }
713 -
714 - // Wait for the page-cache nonce refresh to complete before firing the
715 - // chat-send AJAX. On cached pages the inline mxchatChat.nonce is stale
716 - // until refreshNonceIfNeeded() returns; constructing ajaxData inside the
717 - // callback guarantees we read the fresh value. See plan-c5457f.
718 - refreshNonceIfNeeded(function() {
321 +
322 + // Get bot ID
323 + const botId = getMxChatBotId();
324 +
719 325 // Prepare AJAX data
720 326 const ajaxData = {
721 327 action: 'mxchat_handle_chat_request',
722 328 message: message,
723 - session_id: sessionId,
329 + session_id: getChatSession(),
724 330 nonce: mxchatChat.nonce,
725 331 current_page_url: window.location.href,
726 332 current_page_title: document.title,
727 - bot_id: botId,
728 - // Pass session start timestamp so AI context matches what user sees
729 - session_start_timestamp: instance.sessionStartTimestamp || 0
333 + bot_id: botId // Include bot ID
730 334 };
731 -
335 +
732 336 // Add page context if available
733 337 if (pageContext) {
734 338 ajaxData.page_context = JSON.stringify(pageContext);
735 339 }
736 -
340 +
737 341 // CHECK FOR VISION FLAGS AND ADD THEM
738 342 if (window.mxchatVisionProcessed) {
739 343 ajaxData.vision_processed = true;
740 344 ajaxData.original_user_message = window.mxchatOriginalMessage || message;
@@ -743,9 +347,9 @@
743 347 window.mxchatVisionProcessed = false;
744 348 window.mxchatOriginalMessage = null;
745 349 window.mxchatVisionImagesCount = 0;
746 350 }
747 -
351 +
748 352 $.ajax({
749 353 url: mxchatChat.ajax_url,
750 354 type: 'POST',
751 355 dataType: 'json',
@@ -750,18 +354,29 @@
750 354 type: 'POST',
751 355 dataType: 'json',
752 356 data: ajaxData,
753 357 success: function(response) {
754 - // IMMEDIATE CHAT MODE UPDATE - This should be FIRST
358 +
359 + // IMMEDIATE CHAT MODE UPDATE - This should be FIRST
360 + if (response.chat_mode) {
361 + //console.log("Updating chat mode to:", response.chat_mode);
362 + updateChatModeIndicator(response.chat_mode);
363 + }
364 +
365 + // Also check in data property if response is wrapped
366 + if (response.data && response.data.chat_mode) {
367 + //console.log("Updating chat mode from data to:", response.data.chat_mode);
368 + updateChatModeIndicator(response.data.chat_mode);
369 + }
370 + // Log the full response for debugging
371 + //console.log("API Response:", response);
372 +
373 + // IMMEDIATE CHAT MODE UPDATE - Handle this first, before any other processing
755 374 if (response.chat_mode) {
756 - updateChatModeIndicator(response.chat_mode, botId);
375 + //console.log("Updating chat mode immediately to:", response.chat_mode);
376 + updateChatModeIndicator(response.chat_mode);
757 377 }
758 378
759 - // Also check in data property if response is wrapped
760 - if (response.data && response.data.chat_mode) {
761 - updateChatModeIndicator(response.data.chat_mode, botId);
762 - }
763 -
764 379 // SECURITY FIX: Check for errors FIRST before checking for success
765 380 // This ensures API errors (quota exceeded, invalid key, rate limit) are properly displayed
766 381 if (response.success === false || (response.data && response.data.error_message)) {
767 382 let errorMessage = "";
@@ -782,29 +397,11 @@
782 397 // Fallback for any other unexpected response format
783 398 errorMessage = "An error occurred. Please try again or contact support.";
784 399 }
785 400
786 - // Handle session reset action (IP changed, session expired, etc.)
787 - // Silent reset — keep chat UI intact, just get a new session and retry
788 - if (response.data && response.data.action === 'reset_session') {
789 - MxChatInstances.silentResetSession(botId);
790 - // Re-send the original message with the new session (user message is already displayed)
791 - var originalMessage = getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message');
792 - if (originalMessage) {
793 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', null);
794 - var currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
795 - if (shouldUseStreaming(currentModel)) {
796 - callMxChatStream(originalMessage, function(response) {
797 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message');
798 - }, botId);
799 - } else {
800 - callMxChat(originalMessage, function(response) {
801 - replaceLastMessage("bot", response, '', [], botId);
802 - }, botId);
803 - }
804 - }
805 - return;
806 - }
401 + // Log the error with code for debugging
402 + //console.log("Response data:", response.data);
403 + //console.error("API Error:", errorMessage, "Code:", errorCode);
807 404
808 405 // Format user-friendly error message
809 406 let displayMessage = errorMessage;
810 407
@@ -813,9 +410,9 @@
813 410 // For admin users, show more technical details including error code
814 411 displayMessage = errorMessage + (errorCode ? " (Error code: " + errorCode + ")" : "");
815 412 }
816 413
817 - replaceLastMessage("bot", displayMessage, '', [], botId);
414 + replaceLastMessage("bot", displayMessage);
818 415 return; // Exit early for errors
819 416 }
820 417
821 418 // NOW check if this is a successful response by looking for text, html, or message fields
@@ -831,17 +428,16 @@
831 428 let responseMessage = response.message || '';
832 429
833 430 // Add PDF filename handling
834 431 if (response.data && response.data.filename) {
835 - showActivePdf(response.data.filename, botId);
836 - var instance = MxChatInstances.get(botId);
837 - instance.activePdfFile = response.data.filename;
432 + showActivePdf(response.data.filename);
433 + activePdfFile = response.data.filename;
838 434 }
839 435
840 436 // Add redirect check here
841 437 if (response.redirect_url) {
842 438 if (responseText) {
843 - replaceLastMessage("bot", responseText, '', [], botId);
439 + replaceLastMessage("bot", responseText);
844 440 }
845 441 setTimeout(() => {
846 442 window.location.href = response.redirect_url;
847 443 }, 1500);
@@ -849,11 +445,9 @@
849 445 }
850 446
851 447 // Check for live agent response
852 448 if (response.success && response.data && response.data.status === 'waiting_for_agent') {
853 - removeThinkingDots(botId);
854 - updateChatModeIndicator('agent', botId);
855 - enableChatInput(botId);
449 + updateChatModeIndicator('agent');
856 450 return;
857 451 }
858 452
859 453 // Handle the message and show notification if chat is hidden
@@ -868,36 +462,32 @@
868 462 }
869 463
870 464 // Update the messages as before
871 465 if (responseText && responseHtml) {
872 - replaceLastMessage("bot", responseText, responseHtml, [], botId);
466 + replaceLastMessage("bot", responseText, responseHtml);
873 467 } else if (responseText) {
874 - replaceLastMessage("bot", responseText, '', [], botId);
468 + replaceLastMessage("bot", responseText);
875 469 } else if (responseHtml) {
876 - replaceLastMessage("bot", "", responseHtml, [], botId);
470 + replaceLastMessage("bot", "", responseHtml);
877 471 } else if (responseMessage) {
878 - replaceLastMessage("bot", responseMessage, '', [], botId);
472 + replaceLastMessage("bot", responseMessage);
879 473 }
880 474
881 475 // Check if chat is hidden and show notification
882 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
883 - if ($floatingChatbot.hasClass('hidden')) {
884 - var $badge = getElement(botId, 'chat-notification-badge');
885 - if ($badge.length) {
886 - $badge.show();
476 + if ($('#floating-chatbot').hasClass('hidden')) {
477 + const badge = $('#chat-notification-badge');
478 + if (badge.length) {
479 + badge.show();
887 480 }
888 481 }
889 482 } else {
890 - var emptyMsg = "I received an empty response. Please try again or contact support if this persists.";
891 - if (response.vectorstore_error) {
892 - emptyMsg = "I received an empty response. Debug info: " + response.vectorstore_error;
893 - }
894 - replaceLastMessage("bot", emptyMsg, '', [], botId);
483 + // This should rarely happen now that errors are handled above
484 + ////console.error("Unexpected response format:", response);
485 + replaceLastMessage("bot", "I received an empty response. Please try again or contact support if this persists.");
895 486 }
896 487
897 488 if (response.message_id) {
898 - var instance = MxChatInstances.get(botId);
899 - instance.lastSeenMessageId = response.message_id;
489 + lastSeenMessageId = response.message_id;
900 490 }
901 491
902 492 return;
903 493 }
@@ -902,16 +492,20 @@
902 492 return;
903 493 }
904 494
905 495 // Fallback for truly unexpected response formats
906 - replaceLastMessage("bot", "Unexpected response format. Please try again or contact support.", '', [], botId);
496 + replaceLastMessage("bot", "Unexpected response format. Please try again or contact support.");
907 497 },
908 498 error: function(xhr, status, error) {
499 + //console.error("AJAX Error:", status, error);
500 + //console.log("Response Text:", xhr.responseText);
501 +
909 502 let errorMessage = "An unexpected error occurred.";
910 503
911 504 // Try to parse the response if it's JSON
912 505 try {
913 506 const responseJson = JSON.parse(xhr.responseText);
507 + //console.log("Parsed error response:", responseJson);
914 508
915 509 if (responseJson.data && responseJson.data.error_message) {
916 510 errorMessage = responseJson.data.error_message;
917 511 } else if (responseJson.message) {
@@ -931,56 +525,38 @@
931 525 errorMessage = "Server error: The server encountered an issue. Please try again later.";
932 526 }
933 527 }
934 528
935 - replaceLastMessage("bot", errorMessage, '', [], botId);
529 + replaceLastMessage("bot", errorMessage);
936 530 }
937 531 });
938 - }); // refreshNonceIfNeeded
939 532 }
940 533
941 -function callMxChatStream(message, callback, botId) {
942 - botId = botId || getMxChatBotId();
943 -
944 - // Store the message in case we need to retry after session reset
945 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', message);
946 -
947 - const currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
534 +function callMxChatStream(message, callback) {
535 + //console.log("Using streaming for message:", message);
536 +
537 + const currentModel = mxchatChat.model || 'gpt-4o';
948 538 if (!isStreamingSupported(currentModel)) {
949 - callMxChat(message, callback, botId);
539 + //console.log("Streaming not supported, falling back to regular call");
540 + callMxChat(message, callback);
950 541 return;
951 542 }
952 543
953 544 // Get page context if contextual awareness is enabled
954 545 const pageContext = getPageContext();
546 +
547 + // Get bot ID
548 + const botId = getMxChatBotId();
955 549
956 - // Get instance for session start timestamp (used when persistence is OFF)
957 - var instance = MxChatInstances.get(botId);
958 -
959 - // Guarantee a non-null session_id before the fetch. FormData.append() stringifies any
960 - // non-string value via String(), so passing `null` would POST the literal string "null"
961 - // and land in the transcripts table as a ghost session. ensureSession() always returns
962 - // a real string even when cookies/localStorage are blocked.
963 - var streamSessionId = MxChatInstances.ensureSession(botId);
964 - if (!streamSessionId || streamSessionId === 'null' || streamSessionId === 'undefined') {
965 - streamSessionId = generateSessionId();
966 - MxChatInstances.setChatSession(botId, streamSessionId);
967 - }
968 -
969 - // Wait for the page-cache nonce refresh before constructing formData (which
970 - // captures mxchatChat.nonce by value). Mirrors callMxChat's wrapping. See plan-c5457f.
971 - refreshNonceIfNeeded(function() {
972 550 const formData = new FormData();
973 551 formData.append('action', 'mxchat_stream_chat');
974 552 formData.append('message', message);
975 - formData.append('session_id', streamSessionId);
553 + formData.append('session_id', getChatSession());
976 554 formData.append('nonce', mxchatChat.nonce);
977 555 formData.append('current_page_url', window.location.href);
978 556 formData.append('current_page_title', document.title);
979 - formData.append('bot_id', botId);
980 - // Pass session start timestamp so AI context matches what user sees
981 - formData.append('session_start_timestamp', instance.sessionStartTimestamp || 0);
982 -
557 + formData.append('bot_id', botId); // Include bot ID
558 +
983 559 // Add page context if available
984 560 if (pageContext) {
985 561 formData.append('page_context', JSON.stringify(pageContext));
986 562 }
@@ -1005,14 +581,17 @@
1005 581 body: formData,
1006 582 credentials: 'same-origin'
1007 583 })
1008 584 .then(response => {
585 + //console.log("Streaming response received:", response);
586 +
1009 587 // Store the response for potential fallback handling
1010 588 const responseClone = response.clone();
1011 -
589 +
1012 590 if (!response.ok) {
1013 591 // Try to get error details from response
1014 592 return responseClone.json().then(errorData => {
593 + //console.log("Server returned error response:", errorData);
1015 594 throw { isServerError: true, data: errorData };
1016 595 }).catch(() => {
1017 596 throw new Error('Network response was not ok');
1018 597 });
@@ -1020,21 +599,26 @@
1020 599
1021 600 // Check if response is JSON instead of streaming
1022 601 const contentType = response.headers.get('content-type');
1023 602 if (contentType && contentType.includes('application/json')) {
603 + //console.log("Received JSON response instead of stream");
1024 604 return responseClone.json().then(data => {
605 + //console.log("Processing JSON response:", data);
606 +
1025 607 // IMMEDIATE CHAT MODE UPDATE for JSON response
1026 608 if (data.chat_mode) {
1027 - updateChatModeIndicator(data.chat_mode, botId);
609 + //console.log("JSON Response: Updating chat mode to:", data.chat_mode);
610 + updateChatModeIndicator(data.chat_mode);
1028 611 }
1029 -
612 +
1030 613 // Check for testing panel
1031 614 if (window.mxchatTestPanelInstance && data.testing_data) {
615 + //console.log('Testing data found in streaming JSON response:', data.testing_data);
1032 616 window.mxchatTestPanelInstance.handleTestingData(data.testing_data);
1033 617 }
1034 -
618 +
1035 619 // Handle the JSON response directly
1036 - handleNonStreamResponse(data, callback, botId);
620 + handleNonStreamResponse(data, callback);
1037 621 return Promise.resolve(); // Prevent further processing
1038 622 });
1039 623 }
1040 624
@@ -1045,44 +629,37 @@
1045 629
1046 630 function processStream() {
1047 631 reader.read().then(({ done, value }) => {
1048 632 if (done) {
633 + //console.log("Streaming completed, final content:", accumulatedContent);
634 +
1049 635 // If streaming completed but no content was received, try to get response as fallback
1050 636 if (!streamingStarted || !accumulatedContent) {
637 + //console.log("Stream completed with no content, checking for fallback data");
638 +
1051 639 // Try to read the response as JSON
1052 640 responseClone.text().then(text => {
1053 641 try {
1054 642 const data = JSON.parse(text);
1055 - if (data.text || data.message || data.html) {
1056 - handleNonStreamResponse(data, callback, botId);
643 + if (data.text || data.message) {
644 + handleNonStreamResponse(data, callback);
1057 645 } else {
1058 646 // No valid data, fall back to regular call
1059 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1060 - callMxChat(message, callback, botId);
647 + $('.bot-message.temporary-message').remove();
648 + callMxChat(message, callback);
1061 649 }
1062 650 } catch (e) {
1063 651 // Could not parse, fall back to regular call
1064 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1065 - callMxChat(message, callback, botId);
652 + $('.bot-message.temporary-message').remove();
653 + callMxChat(message, callback);
1066 654 }
1067 655 }).catch(() => {
1068 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1069 - callMxChat(message, callback, botId);
656 + $('.bot-message.temporary-message').remove();
657 + callMxChat(message, callback);
1070 658 });
1071 659 return;
1072 660 }
1073 -
1074 - // Re-enable chat input when stream ends with content
1075 - enableChatInput(botId);
1076 -
1077 - // Scroll the user's last message to the top now that the
1078 - // bot's full reply has rendered (gives max reading room).
1079 - var $chatBoxDone = getElement(botId, 'chat-box');
1080 - var $lastUserMsgDone = $chatBoxDone.find('.user-message').last();
1081 - if ($lastUserMsgDone.length) {
1082 - scrollElementToTop($lastUserMsgDone, botId);
1083 - }
1084 -
661 +
1085 662 if (callback) {
1086 663 callback(accumulatedContent);
1087 664 }
1088 665 return;
@@ -1096,25 +673,17 @@
1096 673 if (line.startsWith('data: ')) {
1097 674 const data = line.substring(6);
1098 675
1099 676 if (data === '[DONE]') {
677 + //console.log("Received [DONE] signal");
678 +
1100 679 if (!accumulatedContent) {
1101 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1102 - callMxChat(message, callback, botId);
680 + //console.log("No content received before [DONE]");
681 + $('.bot-message.temporary-message').remove();
682 + callMxChat(message, callback);
1103 683 return;
1104 684 }
1105 -
1106 - // Re-enable chat input after streaming completes
1107 - enableChatInput(botId);
1108 -
1109 - // Scroll the user's last message to the top now
1110 - // that the bot's full reply has rendered.
1111 - var $chatBoxStreamDone = getElement(botId, 'chat-box');
1112 - var $lastUserMsgStreamDone = $chatBoxStreamDone.find('.user-message').last();
1113 - if ($lastUserMsgStreamDone.length) {
1114 - scrollElementToTop($lastUserMsgStreamDone, botId);
1115 - }
1116 -
685 +
1117 686 if (callback) {
1118 687 callback(accumulatedContent);
1119 688 }
1120 689 return;
@@ -1121,16 +690,18 @@
1121 690 }
1122 691
1123 692 try {
1124 693 const json = JSON.parse(data);
1125 -
694 +
1126 695 // IMMEDIATE CHAT MODE UPDATE FOR STREAMING
1127 696 if (json.chat_mode) {
1128 - updateChatModeIndicator(json.chat_mode, botId);
697 + //console.log("Stream: Updating chat mode immediately to:", json.chat_mode);
698 + updateChatModeIndicator(json.chat_mode);
1129 699 }
1130 -
700 +
1131 701 // Handle testing data
1132 702 if (json.testing_data && !testingDataReceived) {
703 + //console.log('Testing data received in stream:', json.testing_data);
1133 704 if (window.mxchatTestPanelInstance) {
1134 705 window.mxchatTestPanelInstance.handleTestingData(json.testing_data);
1135 706 testingDataReceived = true;
1136 707 }
@@ -1138,27 +709,26 @@
1138 709 // Handle content streaming
1139 710 else if (json.content) {
1140 711 streamingStarted = true;
1141 712 accumulatedContent += json.content;
1142 - updateStreamingMessage(accumulatedContent, botId);
1143 - }
713 + updateStreamingMessage(accumulatedContent);
714 + }
1144 715 // Handle complete response in stream (fallback response)
1145 - else if (json.text || json.message || json.html) {
1146 - handleNonStreamResponse(json, callback, botId);
716 + else if (json.text || json.message) {
717 + //console.log("Received complete response in stream:", json);
718 + handleNonStreamResponse(json, callback);
1147 719 return;
1148 720 }
1149 - // Handle errors
721 + // Handle errors - UPDATED to properly display API errors
1150 722 else if (json.error) {
723 + //console.error("Streaming error:", json.error);
1151 724
1152 725 // Get error message from various possible fields
1153 726 let errorMessage = json.error_message || json.message || json.text ||
1154 727 (typeof json.error === 'string' ? json.error : 'An error occurred. Please try again.');
1155 728
1156 - // Re-enable chat input on error
1157 - enableChatInput(botId);
1158 -
1159 729 // Display the error directly in the chat
1160 - replaceLastMessage("bot", errorMessage, '', [], botId);
730 + replaceLastMessage("bot", errorMessage);
1161 731
1162 732 if (callback) {
1163 733 callback(errorMessage);
1164 734 }
@@ -1164,9 +734,9 @@
1164 734 }
1165 735 return;
1166 736 }
1167 737 } catch (e) {
1168 - // SSE data parsing error - silently continue
738 + //console.error('Error parsing SSE data:', e, 'Data:', data);
1169 739 }
1170 740 }
1171 741 }
1172 742
@@ -1171,10 +741,11 @@
1171 741 }
1172 742
1173 743 processStream();
1174 744 }).catch(streamError => {
1175 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1176 - callMxChat(message, callback, botId);
745 + //console.error('Error reading stream:', streamError);
746 + $('.bot-message.temporary-message').remove();
747 + callMxChat(message, callback);
1177 748 });
1178 749 }
1179 750
1180 751 processStream();
@@ -1179,41 +750,48 @@
1179 750
1180 751 processStream();
1181 752 })
1182 753 .catch(error => {
754 + //console.log('Streaming failed:', error);
755 +
1183 756 // Check if we have server error data with chat mode
1184 757 if (error && error.isServerError && error.data) {
758 + //console.log('Using server error response data');
759 +
1185 760 // Check for chat mode in error data
1186 761 if (error.data.chat_mode) {
1187 - updateChatModeIndicator(error.data.chat_mode, botId);
762 + //console.log("Error Response: Updating chat mode to:", error.data.chat_mode);
763 + updateChatModeIndicator(error.data.chat_mode);
1188 764 }
1189 -
1190 - handleNonStreamResponse(error.data, callback, botId);
765 +
766 + handleNonStreamResponse(error.data, callback);
1191 767 } else {
1192 768 // Only fall back to regular call if we don't have any response data
1193 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1194 - callMxChat(message, callback, botId);
769 + //console.log('No response data available, falling back to regular call');
770 + $('.bot-message.temporary-message').remove();
771 + callMxChat(message, callback);
1195 772 }
1196 773 });
1197 - }); // refreshNonceIfNeeded
1198 774 }
1199 775
1200 -// Helper function to handle non-streaming responses
1201 -function handleNonStreamResponse(data, callback, botId) {
1202 - botId = botId || 'default';
776 +// Helper function to handle non-streaming responses (updated to include immediate chat mode handling)
777 +function handleNonStreamResponse(data, callback) {
778 + //console.log("Handling non-stream response:", data);
1203 779
1204 780 // IMMEDIATE CHAT MODE UPDATE FOR NON-STREAMING RESPONSES
1205 781 if (data.chat_mode) {
1206 - updateChatModeIndicator(data.chat_mode, botId);
782 + //console.log("Non-Stream: Updating chat mode immediately to:", data.chat_mode);
783 + updateChatModeIndicator(data.chat_mode);
1207 784 }
1208 785
1209 786 // Also check in data property if response is wrapped
1210 787 if (data.data && data.data.chat_mode) {
1211 - updateChatModeIndicator(data.data.chat_mode, botId);
788 + //console.log("Non-Stream: Updating chat mode from data to:", data.data.chat_mode);
789 + updateChatModeIndicator(data.data.chat_mode);
1212 790 }
1213 791
1214 - // NOTE: Don't remove temporary message here - let replaceLastMessage handle it
1215 - // This prevents a visual gap between thinking dots disappearing and content appearing
792 + // Remove temporary message
793 + $('.bot-message.temporary-message').remove();
1216 794
1217 795 // SECURITY FIX: Check for errors FIRST
1218 796 if (data.success === false || (data.data && data.data.error_message)) {
1219 797 let errorMessage = "";
@@ -1233,26 +811,8 @@
1233 811 } else {
1234 812 errorMessage = "An error occurred. Please try again or contact support.";
1235 813 }
1236 814
1237 - // Handle session reset action (IP changed, session expired, etc.)
1238 - // Silent reset — keep chat UI intact, just get a new session and retry
1239 - if (data.data && data.data.action === 'reset_session') {
1240 - MxChatInstances.silentResetSession(botId);
1241 - // Re-send the original message with the new session (user message is already displayed)
1242 - var originalMessage = getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message');
1243 - if (originalMessage) {
1244 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', null);
1245 - var currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
1246 - if (shouldUseStreaming(currentModel)) {
1247 - callMxChatStream(originalMessage, callback, botId);
1248 - } else {
1249 - callMxChat(originalMessage, callback, botId);
1250 - }
1251 - }
1252 - return;
1253 - }
1254 -
1255 815 // Format user-friendly error message
1256 816 let displayMessage = errorMessage;
1257 817 if (mxchatChat.is_admin) {
1258 818 displayMessage = errorMessage + (errorCode ? " (Error code: " + errorCode + ")" : "");
@@ -1257,9 +817,9 @@
1257 817 if (mxchatChat.is_admin) {
1258 818 displayMessage = errorMessage + (errorCode ? " (Error code: " + errorCode + ")" : "");
1259 819 }
1260 820
1261 - replaceLastMessage("bot", displayMessage, '', [], botId);
821 + replaceLastMessage("bot", displayMessage);
1262 822
1263 823 if (callback) {
1264 824 callback('');
1265 825 }
@@ -1265,22 +825,8 @@
1265 825 }
1266 826 return; // Exit early for errors
1267 827 }
1268 828
1269 - // Check for live agent response
1270 - if (data.success && data.data && data.data.status === 'waiting_for_agent') {
1271 - removeThinkingDots(botId);
1272 - // Also remove any leftover bot-message that lost its temporary-message class
1273 - var $chatBox = getElement(botId, 'chat-box');
1274 - $chatBox.find('.bot-message .thinking-dots').closest('.bot-message').remove();
1275 - updateChatModeIndicator('agent', botId);
1276 - enableChatInput(botId);
1277 - if (callback) {
1278 - callback('');
1279 - }
1280 - return;
1281 - }
1282 -
1283 829 // Handle different response formats
1284 830 if (data.text || data.html || data.message) {
1285 831
1286 832 // Apply response hooks
@@ -1292,23 +838,22 @@
1292 838 }
1293 839
1294 840 // Display the response
1295 841 if (data.text && data.html) {
1296 - replaceLastMessage("bot", data.text, data.html, [], botId);
842 + replaceLastMessage("bot", data.text, data.html);
1297 843 } else if (data.text) {
1298 - replaceLastMessage("bot", data.text, '', [], botId);
844 + replaceLastMessage("bot", data.text);
1299 845 } else if (data.html) {
1300 - replaceLastMessage("bot", "", data.html, [], botId);
846 + replaceLastMessage("bot", "", data.html);
1301 847 } else if (data.message) {
1302 - replaceLastMessage("bot", data.message, '', [], botId);
848 + replaceLastMessage("bot", data.message);
1303 849 }
1304 850 }
1305 851
1306 852 // Handle other response properties
1307 853 if (data.data && data.data.filename) {
1308 - showActivePdf(data.data.filename, botId);
1309 - var instance = MxChatInstances.get(botId);
1310 - instance.activePdfFile = data.data.filename;
854 + showActivePdf(data.data.filename);
855 + activePdfFile = data.data.filename;
1311 856 }
1312 857
1313 858 if (data.redirect_url) {
1314 859 setTimeout(() => {
@@ -1315,33 +860,31 @@
1315 860 window.location.href = data.redirect_url;
1316 861 }, 1500);
1317 862 }
1318 863
1319 - // Ensure chat input is re-enabled (safety net for edge cases)
1320 - enableChatInput(botId);
1321 -
1322 864 if (callback) {
1323 865 callback(data.text || data.message || '');
1324 866 }
1325 867 }
1326 -
1327 868 // Enhanced updateChatModeIndicator function for immediate DOM updates
1328 -function updateChatModeIndicator(mode, botId) {
1329 - botId = botId || 'default';
1330 - const indicator = getElementDOM(botId, 'chat-mode-indicator');
869 +function updateChatModeIndicator(mode) {
870 + //console.log("updateChatModeIndicator called with mode:", mode);
871 + const indicator = document.getElementById('chat-mode-indicator');
1331 872 if (indicator) {
1332 873 const oldText = indicator.textContent;
1333 -
874 +
1334 875 if (mode === 'agent') {
1335 876 indicator.textContent = 'Live Agent';
1336 - startPolling(botId);
877 + startPolling();
878 + //console.log("Set indicator to Live Agent");
1337 879 } else {
1338 880 // Everything else is AI mode
1339 881 const customAiText = indicator.getAttribute('data-ai-text') || 'AI Agent';
1340 882 indicator.textContent = customAiText;
1341 - stopPolling(botId);
883 + stopPolling();
884 + //console.log("Set indicator to AI Agent:", customAiText);
1342 885 }
1343 -
886 +
1344 887 // Force immediate DOM update and reflow
1345 888 if (oldText !== indicator.textContent) {
1346 889 // Force a reflow to ensure the change is visible immediately
1347 890 indicator.style.display = 'none';
@@ -1346,36 +889,88 @@
1346 889 // Force a reflow to ensure the change is visible immediately
1347 890 indicator.style.display = 'none';
1348 891 indicator.offsetHeight; // Trigger reflow
1349 892 indicator.style.display = '';
1350 -
893 +
1351 894 // Double-check after a brief moment to ensure the change stuck
1352 895 setTimeout(() => {
896 + //console.log("Final indicator text:", indicator.textContent);
1353 897 if (mode === 'agent' && indicator.textContent !== 'Live Agent') {
898 + //console.warn("Mode indicator update failed, forcing update");
1354 899 indicator.textContent = 'Live Agent';
1355 900 } else if (mode !== 'agent' && indicator.textContent === 'Live Agent') {
901 + //console.warn("Mode indicator stuck on Live Agent, forcing AI update");
1356 902 const customAiText = indicator.getAttribute('data-ai-text') || 'AI Agent';
1357 903 indicator.textContent = customAiText;
1358 904 }
1359 905 }, 50);
1360 906 }
907 + } else {
908 + //console.error("Chat mode indicator element not found!");
1361 909 }
1362 910 }
1363 911
912 +// Helper function to handle non-streaming responses (updated to include chat mode handling)
913 +function handleNonStreamResponse(data, callback) {
914 + //console.log("Handling non-stream response:", data);
915 +
916 + // Remove temporary message
917 + $('.bot-message.temporary-message').remove();
918 +
919 + // Handle different response formats
920 + if (data.text || data.html || data.message) {
921 +
922 + // Apply response hooks
923 + if (data.text && typeof customMxChatFilter === 'function') {
924 + data.text = customMxChatFilter(data.text, "response");
925 + }
926 + if (data.message && typeof customMxChatFilter === 'function') {
927 + data.message = customMxChatFilter(data.message, "response");
928 + }
929 +
930 + // Handle chat mode updates for streaming responses too
931 + handleChatModeUpdates(data, data.text || data.message);
932 +
933 + // Display the response
934 + if (data.text && data.html) {
935 + replaceLastMessage("bot", data.text, data.html);
936 + } else if (data.text) {
937 + replaceLastMessage("bot", data.text);
938 + } else if (data.html) {
939 + replaceLastMessage("bot", "", data.html);
940 + } else if (data.message) {
941 + replaceLastMessage("bot", data.message);
942 + }
943 + }
944 +
945 + // Handle other response properties
946 + if (data.data && data.data.filename) {
947 + showActivePdf(data.data.filename);
948 + activePdfFile = data.data.filename;
949 + }
950 +
951 + if (data.redirect_url) {
952 + setTimeout(() => {
953 + window.location.href = data.redirect_url;
954 + }, 1500);
955 + }
956 +
957 + if (callback) {
958 + callback(data.text || data.message || '');
959 + }
960 +}
961 +
1364 962 // Function to update message during streaming
1365 -function updateStreamingMessage(content, botId) {
1366 - botId = botId || 'default';
1367 -
963 +function updateStreamingMessage(content) {
1368 964 // ADD RESPONSE HOOK FOR REAL-TIME STREAMING
1369 965 if (typeof customMxChatFilter === 'function') {
1370 966 content = customMxChatFilter(content, "response");
1371 967 }
1372 -
968 +
1373 969 const formattedContent = linkify(content);
1374 970
1375 - // Find the temporary message in this bot's chat box
1376 - var $chatBox = getElement(botId, 'chat-box');
1377 - const tempMessage = $chatBox.find('.bot-message.temporary-message').last();
971 + // Find the temporary message
972 + const tempMessage = $('.bot-message.temporary-message').last();
1378 973
1379 974 if (tempMessage.length) {
1380 975 // Update existing message
1381 976 tempMessage.html(formattedContent);
@@ -1380,9 +975,9 @@
1380 975 // Update existing message
1381 976 tempMessage.html(formattedContent);
1382 977 } else {
1383 978 // Create new temporary message if it doesn't exist
1384 - appendMessage("bot", content, '', [], true, botId);
979 + appendMessage("bot", content, '', [], true);
1385 980 }
1386 981 }
1387 982
1388 983 function isStreamingSupported(model) {
@@ -1400,254 +995,23 @@
1400 995
1401 996 return isSupported;
1402 997 }
1403 998
1404 -// Update the event handlers to use the correct function names (using event delegation)
1405 -// Use class-based selectors for multi-instance support
1406 -$(document).on('click', '.send-button', function() {
1407 - var botId = getBotIdFromElement(this);
1408 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
1409 - if (!(modeIndicator && modeIndicator.textContent === 'Live Agent')) {
1410 - disableChatInput(botId);
1411 - }
1412 - sendMessage(botId);
999 +// Update the event handlers to use the correct function names
1000 +$('#send-button').off('click').on('click', function() {
1001 + sendMessage(); // Use the updated sendMessage function
1413 1002 });
1414 1003
1415 -// Override enter key handler (using event delegation)
1416 -$(document).on('keypress', '.chat-input', function(e) {
1004 +// Override enter key handler
1005 +$('#chat-input').off('keypress').on('keypress', function(e) {
1417 1006 if (e.which == 13 && !e.shiftKey) {
1418 1007 e.preventDefault();
1419 - var botId = getBotIdFromElement(this);
1420 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
1421 - if (!(modeIndicator && modeIndicator.textContent === 'Live Agent')) {
1422 - disableChatInput(botId);
1423 - }
1424 - sendMessage(botId);
1008 + sendMessage(); // Use the updated sendMessage function
1425 1009 }
1426 1010 });
1427 1011
1428 -// Builds the list of overflow-menu items for a given bot.
1429 -// Adding a future item is one push to this array — do NOT hardcode "only download."
1430 -function mxchatGetHeaderMenuItems(botId) {
1431 - var items = [];
1432 - var settings = (typeof mxchatChat !== 'undefined') ? mxchatChat : {};
1433 -
1434 - // The `print_button_*` keys still gate this item for back-compat with
1435 - // existing user options. The action is now a transcript download, not print.
1436 - if (settings.print_button_enabled === 'on') {
1437 - items.push({
1438 - id: 'download-transcript',
1439 - label: settings.print_button_label || 'Download Transcript',
1440 - icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>',
1441 - action: function() {
1442 - mxchatDownloadTranscript(botId);
1443 - }
1444 - });
1445 - }
1446 -
1447 - return items;
1448 -}
1449 -
1450 -// Builds a clean markdown transcript of the current conversation and triggers
1451 -// a file download. Used by the "Download Transcript" menu item.
1452 -function mxchatDownloadTranscript(botId) {
1453 - var $chatBox = getElement(botId, 'chat-box');
1454 - if (!$chatBox || !$chatBox.length) return;
1455 -
1456 - var settings = (typeof mxchatChat !== 'undefined') ? mxchatChat : {};
1457 - var headerTitle = settings.print_header_title || 'Chat transcript';
1458 - var now = new Date();
1459 - var stamp = now.toLocaleString();
1460 -
1461 - var lines = [];
1462 - lines.push('# ' + headerTitle);
1463 - lines.push('');
1464 - lines.push('Exported: ' + stamp);
1465 - lines.push('');
1466 - lines.push('---');
1467 - lines.push('');
1468 -
1469 - $chatBox.find('.user-message, .bot-message, .agent-message').each(function() {
1470 - var $msg = $(this);
1471 - // Skip thinking placeholders and any in-flight temporary messages.
1472 - if ($msg.find('.thinking-dots').length) return;
1473 - if ($msg.hasClass('temporary-message')) return;
1474 -
1475 - var sender;
1476 - if ($msg.hasClass('user-message')) sender = 'User';
1477 - else if ($msg.hasClass('agent-message')) sender = 'Live Agent';
1478 - else sender = 'AI Agent';
1479 -
1480 - // Strip interactive UI from the cloned message so we get the conversation text.
1481 - var $clone = $msg.clone();
1482 - $clone.find('.copy-button, .message-toolbar, .mxchat-copy, button, script, style').remove();
1483 - var text = $clone.text().replace(/ /g, ' ').replace(/[ \t]+\n/g, '\n').replace(/\n{3,}/g, '\n\n').trim();
1484 - if (!text) return;
1485 -
1486 - lines.push('**' + sender + '**');
1487 - lines.push('');
1488 - lines.push(text);
1489 - lines.push('');
1490 - });
1491 -
1492 - var content = lines.join('\n');
1493 - var iso = now.toISOString().replace(/[:.]/g, '-').slice(0, 19);
1494 - var fname = 'mxchat-transcript-' + iso + '.md';
1495 - var blob = new Blob([content], { type: 'text/markdown;charset=utf-8' });
1496 - var url = URL.createObjectURL(blob);
1497 - var a = document.createElement('a');
1498 - a.href = url;
1499 - a.download = fname;
1500 - a.style.display = 'none';
1501 - document.body.appendChild(a);
1502 - a.click();
1503 - setTimeout(function() {
1504 - if (a.parentNode) a.parentNode.removeChild(a);
1505 - URL.revokeObjectURL(url);
1506 - }, 100);
1507 -}
1508 -
1509 -// Reads the bot bubble's actual computed bg+fg and writes them as CSS vars
1510 -// on the menu wrap, so the dropdown matches whatever paints the bubble —
1511 -// saved options, AI theme CSS, or the mxchat-theme add-on.
1512 -function mxchatSyncMenuColors(botId, $wrap) {
1513 - if (!$wrap || !$wrap.length) return;
1514 - var $bot = $wrap.closest('.mxchat-chatbot-wrapper').find('.bot-message').not('.temporary-message').first();
1515 - if (!$bot.length) return;
1516 - var cs = window.getComputedStyle($bot[0]);
1517 - if (cs.backgroundColor && cs.backgroundColor !== 'rgba(0, 0, 0, 0)' && cs.backgroundColor !== 'transparent') {
1518 - $wrap[0].style.setProperty('--mxchat-menu-bg', cs.backgroundColor);
1519 - }
1520 - // Bot text color usually lives on a child div, not .bot-message itself.
1521 - var $textChild = $bot.find('[style*="color"]').first();
1522 - var fg = ($textChild.length ? window.getComputedStyle($textChild[0]).color : cs.color);
1523 - if (fg) $wrap[0].style.setProperty('--mxchat-menu-fg', fg);
1524 -}
1525 -
1526 -// One-time per-widget init: renders menu items, wires open/close,
1527 -// outside-click, Escape, and arrow-key navigation. If no items, hides the trigger.
1528 -function mxchatInitHeaderMenu(botId) {
1529 - var $wrap = $('.mxchat-header-menu-wrap[data-bot-id="' + botId + '"]').first();
1530 - if (!$wrap.length || $wrap.data('mxchatMenuReady')) return;
1531 -
1532 - var $trigger = $wrap.find('.mxchat-menu-trigger');
1533 - var $menu = $wrap.find('.mxchat-header-menu');
1534 - var items = mxchatGetHeaderMenuItems(botId);
1535 -
1536 - // Initial color sync — covers normal page load.
1537 - mxchatSyncMenuColors(botId, $wrap);
1538 -
1539 - if (!items.length) {
1540 - $trigger.hide();
1541 - $menu.hide();
1542 - $wrap.data('mxchatMenuReady', true);
1543 - return;
1544 - }
1545 -
1546 - // Build the menu items.
1547 - $menu.empty();
1548 - items.forEach(function(item, idx) {
1549 - var $btn = $('<button>', {
1550 - type: 'button',
1551 - 'class': 'mxchat-menu-item',
1552 - 'role': 'menuitem',
1553 - 'tabindex': '-1',
1554 - 'data-menu-id': item.id,
1555 - html: '<span class="mxchat-menu-item-icon">' + item.icon + '</span>' +
1556 - '<span class="mxchat-menu-item-label"></span>'
1557 - });
1558 - $btn.find('.mxchat-menu-item-label').text(item.label);
1559 - $btn.on('click', function(e) {
1560 - e.preventDefault();
1561 - e.stopPropagation();
1562 - closeMenu();
1563 - try { item.action(); } catch (err) { /* no-op */ }
1564 - });
1565 - $menu.append($btn);
1566 - });
1567 -
1568 - function openMenu() {
1569 - // Re-sync each open in case the active theme changed since init.
1570 - mxchatSyncMenuColors(botId, $wrap);
1571 - $menu.prop('hidden', false).attr('aria-hidden', 'false').addClass('is-open');
1572 - $trigger.attr('aria-expanded', 'true');
1573 - // Focus the first item for keyboard users
1574 - setTimeout(function() {
1575 - $menu.find('.mxchat-menu-item').first().attr('tabindex', '0').trigger('focus');
1576 - }, 0);
1577 - }
1578 - function closeMenu(returnFocus) {
1579 - $menu.prop('hidden', true).attr('aria-hidden', 'true').removeClass('is-open');
1580 - $trigger.attr('aria-expanded', 'false');
1581 - $menu.find('.mxchat-menu-item').attr('tabindex', '-1');
1582 - if (returnFocus) $trigger.trigger('focus');
1583 - }
1584 -
1585 - // Toggle on trigger click — stop propagation so the .chatbot-top-bar
1586 - // click-to-collapse handler does not fire.
1587 - $trigger.on('click', function(e) {
1588 - e.preventDefault();
1589 - e.stopPropagation();
1590 - if ($menu.hasClass('is-open')) closeMenu();
1591 - else openMenu();
1592 - });
1593 -
1594 - // Don't let clicks inside the menu bubble to the top-bar collapse handler.
1595 - $menu.on('click', function(e) {
1596 - e.stopPropagation();
1597 - });
1598 -
1599 - // Outside click closes the menu.
1600 - $(document).on('click.mxchatMenu-' + botId, function(e) {
1601 - if (!$menu.hasClass('is-open')) return;
1602 - if ($wrap.has(e.target).length || $wrap.is(e.target)) return;
1603 - closeMenu();
1604 - });
1605 -
1606 - // Keyboard: Escape closes and returns focus; arrow keys move focus; Enter activates.
1607 - $menu.on('keydown', '.mxchat-menu-item', function(e) {
1608 - var $items = $menu.find('.mxchat-menu-item');
1609 - var idx = $items.index(this);
1610 - if (e.key === 'Escape') {
1611 - e.preventDefault();
1612 - closeMenu(true);
1613 - } else if (e.key === 'ArrowDown') {
1614 - e.preventDefault();
1615 - var $next = $items.eq((idx + 1) % $items.length);
1616 - $items.attr('tabindex', '-1');
1617 - $next.attr('tabindex', '0').trigger('focus');
1618 - } else if (e.key === 'ArrowUp') {
1619 - e.preventDefault();
1620 - var $prev = $items.eq((idx - 1 + $items.length) % $items.length);
1621 - $items.attr('tabindex', '-1');
1622 - $prev.attr('tabindex', '0').trigger('focus');
1623 - } else if (e.key === 'Enter' || e.key === ' ') {
1624 - e.preventDefault();
1625 - $(this).trigger('click');
1626 - }
1627 - });
1628 - $trigger.on('keydown', function(e) {
1629 - if (e.key === 'Escape' && $menu.hasClass('is-open')) {
1630 - e.preventDefault();
1631 - closeMenu(true);
1632 - } else if ((e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') && !$menu.hasClass('is-open')) {
1633 - e.preventDefault();
1634 - openMenu();
1635 - }
1636 - });
1637 -
1638 - $wrap.data('mxchatMenuReady', true);
1639 -}
1640 -
1641 -// Initialize header menus for every rendered widget on DOM ready.
1642 -$(function() {
1643 - $('.mxchat-header-menu-wrap').each(function() {
1644 - var botId = $(this).data('bot-id');
1645 - if (botId) mxchatInitHeaderMenu(botId);
1646 - });
1647 -});
1648 -
1649 -function appendMessage(sender, messageText = '', messageHtml = '', images = [], isTemporary = false, botId = 'default') {
1012 +
1013 +function appendMessage(sender, messageText = '', messageHtml = '', images = [], isTemporary = false) {
1650 1014 try {
1651 1015 // Determine styles based on sender type
1652 1016 let messageClass, bgColor, fontColor;
1653 1017
@@ -1668,29 +1032,25 @@
1668 1032 }
1669 1033
1670 1034 const messageDiv = $('<div>')
1671 1035 .addClass(messageClass)
1672 - .attr('dir', 'auto');
1673 -
1674 - // Only apply inline colors if AI theme is not active (let CSS handle it)
1675 - var skipColors = shouldSkipInlineColors(botId);
1676 - if (skipColors) {
1677 - messageDiv.css({
1678 - 'margin-bottom': '1em'
1679 - });
1680 - } else {
1681 - messageDiv.css({
1036 + .attr('dir', 'auto')
1037 + .css({
1682 1038 'background': bgColor,
1683 1039 'color': fontColor,
1684 1040 'margin-bottom': '1em'
1685 1041 });
1042 +
1043 + // Process the message content based on sender
1044 + let fullMessage;
1045 + if (sender === "user") {
1046 + // For user messages, apply linkify after sanitization
1047 + fullMessage = linkify(messageText);
1048 + } else {
1049 + // For bot/agent messages, preserve HTML
1050 + fullMessage = messageText;
1686 1051 }
1687 1052
1688 - // Process the message content - always run linkify to convert markdown
1689 - // links and format text. linkify() handles existing HTML safely via
1690 - // negative lookaheads that skip URLs already inside <a> tags.
1691 - let fullMessage = linkify(messageText);
1692 -
1693 1053 // Add images if provided
1694 1054 if (images && images.length > 0) {
1695 1055 fullMessage += '<div class="image-gallery" dir="auto">';
1696 1056 images.forEach(img => {
@@ -1696,9 +1056,9 @@
1696 1056 images.forEach(img => {
1697 1057 const safeTitle = sanitizeUserInput(img.title);
1698 1058 const safeUrl = encodeURI(img.image_url);
1699 1059 const safeThumbnail = encodeURI(img.thumbnail_url);
1700 -
1060 +
1701 1061 fullMessage += `
1702 1062 <div style="margin-bottom: 10px;">
1703 1063 <strong>${safeTitle}</strong><br>
1704 1064 <a href="${safeUrl}" target="_blank">
@@ -1710,14 +1070,9 @@
1710 1070 }
1711 1071
1712 1072 // Append HTML content if provided
1713 1073 if (messageHtml && sender !== "user") {
1714 - // Only add line breaks if there's actual text content before the HTML
1715 - if (fullMessage && fullMessage.trim()) {
1716 - fullMessage += '<br><br>' + messageHtml;
1717 - } else {
1718 - fullMessage = messageHtml;
1719 - }
1074 + fullMessage += '<br><br>' + messageHtml;
1720 1075 }
1721 1076
1722 1077 messageDiv.html(fullMessage);
1723 1078
@@ -1724,66 +1079,58 @@
1724 1079 if (isTemporary) {
1725 1080 messageDiv.addClass('temporary-message');
1726 1081 }
1727 1082
1728 - // Append to the correct chatbot instance's chat-box
1729 - var $chatBox = getElement(botId, 'chat-box');
1730 - messageDiv.hide().appendTo($chatBox).fadeIn(300, function() {
1083 + messageDiv.hide().appendTo('#chat-box').fadeIn(300, function() {
1731 1084 // FIXED: Use event delegation for link tracking
1732 1085 if (sender === "bot" || sender === "agent") {
1733 - attachLinkTracking(messageDiv, messageText, botId);
1086 + attachLinkTracking(messageDiv, messageText);
1734 1087 }
1735 -
1088 +
1736 1089 if (sender === "bot") {
1737 - const lastUserMessage = $chatBox.find('.user-message').last();
1090 + const lastUserMessage = $('#chat-box').find('.user-message').last();
1738 1091 if (lastUserMessage.length) {
1739 - scrollElementToTop(lastUserMessage, botId);
1092 + scrollElementToTop(lastUserMessage);
1740 1093 }
1741 1094 }
1742 -
1743 - if ((sender === "bot" || sender === "agent") && !isTemporary) {
1744 - if (typeof mxchatInitHeaderMenu === 'function') mxchatInitHeaderMenu(botId);
1745 - }
1746 1095 });
1747 1096
1748 1097 if (messageText.id) {
1749 - var instance = MxChatInstances.get(botId);
1750 - instance.lastSeenMessageId = messageText.id;
1751 - hideNotification(botId);
1098 + lastSeenMessageId = messageText.id;
1099 + hideNotification();
1752 1100 }
1753 1101 } catch (error) {
1754 - // Error rendering message - silently continue
1102 + //console.error("Error rendering message:", error);
1755 1103 }
1756 1104 }
1757 1105
1758 1106 // Helper function to attach link tracking with proper event handling
1759 -function attachLinkTracking(messageDiv, messageText, botId) {
1760 - botId = botId || 'default';
1107 +function attachLinkTracking(messageDiv, messageText) {
1761 1108 // Use a slight delay to ensure DOM is ready
1762 1109 setTimeout(function() {
1763 1110 const links = messageDiv.find('a[href]').not('[data-tracked]');
1764 -
1111 +
1765 1112 links.each(function() {
1766 1113 const $link = $(this);
1767 1114 const originalHref = $link.attr('href');
1768 -
1115 +
1769 1116 // Mark as tracked to avoid duplicate handlers
1770 1117 $link.attr('data-tracked', 'true');
1771 -
1118 +
1772 1119 // Only track external URLs
1773 1120 if (originalHref && (originalHref.startsWith('http://') || originalHref.startsWith('https://'))) {
1774 1121 // Remove any existing click handlers first
1775 1122 $link.off('click.tracking');
1776 -
1123 +
1777 1124 // Add new click handler with namespace
1778 1125 $link.on('click.tracking', function(e) {
1779 1126 e.preventDefault();
1780 1127 e.stopPropagation();
1781 -
1782 - const messageContext = typeof messageText === 'string'
1783 - ? messageText.substring(0, 200)
1128 +
1129 + const messageContext = typeof messageText === 'string'
1130 + ? messageText.substring(0, 200)
1784 1131 : '';
1785 -
1132 +
1786 1133 // Track the click
1787 1134 $.ajax({
1788 1135 url: mxchatChat.ajax_url,
1789 1136 type: 'POST',
@@ -1788,9 +1135,9 @@
1788 1135 url: mxchatChat.ajax_url,
1789 1136 type: 'POST',
1790 1137 data: {
1791 1138 action: 'mxchat_track_url_click',
1792 - session_id: getChatSession(botId),
1139 + session_id: getChatSession(),
1793 1140 url: originalHref,
1794 1141 message_context: messageContext,
1795 1142 nonce: mxchatChat.nonce
1796 1143 },
@@ -1802,9 +1149,9 @@
1802 1149 window.location.href = originalHref;
1803 1150 }
1804 1151 }
1805 1152 });
1806 -
1153 +
1807 1154 return false; // Extra insurance to prevent default
1808 1155 });
1809 1156 }
1810 1157 });
@@ -1810,12 +1157,11 @@
1810 1157 });
1811 1158 }, 100); // Small delay to ensure DOM is ready
1812 1159 }
1813 1160
1814 -function replaceLastMessage(sender, responseText, responseHtml = '', images = [], botId = 'default') {
1161 +function replaceLastMessage(sender, responseText, responseHtml = '', images = []) {
1815 1162 var messageClass = sender === "user" ? "user-message" : sender === "agent" ? "agent-message" : "bot-message";
1816 - var $chatBox = getElement(botId, 'chat-box');
1817 - var lastMessageDiv = $chatBox.find('.bot-message.temporary-message, .agent-message.temporary-message').last();
1163 + var lastMessageDiv = $('#chat-box').find('.bot-message.temporary-message, .agent-message.temporary-message').last();
1818 1164
1819 1165 // Determine styles
1820 1166 let bgColor, fontColor;
1821 1167 if (sender === "user") {
@@ -1828,13 +1174,27 @@
1828 1174 bgColor = botMessageBgColor;
1829 1175 fontColor = botMessageFontColor;
1830 1176 }
1831 1177
1832 - // Always run linkify to convert markdown links and format text.
1833 - // linkify() already handles existing HTML (its URL patterns use negative lookaheads
1834 - // to avoid double-processing URLs that are already inside <a> tags).
1835 - var fullMessage = linkify(responseText);
1836 -
1178 + // FIXED: Only linkify if response doesn't already contain HTML links or tags
1179 + // This prevents double-processing of URLs that are already formatted as HTML
1180 + var fullMessage;
1181 + if (sender === "user") {
1182 + // Always linkify user messages (they're plain text)
1183 + fullMessage = linkify(responseText);
1184 + } else {
1185 + // For bot/agent messages, check if HTML already exists
1186 + if (responseText.includes('<a href=') || responseText.includes('</a>') ||
1187 + responseText.includes('<img') || responseText.includes('<div') ||
1188 + responseText.includes('<p>') || responseText.includes('<br>')) {
1189 + // Response already has HTML, don't process it
1190 + fullMessage = responseText;
1191 + } else {
1192 + // Plain text response, apply linkify
1193 + fullMessage = linkify(responseText);
1194 + }
1195 + }
1196 +
1837 1197 if (responseHtml) {
1838 1198 // Only add line breaks if there's actual text content before the HTML
1839 1199 if (fullMessage && fullMessage.trim()) {
1840 1200 fullMessage += '<br><br>' + responseHtml;
@@ -1857,96 +1217,67 @@
1857 1217 fullMessage += '</div>';
1858 1218 }
1859 1219
1860 1220 if (lastMessageDiv.length) {
1861 - // Replace content immediately to prevent visual gap between thinking dots and response
1862 - lastMessageDiv
1863 - .html(fullMessage)
1864 - .removeClass('bot-message user-message temporary-message')
1865 - .addClass(messageClass)
1866 - .attr('dir', 'auto');
1867 -
1868 - // Only apply inline colors if AI theme is not active (let CSS handle it)
1869 - var skipColors = mxchatChat.skip_inline_colors || shouldSkipInlineColors(botId);
1870 - if (!skipColors) {
1871 - lastMessageDiv.css({
1872 - 'background-color': bgColor,
1873 - 'color': fontColor,
1874 - });
1875 - }
1876 -
1877 - // Handle link tracking and scroll
1878 - if (sender === "bot" || sender === "agent") {
1879 - attachLinkTracking(lastMessageDiv, responseText, botId);
1880 -
1881 - const lastUserMessage = $chatBox.find('.user-message').last();
1882 - if (lastUserMessage.length) {
1883 - scrollElementToTop(lastUserMessage, botId);
1884 - }
1885 - // Show notification if chat is hidden
1886 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
1887 - if ($floatingChatbot.hasClass('hidden')) {
1888 - showNotification(botId);
1889 - }
1890 - }
1891 -
1892 - // Re-enable chat input after response is displayed
1893 - enableChatInput(botId);
1894 -
1895 - if (sender === "bot" || sender === "agent") {
1896 - if (typeof mxchatInitHeaderMenu === 'function') mxchatInitHeaderMenu(botId);
1897 - }
1221 + lastMessageDiv.fadeOut(200, function() {
1222 + $(this)
1223 + .html(fullMessage)
1224 + .removeClass('bot-message user-message')
1225 + .addClass(messageClass)
1226 + .attr('dir', 'auto')
1227 + .css({
1228 + 'background-color': bgColor,
1229 + 'color': fontColor,
1230 + })
1231 + .removeClass('temporary-message')
1232 + .fadeIn(200, function() {
1233 + // FIXED: Use the helper function for link tracking
1234 + if (sender === "bot" || sender === "agent") {
1235 + attachLinkTracking($(this), responseText);
1236 + }
1237 +
1238 + if (sender === "bot" || sender === "agent") {
1239 + const lastUserMessage = $('#chat-box').find('.user-message').last();
1240 + if (lastUserMessage.length) {
1241 + scrollElementToTop(lastUserMessage);
1242 + }
1243 + // Show notification if chat is hidden
1244 + if ($('#floating-chatbot').hasClass('hidden')) {
1245 + showNotification();
1246 + }
1247 + }
1248 + });
1249 + });
1898 1250 } else {
1899 - appendMessage(sender, responseText, responseHtml, images, false, botId);
1900 - // Re-enable chat input after response is displayed
1901 - enableChatInput(botId);
1251 + appendMessage(sender, responseText, responseHtml, images);
1902 1252 }
1903 1253 }
1904 1254
1905 1255
1906 - function appendThinkingMessage(botId) {
1907 - botId = botId || 'default';
1256 + function appendThinkingMessage() {
1257 + // Remove any existing thinking dots first
1258 + $('.thinking-dots').remove();
1908 1259
1909 - // Don't show thinking dots in live agent mode - message is just forwarded to a human
1910 - var indicator = getElementDOM(botId, 'chat-mode-indicator');
1911 - if (indicator && indicator.textContent === 'Live Agent') {
1912 - return;
1913 - }
1914 -
1915 - var $chatBox = getElement(botId, 'chat-box');
1916 -
1917 - // Remove any existing thinking dots in this bot's chat first
1918 - $chatBox.find('.thinking-dots').remove();
1919 -
1920 - // Check if we should skip inline colors (AI theme is active)
1921 - var skipColors = shouldSkipInlineColors(botId);
1922 -
1923 1260 // Retrieve the bot message font color and background color
1924 1261 var botMessageFontColor = mxchatChat.bot_message_font_color;
1925 1262 var botMessageBgColor = mxchatChat.bot_message_bg_color;
1926 1263
1927 - // Build thinking dots HTML - skip inline colors if AI theme is active
1928 - var dotStyle = skipColors ? '' : ' style="background-color: ' + botMessageFontColor + ';"';
1264 +
1929 1265 var thinkingHtml = '<div class="thinking-dots-container">' +
1930 1266 '<div class="thinking-dots">' +
1931 - '<span class="dot"' + dotStyle + '></span>' +
1932 - '<span class="dot"' + dotStyle + '></span>' +
1933 - '<span class="dot"' + dotStyle + '></span>' +
1267 + '<span class="dot" style="background-color: ' + botMessageFontColor + ';"></span>' +
1268 + '<span class="dot" style="background-color: ' + botMessageFontColor + ';"></span>' +
1269 + '<span class="dot" style="background-color: ' + botMessageFontColor + ';"></span>' +
1934 1270 '</div>' +
1935 1271 '</div>';
1936 1272
1937 - // Append the thinking dots to this bot's chat container - skip inline colors if AI theme is active
1938 - var messageStyle = skipColors ? '' : ' style="background-color: ' + botMessageBgColor + '; color: ' + botMessageFontColor + ';"';
1939 - $chatBox.append('<div class="bot-message temporary-message"' + messageStyle + '>' + thinkingHtml + '</div>');
1940 - scrollToBottom(botId);
1273 + // Append the thinking dots to the chat container (or within the temporary message div)
1274 + $("#chat-box").append('<div class="bot-message temporary-message" style="background-color: ' + botMessageBgColor + ';">' + thinkingHtml + '</div>');
1275 + scrollToBottom();
1941 1276 }
1942 -
1943 - function removeThinkingDots(botId) {
1944 - botId = botId || 'default';
1945 - var $chatBox = getElement(botId, 'chat-box');
1946 - // Remove by temporary-message class first, then fall back to any bot-message containing thinking dots
1947 - $chatBox.find('.thinking-dots').closest('.temporary-message').remove();
1948 - $chatBox.find('.bot-message .thinking-dots').closest('.bot-message').remove();
1277 +
1278 + function removeThinkingDots() {
1279 + $('.thinking-dots').closest('.temporary-message').remove();
1949 1280 }
1950 1281
1951 1282 // ====================================
1952 1283 // TEXT FORMATTING & PROCESSING
@@ -1980,12 +1311,9 @@
1980 1311 processedText = formatTextStyling(processedText);
1981 1312
1982 1313 // Process code blocks BEFORE processing links
1983 1314 processedText = formatCodeBlocks(processedText);
1984 -
1985 - // Process markdown tables BEFORE converting newlines to paragraphs
1986 - processedText = formatMarkdownTables(processedText);
1987 -
1315 +
1988 1316 // NOW convert to paragraphs
1989 1317 processedText = convertNewlinesToBreaks(processedText);
1990 1318
1991 1319 // IMPORTANT: Handle citation-style brackets FIRST [URL]
@@ -1998,63 +1326,37 @@
1998 1326 // Return as a proper link without the brackets
1999 1327 return `<a href="${safeUrl}" target="${linkTarget}">${cleanUrl}</a>`;
2000 1328 });
2001 1329
2002 - // Process markdown links: [text](url) and [](url)
2003 - // Uses balanced parenthesis matching to handle URLs containing parens
2004 - // (e.g. PDF filenames with dates like (2025-08-28).pdf)
2005 - processedText = (function(input) {
2006 - var result = '';
2007 - var i = 0;
2008 - while (i < input.length) {
2009 - // Look for [ at current position
2010 - if (input[i] === '[') {
2011 - // Find closing ]
2012 - var closeBracket = input.indexOf(']', i + 1);
2013 - if (closeBracket === -1 || closeBracket + 1 >= input.length || input[closeBracket + 1] !== '(') {
2014 - result += input[i];
2015 - i++;
2016 - continue;
2017 - }
2018 - var linkText = input.substring(i + 1, closeBracket);
2019 - // Check if URL starts with http
2020 - var urlStart = closeBracket + 2;
2021 - if (!input.substring(urlStart).match(/^https?:\/\//)) {
2022 - result += input[i];
2023 - i++;
2024 - continue;
2025 - }
2026 - // Find balanced closing paren
2027 - var depth = 1;
2028 - var j = urlStart;
2029 - while (j < input.length && depth > 0) {
2030 - if (input[j] === '(') depth++;
2031 - else if (input[j] === ')') depth--;
2032 - if (depth > 0) j++;
2033 - }
2034 - if (depth !== 0) {
2035 - result += input[i];
2036 - i++;
2037 - continue;
2038 - }
2039 - var url = input.substring(urlStart, j);
2040 - var cleanUrl = url.replace(/[\].,;!?]+$/, '');
2041 - var encodedUrl = safeEncodeUrl(cleanUrl);
2042 - if (!linkText || !linkText.trim()) {
2043 - result += '<a href="' + encodedUrl + '" target="' + linkTarget + '">' + cleanUrl + '</a>';
2044 - } else {
2045 - var safeText = sanitizeUserInput(linkText);
2046 - result += '<a href="' + encodedUrl + '" target="' + linkTarget + '">' + safeText + '</a>';
2047 - }
2048 - i = j + 1; // Skip past the closing )
2049 - } else {
2050 - result += input[i];
2051 - i++;
2052 - }
1330 + // Process proper markdown links with text: [text](url)
1331 + // This MUST have non-empty text in the first brackets
1332 + const markdownLinkPattern = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
1333 + processedText = processedText.replace(markdownLinkPattern, (match, text, url) => {
1334 + // Make sure we have actual text (not just whitespace)
1335 + if (!text || !text.trim()) {
1336 + // If no text, treat the URL as the text
1337 + let cleanUrl = url.replace(/[.,;!?]+$/, '');
1338 + const safeUrl = safeEncodeUrl(cleanUrl);
1339 + return `<a href="${safeUrl}" target="${linkTarget}">${cleanUrl}</a>`;
2053 1340 }
2054 - return result;
2055 - })(processedText);
1341 +
1342 + // Clean the URL
1343 + let cleanUrl = url.replace(/[\].,;!?]+$/, '');
1344 + const safeUrl = safeEncodeUrl(cleanUrl);
1345 + const safeText = sanitizeUserInput(text);
1346 + return `<a href="${safeUrl}" target="${linkTarget}">${safeText}</a>`;
1347 + });
2056 1348
1349 + // Handle empty markdown links: [](url)
1350 + // This is a specific case where there's no text
1351 + const emptyMarkdownPattern = /\[\]\((https?:\/\/[^\s)]+)\)/g;
1352 + processedText = processedText.replace(emptyMarkdownPattern, (match, url) => {
1353 + let cleanUrl = url.replace(/[.,;!?]+$/, '');
1354 + const safeUrl = safeEncodeUrl(cleanUrl);
1355 + // Use the URL itself as the link text
1356 + return `<a href="${safeUrl}" target="${linkTarget}">${cleanUrl}</a>`;
1357 + });
1358 +
2057 1359 // Process phone numbers: [text](tel:number)
2058 1360 const phonePattern = /\[([^\]]+)\]\((tel:[\d+\-\s()]+)\)/g;
2059 1361 processedText = processedText.replace(phonePattern, (match, text, phone) => {
2060 1362 const safePhone = safeEncodeUrl(phone);
@@ -2206,78 +1508,9 @@
2206 1508 });
2207 1509
2208 1510 return text;
2209 1511 }
2210 -
2211 - function formatMarkdownTables(text) {
2212 - var lines = text.split('\n');
2213 - var result = [];
2214 - var i = 0;
2215 -
2216 - while (i < lines.length) {
2217 - // Check for a table: current line has pipes AND next line is a separator row
2218 - if (i + 1 < lines.length &&
2219 - lines[i].indexOf('|') !== -1 &&
2220 - /^\s*\|?[\s\-:]+(\|[\s\-:]+)+\|?\s*$/.test(lines[i + 1])) {
2221 -
2222 - var tableLines = [];
2223 - var headerLine = lines[i];
2224 - var separatorLine = lines[i + 1];
2225 - tableLines.push(headerLine);
2226 - tableLines.push(separatorLine);
2227 -
2228 - // Collect remaining table rows
2229 - var j = i + 2;
2230 - while (j < lines.length && lines[j].indexOf('|') !== -1 && lines[j].trim() !== '') {
2231 - tableLines.push(lines[j]);
2232 - j++;
2233 - }
2234 -
2235 - // Parse alignment from separator row
2236 - var sepCells = separatorLine.split('|').filter(function(c) { return c.trim() !== ''; });
2237 - var alignments = sepCells.map(function(cell) {
2238 - var trimmed = cell.trim();
2239 - if (trimmed.charAt(0) === ':' && trimmed.charAt(trimmed.length - 1) === ':') return 'center';
2240 - if (trimmed.charAt(trimmed.length - 1) === ':') return 'right';
2241 - return 'left';
2242 - });
2243 -
2244 - // Build HTML table
2245 - var html = '<div class="mxchat-table-wrapper"><table class="mxchat-table">';
2246 -
2247 - // Header row
2248 - var headerCells = tableLines[0].split('|').filter(function(c) { return c.trim() !== ''; });
2249 - html += '<thead><tr>';
2250 - headerCells.forEach(function(cell, idx) {
2251 - var align = alignments[idx] || 'left';
2252 - html += '<th style="text-align:' + align + '">' + cell.trim() + '</th>';
2253 - });
2254 - html += '</tr></thead>';
2255 -
2256 - // Body rows
2257 - html += '<tbody>';
2258 - for (var r = 2; r < tableLines.length; r++) {
2259 - var rowCells = tableLines[r].split('|').filter(function(c) { return c.trim() !== ''; });
2260 - html += '<tr>';
2261 - rowCells.forEach(function(cell, idx) {
2262 - var align = alignments[idx] || 'left';
2263 - html += '<td style="text-align:' + align + '">' + cell.trim() + '</td>';
2264 - });
2265 - html += '</tr>';
2266 - }
2267 - html += '</tbody></table></div>';
2268 -
2269 - result.push(html);
2270 - i = j;
2271 - } else {
2272 - result.push(lines[i]);
2273 - i++;
2274 - }
2275 - }
2276 -
2277 - return result.join('\n');
2278 - }
2279 -
1512 +
2280 1513 function sanitizeUserInput(text) {
2281 1514 const div = document.createElement('div');
2282 1515 div.textContent = text;
2283 1516 return div.innerHTML;
@@ -2307,21 +1540,10 @@
2307 1540 // ====================================
2308 1541 // UI & SCROLLING CONTROLS
2309 1542 // ====================================
2310 1543
2311 - function scrollToBottom(botIdOrInstant, instant) {
2312 - // Handle backward compatibility: scrollToBottom() or scrollToBottom(true/false)
2313 - var botId = 'default';
2314 - if (typeof botIdOrInstant === 'string') {
2315 - botId = botIdOrInstant;
2316 - instant = instant || false;
2317 - } else if (typeof botIdOrInstant === 'boolean') {
2318 - instant = botIdOrInstant;
2319 - } else {
2320 - instant = false;
2321 - }
2322 -
2323 - var chatBox = getElement(botId, 'chat-box');
1544 + function scrollToBottom(instant = false) {
1545 + var chatBox = $('#chat-box');
2324 1546 if (instant) {
2325 1547 // Instantly set the scroll position to the bottom
2326 1548 chatBox.scrollTop(chatBox.prop("scrollHeight"));
2327 1549 } else {
@@ -2330,15 +1552,15 @@
2330 1552 const scrollHeight = chatBox.prop("scrollHeight");
2331 1553 const initialScroll = chatBox.scrollTop();
2332 1554 const distance = scrollHeight - initialScroll;
2333 1555 const duration = 500; // Duration in ms
2334 -
1556 +
2335 1557 function smoothScroll(timestamp) {
2336 1558 if (!start) start = timestamp;
2337 1559 const progress = timestamp - start;
2338 1560 const currentScroll = initialScroll + (distance * (progress / duration));
2339 1561 chatBox.scrollTop(currentScroll);
2340 -
1562 +
2341 1563 if (progress < duration) {
2342 1564 requestAnimationFrame(smoothScroll);
2343 1565 } else {
2344 1566 chatBox.scrollTop(scrollHeight); // Ensure it's exactly at the bottom
@@ -2343,37 +1565,33 @@
2343 1565 } else {
2344 1566 chatBox.scrollTop(scrollHeight); // Ensure it's exactly at the bottom
2345 1567 }
2346 1568 }
2347 -
1569 +
2348 1570 requestAnimationFrame(smoothScroll);
2349 1571 }
2350 1572 }
2351 -
2352 - function scrollElementToTop(element, botId, topOffset) {
2353 - botId = botId || 'default';
2354 - topOffset = (typeof topOffset === 'number') ? topOffset : 2;
2355 - var chatBox = getElement(botId, 'chat-box');
1573 +
1574 + function scrollElementToTop(element) {
1575 + var chatBox = $('#chat-box');
2356 1576 var elementTop = element.position().top + chatBox.scrollTop();
2357 - chatBox.animate({ scrollTop: Math.max(0, elementTop - topOffset) }, 500);
1577 + chatBox.animate({ scrollTop: elementTop }, 500);
2358 1578 }
2359 -
2360 - function showChatWidget(botId) {
2361 - botId = botId || 'default';
2362 - var $button = getElement(botId, 'floating-chatbot-button');
1579 +
1580 + function showChatWidget() {
2363 1581 // First ensure display is set
2364 - $button.css('display', 'flex');
1582 + $('#floating-chatbot-button').css('display', 'flex');
2365 1583 // Then handle the fade
2366 - $button.fadeTo(500, 1);
1584 + $('#floating-chatbot-button').fadeTo(500, 1);
2367 1585 // Force visibility
2368 - $button.removeClass('hidden');
1586 + $('#floating-chatbot-button').removeClass('hidden');
1587 + //console.log('Showing widget');
2369 1588 }
2370 -
2371 - function hideChatWidget(botId) {
2372 - botId = botId || 'default';
2373 - var $button = getElement(botId, 'floating-chatbot-button');
2374 - $button.css('display', 'none');
2375 - $button.addClass('hidden');
1589 +
1590 + function hideChatWidget() {
1591 + $('#floating-chatbot-button').css('display', 'none');
1592 + $('#floating-chatbot-button').addClass('hidden');
1593 + //console.log('Hiding widget');
2376 1594 }
2377 1595
2378 1596 function disableScroll() {
2379 1597 if (isMobile()) {
@@ -2402,15 +1620,18 @@
2402 1620 // NOTIFICATION SYSTEM
2403 1621 // ====================================
2404 1622
2405 1623 function createNotificationBadge() {
1624 + //console.log("Creating notification badge...");
2406 1625 const chatButton = document.getElementById('floating-chatbot-button');
2407 -
1626 + //console.log("Chat button found:", !!chatButton);
1627 +
2408 1628 if (!chatButton) return;
2409 -
1629 +
2410 1630 // Remove any existing badge first
2411 1631 const existingBadge = chatButton.querySelector('.chat-notification-badge');
2412 1632 if (existingBadge) {
1633 + //console.log("Removing existing badge");
2413 1634 existingBadge.remove();
2414 1635 }
2415 1636
2416 1637 notificationBadge = document.createElement('div');
@@ -2432,43 +1653,34 @@
2432 1653 chatButton.appendChild(notificationBadge);
2433 1654
2434 1655 }
2435 1656
2436 - function showNotification(botId) {
2437 - botId = botId || 'default';
2438 - const badge = getElementDOM(botId, 'chat-notification-badge');
2439 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
2440 - if (badge && $floatingChatbot.hasClass('hidden')) {
1657 + function showNotification() {
1658 + const badge = document.getElementById('chat-notification-badge');
1659 + if (badge && $('#floating-chatbot').hasClass('hidden')) {
2441 1660 badge.style.display = 'block';
2442 1661 badge.textContent = '1';
2443 1662 }
2444 1663 }
2445 -
2446 - function hideNotification(botId) {
2447 - botId = botId || 'default';
2448 - const badge = getElementDOM(botId, 'chat-notification-badge');
1664 +
1665 + function hideNotification() {
1666 + const badge = document.getElementById('chat-notification-badge');
2449 1667 if (badge) {
2450 1668 badge.style.display = 'none';
2451 1669 }
2452 1670 }
2453 -
2454 - function startNotificationChecking(botId) {
2455 - botId = botId || 'default';
1671 +
1672 + function startNotificationChecking() {
2456 1673 const chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
2457 1674 if (!chatPersistenceEnabled) return;
2458 -
2459 - createNotificationBadge(botId);
2460 - var instance = MxChatInstances.get(botId);
2461 - instance.notificationCheckInterval = setInterval(function() {
2462 - checkForNewMessages(botId);
2463 - }, 30000); // Check every 30 seconds
1675 +
1676 + createNotificationBadge();
1677 + notificationCheckInterval = setInterval(checkForNewMessages, 30000); // Check every 30 seconds
2464 1678 }
2465 -
2466 - function stopNotificationChecking(botId) {
2467 - botId = botId || 'default';
2468 - var instance = MxChatInstances.get(botId);
2469 - if (instance.notificationCheckInterval) {
2470 - clearInterval(instance.notificationCheckInterval);
1679 +
1680 + function stopNotificationChecking() {
1681 + if (notificationCheckInterval) {
1682 + clearInterval(notificationCheckInterval);
2471 1683 }
2472 1684 }
2473 1685
2474 1686 function checkForNewMessages() {
@@ -2494,35 +1706,63 @@
2494 1706 });
2495 1707 }
2496 1708
2497 1709
2498 -// ====================================
2499 -// LIVE AGENT FUNCTIONALITY
2500 -// ====================================
2501 -
2502 -function startPolling(botId) {
2503 - botId = botId || 'default';
2504 - var instance = MxChatInstances.get(botId);
2505 - // Clear any existing interval first
2506 - stopPolling(botId);
2507 - instance.pollingInterval = setInterval(function() {
2508 - checkForAgentMessages(botId);
2509 - }, 5000);
1710 + // ====================================
1711 + // LIVE AGENT FUNCTIONALITY
1712 + // ====================================
1713 +
1714 +function updateChatModeIndicator(mode) {
1715 + //console.log("updateChatModeIndicator called with mode:", mode);
1716 + const indicator = document.getElementById('chat-mode-indicator');
1717 + if (indicator) {
1718 + const oldText = indicator.textContent;
1719 +
1720 + if (mode === 'agent') {
1721 + indicator.textContent = 'Live Agent';
1722 + startPolling();
1723 + //console.log("Set indicator to Live Agent");
1724 + } else {
1725 + // Everything else is AI mode
1726 + const customAiText = indicator.getAttribute('data-ai-text') || 'AI Agent';
1727 + indicator.textContent = customAiText;
1728 + stopPolling();
1729 + //console.log("Set indicator to AI Agent:", customAiText);
1730 + }
1731 +
1732 + // Force immediate DOM update
1733 + if (oldText !== indicator.textContent) {
1734 + // Force a reflow to ensure the change is visible immediately
1735 + indicator.offsetHeight;
1736 +
1737 + // Double-check after a brief moment
1738 + setTimeout(() => {
1739 + //console.log("Final indicator text:", indicator.textContent);
1740 + }, 50);
1741 + }
1742 + } else {
1743 + //console.error("Chat mode indicator element not found!");
1744 + }
2510 1745 }
2511 1746
2512 -function stopPolling(botId) {
2513 - botId = botId || 'default';
2514 - var instance = MxChatInstances.get(botId);
2515 - if (instance.pollingInterval) {
2516 - clearInterval(instance.pollingInterval);
2517 - instance.pollingInterval = null;
1747 + function startPolling() {
1748 + // Clear any existing interval first
1749 + stopPolling();
1750 + // Start new polling interval
1751 + pollingInterval = setInterval(checkForAgentMessages, 5000);
1752 + //console.log("Started agent message polling");
2518 1753 }
2519 -}
2520 -
2521 -function checkForAgentMessages(botId) {
2522 - botId = botId || 'default';
2523 - var instance = MxChatInstances.get(botId);
2524 - const sessionId = getChatSession(botId);
1754 +
1755 + function stopPolling() {
1756 + if (pollingInterval) {
1757 + clearInterval(pollingInterval);
1758 + pollingInterval = null;
1759 + //console.log("Stopped agent message polling");
1760 + }
1761 + }
1762 +
1763 +function checkForAgentMessages() {
1764 + const sessionId = getChatSession();
2525 1765 $.ajax({
2526 1766 url: mxchatChat.ajax_url,
2527 1767 type: 'POST',
2528 1768 dataType: 'json',
@@ -2528,44 +1768,35 @@
2528 1768 dataType: 'json',
2529 1769 data: {
2530 1770 action: 'mxchat_fetch_new_messages',
2531 1771 session_id: sessionId,
2532 - last_seen_id: instance.lastSeenMessageId,
2533 - persistence_enabled: 'true',
1772 + last_seen_id: lastSeenMessageId,
1773 + persistence_enabled: 'true', // Add this too
2534 1774 nonce: mxchatChat.nonce
2535 1775 },
2536 1776 success: function (response) {
2537 1777 if (response.success && response.data?.new_messages) {
2538 1778 let hasNewMessage = false;
2539 -
1779 +
2540 1780 response.data.new_messages.forEach(function (message) {
2541 - if (message.role === "agent" && !instance.processedMessageIds.has(message.id)) {
1781 + if (message.role === "agent" && !processedMessageIds.has(message.id)) {
2542 1782 hasNewMessage = true;
2543 - appendMessage("agent", message.content, '', [], false, botId);
2544 - instance.lastSeenMessageId = message.id;
2545 - instance.processedMessageIds.add(message.id);
1783 + // CHANGE THIS LINE:
1784 + appendMessage("agent", message.content); // Instead of replaceLastMessage
1785 + lastSeenMessageId = message.id;
1786 + processedMessageIds.add(message.id);
2546 1787 }
2547 1788 });
2548 1789
2549 - if (hasNewMessage) {
2550 - enableChatInput(botId);
1790 + if (hasNewMessage && $('#floating-chatbot').hasClass('hidden')) {
1791 + showNotification();
2551 1792 }
2552 -
2553 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
2554 - if (hasNewMessage && $floatingChatbot.hasClass('hidden')) {
2555 - showNotification(botId);
2556 - }
2557 -
2558 - scrollToBottom(botId, true);
1793 +
1794 + scrollToBottom(true);
2559 1795 }
2560 -
2561 - // Handle chat mode transitions (e.g. agent ended chat via !endchat)
2562 - if (response.success && response.data?.chat_mode) {
2563 - updateChatModeIndicator(response.data.chat_mode, botId);
2564 - }
2565 1796 },
2566 1797 error: function (xhr, status, error) {
2567 - // Polling error - silently continue
1798 + //console.error("Polling error:", xhr, status, error);
2568 1799 }
2569 1800 });
2570 1801 }
2571 1802
@@ -2571,30 +1802,19 @@
2571 1802
2572 1803 // ====================================
2573 1804 // CHAT HISTORY & PERSISTENCE
2574 1805 // ====================================
2575 -
2576 -function loadChatHistory(botId, onComplete) {
2577 - botId = botId || 'default';
2578 - var instance = MxChatInstances.get(botId);
2579 -
1806 +// Update the loadChatHistory function:
1807 +function loadChatHistory() {
2580 1808 // Prevent duplicate loading
2581 - if (instance.chatHistoryLoaded) {
2582 - if (onComplete) onComplete();
1809 + if (chatHistoryLoaded) {
1810 + // console.log('Chat history already loaded, skipping...');
2583 1811 return;
2584 1812 }
2585 -
2586 - // Use getChatSession which returns null if no session exists (does NOT create one)
2587 - var sessionId = getChatSession(botId);
1813 +
1814 + var sessionId = getChatSession();
2588 1815 var chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
2589 1816
2590 - // No session yet — nothing to load. History will load after first message via ensureSession.
2591 - if (!sessionId) {
2592 - instance.chatHistoryLoaded = true;
2593 - if (onComplete) onComplete();
2594 - return;
2595 - }
2596 -
2597 1817 if (chatPersistenceEnabled && sessionId) {
2598 1818 $.ajax({
2599 1819 url: mxchatChat.ajax_url,
2600 1820 type: 'POST',
@@ -2603,28 +1823,19 @@
2603 1823 action: 'mxchat_fetch_conversation_history',
2604 1824 session_id: sessionId
2605 1825 },
2606 1826 success: function(response) {
2607 - // Handle session reset (IP changed while user was away)
2608 - if (response.success === false && response.data && response.data.action === 'reset_session') {
2609 - // Silent reset — new session but don't clear UI
2610 - MxChatInstances.silentResetSession(botId);
2611 - instance.chatHistoryLoaded = true; // Prevent retry loop
2612 - if (onComplete) onComplete();
2613 - return;
2614 - }
2615 -
2616 1827 // Check if the response indicates success
2617 1828 if (response.success) {
2618 1829 // Handle case where conversation data exists and is an array
2619 1830 if (response.data && Array.isArray(response.data.conversation)) {
2620 - var $chatBox = getElement(botId, 'chat-box');
1831 + var $chatBox = $('#chat-box');
2621 1832 var $fragment = $(document.createDocumentFragment());
2622 - let highestMessageId = instance.lastSeenMessageId;
1833 + let highestMessageId = lastSeenMessageId;
2623 1834
2624 1835 // Update chat mode if provided
2625 1836 if (response.data.chat_mode) {
2626 - updateChatModeIndicator(response.data.chat_mode, botId);
1837 + updateChatModeIndicator(response.data.chat_mode);
2627 1838 }
2628 1839
2629 1840 // Only process if there are actual messages
2630 1841 if (response.data.conversation.length > 0) {
@@ -2629,9 +1840,9 @@
2629 1840 // Only process if there are actual messages
2630 1841 if (response.data.conversation.length > 0) {
2631 1842 // IMPORTANT: Clear existing messages before loading history
2632 1843 $chatBox.empty();
2633 -
1844 +
2634 1845 $.each(response.data.conversation, function(index, message) {
2635 1846 // Skip agent messages if persistence is off
2636 1847 if (!chatPersistenceEnabled && message.role === 'agent') {
2637 1848 return;
@@ -2666,19 +1877,9 @@
2666 1877 var content = message.content;
2667 1878 content = content.replace(/\\'/g, "'").replace(/\\"/g, '"');
2668 1879 content = decodeHTMLEntities(content);
2669 1880
2670 - // Skip linkify for messages containing structured HTML
2671 - // (forms, product cards, galleries, etc.) to avoid
2672 - // markdown formatting corrupting HTML attributes
2673 - // (e.g. underscores in name="field_name" becoming <em> tags)
2674 - if (content.includes("mxchat-product-card") ||
2675 - content.includes("mxchat-image-gallery") ||
2676 - content.includes("mxchat-featured-products") ||
2677 - content.includes("<form") ||
2678 - content.includes("<input") ||
2679 - content.includes("<select") ||
2680 - content.includes("<textarea")) {
1881 + if (content.includes("mxchat-product-card") || content.includes("mxchat-image-gallery")) {
2681 1882 messageElement.html(content);
2682 1883 } else {
2683 1884 var formattedContent = linkify(content);
2684 1885 messageElement.html(formattedContent);
@@ -2688,47 +1889,42 @@
2688 1889
2689 1890 // Track message IDs
2690 1891 if (message.id) {
2691 1892 highestMessageId = Math.max(highestMessageId, message.id);
2692 - instance.processedMessageIds.add(message.id);
1893 + processedMessageIds.add(message.id);
2693 1894 }
2694 1895 });
2695 1896
2696 1897 // Only append messages and scroll if we have content
2697 1898 $chatBox.append($fragment);
2698 - scrollToBottom(botId, true);
1899 + scrollToBottom(true);
2699 1900
2700 1901 // Collapse quick questions if we have conversation history
2701 - // BUT skip auto-collapse for embedded bots (they should stay expanded)
2702 - if (hasQuickQuestions(botId) && !isEmbeddedBot(botId)) {
2703 - collapseQuickQuestions(botId);
1902 + if (hasQuickQuestions()) {
1903 + collapseQuickQuestions();
2704 1904 }
2705 1905
2706 1906 // Update lastSeenMessageId after history loads
2707 - instance.lastSeenMessageId = highestMessageId;
1907 + lastSeenMessageId = highestMessageId;
2708 1908
2709 1909 // Only update chat mode if persistence is enabled and we have messages
2710 1910 if (chatPersistenceEnabled) {
2711 1911 var lastMessage = response.data.conversation[response.data.conversation.length - 1];
2712 1912 if (lastMessage.role === 'agent') {
2713 - updateChatModeIndicator('agent', botId);
1913 + updateChatModeIndicator('agent');
2714 1914 }
2715 1915 }
2716 -
1916 +
2717 1917 // Mark as loaded ONLY after successful load
2718 - instance.chatHistoryLoaded = true;
1918 + chatHistoryLoaded = true;
2719 1919 }
2720 1920 }
2721 1921 }
2722 - if (onComplete) onComplete();
2723 1922 },
2724 1923 error: function(xhr, status, error) {
2725 - // Error loading chat history - silently continue
2726 - if (onComplete) onComplete();
1924 + //console.error("AJAX error loading chat history:", status, error);
2727 1925 }
2728 1926 });
2729 - } else {
2730 - if (onComplete) onComplete();
2731 1927 }
2732 1928 }
2733 1929
2734 1930
@@ -2742,42 +1938,40 @@
2742 1938 element.addEventListener(eventType, handler);
2743 1939 }
2744 1940 }
2745 1941
2746 - function showActivePdf(filename, botId) {
2747 - botId = botId || 'default';
2748 - const container = getElementDOM(botId, 'active-pdf-container');
2749 - const nameElement = getElementDOM(botId, 'active-pdf-name');
2750 -
1942 + function showActivePdf(filename) {
1943 + const container = document.getElementById('active-pdf-container');
1944 + const nameElement = document.getElementById('active-pdf-name');
1945 +
2751 1946 if (!container || !nameElement) {
1947 + //console.error('PDF container elements not found');
2752 1948 return;
2753 1949 }
2754 -
1950 +
2755 1951 nameElement.textContent = filename;
2756 1952 container.style.display = 'flex';
2757 1953 }
2758 -
2759 - function showActiveWord(filename, botId) {
2760 - botId = botId || 'default';
2761 - const container = getElementDOM(botId, 'active-word-container');
2762 - const nameElement = getElementDOM(botId, 'active-word-name');
2763 -
1954 +
1955 + function showActiveWord(filename) {
1956 + const container = document.getElementById('active-word-container');
1957 + const nameElement = document.getElementById('active-word-name');
1958 +
2764 1959 if (!container || !nameElement) {
1960 + //console.error('Word document container elements not found');
2765 1961 return;
2766 1962 }
2767 -
1963 +
2768 1964 nameElement.textContent = filename;
2769 1965 container.style.display = 'flex';
2770 1966 }
2771 -
2772 - function removeActivePdf(botId) {
2773 - botId = botId || 'default';
2774 - var instance = MxChatInstances.get(botId);
2775 - const container = getElementDOM(botId, 'active-pdf-container');
2776 - const nameElement = getElementDOM(botId, 'active-pdf-name');
2777 -
2778 - if (!container || !nameElement || !instance.activePdfFile) return;
2779 -
1967 +
1968 + function removeActivePdf() {
1969 + const container = document.getElementById('active-pdf-container');
1970 + const nameElement = document.getElementById('active-pdf-name');
1971 +
1972 + if (!container || !nameElement || !activePdfFile) return;
1973 +
2780 1974 fetch(mxchatChat.ajax_url, {
2781 1975 method: 'POST',
2782 1976 headers: {
2783 1977 'Content-Type': 'application/x-www-form-urlencoded',
@@ -2783,9 +1977,9 @@
2783 1977 'Content-Type': 'application/x-www-form-urlencoded',
2784 1978 },
2785 1979 body: new URLSearchParams({
2786 1980 'action': 'mxchat_remove_pdf',
2787 - 'session_id': getChatSession(botId),
1981 + 'session_id': sessionId,
2788 1982 'nonce': mxchatChat.nonce
2789 1983 })
2790 1984 })
2791 1985 .then(response => response.json())
@@ -2797,12 +1991,12 @@
2797 1991 appendMessage('bot', 'PDF removed.');
2798 1992 }
2799 1993 })
2800 1994 .catch(error => {
2801 - // Error removing PDF - silently continue
1995 + //console.error('Error removing PDF:', error);
2802 1996 });
2803 1997 }
2804 -
1998 +
2805 1999 function removeActiveWord() {
2806 2000 const container = document.getElementById('active-word-container');
2807 2001 const nameElement = document.getElementById('active-word-name');
2808 2002
@@ -2828,53 +2022,56 @@
2828 2022 appendMessage('bot', 'Word document removed.');
2829 2023 }
2830 2024 })
2831 2025 .catch(error => {
2832 - // Error removing Word document - silently continue
2026 + //console.error('Error removing Word document:', error);
2833 2027 });
2834 2028 }
2835 -
2029 +
2836 2030 // ====================================
2837 2031 // CONSENT & COMPLIANCE (GDPR)
2838 2032 // ====================================
2839 -
2840 - function initializeChatVisibility(botId) {
2841 - botId = botId || 'default';
2842 - const complianzEnabled = mxchatChat.complianz_toggle === 'on' ||
2843 - mxchatChat.complianz_toggle === '1' ||
2033 +
2034 + function initializeChatVisibility() {
2035 + //console.log('Initializing chat visibility');
2036 + const complianzEnabled = mxchatChat.complianz_toggle === 'on' ||
2037 + mxchatChat.complianz_toggle === '1' ||
2844 2038 mxchatChat.complianz_toggle === 1;
2845 -
2039 +
2846 2040 if (complianzEnabled && typeof cmplz_has_consent === "function" && typeof complianz !== 'undefined') {
2847 2041 // Initial check
2848 - checkConsentAndShowChat(botId);
2849 -
2042 + checkConsentAndShowChat();
2043 +
2850 2044 // Listen for consent changes
2851 2045 $(document).on('cmplz_status_change', function(event) {
2852 - checkConsentAndShowChat(botId);
2046 + //console.log('Status change detected');
2047 + checkConsentAndShowChat();
2853 2048 });
2854 2049 } else {
2855 2050 // If Complianz is not enabled, always show
2856 - getElement(botId, 'floating-chatbot-button')
2051 + $('#floating-chatbot-button')
2857 2052 .css('display', 'flex')
2858 2053 .removeClass('hidden no-consent')
2859 2054 .fadeTo(500, 1);
2860 -
2055 +
2861 2056 // Also check pre-chat message when Complianz is not enabled
2862 - checkPreChatDismissal(botId);
2057 + checkPreChatDismissal();
2863 2058 }
2864 2059 }
2865 2060
2866 -
2867 - function checkConsentAndShowChat(botId) {
2868 - botId = botId || 'default';
2061 +
2062 + function checkConsentAndShowChat() {
2869 2063 var consentStatus = cmplz_has_consent('marketing');
2870 2064 var consentType = complianz.consenttype;
2871 -
2872 - let $widget = getElement(botId, 'floating-chatbot-button');
2873 - let $chatbot = getElement(botId, 'floating-chatbot');
2874 - let $preChat = getElement(botId, 'pre-chat-message');
2875 -
2065 +
2066 + //console.log('Checking consent:', {status: consentStatus,type: consentType});
2067 +
2068 + let $widget = $('#floating-chatbot-button');
2069 + let $chatbot = $('#floating-chatbot');
2070 + let $preChat = $('#pre-chat-message');
2071 +
2876 2072 if (consentStatus === true) {
2073 + //console.log('Consent granted - showing widget');
2877 2074 $widget
2878 2075 .removeClass('no-consent')
2879 2076 .css('display', 'flex')
2880 2077 .removeClass('hidden')
@@ -2879,12 +2076,13 @@
2879 2076 .css('display', 'flex')
2880 2077 .removeClass('hidden')
2881 2078 .fadeTo(500, 1);
2882 2079 $chatbot.removeClass('no-consent');
2883 -
2080 +
2884 2081 // Show pre-chat message if not dismissed
2885 - checkPreChatDismissal(botId);
2082 + checkPreChatDismissal();
2886 2083 } else {
2084 + //console.log('No consent - hiding widget');
2887 2085 $widget
2888 2086 .addClass('no-consent')
2889 2087 .fadeTo(500, 0, function() {
2890 2088 $(this)
@@ -2891,9 +2089,9 @@
2891 2089 .css('display', 'none')
2892 2090 .addClass('hidden');
2893 2091 });
2894 2092 $chatbot.addClass('no-consent');
2895 -
2093 +
2896 2094 // Hide pre-chat message when no consent
2897 2095 $preChat.hide();
2898 2096 }
2899 2097 }
@@ -2901,38 +2099,46 @@
2901 2099
2902 2100 // ====================================
2903 2101 // PRE-CHAT MESSAGE HANDLING
2904 2102 // ====================================
2905 -
2906 - function checkPreChatDismissal(botId) {
2907 - botId = botId || 'default';
2908 - try {
2909 - var dismissedAt = localStorage.getItem('mxchat_pre_chat_dismissed_' + botId);
2910 - if (dismissedAt) {
2911 - // Re-show after 24 hours
2912 - var elapsed = Date.now() - parseInt(dismissedAt, 10);
2913 - if (elapsed < 86400000) {
2914 - getElement(botId, 'pre-chat-message').hide();
2915 - return;
2103 +
2104 + function checkPreChatDismissal() {
2105 + $.ajax({
2106 + url: mxchatChat.ajax_url,
2107 + type: 'POST',
2108 + data: {
2109 + action: 'mxchat_check_pre_chat_message_status',
2110 + _ajax_nonce: mxchatChat.nonce
2111 + },
2112 + success: function(response) {
2113 + if (response.success && !response.data.dismissed) {
2114 + $('#pre-chat-message').fadeIn(250);
2115 + } else {
2116 + $('#pre-chat-message').hide();
2916 2117 }
2917 - // Expired — clear and show again
2918 - localStorage.removeItem('mxchat_pre_chat_dismissed_' + botId);
2118 + },
2119 + error: function() {
2120 + //console.error('Failed to check pre-chat message dismissal status.');
2919 2121 }
2920 - getElement(botId, 'pre-chat-message').fadeIn(250);
2921 - } catch (e) {
2922 - // localStorage unavailable — show the message
2923 - getElement(botId, 'pre-chat-message').fadeIn(250);
2924 - }
2122 + });
2925 2123 }
2926 -
2927 - function handlePreChatDismissal(botId) {
2928 - botId = botId || 'default';
2929 - getElement(botId, 'pre-chat-message').fadeOut(200);
2930 - try {
2931 - localStorage.setItem('mxchat_pre_chat_dismissed_' + botId, String(Date.now()));
2932 - } catch (e) {
2933 - // localStorage unavailable — dismissal won't persist
2934 - }
2124 +
2125 + function handlePreChatDismissal() {
2126 + $('#pre-chat-message').fadeOut(200);
2127 + $.ajax({
2128 + url: mxchatChat.ajax_url,
2129 + type: 'POST',
2130 + data: {
2131 + action: 'mxchat_dismiss_pre_chat_message',
2132 + _ajax_nonce: mxchatChat.nonce
2133 + },
2134 + success: function() {
2135 + $('#pre-chat-message').hide();
2136 + },
2137 + error: function() {
2138 + //console.error('Failed to dismiss pre-chat message.');
2139 + }
2140 + });
2935 2141 }
2936 2142
2937 2143
2938 2144 // ====================================
@@ -2958,141 +2164,78 @@
2958 2164 // ====================================
2959 2165
2960 2166 $(document).on('click', '.mxchat-popular-question', function () {
2961 2167 var question = $(this).text();
2962 - var botId = getBotIdFromElement(this);
2963 -
2168 +
2964 2169 // Append the question as if the user typed it
2965 - appendMessage("user", question, '', [], false, botId);
2966 -
2170 + appendMessage("user", question);
2171 +
2967 2172 // Only collapse if there are questions
2968 - if (hasQuickQuestions(botId)) {
2969 - collapseQuickQuestions(botId);
2173 + if (hasQuickQuestions()) {
2174 + collapseQuickQuestions();
2970 2175 }
2971 -
2176 +
2972 2177 // Send the question to the server
2973 - sendMessageToChatbot(question, botId);
2178 + sendMessageToChatbot(question);
2974 2179 });
2975 2180
2976 2181 $(document).on('click', '.questions-toggle-btn', function(e) {
2977 2182 e.preventDefault();
2978 2183 e.stopPropagation();
2979 - var botId = getBotIdFromElement(this);
2980 - expandQuickQuestions(botId);
2184 + expandQuickQuestions();
2981 2185 });
2982 2186
2983 2187 $(document).on('click', '.questions-collapse-btn', function(e) {
2984 2188 e.preventDefault();
2985 2189 e.stopPropagation();
2986 - var botId = getBotIdFromElement(this);
2987 - collapseQuickQuestions(botId);
2190 + collapseQuickQuestions();
2988 2191 });
2989 2192
2990 - // Chatbot visibility toggle handlers - use class selector for multi-instance support
2991 - // Handles click + Enter/Space keypresses for keyboard accessibility (WCAG 2.1 SC 2.1.1).
2992 - $(document).on('click keydown', '.floating-chatbot-button', function(e) {
2993 - if (e.type === 'keydown') {
2994 - if (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'Spacebar') return;
2995 - e.preventDefault();
2996 - }
2997 - var botId = getBotIdFromElement(this);
2998 - var $chatbot = getElement(botId, 'floating-chatbot');
2999 - var $badge = getElement(botId, 'chat-notification-badge');
3000 - var $preChat = getElement(botId, 'pre-chat-message');
3001 -
3002 - if ($chatbot.hasClass('hidden')) {
3003 - $chatbot.removeClass('hidden').addClass('visible')
3004 - .attr('aria-modal', 'true').attr('role', 'dialog');
3005 - $(this).addClass('hidden').attr('aria-expanded', 'true');
3006 - $badge.hide(); // Hide notification when opening chat
2193 + // Chatbot visibility toggle handlers
2194 + $(document).on('click', '#floating-chatbot-button', function() {
2195 + var chatbot = $('#floating-chatbot');
2196 + if (chatbot.hasClass('hidden')) {
2197 + chatbot.removeClass('hidden').addClass('visible');
2198 + $(this).addClass('hidden');
2199 + $('#chat-notification-badge').hide(); // Hide notification when opening chat
3007 2200 disableScroll();
3008 - $preChat.fadeOut(250);
3009 -
3010 - // Load chat history for returning visitors (persistence)
3011 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
3012 - if (chatPersistenceEnabled) {
3013 - MxChatInstances.ensureSession(botId);
3014 - }
3015 -
3016 - // Deferred email check — only on first widget open
3017 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3018 - var instance = MxChatInstances.get(botId);
3019 - if (emailBlocker && !instance.emailCheckDone) {
3020 - instance.emailCheckDone = true;
3021 - resolveEmailState(botId);
3022 - } else if (!emailBlocker) {
3023 - // No email collection — still route through showChatContainerForBot
3024 - // so the loader is shown while chat history loads
3025 - showChatContainerForBot(botId);
3026 - }
3027 -
3028 - // Move keyboard focus into the message input after the open transition.
3029 - setTimeout(function() {
3030 - var chatInput = getElementDOM(botId, 'chat-input');
3031 - if (chatInput && !chatInput.disabled) {
3032 - try { chatInput.focus({ preventScroll: true }); } catch (err) { chatInput.focus(); }
3033 - }
3034 - }, 300);
2201 + $('#pre-chat-message').fadeOut(250);
3035 2202 } else {
3036 - $chatbot.removeClass('visible').addClass('hidden').removeAttr('aria-modal');
3037 - $(this).removeClass('hidden').attr('aria-expanded', 'false');
2203 + chatbot.removeClass('visible').addClass('hidden');
2204 + $(this).removeClass('hidden');
3038 2205 enableScroll();
3039 - checkPreChatDismissal(botId);
2206 + checkPreChatDismissal();
3040 2207 }
3041 2208 });
3042 -
3043 - // Allow clicking anywhere on the title bar to close the chatbot.
3044 - // Returns keyboard focus to the launcher so keyboard users don't get
3045 - // stranded at <body> (WCAG SC 2.4.3 Focus Order). :focus-visible is
3046 - // heuristic-based so mouse-triggered close won't show a focus ring.
3047 - $(document).on('click', '.chatbot-top-bar', function() {
3048 - var botId = getBotIdFromElement(this);
3049 - getElement(botId, 'floating-chatbot').addClass('hidden').removeClass('visible').removeAttr('aria-modal');
3050 - var $launcher = getElement(botId, 'floating-chatbot-button');
3051 - $launcher.removeClass('hidden').attr('aria-expanded', 'false');
2209 +
2210 + $(document).on('click', '#exit-chat-button', function() {
2211 + $('#floating-chatbot').addClass('hidden').removeClass('visible');
2212 + $('#floating-chatbot-button').removeClass('hidden');
3052 2213 enableScroll();
3053 - try { $launcher.trigger('focus'); } catch (err) { /* no-op */ }
3054 2214 });
3055 -
3056 - // Global Escape-key handler — closes any visible chat widget and
3057 - // returns focus to its launcher. Standard modal-dismissal pattern;
3058 - // pairs with aria-modal="true" set on the widget when it opens.
3059 - $(document).on('keydown', function(e) {
3060 - if (e.key !== 'Escape' && e.key !== 'Esc') return;
3061 - var $visible = $('.floating-chatbot.visible');
3062 - if (!$visible.length) return;
3063 - e.preventDefault();
3064 - $visible.each(function() {
3065 - var botId = getBotIdFromElement(this);
3066 - $(this).addClass('hidden').removeClass('visible').removeAttr('aria-modal');
3067 - var $launcher = getElement(botId, 'floating-chatbot-button');
3068 - $launcher.removeClass('hidden').attr('aria-expanded', 'false');
3069 - try { $launcher.trigger('focus'); } catch (err) { /* no-op */ }
3070 - });
3071 - enableScroll();
3072 - });
3073 -
2215 +
3074 2216 $(document).on('click', '.close-pre-chat-message', function(e) {
3075 2217 e.stopPropagation(); // Prevent triggering the parent .pre-chat-message click
3076 - var botId = getBotIdFromElement(this);
3077 - handlePreChatDismissal(botId);
2218 + $('#pre-chat-message').fadeOut(200, function() {
2219 + $(this).remove();
2220 + });
3078 2221 });
2222 +
3079 2223
3080 -
3081 - // PDF upload button handlers - use class selector
3082 - $(document).on('click', '.pdf-upload-btn', function() {
3083 - var botId = getBotIdFromElement(this);
3084 - var pdfInput = getElementDOM(botId, 'pdf-upload');
3085 - if (pdfInput) pdfInput.click();
3086 - });
3087 -
3088 - // Word upload button handlers - use class selector
3089 - $(document).on('click', '.word-upload-btn', function() {
3090 - var botId = getBotIdFromElement(this);
3091 - var wordInput = getElementDOM(botId, 'word-upload');
3092 - if (wordInput) wordInput.click();
3093 - });
2224 + // PDF upload button handlers
2225 + if (document.getElementById('pdf-upload-btn')) {
2226 + document.getElementById('pdf-upload-btn').addEventListener('click', function() {
2227 + document.getElementById('pdf-upload').click();
2228 + });
2229 + }
3094 2230
2231 + // Word upload button handlers
2232 + if (document.getElementById('word-upload-btn')) {
2233 + document.getElementById('word-upload-btn').addEventListener('click', function() {
2234 + document.getElementById('word-upload').click();
2235 + });
2236 + }
2237 +
3095 2238 // PDF file input change handler
3096 2239 addSafeEventListener('pdf-upload', 'change', async function(e) {
3097 2240 const file = e.target.files[0];
3098 2241
@@ -3101,13 +2244,15 @@
3101 2244 return;
3102 2245 }
3103 2246
3104 2247 if (!sessionId) {
2248 + //console.error('No session ID found');
3105 2249 alert('Error: No session ID found');
3106 2250 return;
3107 2251 }
3108 -
2252 +
3109 2253 if (!mxchatChat || !mxchatChat.ajax_url || !mxchatChat.nonce) {
2254 + //console.error('mxchatChat not properly configured:', mxchatChat);
3110 2255 alert('Error: Ajax configuration missing');
3111 2256 return;
3112 2257 }
3113 2258
@@ -3116,10 +2261,8 @@
3116 2261 const sendBtn = document.getElementById('send-button');
3117 2262 const originalBtnContent = uploadBtn.innerHTML;
3118 2263
3119 2264 try {
3120 - // Wait for page-cache nonce refresh before reading mxchatChat.nonce. See plan-c5457f.
3121 - await new Promise(function(resolve) { refreshNonceIfNeeded(resolve); });
3122 2265 const formData = new FormData();
3123 2266 formData.append('action', 'mxchat_upload_pdf');
3124 2267 formData.append('pdf_file', file);
3125 2268 formData.append('session_id', sessionId);
@@ -3151,11 +2294,13 @@
3151 2294 appendMessage('bot', data.data.message);
3152 2295 scrollToBottom();
3153 2296 activePdfFile = data.data.filename;
3154 2297 } else {
2298 + //console.error('Upload failed:', data.data);
3155 2299 alert('Failed to upload PDF. Please try again.');
3156 2300 }
3157 2301 } catch (error) {
2302 + //console.error('Upload error:', error);
3158 2303 alert('Error uploading file. Please try again.');
3159 2304 } finally {
3160 2305 uploadBtn.disabled = false;
3161 2306 sendBtn.disabled = false;
@@ -3173,12 +2318,13 @@
3173 2318 return;
3174 2319 }
3175 2320
3176 2321 if (!sessionId) {
2322 + //console.error('No session ID found');
3177 2323 alert('Error: No session ID found');
3178 2324 return;
3179 2325 }
3180 -
2326 +
3181 2327 // Disable buttons and show loading state
3182 2328 const uploadBtn = document.getElementById('word-upload-btn');
3183 2329 const sendBtn = document.getElementById('send-button');
3184 2330 const originalBtnContent = uploadBtn.innerHTML;
@@ -3183,10 +2329,8 @@
3183 2329 const sendBtn = document.getElementById('send-button');
3184 2330 const originalBtnContent = uploadBtn.innerHTML;
3185 2331
3186 2332 try {
3187 - // Wait for page-cache nonce refresh before reading mxchatChat.nonce. See plan-c5457f.
3188 - await new Promise(function(resolve) { refreshNonceIfNeeded(resolve); });
3189 2333 const formData = new FormData();
3190 2334 formData.append('action', 'mxchat_upload_word');
3191 2335 formData.append('word_file', file);
3192 2336 formData.append('session_id', sessionId);
@@ -3218,11 +2362,13 @@
3218 2362 appendMessage('bot', data.data.message);
3219 2363 scrollToBottom();
3220 2364 activeWordFile = data.data.filename;
3221 2365 } else {
2366 + //console.error('Upload failed:', data.data);
3222 2367 alert('Failed to upload Word document. Please try again.');
3223 2368 }
3224 2369 } catch (error) {
2370 + //console.error('Upload error:', error);
3225 2371 alert('Error uploading file. Please try again.');
3226 2372 } finally {
3227 2373 uploadBtn.disabled = false;
3228 2374 sendBtn.disabled = false;
@@ -3280,497 +2426,454 @@
3280 2426 });
3281 2427
3282 2428
3283 2429 // ====================================
3284 -// INIT LOADER & CHAT CONTAINER HELPERS
2430 +// EMAIL COLLECTION SETUP - FIXED VERSION
3285 2431 // ====================================
3286 -// These must be outside the email collection block so they're always available
3287 -// (used by persistence loading even when email collection is off)
3288 -
3289 -function showInitLoader(botId) {
3290 - var loader = getElementDOM(botId, 'mxchat-init-loader');
3291 - if (loader) loader.style.display = 'flex';
3292 -}
3293 -
3294 -function hideInitLoader(botId) {
3295 - var loader = getElementDOM(botId, 'mxchat-init-loader');
3296 - if (loader) loader.style.display = 'none';
3297 -}
3298 -
3299 -function showEmailFormForBot(botId) {
3300 - hideInitLoader(botId);
3301 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3302 - var chatContainer = getElementDOM(botId, 'chat-container');
3303 - if (emailBlocker) emailBlocker.style.display = 'flex';
3304 - if (chatContainer) chatContainer.style.display = 'none';
3305 -}
3306 -
3307 -function showChatContainerForBot(botId) {
3308 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3309 - var chatContainer = getElementDOM(botId, 'chat-container');
3310 - if (emailBlocker) emailBlocker.style.display = 'none';
3311 -
3312 - var instance = MxChatInstances.get(botId);
3313 - var chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
3314 -
3315 - // If persistence is on and history hasn't loaded yet, show loader
3316 - // while history loads to prevent flash of empty chat
3317 - if (chatPersistenceEnabled && !instance.chatHistoryLoaded) {
3318 - if (chatContainer) chatContainer.style.display = 'none';
3319 - showInitLoader(botId);
3320 - loadChatHistory(botId, function() {
3321 - hideInitLoader(botId);
3322 - if (chatContainer) chatContainer.style.display = 'flex';
3323 - scrollToBottom(botId, true);
3324 - });
3325 - } else {
3326 - hideInitLoader(botId);
3327 - if (chatContainer) chatContainer.style.display = 'flex';
3328 - if (typeof loadChatHistory === 'function') {
3329 - loadChatHistory(botId);
3330 - }
3331 - }
3332 -}
3333 -
3334 -// ====================================
3335 -// EMAIL COLLECTION SETUP - MULTI-INSTANCE VERSION
3336 -// ====================================
3337 2432 // Only run email collection setup if it's enabled
3338 2433 if (mxchatChat && mxchatChat.email_collection_enabled === 'on') {
2434 + //console.log('Email collection is enabled, setting up handlers...');
2435 +
2436 + // Email collection form setup and handlers
2437 + const emailForm = document.getElementById('email-collection-form');
2438 + const emailBlocker = document.getElementById('email-blocker');
2439 + const chatbotWrapper = document.getElementById('chat-container');
3339 2440
3340 - // Track submitting state per bot
3341 - const emailSubmittingState = {};
2441 + if (emailForm && emailBlocker && chatbotWrapper) {
2442 +
2443 + // Add loading state management
2444 + let isSubmitting = false;
2445 +
2446 + // Optimized UI transition functions
2447 + function showEmailForm() {
2448 + emailBlocker.style.display = 'flex';
2449 + chatbotWrapper.style.display = 'none';
2450 + }
3342 2451
3343 - // Add CSS animations for email form (once globally)
3344 - if (!document.getElementById('email-error-styles')) {
3345 - const style = document.createElement('style');
3346 - style.id = 'email-error-styles';
3347 - style.textContent = `
3348 - @keyframes fadeInError {
3349 - from { opacity: 0; transform: translateY(-5px); }
3350 - to { opacity: 1; transform: translateY(0); }
2452 + function showChatContainer() {
2453 + // Show chat immediately without delay
2454 + emailBlocker.style.display = 'none';
2455 + chatbotWrapper.style.display = 'flex';
2456 +
2457 + // Load chat history only after showing chat container
2458 + if (typeof loadChatHistory === 'function') {
2459 + loadChatHistory();
3351 2460 }
3352 - .email-input-shake {
3353 - animation: shake 0.5s ease-in-out;
3354 - }
3355 - @keyframes shake {
3356 - 0%, 100% { transform: translateX(0); }
3357 - 25% { transform: translateX(-5px); }
3358 - 75% { transform: translateX(5px); }
3359 - }
3360 - @keyframes spin {
3361 - from { transform: rotate(0deg); }
3362 - to { transform: rotate(360deg); }
3363 - }
3364 - .email-spinner {
3365 - display: inline-block;
3366 - vertical-align: middle;
3367 - }
3368 - `;
3369 - document.head.appendChild(style);
3370 - }
2461 + }
3371 2462
3372 - function isValidEmailAddress(email) {
3373 - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
3374 - return emailRegex.test(email.trim()) && email.length <= 254;
3375 - }
2463 + // Enhanced email validation
2464 + function isValidEmail(email) {
2465 + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
2466 + return emailRegex.test(email.trim()) && email.length <= 254; // RFC 5321 limit
2467 + }
3376 2468
3377 - function isValidNameInput(name) {
3378 - return name && name.trim().length >= 2 && name.trim().length <= 100;
3379 - }
2469 + // Enhanced name validation
2470 + function isValidName(name) {
2471 + return name && name.trim().length >= 2 && name.trim().length <= 100;
2472 + }
3380 2473
3381 - /**
3382 - * Replace {visitor_name} placeholder in intro message with actual visitor name
3383 - * @param {string} botId - The bot instance ID
3384 - * @param {string} visitorName - The visitor's name to insert
3385 - */
3386 - function replaceVisitorNamePlaceholder(botId, visitorName) {
3387 - var chatBox = getElementDOM(botId, 'chat-box');
3388 - if (!chatBox) return;
3389 -
3390 - // Find the first bot message (intro message)
3391 - var introMessage = chatBox.querySelector('.bot-message');
3392 - if (!introMessage) return;
3393 -
3394 - var messageContent = introMessage.querySelector('div[dir="auto"]');
3395 - if (!messageContent) return;
3396 -
3397 - var html = messageContent.innerHTML;
3398 -
3399 - // Replace {visitor_name} placeholder (case-insensitive)
3400 - if (visitorName && visitorName.trim()) {
3401 - // Escape HTML to prevent XSS
3402 - var safeName = $('<div>').text(visitorName.trim()).html();
3403 - html = html.replace(/\{visitor_name\}/gi, safeName);
3404 - } else {
3405 - // Remove placeholder and clean up spacing if no name provided
3406 - html = html.replace(/\{visitor_name\}/gi, '');
3407 - // Clean up any double spaces that might result
3408 - html = html.replace(/\s{2,}/g, ' ').trim();
2474 + // Show loading state with spinner
2475 + function setSubmissionState(loading) {
2476 + const submitButton = document.getElementById('email-submit-button');
2477 + const emailInput = document.getElementById('user-email');
2478 + const nameInput = document.getElementById('user-name');
2479 +
2480 + if (loading) {
2481 + isSubmitting = true;
2482 + if (submitButton) submitButton.disabled = true;
2483 + if (emailInput) emailInput.disabled = true;
2484 + if (nameInput) nameInput.disabled = true;
2485 +
2486 + // Store original content and add spinner
2487 + if (submitButton && !submitButton.getAttribute('data-original-html')) {
2488 + submitButton.setAttribute('data-original-html', submitButton.innerHTML);
2489 +
2490 + // Add loading spinner while keeping original text
2491 + const originalText = submitButton.textContent;
2492 + submitButton.innerHTML = `
2493 + <svg class="email-spinner" style="width: 16px; height: 16px; margin-right: 8px; animation: spin 1s linear infinite;" viewBox="0 0 24 24">
2494 + <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="31.416" stroke-dashoffset="31.416">
2495 + <animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/>
2496 + <animate attributeName="stroke-dashoffset" dur="2s" values="0;-15.708;-31.416" repeatCount="indefinite"/>
2497 + </circle>
2498 + </svg>
2499 + ${originalText}
2500 + `;
2501 +
2502 + submitButton.style.opacity = '0.8';
2503 + }
2504 + } else {
2505 + isSubmitting = false;
2506 + if (submitButton) submitButton.disabled = false;
2507 + if (emailInput) emailInput.disabled = false;
2508 + if (nameInput) nameInput.disabled = false;
2509 +
2510 + // Restore original content
2511 + if (submitButton) {
2512 + const originalHtml = submitButton.getAttribute('data-original-html');
2513 + if (originalHtml) {
2514 + submitButton.innerHTML = originalHtml;
2515 + }
2516 + submitButton.style.opacity = '1';
2517 + }
2518 + }
3409 2519 }
3410 2520
3411 - messageContent.innerHTML = html;
3412 - }
3413 -
3414 - function setEmailSubmissionState(botId, loading) {
3415 - var submitButton = getElementDOM(botId, 'email-submit-button');
3416 - var emailInput = getElementDOM(botId, 'user-email');
3417 - var nameInput = getElementDOM(botId, 'user-name');
3418 -
3419 - if (loading) {
3420 - emailSubmittingState[botId] = true;
3421 - if (submitButton) submitButton.disabled = true;
3422 - if (emailInput) emailInput.disabled = true;
3423 - if (nameInput) nameInput.disabled = true;
3424 -
3425 - if (submitButton && !submitButton.getAttribute('data-original-html')) {
3426 - submitButton.setAttribute('data-original-html', submitButton.innerHTML);
3427 - const originalText = submitButton.textContent;
3428 - submitButton.innerHTML = `
3429 - <svg class="email-spinner" style="width: 16px; height: 16px; margin-right: 8px; animation: spin 1s linear infinite;" viewBox="0 0 24 24">
3430 - <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="31.416" stroke-dashoffset="31.416">
3431 - <animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/>
3432 - <animate attributeName="stroke-dashoffset" dur="2s" values="0;-15.708;-31.416" repeatCount="indefinite"/>
3433 - </circle>
3434 - </svg>
3435 - ${originalText}
2521 + // Error display functions
2522 + function showEmailError(message) {
2523 + clearEmailError();
2524 +
2525 + const errorDiv = document.createElement('div');
2526 + errorDiv.className = 'email-error';
2527 + errorDiv.style.cssText = `
2528 + color: #e74c3c;
2529 + font-size: 12px;
2530 + margin-top: 8px;
2531 + padding: 4px 0;
2532 + animation: fadeInError 0.3s ease;
2533 + `;
2534 + errorDiv.textContent = message;
2535 +
2536 + // Add CSS animation if not already present
2537 + if (!document.getElementById('email-error-styles')) {
2538 + const style = document.createElement('style');
2539 + style.id = 'email-error-styles';
2540 + style.textContent = `
2541 + @keyframes fadeInError {
2542 + from { opacity: 0; transform: translateY(-5px); }
2543 + to { opacity: 1; transform: translateY(0); }
2544 + }
2545 + .email-input-shake {
2546 + animation: shake 0.5s ease-in-out;
2547 + }
2548 + @keyframes shake {
2549 + 0%, 100% { transform: translateX(0); }
2550 + 25% { transform: translateX(-5px); }
2551 + 75% { transform: translateX(5px); }
2552 + }
2553 + @keyframes spin {
2554 + from { transform: rotate(0deg); }
2555 + to { transform: rotate(360deg); }
2556 + }
2557 + .email-spinner {
2558 + display: inline-block;
2559 + vertical-align: middle;
2560 + }
3436 2561 `;
3437 - submitButton.style.opacity = '0.8';
2562 + document.head.appendChild(style);
3438 2563 }
3439 - } else {
3440 - emailSubmittingState[botId] = false;
3441 - if (submitButton) submitButton.disabled = false;
3442 - if (emailInput) emailInput.disabled = false;
3443 - if (nameInput) nameInput.disabled = false;
3444 -
3445 - if (submitButton) {
3446 - const originalHtml = submitButton.getAttribute('data-original-html');
3447 - if (originalHtml) {
3448 - submitButton.innerHTML = originalHtml;
3449 - }
3450 - submitButton.style.opacity = '1';
2564 +
2565 + emailForm.appendChild(errorDiv);
2566 +
2567 + // Add shake animation to inputs
2568 + const emailInput = document.getElementById('user-email');
2569 + const nameInput = document.getElementById('user-name');
2570 +
2571 + if (emailInput) {
2572 + emailInput.classList.add('email-input-shake');
2573 + setTimeout(() => {
2574 + emailInput.classList.remove('email-input-shake');
2575 + }, 500);
3451 2576 }
2577 +
2578 + if (nameInput) {
2579 + nameInput.classList.add('email-input-shake');
2580 + setTimeout(() => {
2581 + nameInput.classList.remove('email-input-shake');
2582 + }, 500);
2583 + }
3452 2584 }
3453 - }
3454 2585
3455 - function showEmailError(botId, message) {
3456 - clearEmailError(botId);
3457 -
3458 - var emailForm = getElementDOM(botId, 'email-collection-form');
3459 - if (!emailForm) return;
3460 -
3461 - const errorDiv = document.createElement('div');
3462 - errorDiv.className = 'email-error';
3463 - errorDiv.style.cssText = `
3464 - color: #e74c3c;
3465 - font-size: 12px;
3466 - margin-top: 8px;
3467 - padding: 4px 0;
3468 - animation: fadeInError 0.3s ease;
3469 - `;
3470 - errorDiv.textContent = message;
3471 - emailForm.appendChild(errorDiv);
3472 -
3473 - // Add shake animation to inputs
3474 - var emailInput = getElementDOM(botId, 'user-email');
3475 - var nameInput = getElementDOM(botId, 'user-name');
3476 -
3477 - if (emailInput) {
3478 - emailInput.classList.add('email-input-shake');
3479 - setTimeout(() => emailInput.classList.remove('email-input-shake'), 500);
3480 - }
3481 - if (nameInput) {
3482 - nameInput.classList.add('email-input-shake');
3483 - setTimeout(() => nameInput.classList.remove('email-input-shake'), 500);
3484 - }
3485 - }
3486 -
3487 - function clearEmailError(botId) {
3488 - var emailForm = getElementDOM(botId, 'email-collection-form');
3489 - if (emailForm) {
2586 + function clearEmailError() {
3490 2587 const existingErrors = emailForm.querySelectorAll('.email-error');
3491 2588 existingErrors.forEach(error => error.remove());
3492 2589 }
3493 - }
3494 2590
3495 - // Resolve email state using server-side data when available, AJAX fallback otherwise
3496 - function resolveEmailState(botId) {
3497 - if (mxchatChat.skip_email_check && mxchatChat.initial_email_state) {
3498 - if (mxchatChat.initial_email_state.show_email_form) {
3499 - showEmailFormForBot(botId);
3500 - } else {
3501 - showChatContainerForBot(botId);
2591 + // MAIN FORM SUBMIT HANDLER - This is the critical fix
2592 + //console.log('Setting up form submit handler...');
2593 +
2594 + // Remove any existing event listeners first
2595 + emailForm.removeEventListener('submit', handleFormSubmit);
2596 +
2597 + // Add the form submit handler
2598 + emailForm.addEventListener('submit', handleFormSubmit);
2599 +
2600 + function handleFormSubmit(event) {
2601 + //console.log('Form submit handler triggered!');
2602 + event.preventDefault();
2603 + event.stopPropagation();
2604 +
2605 + // Prevent double submission
2606 + if (isSubmitting) {
2607 + //console.log('Already submitting, ignoring...');
2608 + return false;
3502 2609 }
3503 - } else {
3504 - checkSessionAndEmailForBot(botId);
3505 - }
3506 - }
3507 2610
3508 - function checkSessionAndEmailForBot(botId) {
3509 - const sessionId = MxChatInstances.ensureSession(botId);
2611 + const userEmail = document.getElementById('user-email').value.trim();
2612 + const nameInput = document.getElementById('user-name');
2613 + const userName = nameInput ? nameInput.value.trim() : '';
2614 + const sessionId = getChatSession();
3510 2615
3511 - // Hide both panels while we check — show loader instead
3512 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3513 - var chatContainer = getElementDOM(botId, 'chat-container');
3514 - if (emailBlocker) emailBlocker.style.display = 'none';
3515 - if (chatContainer) chatContainer.style.display = 'none';
3516 - showInitLoader(botId);
2616 + //console.log('Form data:', { userEmail, userName, sessionId });
3517 2617
3518 - fetch(mxchatChat.ajax_url, {
3519 - method: 'POST',
3520 - headers: {
3521 - 'Content-Type': 'application/x-www-form-urlencoded',
3522 - },
3523 - body: new URLSearchParams({
3524 - action: 'mxchat_check_email_provided',
3525 - session_id: sessionId,
3526 - nonce: mxchatChat.nonce,
3527 - })
3528 - })
3529 - .then((response) => {
3530 - if (!response.ok) {
3531 - throw new Error(`HTTP error! status: ${response.status}`);
2618 + // Validate email before submission
2619 + if (!userEmail) {
2620 + showEmailError('Please enter your email address.');
2621 + return false;
3532 2622 }
3533 - return response.json();
3534 - })
3535 - .then((data) => {
3536 - if (data.success) {
3537 - if (data.data.logged_in || data.data.email) {
3538 - showChatContainerForBot(botId);
3539 - } else {
3540 - showEmailFormForBot(botId);
3541 - }
3542 - } else {
3543 - showEmailFormForBot(botId);
2623 +
2624 + if (!isValidEmail(userEmail)) {
2625 + showEmailError('Please enter a valid email address.');
2626 + return false;
3544 2627 }
3545 - })
3546 - .catch((error) => {
3547 - showEmailFormForBot(botId);
3548 - });
3549 - }
3550 2628
3551 - // Event delegation for email form submission
3552 - $(document).on('submit', '.email-collection-form', function(e) {
3553 - e.preventDefault();
3554 - e.stopPropagation();
2629 + // Validate name if field exists
2630 + if (nameInput && !isValidName(userName)) {
2631 + showEmailError('Please enter a valid name (2-100 characters).');
2632 + return false;
2633 + }
3555 2634
3556 - var botId = getBotIdFromElement(this);
2635 + // Clear any existing errors
2636 + clearEmailError();
2637 + setSubmissionState(true);
3557 2638
3558 - // Prevent double submission
3559 - if (emailSubmittingState[botId]) {
3560 - return false;
3561 - }
2639 + //console.log('Sending AJAX request...');
3562 2640
3563 - var emailInput = getElementDOM(botId, 'user-email');
3564 - var nameInput = getElementDOM(botId, 'user-name');
3565 - var userEmail = emailInput ? emailInput.value.trim() : '';
3566 - var userName = nameInput ? nameInput.value.trim() : '';
3567 - var sessionId = MxChatInstances.ensureSession(botId);
2641 + // Prepare form data with optional name
2642 + const formData = new URLSearchParams({
2643 + action: 'mxchat_handle_save_email_and_response',
2644 + email: userEmail,
2645 + session_id: sessionId,
2646 + nonce: mxchatChat.nonce,
2647 + });
3568 2648
3569 - // Validate email
3570 - if (!userEmail) {
3571 - showEmailError(botId, 'Please enter your email address.');
3572 - return false;
3573 - }
2649 + // Add name to form data if provided
2650 + if (userName) {
2651 + formData.append('name', userName);
2652 + }
3574 2653
3575 - if (!isValidEmailAddress(userEmail)) {
3576 - showEmailError(botId, 'Please enter a valid email address.');
3577 - return false;
3578 - }
2654 + fetch(mxchatChat.ajax_url, {
2655 + method: 'POST',
2656 + headers: {
2657 + 'Content-Type': 'application/x-www-form-urlencoded',
2658 + },
2659 + body: formData
2660 + })
2661 + .then((response) => {
2662 + //console.log('Response received:', response);
2663 + if (!response.ok) {
2664 + throw new Error(`HTTP error! status: ${response.status}`);
2665 + }
2666 + return response.json();
2667 + })
2668 + .then((data) => {
2669 + //console.log('Response data:', data);
2670 + setSubmissionState(false);
2671 +
2672 + if (data.success) {
2673 + // Show chat immediately
2674 + showChatContainer();
3579 2675
3580 - // Validate name if field exists and has content
3581 - if (nameInput && userName && !isValidNameInput(userName)) {
3582 - showEmailError(botId, 'Please enter a valid name (2-100 characters).');
3583 - return false;
2676 + // Handle bot response if provided
2677 + if (data.message && typeof appendMessage === 'function') {
2678 + setTimeout(() => {
2679 + appendMessage('bot', data.message);
2680 + if (typeof scrollToBottom === 'function') {
2681 + scrollToBottom();
2682 + }
2683 + }, 100);
2684 + }
2685 + } else {
2686 + showEmailError(data.message || 'Failed to save email. Please try again.');
2687 + }
2688 + })
2689 + .catch((error) => {
2690 + //console.error('Email submission error:', error);
2691 + setSubmissionState(false);
2692 + showEmailError('An error occurred. Please try again.');
2693 + });
2694 +
2695 + return false; // Extra prevention
3584 2696 }
3585 2697
3586 - clearEmailError(botId);
3587 - setEmailSubmissionState(botId, true);
2698 + // Real-time email validation
2699 + const emailInput = document.getElementById('user-email');
2700 + if (emailInput) {
2701 + let validationTimeout;
2702 +
2703 + emailInput.addEventListener('input', function() {
2704 + // Clear previous validation timeout
2705 + if (validationTimeout) {
2706 + clearTimeout(validationTimeout);
2707 + }
2708 +
2709 + // Debounce validation
2710 + validationTimeout = setTimeout(() => {
2711 + const email = this.value.trim();
2712 + clearEmailError();
2713 +
2714 + if (email && !isValidEmail(email)) {
2715 + showEmailError('Please enter a valid email address.');
2716 + }
2717 + }, 500);
2718 + });
3588 2719
3589 - // Prepare form data
3590 - const formData = new URLSearchParams({
3591 - action: 'mxchat_handle_save_email_and_response',
3592 - email: userEmail,
3593 - session_id: sessionId,
3594 - nonce: mxchatChat.nonce,
3595 - });
3596 -
3597 - if (userName) {
3598 - formData.append('name', userName);
2720 + // Handle Enter key
2721 + emailInput.addEventListener('keypress', function(e) {
2722 + if (e.key === 'Enter' && !isSubmitting) {
2723 + e.preventDefault();
2724 + emailForm.dispatchEvent(new Event('submit'));
2725 + }
2726 + });
3599 2727 }
3600 2728
3601 - fetch(mxchatChat.ajax_url, {
3602 - method: 'POST',
3603 - headers: {
3604 - 'Content-Type': 'application/x-www-form-urlencoded',
3605 - },
3606 - body: formData
3607 - })
3608 - .then((response) => {
3609 - if (!response.ok) {
3610 - throw new Error(`HTTP error! status: ${response.status}`);
3611 - }
3612 - return response.json();
3613 - })
3614 - .then((data) => {
3615 - setEmailSubmissionState(botId, false);
3616 -
3617 - if (data.success) {
3618 - showChatContainerForBot(botId);
3619 -
3620 - // Replace {visitor_name} placeholder in intro message with actual name
3621 - if (userName) {
3622 - replaceVisitorNamePlaceholder(botId, userName);
3623 - } else {
3624 - // Remove placeholder if no name provided
3625 - replaceVisitorNamePlaceholder(botId, '');
2729 + // Real-time name validation
2730 + const nameInput = document.getElementById('user-name');
2731 + if (nameInput) {
2732 + let nameValidationTimeout;
2733 +
2734 + nameInput.addEventListener('input', function() {
2735 + // Clear previous validation timeout
2736 + if (nameValidationTimeout) {
2737 + clearTimeout(nameValidationTimeout);
3626 2738 }
2739 +
2740 + // Debounce validation
2741 + nameValidationTimeout = setTimeout(() => {
2742 + const name = this.value.trim();
2743 + clearEmailError();
2744 +
2745 + if (name && !isValidName(name)) {
2746 + showEmailError('Name must be between 2 and 100 characters.');
2747 + }
2748 + }, 500);
2749 + });
3627 2750
3628 - if (data.message && typeof appendMessage === 'function') {
3629 - setTimeout(() => {
3630 - appendMessage('bot', data.message, '', [], false, botId);
3631 - if (typeof scrollToBottom === 'function') {
3632 - scrollToBottom(botId);
3633 - }
3634 - }, 100);
2751 + // Handle Enter key
2752 + nameInput.addEventListener('keypress', function(e) {
2753 + if (e.key === 'Enter' && !isSubmitting) {
2754 + e.preventDefault();
2755 + emailForm.dispatchEvent(new Event('submit'));
3635 2756 }
3636 - } else {
3637 - showEmailError(botId, data.message || 'Failed to save email. Please try again.');
3638 - }
3639 - })
3640 - .catch((error) => {
3641 - setEmailSubmissionState(botId, false);
3642 - showEmailError(botId, 'An error occurred. Please try again.');
3643 - });
3644 -
3645 - return false;
3646 - });
3647 -
3648 - // Real-time email validation using event delegation
3649 - $(document).on('input', '.mxchat-email-input', function() {
3650 - var botId = getBotIdFromElement(this);
3651 - var $input = $(this);
3652 -
3653 - // Clear previous timeout
3654 - clearTimeout($input.data('validationTimeout'));
3655 -
3656 - // Debounce validation
3657 - var timeout = setTimeout(() => {
3658 - var email = this.value.trim();
3659 - clearEmailError(botId);
3660 -
3661 - if (email && !isValidEmailAddress(email)) {
3662 - showEmailError(botId, 'Please enter a valid email address.');
3663 - }
3664 - }, 500);
3665 -
3666 - $input.data('validationTimeout', timeout);
3667 - });
3668 -
3669 - // Handle Enter key in email input
3670 - $(document).on('keypress', '.mxchat-email-input', function(e) {
3671 - if (e.key === 'Enter') {
3672 - e.preventDefault();
3673 - var botId = getBotIdFromElement(this);
3674 - if (!emailSubmittingState[botId]) {
3675 - $(this).closest('.email-collection-form').submit();
3676 - }
2757 + });
3677 2758 }
3678 - });
3679 2759
3680 - // Handle Enter key in name input
3681 - $(document).on('keypress', '.mxchat-name-input', function(e) {
3682 - if (e.key === 'Enter') {
3683 - e.preventDefault();
3684 - var botId = getBotIdFromElement(this);
3685 - if (!emailSubmittingState[botId]) {
3686 - $(this).closest('.email-collection-form').submit();
2760 + // Initial state check
2761 + if (mxchatChat.skip_email_check && mxchatChat.initial_email_state) {
2762 + //console.log('Using server-provided email state:', mxchatChat.initial_email_state);
2763 +
2764 + const emailState = mxchatChat.initial_email_state;
2765 + if (emailState.show_email_form) {
2766 + showEmailForm();
2767 + } else {
2768 + showChatContainer();
3687 2769 }
2770 + } else {
2771 + // Check email status via AJAX
2772 + setTimeout(checkSessionAndEmail, 100);
3688 2773 }
3689 - });
3690 2774
3691 - // Initialize email check for all bot instances
3692 - // For floating bots: defer until widget is opened (zero passive AJAX)
3693 - // For embedded bots: check immediately since the form is visible
3694 - $('.mxchat-chatbot-wrapper').each(function() {
3695 - var botId = $(this).data('bot-id') || 'default';
3696 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3697 -
3698 - if (emailBlocker) {
3699 - if (isEmbeddedBot(botId)) {
3700 - // Embedded bots are always visible — check now
3701 - resolveEmailState(botId);
3702 - }
3703 - // Floating bots: handled in the widget open handler
3704 - } else if (isEmbeddedBot(botId)) {
3705 - // Embedded bot, no email collection — load history with loader
3706 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
3707 - if (chatPersistenceEnabled) {
3708 - MxChatInstances.ensureSession(botId);
3709 - showChatContainerForBot(botId);
3710 - }
2775 + // Check if email exists for the current session
2776 + function checkSessionAndEmail() {
2777 + const sessionId = getChatSession();
2778 +
2779 + fetch(mxchatChat.ajax_url, {
2780 + method: 'POST',
2781 + headers: {
2782 + 'Content-Type': 'application/x-www-form-urlencoded',
2783 + },
2784 + body: new URLSearchParams({
2785 + action: 'mxchat_check_email_provided',
2786 + session_id: sessionId,
2787 + nonce: mxchatChat.nonce,
2788 + })
2789 + })
2790 + .then((response) => {
2791 + if (!response.ok) {
2792 + throw new Error(`HTTP error! status: ${response.status}`);
2793 + }
2794 + return response.json();
2795 + })
2796 + .then((data) => {
2797 + if (data.success) {
2798 + if (data.data.logged_in || data.data.email) {
2799 + showChatContainer();
2800 + } else {
2801 + showEmailForm();
2802 + }
2803 + } else {
2804 + // On error, default to showing email form
2805 + showEmailForm();
2806 + }
2807 + })
2808 + .catch((error) => {
2809 + //console.warn('Email check failed, defaulting to email form:', error);
2810 + showEmailForm();
2811 + });
3711 2812 }
3712 - });
2813 +
2814 + } else {
2815 + console.error('Email collection is enabled but essential elements are missing:', {
2816 + emailForm: !!emailForm,
2817 + emailBlocker: !!emailBlocker,
2818 + chatbotWrapper: !!chatbotWrapper
2819 + });
2820 + }
2821 +} else {
2822 + //console.log('Email collection is disabled');
3713 2823 }
3714 2824
3715 - // Open chatbot when pre-chat message is clicked - use class selector for multi-instance
3716 - $(document).on('click', '.pre-chat-message', function() {
3717 - var botId = getBotIdFromElement(this);
3718 - var $chatbot = getElement(botId, 'floating-chatbot');
3719 - if ($chatbot.hasClass('hidden')) {
3720 - $chatbot.removeClass('hidden').addClass('visible');
3721 - getElement(botId, 'floating-chatbot-button').addClass('hidden');
3722 - handlePreChatDismissal(botId);
2825 + // Open chatbot when pre-chat message is clicked
2826 + $(document).on('click', '#pre-chat-message', function() {
2827 + var chatbot = $('#floating-chatbot');
2828 + if (chatbot.hasClass('hidden')) {
2829 + chatbot.removeClass('hidden').addClass('visible');
2830 + $('#floating-chatbot-button').addClass('hidden');
2831 + $('#pre-chat-message').fadeOut(250); // Hide pre-chat message
3723 2832 disableScroll(); // Disable scroll when chatbot opens
3724 -
3725 - // Load chat history for returning visitors (persistence)
3726 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
3727 - if (chatPersistenceEnabled) {
3728 - MxChatInstances.ensureSession(botId);
3729 - }
3730 -
3731 - // Deferred email check — only on first widget open
3732 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3733 - var instance = MxChatInstances.get(botId);
3734 - if (emailBlocker && !instance.emailCheckDone) {
3735 - instance.emailCheckDone = true;
3736 - resolveEmailState(botId);
3737 - } else if (!emailBlocker) {
3738 - showChatContainerForBot(botId);
3739 - }
3740 2833 }
3741 2834 });
3742 2835
3743 - // Legacy duplicate close handler removed — handled by single event delegation above
2836 + var closeButton = document.querySelector('.close-pre-chat-message');
2837 + if (closeButton) {
2838 + closeButton.addEventListener('click', function() {
2839 + $('#pre-chat-message').fadeOut(200); // Hide the message
3744 2840
2841 + // Send an AJAX request to set the transient flag for 24 hours
2842 + $.ajax({
2843 + url: mxchatChat.ajax_url,
2844 + type: 'POST',
2845 + data: {
2846 + action: 'mxchat_dismiss_pre_chat_message',
2847 + _ajax_nonce: mxchatChat.nonce
2848 + },
2849 + success: function() {
2850 + //console.log('Pre-chat message dismissed for 24 hours.');
3745 2851
3746 -function hasQuickQuestions(botId) {
3747 - botId = botId || 'default';
3748 - var questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
3749 - if (!questionsContainer) return false;
3750 - const questionButtons = questionsContainer.querySelectorAll('.mxchat-popular-question');
2852 + // Ensure the message is hidden after dismissal
2853 + $('#pre-chat-message').hide();
2854 + },
2855 + error: function() {
2856 + //console.error('Failed to dismiss pre-chat message.');
2857 + }
2858 + });
2859 + });
2860 + }
2861 +
2862 +
2863 +function hasQuickQuestions() {
2864 + const questionButtons = document.querySelectorAll('#mxchat-popular-questions .mxchat-popular-question');
3751 2865 return questionButtons.length > 0;
3752 2866 }
3753 2867
3754 -/**
3755 - * Check if a bot is embedded (not floating)
3756 - * Embedded bots don't have a .floating-chatbot wrapper
3757 - */
3758 -function isEmbeddedBot(botId) {
3759 - botId = botId || 'default';
3760 - var floatingWrapper = document.getElementById('floating-chatbot-' + botId);
3761 - return !floatingWrapper;
3762 -}
3763 -
3764 -function collapseQuickQuestions(botId) {
3765 - botId = botId || 'default';
3766 - const questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
3767 - if (questionsContainer && hasQuickQuestions(botId)) {
2868 +function collapseQuickQuestions() {
2869 + const questionsContainer = document.getElementById('mxchat-popular-questions');
2870 + if (questionsContainer && hasQuickQuestions()) {
3768 2871 questionsContainer.classList.add('collapsed');
3769 2872 questionsContainer.classList.add('has-been-collapsed');
3770 2873 try {
3771 - sessionStorage.setItem('mxchat_questions_collapsed_' + botId, 'true');
3772 - sessionStorage.setItem('mxchat_questions_has_been_collapsed_' + botId, 'true');
2874 + sessionStorage.setItem('mxchat_questions_collapsed', 'true');
2875 + sessionStorage.setItem('mxchat_questions_has_been_collapsed', 'true');
3773 2876 } catch (e) {
3774 2877 // Ignore if sessionStorage is not available
3775 2878 }
3776 2879 }
@@ -3775,15 +2878,14 @@
3775 2878 }
3776 2879 }
3777 2880 }
3778 2881
3779 -function expandQuickQuestions(botId) {
3780 - botId = botId || 'default';
3781 - const questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
3782 - if (questionsContainer && hasQuickQuestions(botId)) {
2882 +function expandQuickQuestions() {
2883 + const questionsContainer = document.getElementById('mxchat-popular-questions');
2884 + if (questionsContainer && hasQuickQuestions()) {
3783 2885 questionsContainer.classList.remove('collapsed');
3784 2886 try {
3785 - sessionStorage.setItem('mxchat_questions_collapsed_' + botId, 'false');
2887 + sessionStorage.setItem('mxchat_questions_collapsed', 'false');
3786 2888 } catch (e) {
3787 2889 // Ignore if sessionStorage is not available
3788 2890 }
3789 2891 }
@@ -3788,24 +2890,18 @@
3788 2890 }
3789 2891 }
3790 2892 }
3791 2893
3792 -function checkQuickQuestionsState(botId) {
3793 - botId = botId || 'default';
3794 - if (!hasQuickQuestions(botId)) {
2894 +function checkQuickQuestionsState() {
2895 + if (!hasQuickQuestions()) {
3795 2896 return; // Don't do anything if no questions exist
3796 2897 }
3797 -
3798 - // Skip restoring collapsed state for embedded bots - they should always start expanded
3799 - if (isEmbeddedBot(botId)) {
3800 - return;
3801 - }
3802 -
2898 +
3803 2899 try {
3804 - const isCollapsed = sessionStorage.getItem('mxchat_questions_collapsed_' + botId);
3805 - const hasBeenCollapsed = sessionStorage.getItem('mxchat_questions_has_been_collapsed_' + botId);
3806 -
3807 - const questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
2900 + const isCollapsed = sessionStorage.getItem('mxchat_questions_collapsed');
2901 + const hasBeenCollapsed = sessionStorage.getItem('mxchat_questions_has_been_collapsed');
2902 +
2903 + const questionsContainer = document.getElementById('mxchat-popular-questions');
3808 2904 if (questionsContainer) {
3809 2905 if (hasBeenCollapsed === 'true') {
3810 2906 questionsContainer.classList.add('has-been-collapsed');
3811 2907 }
@@ -3818,36 +2914,32 @@
3818 2914 }
3819 2915 }
3820 2916
3821 2917 // Global delegation for dynamically added links as fallback
3822 -// Use class selector for multi-instance support
3823 -$(document).on('click', '.chat-box a[href]:not([data-tracked])', function(e) {
2918 +$(document).on('click', '#chat-box a[href]:not([data-tracked])', function(e) {
3824 2919 const $link = $(this);
3825 2920 const messageDiv = $link.closest('.bot-message, .agent-message');
3826 -
2921 +
3827 2922 // Only process bot/agent message links
3828 2923 if (messageDiv.length > 0) {
3829 2924 const originalHref = $link.attr('href');
3830 -
2925 +
3831 2926 if (originalHref && (originalHref.startsWith('http://') || originalHref.startsWith('https://'))) {
3832 2927 e.preventDefault();
3833 2928 e.stopPropagation();
3834 -
2929 +
3835 2930 // Mark as tracked
3836 2931 $link.attr('data-tracked', 'true');
3837 -
3838 - // Get bot ID from the chat box context
3839 - var botId = getBotIdFromElement(this);
3840 -
2932 +
3841 2933 // Get message context from the message div
3842 2934 const messageText = messageDiv.text().substring(0, 200);
3843 -
2935 +
3844 2936 $.ajax({
3845 2937 url: mxchatChat.ajax_url,
3846 2938 type: 'POST',
3847 2939 data: {
3848 2940 action: 'mxchat_track_url_click',
3849 - session_id: getChatSession(botId),
2941 + session_id: getChatSession(),
3850 2942 url: originalHref,
3851 2943 message_context: messageText,
3852 2944 nonce: mxchatChat.nonce
3853 2945 },
@@ -3858,58 +2950,50 @@
3858 2950 window.location.href = originalHref;
3859 2951 }
3860 2952 }
3861 2953 });
3862 -
2954 +
3863 2955 return false;
3864 2956 }
3865 2957 }
3866 2958 });
3867 2959
3868 - // ====================================
3869 - // MAIN INITIALIZATION
3870 - // ====================================
2960 +
2961 +
2962 +
2963 +// ====================================
2964 +// MAIN INITIALIZATION
2965 +// ====================================
3871 2966
3872 - // Initialize all chatbot instances on the page
3873 - initializeAllInstances();
2967 +if ($('#floating-chatbot').hasClass('hidden')) {
2968 + $('#floating-chatbot-button').removeClass('hidden');
2969 +}
2970 +// Initialize when document is ready
2971 +setFullHeight();
2972 +trackOriginatingPage();
3874 2973
3875 - // Legacy initialization for single bot compatibility
3876 - $('.floating-chatbot.hidden').each(function() {
3877 - var botId = getBotIdFromElement(this);
3878 - getElement(botId, 'floating-chatbot-button').removeClass('hidden');
3879 - });
2974 +// Only load chat history if email collection is disabled
2975 +if (mxchatChat.email_collection_enabled !== 'on') {
2976 + loadChatHistory();
2977 +}
3880 2978
3881 - // Initialize when document is ready
3882 - setFullHeight();
2979 +initializeChatVisibility();
3883 2980
3884 - // Note: trackOriginatingPage() and loadChatHistory() are now deferred
3885 - // until the user's first interaction via MxChatInstances.ensureSession()
2981 +// Make functions globally available for add-ons
2982 +window.hasQuickQuestions = hasQuickQuestions;
2983 +window.collapseQuickQuestions = collapseQuickQuestions;
2984 +window.appendMessage = appendMessage;
2985 +window.appendThinkingMessage = appendThinkingMessage;
2986 +window.scrollToBottom = scrollToBottom;
2987 +window.scrollElementToTop = scrollElementToTop;
2988 +window.replaceLastMessage = replaceLastMessage;
2989 +window.callMxChat = callMxChat;
2990 +window.callMxChatStream = callMxChatStream;
2991 +window.shouldUseStreaming = shouldUseStreaming;
2992 +window.getChatSession = getChatSession;
2993 +window.getPageContext = getPageContext;
2994 +window.updateStreamingMessage = updateStreamingMessage;
3886 2995
3887 - // Initialize chat visibility for all instances
3888 - $('.mxchat-chatbot-wrapper').each(function() {
3889 - var botId = $(this).data('bot-id') || 'default';
3890 - initializeChatVisibility(botId);
3891 - });
3892 -
3893 - // Make functions globally available for add-ons
3894 - window.hasQuickQuestions = hasQuickQuestions;
3895 - window.collapseQuickQuestions = collapseQuickQuestions;
3896 - window.appendMessage = appendMessage;
3897 - window.appendThinkingMessage = appendThinkingMessage;
3898 - window.scrollToBottom = scrollToBottom;
3899 - window.scrollElementToTop = scrollElementToTop;
3900 - window.replaceLastMessage = replaceLastMessage;
3901 - window.callMxChat = callMxChat;
3902 - window.callMxChatStream = callMxChatStream;
3903 - window.shouldUseStreaming = shouldUseStreaming;
3904 - window.getChatSession = getChatSession;
3905 - window.getPageContext = getPageContext;
3906 - window.updateStreamingMessage = updateStreamingMessage;
3907 - window.MxChatInstances = MxChatInstances;
3908 - window.getElement = getElement;
3909 - window.getElementDOM = getElementDOM;
3910 - window.getBotIdFromElement = getBotIdFromElement;
3911 -
3912 2996 }); // End of jQuery ready
3913 2997
3914 2998
3915 2999 // ====================================
@@ -3936,265 +3020,6 @@
3936 3020 }, 2000);
3937 3021 });
3938 3022 }
3939 3023 }
3940 -});
3941 -
3942 -// ============================================================================
3943 -// SATISFACTION RATING (v3.2.6)
3944 -// ============================================================================
3945 -// Per-session 👍/👎 prompt that appears in the chat-box after 60s of user
3946 -// inactivity following a bot reply. One prompt per session, deduped via
3947 -// localStorage. Disabled site-wide when mxchatChat.satisfaction_rating_enabled
3948 -// is exactly false (default ON).
3949 -jQuery(function($) {
3950 - if (typeof mxchatChat === 'undefined') return;
3951 - if (mxchatChat.satisfaction_rating_enabled === false || mxchatChat.satisfaction_rating_enabled === 'off') return;
3952 -
3953 - // wp_localize_script stringifies ints, so accept both number and numeric string.
3954 - var idleRaw = mxchatChat.satisfaction_rating_idle_seconds;
3955 - var idleSeconds = (typeof idleRaw === 'number') ? idleRaw : parseInt(idleRaw, 10);
3956 - if (!isFinite(idleSeconds)) idleSeconds = 60;
3957 - if (idleSeconds < 5) idleSeconds = 5;
3958 - if (idleSeconds > 600) idleSeconds = 600;
3959 - var IDLE_MS = idleSeconds * 1000;
3960 - var MIN_BOT_REPLIES = 2;
3961 - var ratingState = {};
3962 -
3963 - function getState(botId) {
3964 - if (!ratingState[botId]) {
3965 - ratingState[botId] = { idleTimer: null, botReplies: 0, promptShown: false, dismissed: false };
3966 - }
3967 - return ratingState[botId];
3968 - }
3969 -
3970 - function getSessionId(botId) {
3971 - if (typeof MxChatInstances !== 'undefined' && MxChatInstances.getChatSession) {
3972 - return MxChatInstances.getChatSession(botId);
3973 - }
3974 - return null;
3975 - }
3976 -
3977 - function isAlreadyRated(sessionId) {
3978 - if (!sessionId) return false;
3979 - try { return localStorage.getItem('mxchat_rated:' + sessionId) === '1'; } catch (e) { return false; }
3980 - }
3981 -
3982 - function markRated(sessionId) {
3983 - if (!sessionId) return;
3984 - try { localStorage.setItem('mxchat_rated:' + sessionId, '1'); } catch (e) {}
3985 - }
3986 -
3987 - function esc(s) {
3988 - return String(s == null ? '' : s)
3989 - .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
3990 - .replace(/"/g, '&quot;').replace(/'/g, '&#039;');
3991 - }
3992 -
3993 - // Mirror shouldSkipInlineColors so rating bubbles defer to AI-theme CSS.
3994 - function ratingSkipInlineColors(botId) {
3995 - if (mxchatChat.skip_inline_colors) return true;
3996 - var botAssignments = mxchatChat.bot_theme_assignments || {};
3997 - return botAssignments.hasOwnProperty(botId);
3998 - }
3999 -
4000 - function botBubbleStyleAttr(botId) {
4001 - if (ratingSkipInlineColors(botId)) return '';
4002 - var bg = mxchatChat.bot_message_bg_color;
4003 - var fg = mxchatChat.bot_message_font_color;
4004 - if (!bg && !fg) return '';
4005 - return ' style="background-color: ' + esc(bg || '') + '; color: ' + esc(fg || '') + ';"';
4006 - }
4007 -
4008 - function copy(key) {
4009 - var c = mxchatChat.satisfaction_rating_copy || {};
4010 - var d = {
4011 - question: 'Was this helpful?',
4012 - helpful: 'Helpful',
4013 - not_helpful: 'Not helpful',
4014 - dismiss: 'Dismiss',
4015 - thanks: 'Thanks! Anything we should improve? (optional)',
4016 - placeholder: 'Tell us what could be better…',
4017 - send: 'Send',
4018 - skip: 'Skip',
4019 - saved: 'Thanks for the feedback.'
4020 - };
4021 - return c[key] || d[key];
4022 - }
4023 -
4024 - function thumbUpSvg() {
4025 - return '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 0 1 6 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75A.75.75 0 0 1 15 2a2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23h-.777Z"/><path d="M2.331 10.977a11.969 11.969 0 0 0-.831 4.398 12 12 0 0 0 .52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 0 1-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227Z"/></svg>';
4026 - }
4027 - function thumbDownSvg() {
4028 - return '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M15.73 5.25h1.035A7.465 7.465 0 0 1 18 9.375a7.465 7.465 0 0 1-1.235 4.125h-.148c-.806 0-1.534.446-2.031 1.08a9.04 9.04 0 0 1-2.861 2.4c-.723.384-1.35.956-1.653 1.715a4.498 4.498 0 0 0-.322 1.672V21a.75.75 0 0 1-.75.75 2.25 2.25 0 0 1-2.25-2.25c0-1.152.26-2.243.723-3.218.266-.558-.107-1.282-.725-1.282H3.622c-1.026 0-1.945-.694-2.054-1.715A12.137 12.137 0 0 1 1.5 12c0-2.848.992-5.464 2.649-7.521C4.537 3.997 5.136 3.75 5.754 3.75h4.541c.483 0 .964.078 1.423.23l3.114 1.04c.46.152.94.23 1.423.23Z"/><path d="M21.669 13.023c.536-1.362.831-2.845.831-4.398 0-1.22-.182-2.398-.52-3.507-.26-.85-1.084-1.368-1.973-1.368H19.1c-.445 0-.72.498-.523.898.591 1.2.924 2.55.924 3.977a8.958 8.958 0 0 1-1.302 4.666c-.245.403.028.959.5.959h1.053c.832 0 1.612-.453 1.918-1.227Z"/></svg>';
4029 - }
4030 -
4031 - function buildPromptHtml(botId) {
4032 - var styleAttr = botBubbleStyleAttr(botId);
4033 - return ''
4034 - + '<div class="bot-message mxchat-rating-bot-bubble"' + styleAttr + '>'
4035 - + '<div class="mxchat-rating-prompt" data-bot-id="' + esc(botId) + '" role="group" aria-label="' + esc(copy('question')) + '">'
4036 - + '<div class="mxchat-rating-question">' + esc(copy('question')) + '</div>'
4037 - + '<div class="mxchat-rating-actions">'
4038 - + '<span class="mxchat-rating-buttons">'
4039 - + '<button type="button" class="mxchat-rating-btn" data-rating="1" aria-label="' + esc(copy('helpful')) + '">' + thumbUpSvg() + '</button>'
4040 - + '<button type="button" class="mxchat-rating-btn" data-rating="-1" aria-label="' + esc(copy('not_helpful')) + '">' + thumbDownSvg() + '</button>'
4041 - + '</span>'
4042 - + '<button type="button" class="mxchat-rating-dismiss" aria-label="' + esc(copy('dismiss')) + '">×</button>'
4043 - + '</div>'
4044 - + '</div>'
4045 - + '</div>';
4046 - }
4047 -
4048 - function buildFeedbackHtml(botId, rating) {
4049 - var styleAttr = botBubbleStyleAttr(botId);
4050 - return ''
4051 - + '<div class="bot-message mxchat-rating-bot-bubble"' + styleAttr + '>'
4052 - + '<div class="mxchat-rating-feedback" data-bot-id="' + esc(botId) + '" data-rating="' + esc(String(rating)) + '">'
4053 - + '<div class="mxchat-rating-feedback-label">' + esc(copy('thanks')) + '</div>'
4054 - + '<textarea class="mxchat-rating-feedback-input" maxlength="500" placeholder="' + esc(copy('placeholder')) + '" rows="2"></textarea>'
4055 - + '<div class="mxchat-rating-feedback-actions">'
4056 - + '<button type="button" class="mxchat-rating-skip">' + esc(copy('skip')) + '</button>'
4057 - + '<button type="button" class="mxchat-rating-submit">' + esc(copy('send')) + '</button>'
4058 - + '</div>'
4059 - + '</div>'
4060 - + '</div>';
4061 - }
4062 -
4063 - function buildSavedHtml(botId) {
4064 - var styleAttr = botBubbleStyleAttr(botId);
4065 - return ''
4066 - + '<div class="bot-message mxchat-rating-bot-bubble"' + styleAttr + '>'
4067 - + '<div class="mxchat-rating-saved">' + esc(copy('saved')) + '</div>'
4068 - + '</div>';
4069 - }
4070 -
4071 - function getChatBoxByBotId(botId) {
4072 - var $byId = $('#chat-box-' + botId);
4073 - if ($byId.length) return $byId.first();
4074 - return $('.chat-box').first();
4075 - }
4076 -
4077 - function scrollChatBoxToBottom($chatBox) {
4078 - if (!$chatBox || !$chatBox.length) return;
4079 - $chatBox.scrollTop($chatBox[0].scrollHeight);
4080 - }
4081 -
4082 - function showPrompt(botId) {
4083 - var s = getState(botId);
4084 - if (s.promptShown || s.dismissed) return;
4085 - var sessionId = getSessionId(botId);
4086 - if (!sessionId) return;
4087 - if (isAlreadyRated(sessionId)) { s.promptShown = true; return; }
4088 - var $chatBox = getChatBoxByBotId(botId);
4089 - if (!$chatBox.length) return;
4090 - if ($chatBox.find('.mxchat-rating-prompt').length) { s.promptShown = true; return; }
4091 - $chatBox.append(buildPromptHtml(botId));
4092 - s.promptShown = true;
4093 - scrollChatBoxToBottom($chatBox);
4094 - }
4095 -
4096 - function submitRating(botId, rating, feedback) {
4097 - var sessionId = getSessionId(botId);
4098 - if (!sessionId) return;
4099 - $.post(mxchatChat.ajax_url, {
4100 - action: 'mxchat_save_rating',
4101 - session_id: sessionId,
4102 - bot_id: botId,
4103 - rating: rating,
4104 - feedback: feedback || ''
4105 - });
4106 - markRated(sessionId);
4107 - }
4108 -
4109 - function onBotReply(botId) {
4110 - var s = getState(botId);
4111 - s.botReplies += 1;
4112 - if (s.promptShown || s.dismissed) return;
4113 - var sessionId = getSessionId(botId);
4114 - if (sessionId && isAlreadyRated(sessionId)) { s.promptShown = true; return; }
4115 - if (s.botReplies < MIN_BOT_REPLIES) return;
4116 - if (s.idleTimer) clearTimeout(s.idleTimer);
4117 - s.idleTimer = setTimeout(function() { showPrompt(botId); }, IDLE_MS);
4118 - }
4119 -
4120 - function onUserMessage(botId) {
4121 - var s = getState(botId);
4122 - if (s.idleTimer) { clearTimeout(s.idleTimer); s.idleTimer = null; }
4123 - }
4124 -
4125 - function botIdFromChatBox(el) {
4126 - var id = el && el.id ? el.id : '';
4127 - return id.indexOf('chat-box-') === 0 ? id.substring('chat-box-'.length) : 'default';
4128 - }
4129 -
4130 - function setupObserver(chatBox) {
4131 - var botId = botIdFromChatBox(chatBox);
4132 - try {
4133 - var observer = new MutationObserver(function(mutations) {
4134 - mutations.forEach(function(m) {
4135 - for (var i = 0; i < m.addedNodes.length; i++) {
4136 - var node = m.addedNodes[i];
4137 - if (!node || node.nodeType !== 1) continue;
4138 - var $n = $(node);
4139 - if ($n.hasClass('mxchat-rating-bot-bubble') || $n.hasClass('mxchat-rating-prompt') || $n.hasClass('mxchat-rating-feedback') || $n.hasClass('mxchat-rating-saved')) continue;
4140 - if ($n.hasClass('bot-message')) onBotReply(botId); // count at insert time — streaming providers append with .temporary-message first, then remove later (childList observer can't see attr changes)
4141 - else if ($n.hasClass('user-message')) onUserMessage(botId);
4142 - }
4143 - });
4144 - });
4145 - observer.observe(chatBox, { childList: true });
4146 - } catch (e) { /* noop */ }
4147 - }
4148 -
4149 - $('.chat-box').each(function() { setupObserver(this); });
4150 -
4151 - $(document).on('click', '.mxchat-rating-btn', function(e) {
4152 - e.preventDefault();
4153 - var $btn = $(this);
4154 - var $prompt = $btn.closest('.mxchat-rating-prompt');
4155 - var $wrap = $btn.closest('.mxchat-rating-bot-bubble');
4156 - var botId = $prompt.data('bot-id') || 'default';
4157 - var rating = parseInt($btn.attr('data-rating'), 10);
4158 - if (rating !== 1 && rating !== -1) return;
4159 - submitRating(botId, rating, '');
4160 - ($wrap.length ? $wrap : $prompt).replaceWith(buildFeedbackHtml(botId, rating));
4161 - scrollChatBoxToBottom(getChatBoxByBotId(botId));
4162 - });
4163 -
4164 - $(document).on('click', '.mxchat-rating-dismiss', function(e) {
4165 - e.preventDefault();
4166 - var $prompt = $(this).closest('.mxchat-rating-prompt');
4167 - var $wrap = $(this).closest('.mxchat-rating-bot-bubble');
4168 - var botId = $prompt.data('bot-id') || 'default';
4169 - var s = getState(botId);
4170 - s.dismissed = true;
4171 - markRated(getSessionId(botId));
4172 - ($wrap.length ? $wrap : $prompt).remove();
4173 - });
4174 -
4175 - function closeFeedback($fb) {
4176 - var botId = $fb.data('bot-id') || 'default';
4177 - var $wrap = $fb.closest('.mxchat-rating-bot-bubble');
4178 - ($wrap.length ? $wrap : $fb).replaceWith(buildSavedHtml(botId));
4179 - scrollChatBoxToBottom(getChatBoxByBotId(botId));
4180 - }
4181 -
4182 - $(document).on('click', '.mxchat-rating-skip', function(e) {
4183 - e.preventDefault();
4184 - closeFeedback($(this).closest('.mxchat-rating-feedback'));
4185 - });
4186 -
4187 - $(document).on('click', '.mxchat-rating-submit', function(e) {
4188 - e.preventDefault();
4189 - var $fb = $(this).closest('.mxchat-rating-feedback');
4190 - var botId = $fb.data('bot-id') || 'default';
4191 - var rating = parseInt($fb.attr('data-rating'), 10);
4192 - if (rating !== 1 && rating !== -1) { closeFeedback($fb); return; }
4193 - var text = String($fb.find('.mxchat-rating-feedback-input').val() || '').trim();
4194 - if (text !== '') {
4195 - submitRating(botId, rating, text);
4196 - }
4197 - closeFeedback($fb);
4198 - });
4199 3024 });
4200 3025