PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 2.6.3
MxChat – AI Chatbot & Content Generation for WordPress v2.6.3
3.2.21 3.2.20 3.2.19 3.2.18 3.2.17 3.2.16 3.2.15 3.2.14 3.2.12 3.2.13 3.2.11 3.2.10 3.2.9 3.2.8 3.2.7 3.2.6 3.2.5 3.2.4 3.2.3 3.2.2 3.2.1 2.0.3 2.0.4 2.0.5 2.0.6 All 152 releases
← All changes | js/chat-script.js +965 -2742 3.2.20 → 2.6.3 View file →
@@ -1,383 +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 -
108 - // Dynamic-settings refresh (plan-32db95).
109 - //
110 - // Every widget setting ships inline in cached page HTML, so behind a
111 - // full-page cache the site owner can't purge (host cache, CDN, the
112 - // browser itself) a toggled setting looks broken until the cache turns
113 - // over. Same distrust-cached-HTML reasoning as the per-request nonce:
114 - // on the FIRST widget open per page load we ask the nonce endpoint for
115 - // the current behavior-gate settings (?with_settings=1), merge them over
116 - // mxchatChat, and rebuild the header menu. Colors are NOT refreshed —
117 - // they're server-inline-styled, so a runtime swap would visibly flash.
118 - // On any failure we keep the inline values silently (nonce-fallback
119 - // posture). At most one request per page load, only if a widget opens.
120 - var dynamicSettingsState = 'idle'; // 'idle' | 'pending' | 'done'
121 -
122 - function mxchatRefreshDynamicSettings() {
123 - if (dynamicSettingsState !== 'idle') return;
124 - if (typeof mxchatChat === 'undefined') return;
125 - dynamicSettingsState = 'pending';
126 -
127 - var applied = function (data) {
128 - dynamicSettingsState = 'done';
129 - if (!data) return; // endpoint unavailable — inline values stand.
130 - if (data.nonce) {
131 - // Seed the nonce cache too: saves the first send's REST
132 - // round-trip and keeps us under the endpoint's rate limit.
133 - cachedFreshNonce = data.nonce;
134 - cachedFreshNonceFetchedAt = Date.now();
135 - mxchatChat.nonce = data.nonce;
136 - }
137 - if (data.settings && typeof data.settings === 'object') {
138 - $.extend(mxchatChat, data.settings);
139 - mxchatRebuildHeaderMenus();
140 - }
141 - };
142 -
143 - fetch(getRestNonceUrl() + '?with_settings=1', {
144 - credentials: 'same-origin',
145 - headers: { 'Accept': 'application/json' }
146 - }).then(function (resp) {
147 - if (!resp.ok) throw new Error('settings refresh failed: ' + resp.status);
148 - return resp.json();
149 - }).then(applied).catch(function () {
150 - // Fallback: legacy admin-ajax refresh path, same as withFreshNonce.
151 - if (mxchatChat.ajax_url) {
152 - $.post(mxchatChat.ajax_url, { action: 'mxchat_refresh_nonce', with_settings: 1 })
153 - .done(function (res) {
154 - applied(res && res.success && res.data ? res.data : null);
155 - })
156 - .fail(function () { applied(null); });
157 - } else {
158 - applied(null);
159 - }
160 - });
161 - }
162 -
2 +
163 3 // ====================================
164 - // MULTI-INSTANCE MANAGEMENT SYSTEM
165 - // ====================================
166 -
167 - // Instance registry - tracks all chatbot instances on the page
168 - const MxChatInstances = {
169 - instances: {},
170 -
171 - // Initialize an instance for a bot
172 - init: function(botId) {
173 - if (!this.instances[botId]) {
174 - // When persistence is OFF, track when this session started
175 - // so the AI only sees messages from this page load
176 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
177 -
178 - this.instances[botId] = {
179 - botId: botId,
180 - sessionId: null,
181 - lastSeenMessageId: '',
182 - notificationCheckInterval: null,
183 - pollingInterval: null,
184 - processedMessageIds: new Set(),
185 - activePdfFile: null,
186 - activeWordFile: null,
187 - chatHistoryLoaded: false,
188 - isStreaming: false,
189 - // Fresh context timestamp - only used when persistence is OFF
190 - sessionStartTimestamp: chatPersistenceEnabled ? 0 : Date.now()
191 - };
192 - }
193 - return this.instances[botId];
194 - },
195 -
196 - // Get instance by botId
197 - get: function(botId) {
198 - return this.instances[botId] || this.init(botId);
199 - },
200 -
201 - // Get all active bot IDs
202 - getAllBotIds: function() {
203 - return Object.keys(this.instances);
204 - },
205 -
206 - // Session management per bot
207 - // Returns existing session ID from cookie or localStorage (with in-memory fallback),
208 - // or null if none exists. Does NOT create a new session — use ensureSession() for that.
209 - getChatSession: function(botId) {
210 - var cookieName = 'mxchat_session_id_' + botId;
211 - var storageKey = 'mxchat_session_id_' + botId;
212 - var sessionId = getCookie(cookieName);
213 -
214 - // Fallback to localStorage if cookie is missing (e.g. cleared by browser/consent)
215 - if (!sessionId) {
216 - try { sessionId = localStorage.getItem(storageKey); } catch (e) {}
217 - }
218 -
219 - // Fallback to in-memory instance when cookie AND localStorage are both blocked
220 - // (Safari ITP, strict tracking prevention, cross-origin iframes with partitioned
221 - // storage). Without this, ensureSession() can generate and store an ID that
222 - // getChatSession() then can't read back, causing null session_ids on send.
223 - if (!sessionId && this.instances[botId] && this.instances[botId].sessionId) {
224 - sessionId = this.instances[botId].sessionId;
225 - }
226 -
227 - // Guard against stored sentinel values that indicate earlier broken writes.
228 - if (sessionId === 'null' || sessionId === 'undefined') {
229 - sessionId = null;
230 - }
231 -
232 - // Re-sync cookie from localStorage if cookie was lost
233 - if (sessionId && !getCookie(cookieName)) {
234 - document.cookie = cookieName + "=" + sessionId + "; path=/; max-age=86400; SameSite=Lax";
235 - }
236 -
237 - return sessionId || null;
238 - },
239 -
240 - // Lazy session initializer — called on first user interaction
241 - ensureSession: function(botId) {
242 - botId = botId || 'default';
243 - var instance = this.instances[botId] || this.init(botId);
244 -
245 - if (instance.sessionId) {
246 - return instance.sessionId;
247 - }
248 -
249 - // Check for existing session from cookie or localStorage
250 - var existingSession = this.getChatSession(botId);
251 -
252 - if (existingSession) {
253 - instance.sessionId = existingSession;
254 - } else {
255 - // Brand new session
256 - var newId = generateSessionId();
257 - this.setChatSession(botId, newId);
258 - instance.sessionId = newId;
259 - }
260 -
261 - // Now that we have a session, do the deferred work
262 - refreshNonceIfNeeded();
263 - trackOriginatingPage();
264 -
265 - // Note: loadChatHistory is handled by showChatContainerForBot with loader UI,
266 - // so we do NOT call it here to avoid a race condition.
267 -
268 - return instance.sessionId;
269 - },
270 -
271 - setChatSession: function(botId, sessionId) {
272 - var cookieName = 'mxchat_session_id_' + botId;
273 - var storageKey = 'mxchat_session_id_' + botId;
274 - document.cookie = cookieName + "=" + sessionId + "; path=/; max-age=86400; SameSite=Lax";
275 - try { localStorage.setItem(storageKey, sessionId); } catch (e) {}
276 - if (this.instances[botId]) {
277 - this.instances[botId].sessionId = sessionId;
278 - }
279 - },
280 -
281 - resetChatSession: function(botId) {
282 - // Clear old session from localStorage before setting new one
283 - try { localStorage.removeItem('mxchat_session_id_' + botId); } catch (e) {}
284 - var newSessionId = generateSessionId();
285 - this.setChatSession(botId, newSessionId);
286 - var $chatBox = getElement(botId, 'chat-box');
287 - if ($chatBox.length) {
288 - $chatBox.find('.user-message, .bot-message:not(:first), .agent-message').remove();
289 - }
290 - if (this.instances[botId]) {
291 - this.instances[botId].chatHistoryLoaded = false;
292 - this.instances[botId].processedMessageIds = new Set();
293 - }
294 - },
295 -
296 - // Silent reset — new session ID without clearing the chat UI
297 - // Used when IP changes mid-conversation so the user doesn't see messages vanish
298 - silentResetSession: function(botId) {
299 - try { localStorage.removeItem('mxchat_session_id_' + botId); } catch (e) {}
300 - var newSessionId = generateSessionId();
301 - this.setChatSession(botId, newSessionId);
302 - if (this.instances[botId]) {
303 - this.instances[botId].sessionId = newSessionId;
304 - }
305 - return newSessionId;
306 - }
307 - };
308 -
309 - // ====================================
310 - // ELEMENT SELECTOR HELPERS
311 - // ====================================
312 -
313 - // Check if a specific bot has an AI theme assigned (skip inline colors)
314 - function shouldSkipInlineColors(botId) {
315 - // If global AI theme is active, skip inline colors for all bots
316 - if (mxchatChat.skip_inline_colors) {
317 - return true;
318 - }
319 - // Check if this specific bot has a theme assignment
320 - var botAssignments = mxchatChat.bot_theme_assignments || {};
321 - return botAssignments.hasOwnProperty(botId);
322 - }
323 -
324 - // Get element by ID with bot suffix - returns jQuery object
325 - function getElement(botId, elementName) {
326 - return $('#' + elementName + '-' + botId);
327 - }
328 -
329 - // Get element by ID with bot suffix - returns DOM element
330 - function getElementDOM(botId, elementName) {
331 - return document.getElementById(elementName + '-' + botId);
332 - }
333 -
334 - // Get bot ID from any element within a chatbot instance
335 - function getBotIdFromElement(element) {
336 - var $wrapper = $(element).closest('.mxchat-chatbot-wrapper');
337 - if ($wrapper.length) {
338 - return $wrapper.data('bot-id') || 'default';
339 - }
340 - // Fallback: try to find from floating container
341 - var $floating = $(element).closest('.floating-chatbot');
342 - if ($floating.length) {
343 - var id = $floating.attr('id') || '';
344 - var match = id.match(/floating-chatbot-(.+)/);
345 - if (match) return match[1];
346 - }
347 - // Fallback: the pre-chat teaser bubble (#pre-chat-message-{bot_id}) is a SIBLING
348 - // outside .mxchat-chatbot-wrapper / .floating-chatbot, so its children — e.g. the
349 - // .close-pre-chat-message button, which carries only a class and no id — miss both
350 - // branches above. Walk to the nearest ancestor whose id is pre-chat-message-{bot_id}
351 - // and read the suffix. (closest() includes the element itself, so a click directly on
352 - // #pre-chat-message-{bot_id} resolves here too.)
353 - var $preChat = $(element).closest('[id^="pre-chat-message-"]');
354 - if ($preChat.length) {
355 - var preId = $preChat.attr('id') || '';
356 - var preMatch = preId.match(/^pre-chat-message-(.+)$/);
357 - if (preMatch) return preMatch[1];
358 - }
359 - // Fallback: check if element itself has an ID with bot suffix (e.g., floating-chatbot-button-{bot_id})
360 - var elementId = $(element).attr('id') || '';
361 - if (elementId) {
362 - // Match patterns like: floating-chatbot-button-{bot_id}, pre-chat-message-{bot_id}
363 - var idMatch = elementId.match(/^(?:floating-chatbot-button|pre-chat-message|chat-notification-badge)-(.+)$/);
364 - if (idMatch) return idMatch[1];
365 - }
366 - return 'default';
367 - }
368 -
369 - // Get wrapper element for a bot
370 - function getWrapper(botId) {
371 - return getElement(botId, 'mxchat-chatbot-wrapper');
372 - }
373 -
374 - // ====================================
375 4 // GLOBAL VARIABLES & CONFIGURATION
376 5 // ====================================
377 6 const toolbarIconColor = mxchatChat.toolbar_icon_color || '#212121';
378 -
379 - // Initialize color settings (these are global as they come from PHP)
7 +
8 + // Initialize color settings
380 9 var userMessageBgColor = mxchatChat.user_message_bg_color;
381 10 var userMessageFontColor = mxchatChat.user_message_font_color;
382 11 var botMessageBgColor = mxchatChat.bot_message_bg_color;
383 12 var botMessageFontColor = mxchatChat.bot_message_font_color;
@@ -382,82 +11,61 @@
382 11 var botMessageBgColor = mxchatChat.bot_message_bg_color;
383 12 var botMessageFontColor = mxchatChat.bot_message_font_color;
384 13 var liveAgentMessageBgColor = mxchatChat.live_agent_message_bg_color;
385 14 var liveAgentMessageFontColor = mxchatChat.live_agent_message_font_color;
386 -
15 +
387 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;
388 26
389 27 // ====================================
390 - // SESSION MANAGEMENT (Legacy compatibility)
28 + // SESSION MANAGEMENT
391 29 // ====================================
30 +
31 + function getChatSession() {
32 + var sessionId = getCookie('mxchat_session_id');
392 33
34 + if (!sessionId) {
35 + sessionId = generateSessionId();
36 + setChatSession(sessionId);
37 + }
38 +
39 + return sessionId;
40 + }
41 +
42 + function setChatSession(sessionId) {
43 + // Set the cookie with a 24-hour expiration (86400 seconds)
44 + document.cookie = "mxchat_session_id=" + sessionId + "; path=/; max-age=86400; SameSite=Lax";
45 + }
46 +
393 47 function getCookie(name) {
394 48 let value = "; " + document.cookie;
395 49 let parts = value.split("; " + name + "=");
396 50 if (parts.length == 2) return parts.pop().split(";").shift();
397 51 }
398 -
52 +
399 53 function generateSessionId() {
400 - // Session IDs function as the de-facto bearer token for an anonymous
401 - // chat, so generate them with a CSPRNG when available. Math.random is a
402 - // legacy fallback for ancient/sandboxed environments that lack
403 - // window.crypto. The 'mxchat_chat_' prefix is preserved exactly (other
404 - // code pattern-matches on it). (plan-0c17b5)
405 - var rand;
406 - try {
407 - if (window.crypto && window.crypto.getRandomValues) {
408 - var buf = new Uint8Array(16); // 128 bits
409 - window.crypto.getRandomValues(buf);
410 - rand = Array.prototype.map.call(buf, function (b) {
411 - return ('0' + b.toString(16)).slice(-2);
412 - }).join('');
413 - }
414 - } catch (e) {}
415 - if (!rand) {
416 - rand = Math.random().toString(36).substr(2, 9); // legacy fallback
417 - }
418 - return 'mxchat_chat_' + rand;
54 + return 'mxchat_chat_' + Math.random().toString(36).substr(2, 9);
419 55 }
420 56
421 - // Legacy function - now delegates to instance manager
422 - function getChatSession(botId) {
423 - botId = botId || 'default';
424 - return MxChatInstances.getChatSession(botId);
57 + function resetChatSession() {
58 + // Generate a new session ID
59 + var newSessionId = generateSessionId();
60 + // Update the cookie with the new session
61 + setChatSession(newSessionId);
62 + // Clear the chat history display
63 + $('.mxchat-messages').empty();
64 + // Reset the chat history loaded flag
65 + chatHistoryLoaded = false;
425 66 }
426 67
427 - function setChatSession(sessionId, botId) {
428 - botId = botId || 'default';
429 - MxChatInstances.setChatSession(botId, sessionId);
430 - }
431 -
432 - function resetChatSession(botId) {
433 - botId = botId || 'default';
434 - MxChatInstances.resetChatSession(botId);
435 - }
436 -
437 - // ====================================
438 - // INITIALIZE ALL CHATBOT INSTANCES
439 - // ====================================
440 -
441 - function initializeAllInstances() {
442 - // Find all chatbot wrappers on the page
443 - $('.mxchat-chatbot-wrapper').each(function() {
444 - var botId = $(this).data('bot-id') || 'default';
445 - MxChatInstances.init(botId);
446 - initializeBotInstance(botId);
447 - });
448 - }
449 -
450 - function initializeBotInstance(botId) {
451 - var instance = MxChatInstances.get(botId);
452 -
453 - // Initialize quick questions state for this bot
454 - checkQuickQuestionsState(botId);
455 -
456 - // Note: Event handlers use event delegation with class selectors,
457 - // so they work automatically for all instances without per-bot setup
458 - }
459 -
460 68 // ====================================
461 69 // CONTEXTUAL AWARENESS FUNCTIONALITY
462 70 // ====================================
463 71
@@ -604,12 +212,11 @@
604 212 // CORE CHAT FUNCTIONALITY
605 213 // ====================================
606 214
607 215 // Helper functions to disable/enable chat input while waiting for response
608 -function disableChatInput(botId) {
609 - botId = botId || 'default';
610 - var chatInput = getElementDOM(botId, 'chat-input');
611 - var sendButton = getElementDOM(botId, 'send-button');
216 +function disableChatInput() {
217 + var chatInput = document.getElementById('chat-input');
218 + var sendButton = document.getElementById('send-button');
612 219 if (chatInput) {
613 220 chatInput.disabled = true;
614 221 chatInput.style.opacity = '0.6';
615 222 }
@@ -619,36 +226,15 @@
619 226 sendButton.style.pointerEvents = 'none';
620 227 }
621 228 }
622 229
623 -// Whether the input may grab focus after a completed reply (plan 03799f).
624 -// On coarse-pointer devices focusing a text input summons the on-screen
625 -// keyboard over the answer the visitor is trying to read, so 'auto' (the
626 -// default) focuses only on fine-pointer devices. The site-wide
627 -// mxchat_autofocus_after_reply PHP filter can force 'on'/'off'.
628 -// NOT used on widget open (:~3424) — that focus is a deliberate act and is
629 -// what makes the widget keyboard-accessible.
630 -function mxchatShouldAutofocusAfterReply() {
631 - var pref = (typeof mxchatChat !== 'undefined' && mxchatChat.autofocus_after_reply) || 'auto';
632 - if (pref === 'on') return true;
633 - if (pref === 'off') return false;
634 - try {
635 - return !window.matchMedia('(pointer: coarse)').matches;
636 - } catch (err) {
637 - return true;
638 - }
639 -}
640 -
641 -function enableChatInput(botId) {
642 - botId = botId || 'default';
643 - var chatInput = getElementDOM(botId, 'chat-input');
644 - var sendButton = getElementDOM(botId, 'send-button');
230 +function enableChatInput() {
231 + var chatInput = document.getElementById('chat-input');
232 + var sendButton = document.getElementById('send-button');
645 233 if (chatInput) {
646 234 chatInput.disabled = false;
647 235 chatInput.style.opacity = '1';
648 - if (mxchatShouldAutofocusAfterReply()) {
649 - try { chatInput.focus({ preventScroll: true }); } catch (err) { chatInput.focus(); }
650 - }
236 + chatInput.focus();
651 237 }
652 238 if (sendButton) {
653 239 sendButton.disabled = false;
654 240 sendButton.style.opacity = '1';
@@ -653,108 +239,13 @@
653 239 sendButton.disabled = false;
654 240 sendButton.style.opacity = '1';
655 241 sendButton.style.pointerEvents = 'auto';
656 242 }
657 - // Every completion path re-enables input, so this is the single restore
658 - // point for the streaming Stop affordance (no-op when not in stop mode).
659 - mxchatRestoreSendButton(botId);
660 243 }
661 244
662 -// --- Streaming Stop control -------------------------------------------------
663 -// One live stream handle per bot instance, so Stop on one widget never aborts
664 -// another bot on the same page.
665 -var mxchatActiveStreams = {};
666 -// Original send-button markup, captured once per bot the first time the Stop
667 -// state is shown (never captured while already in stop mode, so a rapid
668 -// stop-then-resend can't save the stop glyph as the "original").
669 -var mxchatSendMarkup = {};
670 -
671 -function mxchatShowStopButton(botId) {
672 - var btn = getElementDOM(botId, 'send-button');
673 - if (!btn) return;
674 - if (!btn.classList.contains('mxchat-stop-mode')) {
675 - mxchatSendMarkup[botId] = {
676 - html: btn.innerHTML,
677 - label: btn.getAttribute('aria-label')
678 - };
679 - }
680 -
681 - // Mirror the send icon's rendered size + color so the stop glyph looks
682 - // native, including custom send images/colors and theme overrides.
683 - var child = btn.querySelector('svg, img');
684 - var size = 25;
685 - var color = '';
686 - if (child) {
687 - var rect = child.getBoundingClientRect();
688 - if (rect.width) {
689 - size = Math.round(Math.min(rect.width, rect.height));
690 - }
691 - var cs = window.getComputedStyle(child);
692 - color = (child.tagName.toLowerCase() === 'svg' ? cs.fill : cs.color) || '';
693 - }
694 - var stopLabel = (typeof mxchatChat !== 'undefined' && mxchatChat.stop_button_label) || 'Stop response';
695 - btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style="width:' + size + 'px;height:' + size + 'px;' + (color ? 'fill:' + color + ';' : '') + '"><rect x="5" y="5" width="14" height="14" rx="3"></rect></svg>';
696 - // An add-on's DIRECT send-button handler (e.g. mxchat-vision's rebind) can
697 - // start a stream synchronously while the originating click is still
698 - // bubbling up to our delegated handler. Without this guard, that handler
699 - // reads the just-added stop-mode class as a user Stop press and aborts the
700 - // brand-new stream — the user's message renders but no reply ever fires
701 - // (plan-4bba64 silent message loss). The flag only spans the current event
702 - // dispatch: cleared on the next macrotask, long before a real Stop click.
703 - btn.__mxchatStopJustShown = true;
704 - setTimeout(function () { btn.__mxchatStopJustShown = false; }, 0);
705 - btn.classList.add('mxchat-stop-mode');
706 - btn.setAttribute('aria-label', stopLabel);
707 - btn.setAttribute('title', stopLabel);
708 - // disableChatInput() ran when the turn was sent; the Stop control itself
709 - // must stay clickable while the textarea remains disabled.
710 - btn.disabled = false;
711 - btn.style.opacity = '1';
712 - btn.style.pointerEvents = 'auto';
713 -}
714 -
715 -function mxchatRestoreSendButton(botId) {
716 - var btn = getElementDOM(botId, 'send-button');
717 - var saved = mxchatSendMarkup[botId];
718 - if (!btn || !btn.classList.contains('mxchat-stop-mode') || !saved) return;
719 - btn.innerHTML = saved.html;
720 - btn.classList.remove('mxchat-stop-mode');
721 - btn.removeAttribute('title');
722 - if (saved.label) {
723 - btn.setAttribute('aria-label', saved.label);
724 - }
725 -}
726 -
727 -function mxchatStopStreaming(botId) {
728 - var entry = mxchatActiveStreams[botId];
729 - if (!entry || !entry.controller) return;
730 - entry.aborted = true;
731 - try { entry.controller.abort(); } catch (e) {}
732 -}
733 -
734 -// Returns true when a stream rejection came from an intentional Stop click:
735 -// keep the partial text as the turn's answer — no error UI, no fallback resend.
736 -function mxchatHandleStreamAbort(botId, accumulatedContent, callback) {
737 - var entry = mxchatActiveStreams[botId];
738 - if (!entry || !entry.aborted) return false;
739 - delete mxchatActiveStreams[botId];
740 - if (!accumulatedContent) {
741 - // Stopped before the first chunk: drop the thinking bubble, no orphan message.
742 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
743 - }
744 - enableChatInput(botId); // also restores the send icon
745 - if (callback) {
746 - callback(accumulatedContent || '');
747 - }
748 - return true;
749 -}
750 -
751 245 // Update your existing sendMessage function
752 -function sendMessage(botId) {
753 - botId = botId || 'default';
754 - MxChatInstances.ensureSession(botId);
755 - var $chatInput = getElement(botId, 'chat-input');
756 - var message = $chatInput.val();
246 +function sendMessage() {
247 + var message = $('#chat-input').val();
757 248
758 249 // ADD PROMPT HOOK HERE
759 250 if (typeof customMxChatFilter === 'function') {
760 251 message = customMxChatFilter(message, "prompt");
@@ -760,81 +251,66 @@
760 251 message = customMxChatFilter(message, "prompt");
761 252 }
762 253
763 254 if (message) {
764 - // Don't disable input in live agent mode - let users chat freely
765 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
766 - var isAgentMode = modeIndicator && modeIndicator.textContent === 'Live Agent';
767 - if (!isAgentMode) {
768 - disableChatInput(botId);
769 - }
255 + // Disable input while waiting for response
256 + disableChatInput();
770 257
771 - appendMessage("user", message, '', [], false, botId);
772 - $chatInput.val('');
773 - mxchatUpdateCharCounter($chatInput[0]); // reset the char counter after send (plan 7091a2)
774 - $chatInput.css('height', 'auto');
258 + appendMessage("user", message);
259 + $('#chat-input').val('');
260 + $('#chat-input').css('height', 'auto');
775 261
776 - if (hasQuickQuestions(botId)) {
777 - collapseQuickQuestions(botId);
262 + if (hasQuickQuestions()) {
263 + collapseQuickQuestions();
778 264 }
779 - appendThinkingMessage(botId);
780 - scrollToBottom(botId);
265 + appendThinkingMessage();
266 + scrollToBottom();
781 267
782 - const currentModel = mxchatChat.model || 'gpt-5.6-sol';
268 + const currentModel = mxchatChat.model || 'gpt-4o';
783 269
784 270 // Check if streaming is enabled AND supported for this model
785 271 if (shouldUseStreaming(currentModel)) {
786 272 callMxChatStream(message, function(response) {
787 - // Content is final: releasing aria-busy lets the live region
788 - // announce the completed reply once (plan 67f126).
789 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message').attr('aria-busy', 'false');
790 - }, botId);
273 + $('.bot-message.temporary-message').removeClass('temporary-message');
274 + });
791 275 } else {
792 276 callMxChat(message, function(response) {
793 - replaceLastMessage("bot", response, '', [], botId);
794 - }, botId);
277 + replaceLastMessage("bot", response);
278 + });
795 279 }
796 280 }
797 281 }
798 282
799 283 // Update your existing sendMessageToChatbot function
800 -function sendMessageToChatbot(message, botId) {
801 - botId = botId || 'default';
802 - MxChatInstances.ensureSession(botId);
803 -
284 +function sendMessageToChatbot(message) {
804 285 // ADD PROMPT HOOK HERE
805 286 if (typeof customMxChatFilter === 'function') {
806 287 message = customMxChatFilter(message, "prompt");
807 288 }
808 289
809 - // Don't disable input in live agent mode - let users chat freely
810 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
811 - var isAgentMode = modeIndicator && modeIndicator.textContent === 'Live Agent';
812 - if (!isAgentMode) {
813 - disableChatInput(botId);
814 - }
290 + // Disable input while waiting for response
291 + disableChatInput();
815 292
816 - var sessionId = getChatSession(botId);
293 + var sessionId = getChatSession();
817 294
818 - if (hasQuickQuestions(botId)) {
819 - collapseQuickQuestions(botId);
295 + if (hasQuickQuestions()) {
296 + collapseQuickQuestions();
820 297 }
821 - appendThinkingMessage(botId);
822 - scrollToBottom(botId);
298 + appendThinkingMessage();
299 + scrollToBottom();
823 300
824 - const currentModel = mxchatChat.model || 'gpt-5.6-sol';
301 + const currentModel = mxchatChat.model || 'gpt-4o';
825 302
826 303 // Check if streaming is enabled AND supported for this model
827 304 if (shouldUseStreaming(currentModel)) {
828 305 callMxChatStream(message, function(response) {
829 - // Final content — release aria-busy so the reply announces once (67f126).
830 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message').attr('aria-busy', 'false');
831 - }, botId);
306 + $('.bot-message.temporary-message').removeClass('temporary-message');
307 + });
832 308 } else {
833 309 callMxChat(message, function(response) {
834 - getElement(botId, 'chat-box').find('.temporary-message').remove();
835 - replaceLastMessage("bot", response, '', [], botId);
836 - }, botId);
310 + $('.temporary-message').remove();
311 + replaceLastMessage("bot", response);
312 + });
837 313 }
838 314 }
839 315
840 316 // Updated shouldUseStreaming function with debugging
@@ -877,72 +353,40 @@
877 353 updateChatModeIndicator('agent');
878 354 }
879 355 }
880 356
881 -// Function to get bot ID from any element or wrapper
882 -// If element is provided, finds the bot ID from its wrapper
883 -// If no element, returns 'default' (for backward compatibility)
884 -function getMxChatBotId(element) {
885 - if (element) {
886 - return getBotIdFromElement(element);
887 - }
888 - // Fallback: find first chatbot wrapper on page
889 - const chatbotWrapper = document.querySelector('.mxchat-chatbot-wrapper');
357 +//Function to get bot ID from the chatbot wrapper
358 +function getMxChatBotId() {
359 + const chatbotWrapper = document.getElementById('mxchat-chatbot-wrapper');
890 360 return chatbotWrapper ? chatbotWrapper.getAttribute('data-bot-id') || 'default' : 'default';
891 361 }
892 362
893 -function callMxChat(message, callback, botId) {
894 - botId = botId || getMxChatBotId();
895 -
896 - // Streaming fallbacks land here: drop any leftover stream handle and
897 - // return the button to its send state (no-op for plain non-stream turns).
898 - if (mxchatActiveStreams[botId]) {
899 - delete mxchatActiveStreams[botId];
900 - }
901 - mxchatRestoreSendButton(botId);
902 -
363 +function callMxChat(message, callback) {
903 364 // Store the message in case we need to retry after session reset
904 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', message);
365 + $('.mxchat-input-holder textarea').data('pending-message', message);
905 366
906 367 // Get page context if contextual awareness is enabled
907 368 const pageContext = getPageContext();
908 369
909 - // Get instance for session start timestamp (used when persistence is OFF)
910 - var instance = MxChatInstances.get(botId);
370 + // Get bot ID
371 + const botId = getMxChatBotId();
911 372
912 - // Guarantee a non-null session_id before the AJAX leaves. ensureSession() is idempotent
913 - // and returns the guaranteed-present session id from the in-memory instance even when
914 - // cookie/localStorage writes are silently blocked by the browser.
915 - var sessionId = MxChatInstances.ensureSession(botId);
916 - if (!sessionId || sessionId === 'null' || sessionId === 'undefined') {
917 - // Last-resort generation to ensure we never POST a null marker.
918 - sessionId = generateSessionId();
919 - MxChatInstances.setChatSession(botId, sessionId);
920 - }
921 -
922 - // Wait for the page-cache nonce refresh to complete before firing the
923 - // chat-send AJAX. On cached pages the inline mxchatChat.nonce is stale
924 - // until refreshNonceIfNeeded() returns; constructing ajaxData inside the
925 - // callback guarantees we read the fresh value. See plan-c5457f.
926 - refreshNonceIfNeeded(function() {
927 373 // Prepare AJAX data
928 374 const ajaxData = {
929 375 action: 'mxchat_handle_chat_request',
930 376 message: message,
931 - session_id: sessionId,
377 + session_id: getChatSession(),
932 378 nonce: mxchatChat.nonce,
933 379 current_page_url: window.location.href,
934 380 current_page_title: document.title,
935 - bot_id: botId,
936 - // Pass session start timestamp so AI context matches what user sees
937 - session_start_timestamp: instance.sessionStartTimestamp || 0
381 + bot_id: botId // Include bot ID
938 382 };
939 -
383 +
940 384 // Add page context if available
941 385 if (pageContext) {
942 386 ajaxData.page_context = JSON.stringify(pageContext);
943 387 }
944 -
388 +
945 389 // CHECK FOR VISION FLAGS AND ADD THEM
946 390 if (window.mxchatVisionProcessed) {
947 391 ajaxData.vision_processed = true;
948 392 ajaxData.original_user_message = window.mxchatOriginalMessage || message;
@@ -951,9 +395,9 @@
951 395 window.mxchatVisionProcessed = false;
952 396 window.mxchatOriginalMessage = null;
953 397 window.mxchatVisionImagesCount = 0;
954 398 }
955 -
399 +
956 400 $.ajax({
957 401 url: mxchatChat.ajax_url,
958 402 type: 'POST',
959 403 dataType: 'json',
@@ -960,14 +404,14 @@
960 404 data: ajaxData,
961 405 success: function(response) {
962 406 // IMMEDIATE CHAT MODE UPDATE - This should be FIRST
963 407 if (response.chat_mode) {
964 - updateChatModeIndicator(response.chat_mode, botId);
408 + updateChatModeIndicator(response.chat_mode);
965 409 }
966 410
967 411 // Also check in data property if response is wrapped
968 412 if (response.data && response.data.chat_mode) {
969 - updateChatModeIndicator(response.data.chat_mode, botId);
413 + updateChatModeIndicator(response.data.chat_mode);
970 414 }
971 415
972 416 // SECURITY FIX: Check for errors FIRST before checking for success
973 417 // This ensures API errors (quota exceeded, invalid key, rate limit) are properly displayed
@@ -991,25 +435,31 @@
991 435 errorMessage = "An error occurred. Please try again or contact support.";
992 436 }
993 437
994 438 // Handle session reset action (IP changed, session expired, etc.)
995 - // Silent reset — keep chat UI intact, just get a new session and retry
996 439 if (response.data && response.data.action === 'reset_session') {
997 - MxChatInstances.silentResetSession(botId);
998 - // Re-send the original message with the new session (user message is already displayed)
999 - var originalMessage = getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message');
440 + // Clear the old session and generate a new one
441 + resetChatSession();
442 + // Remove the temporary loading message
443 + $('.bot-message.temporary-message').remove();
444 + // Re-send the original message with the new session
445 + var originalMessage = $('.mxchat-input-holder textarea').data('pending-message');
1000 446 if (originalMessage) {
1001 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', null);
1002 - var currentModel = mxchatChat.model || 'gpt-5.6-sol';
447 + $('.mxchat-input-holder textarea').data('pending-message', null);
448 + // Re-add the user message and thinking indicator
449 + appendMessage("user", originalMessage);
450 + appendThinkingMessage();
451 + scrollToBottom();
452 + // Determine whether to use streaming
453 + const currentModel = mxchatChat.model || 'gpt-4o';
1003 454 if (shouldUseStreaming(currentModel)) {
1004 455 callMxChatStream(originalMessage, function(response) {
1005 - // Final content — release aria-busy so the reply announces once (67f126).
1006 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message').attr('aria-busy', 'false');
1007 - }, botId);
456 + $('.bot-message.temporary-message').removeClass('temporary-message');
457 + });
1008 458 } else {
1009 459 callMxChat(originalMessage, function(response) {
1010 - replaceLastMessage("bot", response, '', [], botId);
1011 - }, botId);
460 + replaceLastMessage("bot", response);
461 + });
1012 462 }
1013 463 }
1014 464 return;
1015 465 }
@@ -1022,9 +472,9 @@
1022 472 // For admin users, show more technical details including error code
1023 473 displayMessage = errorMessage + (errorCode ? " (Error code: " + errorCode + ")" : "");
1024 474 }
1025 475
1026 - replaceLastMessage("bot", displayMessage, '', [], botId);
476 + replaceLastMessage("bot", displayMessage);
1027 477 return; // Exit early for errors
1028 478 }
1029 479
1030 480 // NOW check if this is a successful response by looking for text, html, or message fields
@@ -1040,17 +490,16 @@
1040 490 let responseMessage = response.message || '';
1041 491
1042 492 // Add PDF filename handling
1043 493 if (response.data && response.data.filename) {
1044 - showActivePdf(response.data.filename, botId);
1045 - var instance = MxChatInstances.get(botId);
1046 - instance.activePdfFile = response.data.filename;
494 + showActivePdf(response.data.filename);
495 + activePdfFile = response.data.filename;
1047 496 }
1048 497
1049 498 // Add redirect check here
1050 499 if (response.redirect_url) {
1051 500 if (responseText) {
1052 - replaceLastMessage("bot", responseText, '', [], botId);
501 + replaceLastMessage("bot", responseText);
1053 502 }
1054 503 setTimeout(() => {
1055 504 window.location.href = response.redirect_url;
1056 505 }, 1500);
@@ -1058,11 +507,9 @@
1058 507 }
1059 508
1060 509 // Check for live agent response
1061 510 if (response.success && response.data && response.data.status === 'waiting_for_agent') {
1062 - removeThinkingDots(botId);
1063 - updateChatModeIndicator('agent', botId);
1064 - enableChatInput(botId);
511 + updateChatModeIndicator('agent');
1065 512 return;
1066 513 }
1067 514
1068 515 // Handle the message and show notification if chat is hidden
@@ -1077,36 +524,30 @@
1077 524 }
1078 525
1079 526 // Update the messages as before
1080 527 if (responseText && responseHtml) {
1081 - replaceLastMessage("bot", responseText, responseHtml, [], botId);
528 + replaceLastMessage("bot", responseText, responseHtml);
1082 529 } else if (responseText) {
1083 - replaceLastMessage("bot", responseText, '', [], botId);
530 + replaceLastMessage("bot", responseText);
1084 531 } else if (responseHtml) {
1085 - replaceLastMessage("bot", "", responseHtml, [], botId);
532 + replaceLastMessage("bot", "", responseHtml);
1086 533 } else if (responseMessage) {
1087 - replaceLastMessage("bot", responseMessage, '', [], botId);
534 + replaceLastMessage("bot", responseMessage);
1088 535 }
1089 536
1090 537 // Check if chat is hidden and show notification
1091 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
1092 - if ($floatingChatbot.hasClass('hidden')) {
1093 - var $badge = getElement(botId, 'chat-notification-badge');
1094 - if ($badge.length) {
1095 - $badge.show();
538 + if ($('#floating-chatbot').hasClass('hidden')) {
539 + const badge = $('#chat-notification-badge');
540 + if (badge.length) {
541 + badge.show();
1096 542 }
1097 543 }
1098 544 } else {
1099 - var emptyMsg = "I received an empty response. Please try again or contact support if this persists.";
1100 - if (response.vectorstore_error) {
1101 - emptyMsg = "I received an empty response. Debug info: " + response.vectorstore_error;
1102 - }
1103 - replaceLastMessage("bot", emptyMsg, '', [], botId);
545 + replaceLastMessage("bot", "I received an empty response. Please try again or contact support if this persists.");
1104 546 }
1105 547
1106 548 if (response.message_id) {
1107 - var instance = MxChatInstances.get(botId);
1108 - instance.lastSeenMessageId = response.message_id;
549 + lastSeenMessageId = response.message_id;
1109 550 }
1110 551
1111 552 return;
1112 553 }
@@ -1111,9 +552,9 @@
1111 552 return;
1112 553 }
1113 554
1114 555 // Fallback for truly unexpected response formats
1115 - replaceLastMessage("bot", "Unexpected response format. Please try again or contact support.", '', [], botId);
556 + replaceLastMessage("bot", "Unexpected response format. Please try again or contact support.");
1116 557 },
1117 558 error: function(xhr, status, error) {
1118 559 let errorMessage = "An unexpected error occurred.";
1119 560
@@ -1140,56 +581,38 @@
1140 581 errorMessage = "Server error: The server encountered an issue. Please try again later.";
1141 582 }
1142 583 }
1143 584
1144 - replaceLastMessage("bot", errorMessage, '', [], botId);
585 + replaceLastMessage("bot", errorMessage);
1145 586 }
1146 587 });
1147 - }); // refreshNonceIfNeeded
1148 588 }
1149 589
1150 -function callMxChatStream(message, callback, botId) {
1151 - botId = botId || getMxChatBotId();
1152 -
590 +function callMxChatStream(message, callback) {
1153 591 // Store the message in case we need to retry after session reset
1154 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', message);
592 + $('.mxchat-input-holder textarea').data('pending-message', message);
1155 593
1156 - const currentModel = mxchatChat.model || 'gpt-5.6-sol';
594 + const currentModel = mxchatChat.model || 'gpt-4o';
1157 595 if (!isStreamingSupported(currentModel)) {
1158 - callMxChat(message, callback, botId);
596 + callMxChat(message, callback);
1159 597 return;
1160 598 }
1161 599
1162 600 // Get page context if contextual awareness is enabled
1163 601 const pageContext = getPageContext();
602 +
603 + // Get bot ID
604 + const botId = getMxChatBotId();
1164 605
1165 - // Get instance for session start timestamp (used when persistence is OFF)
1166 - var instance = MxChatInstances.get(botId);
1167 -
1168 - // Guarantee a non-null session_id before the fetch. FormData.append() stringifies any
1169 - // non-string value via String(), so passing `null` would POST the literal string "null"
1170 - // and land in the transcripts table as a ghost session. ensureSession() always returns
1171 - // a real string even when cookies/localStorage are blocked.
1172 - var streamSessionId = MxChatInstances.ensureSession(botId);
1173 - if (!streamSessionId || streamSessionId === 'null' || streamSessionId === 'undefined') {
1174 - streamSessionId = generateSessionId();
1175 - MxChatInstances.setChatSession(botId, streamSessionId);
1176 - }
1177 -
1178 - // Wait for the page-cache nonce refresh before constructing formData (which
1179 - // captures mxchatChat.nonce by value). Mirrors callMxChat's wrapping. See plan-c5457f.
1180 - refreshNonceIfNeeded(function() {
1181 606 const formData = new FormData();
1182 607 formData.append('action', 'mxchat_stream_chat');
1183 608 formData.append('message', message);
1184 - formData.append('session_id', streamSessionId);
609 + formData.append('session_id', getChatSession());
1185 610 formData.append('nonce', mxchatChat.nonce);
1186 611 formData.append('current_page_url', window.location.href);
1187 612 formData.append('current_page_title', document.title);
1188 - formData.append('bot_id', botId);
1189 - // Pass session start timestamp so AI context matches what user sees
1190 - formData.append('session_start_timestamp', instance.sessionStartTimestamp || 0);
1191 -
613 + formData.append('bot_id', botId); // Include bot ID
614 +
1192 615 // Add page context if available
1193 616 if (pageContext) {
1194 617 formData.append('page_context', JSON.stringify(pageContext));
1195 618 }
@@ -1207,25 +630,13 @@
1207 630
1208 631 let accumulatedContent = '';
1209 632 let testingDataReceived = false;
1210 633 let streamingStarted = false;
1211 - // Server-pushed html to append as its OWN bot bubble once the stream
1212 - // finishes (e.g. the consent-safe YouTube embed, plan 03ba33). Rendering is
1213 - // deferred to [DONE] so the embed always lands BELOW the streamed text.
1214 - let pendingAppendHtml = '';
1215 634
1216 - // Abortable stream: a fresh controller per turn, keyed by bot instance.
1217 - // The Stop control (send button swapped in place) aborts both the read
1218 - // loop and the underlying request.
1219 - var streamControl = { controller: new AbortController(), aborted: false };
1220 - mxchatActiveStreams[botId] = streamControl;
1221 - mxchatShowStopButton(botId);
1222 -
1223 635 fetch(mxchatChat.ajax_url, {
1224 636 method: 'POST',
1225 637 body: formData,
1226 - credentials: 'same-origin',
1227 - signal: streamControl.controller.signal
638 + credentials: 'same-origin'
1228 639 })
1229 640 .then(response => {
1230 641 // Store the response for potential fallback handling
1231 642 const responseClone = response.clone();
@@ -1244,9 +655,9 @@
1244 655 if (contentType && contentType.includes('application/json')) {
1245 656 return responseClone.json().then(data => {
1246 657 // IMMEDIATE CHAT MODE UPDATE for JSON response
1247 658 if (data.chat_mode) {
1248 - updateChatModeIndicator(data.chat_mode, botId);
659 + updateChatModeIndicator(data.chat_mode);
1249 660 }
1250 661
1251 662 // Check for testing panel
1252 663 if (window.mxchatTestPanelInstance && data.testing_data) {
@@ -1253,9 +664,9 @@
1253 664 window.mxchatTestPanelInstance.handleTestingData(data.testing_data);
1254 665 }
1255 666
1256 667 // Handle the JSON response directly
1257 - handleNonStreamResponse(data, callback, botId);
668 + handleNonStreamResponse(data, callback);
1258 669 return Promise.resolve(); // Prevent further processing
1259 670 });
1260 671 }
1261 672
@@ -1273,37 +684,26 @@
1273 684 responseClone.text().then(text => {
1274 685 try {
1275 686 const data = JSON.parse(text);
1276 687 if (data.text || data.message || data.html) {
1277 - handleNonStreamResponse(data, callback, botId);
688 + handleNonStreamResponse(data, callback);
1278 689 } else {
1279 690 // No valid data, fall back to regular call
1280 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1281 - callMxChat(message, callback, botId);
691 + $('.bot-message.temporary-message').remove();
692 + callMxChat(message, callback);
1282 693 }
1283 694 } catch (e) {
1284 695 // Could not parse, fall back to regular call
1285 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1286 - callMxChat(message, callback, botId);
696 + $('.bot-message.temporary-message').remove();
697 + callMxChat(message, callback);
1287 698 }
1288 699 }).catch(() => {
1289 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1290 - callMxChat(message, callback, botId);
700 + $('.bot-message.temporary-message').remove();
701 + callMxChat(message, callback);
1291 702 });
1292 703 return;
1293 704 }
1294 -
1295 - // Re-enable chat input when stream ends with content
1296 - enableChatInput(botId);
1297 -
1298 - // Scroll the user's last message to the top now that the
1299 - // bot's full reply has rendered (gives max reading room).
1300 - var $chatBoxDone = getElement(botId, 'chat-box');
1301 - var $lastUserMsgDone = $chatBoxDone.find('.user-message').last();
1302 - if ($lastUserMsgDone.length) {
1303 - scrollElementToTop($lastUserMsgDone, botId);
1304 - }
1305 -
705 +
1306 706 if (callback) {
1307 707 callback(accumulatedContent);
1308 708 }
1309 709 return;
@@ -1318,33 +718,16 @@
1318 718 const data = line.substring(6);
1319 719
1320 720 if (data === '[DONE]') {
1321 721 if (!accumulatedContent) {
1322 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1323 - callMxChat(message, callback, botId);
722 + $('.bot-message.temporary-message').remove();
723 + callMxChat(message, callback);
1324 724 return;
1325 725 }
1326 726
1327 727 // Re-enable chat input after streaming completes
1328 - enableChatInput(botId);
728 + enableChatInput();
1329 729
1330 - // Render any server-pushed appendix html (e.g. the
1331 - // YouTube embed) as its own bot bubble below the
1332 - // streamed text — mirrors how it is saved in the
1333 - // transcript, so history replays identically.
1334 - if (pendingAppendHtml) {
1335 - appendMessage("bot", "", pendingAppendHtml, [], false, botId);
1336 - pendingAppendHtml = '';
1337 - }
1338 -
1339 - // Scroll the user's last message to the top now
1340 - // that the bot's full reply has rendered.
1341 - var $chatBoxStreamDone = getElement(botId, 'chat-box');
1342 - var $lastUserMsgStreamDone = $chatBoxStreamDone.find('.user-message').last();
1343 - if ($lastUserMsgStreamDone.length) {
1344 - scrollElementToTop($lastUserMsgStreamDone, botId);
1345 - }
1346 -
1347 730 if (callback) {
1348 731 callback(accumulatedContent);
1349 732 }
1350 733 return;
@@ -1354,9 +737,9 @@
1354 737 const json = JSON.parse(data);
1355 738
1356 739 // IMMEDIATE CHAT MODE UPDATE FOR STREAMING
1357 740 if (json.chat_mode) {
1358 - updateChatModeIndicator(json.chat_mode, botId);
741 + updateChatModeIndicator(json.chat_mode);
1359 742 }
1360 743
1361 744 // Handle testing data
1362 745 if (json.testing_data && !testingDataReceived) {
@@ -1368,26 +751,13 @@
1368 751 // Handle content streaming
1369 752 else if (json.content) {
1370 753 streamingStarted = true;
1371 754 accumulatedContent += json.content;
1372 - updateStreamingMessage(accumulatedContent, botId);
755 + updateStreamingMessage(accumulatedContent);
1373 756 }
1374 - // Stash appendix html (e.g. video embed) for [DONE]
1375 - else if (json.append_html) {
1376 - pendingAppendHtml = json.append_html;
1377 - }
1378 - // Server-side final pass changed the assembled text
1379 - // (ffef6f: dead-link stripping) — swap the rendered
1380 - // bubble for the validated version. Arrives at most
1381 - // once, just before [DONE].
1382 - else if (json.replace_content) {
1383 - streamingStarted = true;
1384 - accumulatedContent = json.replace_content;
1385 - updateStreamingMessage(accumulatedContent, botId);
1386 - }
1387 757 // Handle complete response in stream (fallback response)
1388 758 else if (json.text || json.message || json.html) {
1389 - handleNonStreamResponse(json, callback, botId);
759 + handleNonStreamResponse(json, callback);
1390 760 return;
1391 761 }
1392 762 // Handle errors
1393 763 else if (json.error) {
@@ -1396,12 +766,12 @@
1396 766 let errorMessage = json.error_message || json.message || json.text ||
1397 767 (typeof json.error === 'string' ? json.error : 'An error occurred. Please try again.');
1398 768
1399 769 // Re-enable chat input on error
1400 - enableChatInput(botId);
770 + enableChatInput();
1401 771
1402 772 // Display the error directly in the chat
1403 - replaceLastMessage("bot", errorMessage, '', [], botId);
773 + replaceLastMessage("bot", errorMessage);
1404 774
1405 775 if (callback) {
1406 776 callback(errorMessage);
1407 777 }
@@ -1414,11 +784,10 @@
1414 784 }
1415 785
1416 786 processStream();
1417 787 }).catch(streamError => {
1418 - if (mxchatHandleStreamAbort(botId, accumulatedContent, callback)) return;
1419 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1420 - callMxChat(message, callback, botId);
788 + $('.bot-message.temporary-message').remove();
789 + callMxChat(message, callback);
1421 790 });
1422 791 }
1423 792
1424 793 processStream();
@@ -1423,38 +792,34 @@
1423 792
1424 793 processStream();
1425 794 })
1426 795 .catch(error => {
1427 - if (mxchatHandleStreamAbort(botId, accumulatedContent, callback)) return;
1428 796 // Check if we have server error data with chat mode
1429 797 if (error && error.isServerError && error.data) {
1430 798 // Check for chat mode in error data
1431 799 if (error.data.chat_mode) {
1432 - updateChatModeIndicator(error.data.chat_mode, botId);
800 + updateChatModeIndicator(error.data.chat_mode);
1433 801 }
1434 802
1435 - handleNonStreamResponse(error.data, callback, botId);
803 + handleNonStreamResponse(error.data, callback);
1436 804 } else {
1437 805 // Only fall back to regular call if we don't have any response data
1438 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1439 - callMxChat(message, callback, botId);
806 + $('.bot-message.temporary-message').remove();
807 + callMxChat(message, callback);
1440 808 }
1441 809 });
1442 - }); // refreshNonceIfNeeded
1443 810 }
1444 811
1445 812 // Helper function to handle non-streaming responses
1446 -function handleNonStreamResponse(data, callback, botId) {
1447 - botId = botId || 'default';
1448 -
813 +function handleNonStreamResponse(data, callback) {
1449 814 // IMMEDIATE CHAT MODE UPDATE FOR NON-STREAMING RESPONSES
1450 815 if (data.chat_mode) {
1451 - updateChatModeIndicator(data.chat_mode, botId);
816 + updateChatModeIndicator(data.chat_mode);
1452 817 }
1453 818
1454 819 // Also check in data property if response is wrapped
1455 820 if (data.data && data.data.chat_mode) {
1456 - updateChatModeIndicator(data.data.chat_mode, botId);
821 + updateChatModeIndicator(data.data.chat_mode);
1457 822 }
1458 823
1459 824 // NOTE: Don't remove temporary message here - let replaceLastMessage handle it
1460 825 // This prevents a visual gap between thinking dots disappearing and content appearing
@@ -1479,20 +844,25 @@
1479 844 errorMessage = "An error occurred. Please try again or contact support.";
1480 845 }
1481 846
1482 847 // Handle session reset action (IP changed, session expired, etc.)
1483 - // Silent reset — keep chat UI intact, just get a new session and retry
1484 848 if (data.data && data.data.action === 'reset_session') {
1485 - MxChatInstances.silentResetSession(botId);
1486 - // Re-send the original message with the new session (user message is already displayed)
1487 - var originalMessage = getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message');
849 + // Clear the old session and generate a new one
850 + resetChatSession();
851 + // Re-send the original message with the new session
852 + var originalMessage = $('.mxchat-input-holder textarea').data('pending-message');
1488 853 if (originalMessage) {
1489 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', null);
1490 - var currentModel = mxchatChat.model || 'gpt-5.6-sol';
854 + $('.mxchat-input-holder textarea').data('pending-message', null);
855 + // Re-add the user message and thinking indicator
856 + appendMessage("user", originalMessage);
857 + appendThinkingMessage();
858 + scrollToBottom();
859 + // Determine whether to use streaming
860 + const currentModel = mxchatChat.model || 'gpt-4o';
1491 861 if (shouldUseStreaming(currentModel)) {
1492 - callMxChatStream(originalMessage, callback, botId);
862 + callMxChatStream(originalMessage, callback);
1493 863 } else {
1494 - callMxChat(originalMessage, callback, botId);
864 + callMxChat(originalMessage, callback);
1495 865 }
1496 866 }
1497 867 return;
1498 868 }
@@ -1502,9 +872,9 @@
1502 872 if (mxchatChat.is_admin) {
1503 873 displayMessage = errorMessage + (errorCode ? " (Error code: " + errorCode + ")" : "");
1504 874 }
1505 875
1506 - replaceLastMessage("bot", displayMessage, '', [], botId);
876 + replaceLastMessage("bot", displayMessage);
1507 877
1508 878 if (callback) {
1509 879 callback('');
1510 880 }
@@ -1510,22 +880,8 @@
1510 880 }
1511 881 return; // Exit early for errors
1512 882 }
1513 883
1514 - // Check for live agent response
1515 - if (data.success && data.data && data.data.status === 'waiting_for_agent') {
1516 - removeThinkingDots(botId);
1517 - // Also remove any leftover bot-message that lost its temporary-message class
1518 - var $chatBox = getElement(botId, 'chat-box');
1519 - $chatBox.find('.bot-message .thinking-dots').closest('.bot-message').remove();
1520 - updateChatModeIndicator('agent', botId);
1521 - enableChatInput(botId);
1522 - if (callback) {
1523 - callback('');
1524 - }
1525 - return;
1526 - }
1527 -
1528 884 // Handle different response formats
1529 885 if (data.text || data.html || data.message) {
1530 886
1531 887 // Apply response hooks
@@ -1537,23 +893,22 @@
1537 893 }
1538 894
1539 895 // Display the response
1540 896 if (data.text && data.html) {
1541 - replaceLastMessage("bot", data.text, data.html, [], botId);
897 + replaceLastMessage("bot", data.text, data.html);
1542 898 } else if (data.text) {
1543 - replaceLastMessage("bot", data.text, '', [], botId);
899 + replaceLastMessage("bot", data.text);
1544 900 } else if (data.html) {
1545 - replaceLastMessage("bot", "", data.html, [], botId);
901 + replaceLastMessage("bot", "", data.html);
1546 902 } else if (data.message) {
1547 - replaceLastMessage("bot", data.message, '', [], botId);
903 + replaceLastMessage("bot", data.message);
1548 904 }
1549 905 }
1550 906
1551 907 // Handle other response properties
1552 908 if (data.data && data.data.filename) {
1553 - showActivePdf(data.data.filename, botId);
1554 - var instance = MxChatInstances.get(botId);
1555 - instance.activePdfFile = data.data.filename;
909 + showActivePdf(data.data.filename);
910 + activePdfFile = data.data.filename;
1556 911 }
1557 912
1558 913 if (data.redirect_url) {
1559 914 setTimeout(() => {
@@ -1561,9 +916,9 @@
1561 916 }, 1500);
1562 917 }
1563 918
1564 919 // Ensure chat input is re-enabled (safety net for edge cases)
1565 - enableChatInput(botId);
920 + enableChatInput();
1566 921
1567 922 if (callback) {
1568 923 callback(data.text || data.message || '');
1569 924 }
@@ -1569,22 +924,21 @@
1569 924 }
1570 925 }
1571 926
1572 927 // Enhanced updateChatModeIndicator function for immediate DOM updates
1573 -function updateChatModeIndicator(mode, botId) {
1574 - botId = botId || 'default';
1575 - const indicator = getElementDOM(botId, 'chat-mode-indicator');
928 +function updateChatModeIndicator(mode) {
929 + const indicator = document.getElementById('chat-mode-indicator');
1576 930 if (indicator) {
1577 931 const oldText = indicator.textContent;
1578 932
1579 933 if (mode === 'agent') {
1580 934 indicator.textContent = 'Live Agent';
1581 - startPolling(botId);
935 + startPolling();
1582 936 } else {
1583 937 // Everything else is AI mode
1584 938 const customAiText = indicator.getAttribute('data-ai-text') || 'AI Agent';
1585 939 indicator.textContent = customAiText;
1586 - stopPolling(botId);
940 + stopPolling();
1587 941 }
1588 942
1589 943 // Force immediate DOM update and reflow
1590 944 if (oldText !== indicator.textContent) {
@@ -1606,35 +960,25 @@
1606 960 }
1607 961 }
1608 962
1609 963 // Function to update message during streaming
1610 -function updateStreamingMessage(content, botId) {
1611 - botId = botId || 'default';
1612 -
964 +function updateStreamingMessage(content) {
1613 965 // ADD RESPONSE HOOK FOR REAL-TIME STREAMING
1614 966 if (typeof customMxChatFilter === 'function') {
1615 967 content = customMxChatFilter(content, "response");
1616 968 }
1617 -
969 +
1618 970 const formattedContent = linkify(content);
1619 971
1620 - // Find the temporary message in this bot's chat box
1621 - var $chatBox = getElement(botId, 'chat-box');
1622 - const tempMessage = $chatBox.find('.bot-message.temporary-message').last();
972 + // Find the temporary message
973 + const tempMessage = $('.bot-message.temporary-message').last();
1623 974
1624 975 if (tempMessage.length) {
1625 - // aria-busy=true for the whole stream: the bubble is rewritten on
1626 - // every chunk, and without busy a polite live region announces those
1627 - // rewrites continuously. Flipped false once the reply is final, so
1628 - // assistive tech announces the completed message ONCE (plan 67f126).
1629 - if (tempMessage.attr('aria-busy') !== 'true') {
1630 - tempMessage.attr('aria-busy', 'true');
1631 - }
1632 976 // Update existing message
1633 977 tempMessage.html(formattedContent);
1634 978 } else {
1635 979 // Create new temporary message if it doesn't exist
1636 - appendMessage("bot", content, '', [], true, botId);
980 + appendMessage("bot", content, '', [], true);
1637 981 }
1638 982 }
1639 983
1640 984 function isStreamingSupported(model) {
@@ -1653,403 +997,24 @@
1653 997 return isSupported;
1654 998 }
1655 999
1656 1000 // Update the event handlers to use the correct function names (using event delegation)
1657 -// Use class-based selectors for multi-instance support
1658 -$(document).on('click', '.send-button', function() {
1659 - var botId = getBotIdFromElement(this);
1660 - // While a response is streaming the button is a Stop control.
1661 - if (this.classList.contains('mxchat-stop-mode')) {
1662 - // Same click that just started this stream (an add-on's direct handler
1663 - // ran before this delegated one) — not a Stop press. See
1664 - // mxchatShowStopButton for the full story (plan-4bba64).
1665 - if (this.__mxchatStopJustShown) return;
1666 - mxchatStopStreaming(botId);
1667 - return;
1668 - }
1669 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
1670 - if (!(modeIndicator && modeIndicator.textContent === 'Live Agent')) {
1671 - disableChatInput(botId);
1672 - }
1673 - sendMessage(botId);
1001 +$(document).on('click', '#send-button', function() {
1002 + disableChatInput();
1003 + sendMessage();
1674 1004 });
1675 1005
1676 1006 // Override enter key handler (using event delegation)
1677 -$(document).on('keypress', '.chat-input', function(e) {
1007 +$(document).on('keypress', '#chat-input', function(e) {
1678 1008 if (e.which == 13 && !e.shiftKey) {
1679 1009 e.preventDefault();
1680 - var botId = getBotIdFromElement(this);
1681 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
1682 - if (!(modeIndicator && modeIndicator.textContent === 'Live Agent')) {
1683 - disableChatInput(botId);
1684 - }
1685 - sendMessage(botId);
1010 + disableChatInput();
1011 + sendMessage();
1686 1012 }
1687 1013 });
1688 1014
1689 -// Chat input character counter + soft limit feedback (plan 7091a2).
1690 -// Language-neutral: numbers + color only, no translatable strings. The counter
1691 -// reveals near the cap and ramps neutral -> amber -> red; an over-limit keystroke
1692 -// or trimmed paste produces a brief border-flash/shake so the maxlength cap (plan
1693 -// a3fae2) is never a silent "input jumps back". Per-bot scoped via .input-container.
1694 -function mxchatUpdateCharCounter(inputEl) {
1695 - if (!inputEl || !inputEl.closest) return;
1696 - var max = parseInt(inputEl.getAttribute('maxlength'), 10);
1697 - var container = inputEl.closest('.input-container');
1698 - if (!container || !max || max <= 0) return;
1699 - var counter = container.querySelector('.mxchat-char-counter');
1700 - if (!counter) return;
1701 - var len = inputEl.value.length;
1702 - var ratio = len / max;
1703 - var nearThreshold = 0.8; // start surfacing the counter at 80% of the cap
1704 - var cur = counter.querySelector('.mxchat-char-counter-current');
1705 - if (cur) cur.textContent = len;
1706 - var warn = ratio >= nearThreshold && len < max;
1707 - var full = len >= max;
1708 - counter.classList.toggle('is-visible', ratio >= nearThreshold);
1709 - counter.classList.toggle('is-warn', warn);
1710 - counter.classList.toggle('is-full', full);
1711 - container.classList.toggle('mxchat-input-near-limit', warn);
1712 - container.classList.toggle('mxchat-input-at-limit', full);
1713 -}
1714 -
1715 -function mxchatBumpInput(inputEl) {
1716 - var container = inputEl && inputEl.closest ? inputEl.closest('.input-container') : null;
1717 - if (!container) return;
1718 - container.classList.remove('mxchat-input-bump');
1719 - void container.offsetWidth; // reflow so a rapid second hit retriggers the animation
1720 - container.classList.add('mxchat-input-bump');
1721 - clearTimeout($(container).data('mxchatBumpTimeout'));
1722 - var t = setTimeout(function() { container.classList.remove('mxchat-input-bump'); }, 220);
1723 - $(container).data('mxchatBumpTimeout', t);
1724 -}
1725 -
1726 -// Live counter update on every input.
1727 -$(document).on('input', '.chat-input', function() {
1728 - mxchatUpdateCharCounter(this);
1729 -});
1730 -
1731 -// Visible "you've hit the edge" feedback when a printable keystroke is about to be
1732 -// rejected at the cap (maxlength silently swallows it otherwise).
1733 -$(document).on('keydown', '.chat-input', function(e) {
1734 - var max = parseInt(this.getAttribute('maxlength'), 10);
1735 - if (!max || max <= 0 || this.value.length < max) return;
1736 - if (e.ctrlKey || e.metaKey || e.altKey) return;
1737 - // A single printable char with no selection to overwrite WILL be rejected.
1738 - if (e.key && e.key.length === 1 && this.selectionStart === this.selectionEnd) {
1739 - mxchatBumpInput(this);
1740 - }
1741 -});
1742 -
1743 -// A paste that gets trimmed to the cap also bumps, so truncation is never silent.
1744 -$(document).on('paste', '.chat-input', function() {
1745 - var el = this;
1746 - var max = parseInt(el.getAttribute('maxlength'), 10);
1747 - if (!max || max <= 0) return;
1748 - setTimeout(function() {
1749 - mxchatUpdateCharCounter(el);
1750 - if (el.value.length >= max) mxchatBumpInput(el);
1751 - }, 0);
1752 -});
1753 -
1754 -// Builds the list of overflow-menu items for a given bot.
1755 -// Adding a future item is one push to this array — do NOT hardcode "only download."
1756 -function mxchatGetHeaderMenuItems(botId) {
1757 - var items = [];
1758 - var settings = (typeof mxchatChat !== 'undefined') ? mxchatChat : {};
1759 -
1760 - // The `print_button_*` keys still gate this item for back-compat with
1761 - // existing user options. The action is now a transcript download, not print.
1762 - if (settings.print_button_enabled === 'on') {
1763 - items.push({
1764 - id: 'download-transcript',
1765 - label: settings.print_button_label || 'Download Transcript',
1766 - 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>',
1767 - action: function() {
1768 - mxchatDownloadTranscript(botId);
1769 - }
1770 - });
1771 - }
1772 -
1773 - // "Start new chat" — surfaces the EXISTING per-conversation reset
1774 - // (MxChatInstances.resetChatSession) so a visitor can start a fresh thread
1775 - // without the site owner disabling chat persistence globally. Default OFF;
1776 - // gated by the reset_chat_enabled option. plan ac2e81.
1777 - if (settings.reset_chat_enabled === 'on') {
1778 - items.push({
1779 - id: 'reset-chat',
1780 - label: settings.reset_chat_label || 'Start new chat',
1781 - 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"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>',
1782 - action: function() {
1783 - var confirmMsg = settings.reset_chat_confirm || 'Start a new chat? This clears the current conversation.';
1784 - if (window.confirm(confirmMsg)) {
1785 - MxChatInstances.resetChatSession(botId);
1786 - }
1787 - }
1788 - });
1789 - }
1790 -
1791 - return items;
1792 -}
1793 -
1794 -// Builds a clean markdown transcript of the current conversation and triggers
1795 -// a file download. Used by the "Download Transcript" menu item.
1796 -function mxchatDownloadTranscript(botId) {
1797 - var $chatBox = getElement(botId, 'chat-box');
1798 - if (!$chatBox || !$chatBox.length) return;
1799 -
1800 - var settings = (typeof mxchatChat !== 'undefined') ? mxchatChat : {};
1801 - var headerTitle = settings.print_header_title || 'Chat transcript';
1802 - var now = new Date();
1803 - var stamp = now.toLocaleString();
1804 -
1805 - var lines = [];
1806 - lines.push('# ' + headerTitle);
1807 - lines.push('');
1808 - lines.push('Exported: ' + stamp);
1809 - lines.push('');
1810 - lines.push('---');
1811 - lines.push('');
1812 -
1813 - $chatBox.find('.user-message, .bot-message, .agent-message').each(function() {
1814 - var $msg = $(this);
1815 - // Skip thinking placeholders and any in-flight temporary messages.
1816 - if ($msg.find('.thinking-dots').length) return;
1817 - if ($msg.hasClass('temporary-message')) return;
1818 -
1819 - var sender;
1820 - if ($msg.hasClass('user-message')) sender = 'User';
1821 - else if ($msg.hasClass('agent-message')) sender = 'Live Agent';
1822 - else sender = 'AI Agent';
1823 -
1824 - // Strip interactive UI from the cloned message so we get the conversation text.
1825 - var $clone = $msg.clone();
1826 - $clone.find('.copy-button, .message-toolbar, .mxchat-copy, button, script, style').remove();
1827 - var text = $clone.text().replace(/ /g, ' ').replace(/[ \t]+\n/g, '\n').replace(/\n{3,}/g, '\n\n').trim();
1828 - if (!text) return;
1829 -
1830 - lines.push('**' + sender + '**');
1831 - lines.push('');
1832 - lines.push(text);
1833 - lines.push('');
1834 - });
1835 -
1836 - var content = lines.join('\n');
1837 - var iso = now.toISOString().replace(/[:.]/g, '-').slice(0, 19);
1838 - var fname = 'mxchat-transcript-' + iso + '.md';
1839 - var blob = new Blob([content], { type: 'text/markdown;charset=utf-8' });
1840 - var url = URL.createObjectURL(blob);
1841 - var a = document.createElement('a');
1842 - a.href = url;
1843 - a.download = fname;
1844 - a.style.display = 'none';
1845 - document.body.appendChild(a);
1846 - a.click();
1847 - setTimeout(function() {
1848 - if (a.parentNode) a.parentNode.removeChild(a);
1849 - URL.revokeObjectURL(url);
1850 - }, 100);
1851 -}
1852 -
1853 -// Reads the bot bubble's actual computed bg+fg and writes them as CSS vars
1854 -// on the menu wrap, so the dropdown matches whatever paints the bubble —
1855 -// saved options, AI theme CSS, or the mxchat-theme add-on.
1856 -function mxchatSyncMenuColors(botId, $wrap) {
1857 - if (!$wrap || !$wrap.length) return;
1858 - var $bot = $wrap.closest('.mxchat-chatbot-wrapper').find('.bot-message').not('.temporary-message').first();
1859 - if (!$bot.length) return;
1860 - var cs = window.getComputedStyle($bot[0]);
1861 - if (cs.backgroundColor && cs.backgroundColor !== 'rgba(0, 0, 0, 0)' && cs.backgroundColor !== 'transparent') {
1862 - $wrap[0].style.setProperty('--mxchat-menu-bg', cs.backgroundColor);
1863 - }
1864 - // Bot text color usually lives on a child div, not .bot-message itself.
1865 - var $textChild = $bot.find('[style*="color"]').first();
1866 - var fg = ($textChild.length ? window.getComputedStyle($textChild[0]).color : cs.color);
1867 - if (fg) $wrap[0].style.setProperty('--mxchat-menu-fg', fg);
1868 -}
1869 -
1870 -// Renders (or re-renders) the item list for one menu wrap. Split out of
1871 -// mxchatInitHeaderMenu so the dynamic-settings merge (plan-32db95) can
1872 -// rebuild items + trigger visibility WITHOUT re-binding the one-time
1873 -// open/close/keyboard wiring. closeMenu is passed in by the init closure;
1874 -// a rebuild before init (never happens, but harmless) just skips it.
1875 -function mxchatRenderHeaderMenuItems(botId, $wrap, closeMenuFn) {
1876 - var $trigger = $wrap.find('.mxchat-menu-trigger');
1877 - var $menu = $wrap.find('.mxchat-header-menu');
1878 - var items = mxchatGetHeaderMenuItems(botId);
1879 -
1880 - $menu.empty();
1881 -
1882 - if (!items.length) {
1883 - $trigger.hide();
1884 - $menu.hide();
1885 - return;
1886 - }
1887 -
1888 - // Clear any inline display:none a previous zero-item render left behind —
1889 - // open/close visibility is governed by the hidden prop + is-open class.
1890 - $trigger.css('display', '');
1891 - $menu.css('display', '');
1892 -
1893 - items.forEach(function(item, idx) {
1894 - var $btn = $('<button>', {
1895 - type: 'button',
1896 - 'class': 'mxchat-menu-item',
1897 - 'role': 'menuitem',
1898 - 'tabindex': '-1',
1899 - 'data-menu-id': item.id,
1900 - html: '<span class="mxchat-menu-item-icon">' + item.icon + '</span>' +
1901 - '<span class="mxchat-menu-item-label"></span>'
1902 - });
1903 - $btn.find('.mxchat-menu-item-label').text(item.label);
1904 - $btn.on('click', function(e) {
1905 - e.preventDefault();
1906 - e.stopPropagation();
1907 - if (closeMenuFn) closeMenuFn();
1908 - try { item.action(); } catch (err) { /* no-op */ }
1909 - });
1910 - $menu.append($btn);
1911 - });
1912 -}
1913 -
1914 -// Re-render every menu on the page after a dynamic-settings merge
1915 -// (multi-bot: each wrap re-reads its items). An OPEN menu is left alone —
1916 -// swapping items under the user mid-interaction yanks focus — and the
1917 -// rebuild runs when it closes instead (closeMenu checks the pending flag).
1918 -function mxchatRebuildHeaderMenus() {
1919 - $('.mxchat-header-menu-wrap').each(function() {
1920 - var $wrap = $(this);
1921 - var botId = $wrap.data('bot-id');
1922 - if (!botId) return;
1923 - if (!$wrap.data('mxchatMenuReady')) {
1924 - mxchatInitHeaderMenu(botId);
1925 - return;
1926 - }
1927 - if ($wrap.find('.mxchat-header-menu').hasClass('is-open')) {
1928 - $wrap.data('mxchatMenuRebuildPending', true);
1929 - return;
1930 - }
1931 - mxchatRenderHeaderMenuItems(botId, $wrap, $wrap.data('mxchatMenuClose'));
1932 - });
1933 -}
1934 -
1935 -// One-time per-widget init: renders menu items, wires open/close,
1936 -// outside-click, Escape, and arrow-key navigation. If no items, hides the
1937 -// trigger. Wiring happens even when there are zero items at init, so a
1938 -// later dynamic-settings rebuild that adds items has a working trigger.
1939 -function mxchatInitHeaderMenu(botId) {
1940 - var $wrap = $('.mxchat-header-menu-wrap[data-bot-id="' + botId + '"]').first();
1941 - if (!$wrap.length || $wrap.data('mxchatMenuReady')) return;
1942 -
1943 - var $trigger = $wrap.find('.mxchat-menu-trigger');
1944 - var $menu = $wrap.find('.mxchat-header-menu');
1945 -
1946 - // Initial color sync — covers normal page load.
1947 - mxchatSyncMenuColors(botId, $wrap);
1948 -
1949 - function openMenu() {
1950 - // Re-sync each open in case the active theme changed since init.
1951 - mxchatSyncMenuColors(botId, $wrap);
1952 - $menu.prop('hidden', false).attr('aria-hidden', 'false').addClass('is-open');
1953 - $trigger.attr('aria-expanded', 'true');
1954 - // Focus the first item for keyboard users
1955 - setTimeout(function() {
1956 - $menu.find('.mxchat-menu-item').first().attr('tabindex', '0').trigger('focus');
1957 - }, 0);
1958 - }
1959 - function closeMenu(returnFocus) {
1960 - $menu.prop('hidden', true).attr('aria-hidden', 'true').removeClass('is-open');
1961 - $trigger.attr('aria-expanded', 'false');
1962 - $menu.find('.mxchat-menu-item').attr('tabindex', '-1');
1963 - if (returnFocus) $trigger.trigger('focus');
1964 - // A dynamic-settings rebuild that arrived while the menu was open
1965 - // was deferred (mxchatRebuildHeaderMenus) — run it now.
1966 - if ($wrap.data('mxchatMenuRebuildPending')) {
1967 - $wrap.removeData('mxchatMenuRebuildPending');
1968 - mxchatRenderHeaderMenuItems(botId, $wrap, closeMenu);
1969 - }
1970 - }
1971 -
1972 - // Toggle on trigger click — stop propagation so the .chatbot-top-bar
1973 - // click-to-collapse handler does not fire.
1974 - $trigger.on('click', function(e) {
1975 - e.preventDefault();
1976 - e.stopPropagation();
1977 - if ($menu.hasClass('is-open')) closeMenu();
1978 - else openMenu();
1979 - });
1980 -
1981 - // Don't let clicks inside the menu bubble to the top-bar collapse handler.
1982 - $menu.on('click', function(e) {
1983 - e.stopPropagation();
1984 - });
1985 -
1986 - // Outside click closes the menu.
1987 - $(document).on('click.mxchatMenu-' + botId, function(e) {
1988 - if (!$menu.hasClass('is-open')) return;
1989 - if ($wrap.has(e.target).length || $wrap.is(e.target)) return;
1990 - closeMenu();
1991 - });
1992 -
1993 - // Keyboard: Escape closes and returns focus; arrow keys move focus; Enter activates.
1994 - $menu.on('keydown', '.mxchat-menu-item', function(e) {
1995 - var $items = $menu.find('.mxchat-menu-item');
1996 - var idx = $items.index(this);
1997 - if (e.key === 'Escape') {
1998 - e.preventDefault();
1999 - closeMenu(true);
2000 - } else if (e.key === 'ArrowDown') {
2001 - e.preventDefault();
2002 - var $next = $items.eq((idx + 1) % $items.length);
2003 - $items.attr('tabindex', '-1');
2004 - $next.attr('tabindex', '0').trigger('focus');
2005 - } else if (e.key === 'ArrowUp') {
2006 - e.preventDefault();
2007 - var $prev = $items.eq((idx - 1 + $items.length) % $items.length);
2008 - $items.attr('tabindex', '-1');
2009 - $prev.attr('tabindex', '0').trigger('focus');
2010 - } else if (e.key === 'Enter' || e.key === ' ') {
2011 - e.preventDefault();
2012 - $(this).trigger('click');
2013 - }
2014 - });
2015 - $trigger.on('keydown', function(e) {
2016 - if (e.key === 'Escape' && $menu.hasClass('is-open')) {
2017 - e.preventDefault();
2018 - closeMenu(true);
2019 - } else if ((e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') && !$menu.hasClass('is-open')) {
2020 - e.preventDefault();
2021 - openMenu();
2022 - }
2023 - });
2024 -
2025 - // Expose closeMenu for out-of-closure re-renders (mxchatRebuildHeaderMenus),
2026 - // then do the initial item render.
2027 - $wrap.data('mxchatMenuClose', closeMenu);
2028 - mxchatRenderHeaderMenuItems(botId, $wrap, closeMenu);
2029 -
2030 - $wrap.data('mxchatMenuReady', true);
2031 -}
2032 -
2033 -// Initialize header menus for every rendered widget on DOM ready.
2034 -$(function() {
2035 - $('.mxchat-header-menu-wrap').each(function() {
2036 - var botId = $(this).data('bot-id');
2037 - if (botId) mxchatInitHeaderMenu(botId);
2038 - });
2039 -
2040 - // Embedded (non-floating) widgets are open from the moment the page
2041 - // renders — refresh dynamic settings at init (plan-32db95). Floating
2042 - // widgets refresh on first launcher open instead.
2043 - var hasEmbeddedWidget = $('.mxchat-chatbot-wrapper').filter(function() {
2044 - return !$(this).closest('.floating-chatbot').length;
2045 - }).length > 0;
2046 - if (hasEmbeddedWidget) {
2047 - mxchatRefreshDynamicSettings();
2048 - }
2049 -});
2050 -
2051 -function appendMessage(sender, messageText = '', messageHtml = '', images = [], isTemporary = false, botId = 'default') {
1015 +
1016 +function appendMessage(sender, messageText = '', messageHtml = '', images = [], isTemporary = false) {
2052 1017 try {
2053 1018 // Determine styles based on sender type
2054 1019 let messageClass, bgColor, fontColor;
2055 1020
@@ -2070,29 +1035,25 @@
2070 1035 }
2071 1036
2072 1037 const messageDiv = $('<div>')
2073 1038 .addClass(messageClass)
2074 - .attr('dir', 'auto');
2075 -
2076 - // Only apply inline colors if AI theme is not active (let CSS handle it)
2077 - var skipColors = shouldSkipInlineColors(botId);
2078 - if (skipColors) {
2079 - messageDiv.css({
2080 - 'margin-bottom': '1em'
2081 - });
2082 - } else {
2083 - messageDiv.css({
1039 + .attr('dir', 'auto')
1040 + .css({
2084 1041 'background': bgColor,
2085 1042 'color': fontColor,
2086 1043 'margin-bottom': '1em'
2087 1044 });
1045 +
1046 + // Process the message content based on sender
1047 + let fullMessage;
1048 + if (sender === "user") {
1049 + // For user messages, apply linkify after sanitization
1050 + fullMessage = linkify(messageText);
1051 + } else {
1052 + // For bot/agent messages, preserve HTML
1053 + fullMessage = messageText;
2088 1054 }
2089 1055
2090 - // Process the message content - always run linkify to convert markdown
2091 - // links and format text. linkify() handles existing HTML safely via
2092 - // negative lookaheads that skip URLs already inside <a> tags.
2093 - let fullMessage = linkify(messageText);
2094 -
2095 1056 // Add images if provided
2096 1057 if (images && images.length > 0) {
2097 1058 fullMessage += '<div class="image-gallery" dir="auto">';
2098 1059 images.forEach(img => {
@@ -2098,9 +1059,9 @@
2098 1059 images.forEach(img => {
2099 1060 const safeTitle = sanitizeUserInput(img.title);
2100 1061 const safeUrl = encodeURI(img.image_url);
2101 1062 const safeThumbnail = encodeURI(img.thumbnail_url);
2102 -
1063 +
2103 1064 fullMessage += `
2104 1065 <div style="margin-bottom: 10px;">
2105 1066 <strong>${safeTitle}</strong><br>
2106 1067 <a href="${safeUrl}" target="_blank">
@@ -2123,37 +1084,28 @@
2123 1084
2124 1085 messageDiv.html(fullMessage);
2125 1086
2126 1087 if (isTemporary) {
2127 - // In-flight bubble: hold aria-busy so the live region stays quiet
2128 - // until the content is finalized (plan 67f126).
2129 - messageDiv.addClass('temporary-message').attr('aria-busy', 'true');
1088 + messageDiv.addClass('temporary-message');
2130 1089 }
2131 1090
2132 - // Append to the correct chatbot instance's chat-box
2133 - var $chatBox = getElement(botId, 'chat-box');
2134 - messageDiv.hide().appendTo($chatBox).fadeIn(300, function() {
1091 + messageDiv.hide().appendTo('#chat-box').fadeIn(300, function() {
2135 1092 // FIXED: Use event delegation for link tracking
2136 1093 if (sender === "bot" || sender === "agent") {
2137 - attachLinkTracking(messageDiv, messageText, botId);
1094 + attachLinkTracking(messageDiv, messageText);
2138 1095 }
2139 -
1096 +
2140 1097 if (sender === "bot") {
2141 - const lastUserMessage = $chatBox.find('.user-message').last();
1098 + const lastUserMessage = $('#chat-box').find('.user-message').last();
2142 1099 if (lastUserMessage.length) {
2143 - scrollElementToTop(lastUserMessage, botId);
1100 + scrollElementToTop(lastUserMessage);
2144 1101 }
2145 1102 }
2146 -
2147 - if ((sender === "bot" || sender === "agent") && !isTemporary) {
2148 - if (typeof mxchatInitHeaderMenu === 'function') mxchatInitHeaderMenu(botId);
2149 - }
2150 1103 });
2151 1104
2152 1105 if (messageText.id) {
2153 - var instance = MxChatInstances.get(botId);
2154 - instance.lastSeenMessageId = messageText.id;
2155 - hideNotification(botId);
1106 + lastSeenMessageId = messageText.id;
1107 + hideNotification();
2156 1108 }
2157 1109 } catch (error) {
2158 1110 // Error rendering message - silently continue
2159 1111 }
@@ -2159,35 +1111,34 @@
2159 1111 }
2160 1112 }
2161 1113
2162 1114 // Helper function to attach link tracking with proper event handling
2163 -function attachLinkTracking(messageDiv, messageText, botId) {
2164 - botId = botId || 'default';
1115 +function attachLinkTracking(messageDiv, messageText) {
2165 1116 // Use a slight delay to ensure DOM is ready
2166 1117 setTimeout(function() {
2167 1118 const links = messageDiv.find('a[href]').not('[data-tracked]');
2168 -
1119 +
2169 1120 links.each(function() {
2170 1121 const $link = $(this);
2171 1122 const originalHref = $link.attr('href');
2172 -
1123 +
2173 1124 // Mark as tracked to avoid duplicate handlers
2174 1125 $link.attr('data-tracked', 'true');
2175 -
1126 +
2176 1127 // Only track external URLs
2177 1128 if (originalHref && (originalHref.startsWith('http://') || originalHref.startsWith('https://'))) {
2178 1129 // Remove any existing click handlers first
2179 1130 $link.off('click.tracking');
2180 -
1131 +
2181 1132 // Add new click handler with namespace
2182 1133 $link.on('click.tracking', function(e) {
2183 1134 e.preventDefault();
2184 1135 e.stopPropagation();
2185 -
2186 - const messageContext = typeof messageText === 'string'
2187 - ? messageText.substring(0, 200)
1136 +
1137 + const messageContext = typeof messageText === 'string'
1138 + ? messageText.substring(0, 200)
2188 1139 : '';
2189 -
1140 +
2190 1141 // Track the click
2191 1142 $.ajax({
2192 1143 url: mxchatChat.ajax_url,
2193 1144 type: 'POST',
@@ -2192,9 +1143,9 @@
2192 1143 url: mxchatChat.ajax_url,
2193 1144 type: 'POST',
2194 1145 data: {
2195 1146 action: 'mxchat_track_url_click',
2196 - session_id: getChatSession(botId),
1147 + session_id: getChatSession(),
2197 1148 url: originalHref,
2198 1149 message_context: messageContext,
2199 1150 nonce: mxchatChat.nonce
2200 1151 },
@@ -2206,9 +1157,9 @@
2206 1157 window.location.href = originalHref;
2207 1158 }
2208 1159 }
2209 1160 });
2210 -
1161 +
2211 1162 return false; // Extra insurance to prevent default
2212 1163 });
2213 1164 }
2214 1165 });
@@ -2214,12 +1165,11 @@
2214 1165 });
2215 1166 }, 100); // Small delay to ensure DOM is ready
2216 1167 }
2217 1168
2218 -function replaceLastMessage(sender, responseText, responseHtml = '', images = [], botId = 'default') {
1169 +function replaceLastMessage(sender, responseText, responseHtml = '', images = []) {
2219 1170 var messageClass = sender === "user" ? "user-message" : sender === "agent" ? "agent-message" : "bot-message";
2220 - var $chatBox = getElement(botId, 'chat-box');
2221 - var lastMessageDiv = $chatBox.find('.bot-message.temporary-message, .agent-message.temporary-message').last();
1171 + var lastMessageDiv = $('#chat-box').find('.bot-message.temporary-message, .agent-message.temporary-message').last();
2222 1172
2223 1173 // Determine styles
2224 1174 let bgColor, fontColor;
2225 1175 if (sender === "user") {
@@ -2232,13 +1182,27 @@
2232 1182 bgColor = botMessageBgColor;
2233 1183 fontColor = botMessageFontColor;
2234 1184 }
2235 1185
2236 - // Always run linkify to convert markdown links and format text.
2237 - // linkify() already handles existing HTML (its URL patterns use negative lookaheads
2238 - // to avoid double-processing URLs that are already inside <a> tags).
2239 - var fullMessage = linkify(responseText);
2240 -
1186 + // FIXED: Only linkify if response doesn't already contain HTML links or tags
1187 + // This prevents double-processing of URLs that are already formatted as HTML
1188 + var fullMessage;
1189 + if (sender === "user") {
1190 + // Always linkify user messages (they're plain text)
1191 + fullMessage = linkify(responseText);
1192 + } else {
1193 + // For bot/agent messages, check if HTML already exists
1194 + if (responseText.includes('<a href=') || responseText.includes('</a>') ||
1195 + responseText.includes('<img') || responseText.includes('<div') ||
1196 + responseText.includes('<p>') || responseText.includes('<br>')) {
1197 + // Response already has HTML, don't process it
1198 + fullMessage = responseText;
1199 + } else {
1200 + // Plain text response, apply linkify
1201 + fullMessage = linkify(responseText);
1202 + }
1203 + }
1204 +
2241 1205 if (responseHtml) {
2242 1206 // Only add line breaks if there's actual text content before the HTML
2243 1207 if (fullMessage && fullMessage.trim()) {
2244 1208 fullMessage += '<br><br>' + responseHtml;
@@ -2262,103 +1226,66 @@
2262 1226 }
2263 1227
2264 1228 if (lastMessageDiv.length) {
2265 1229 // Replace content immediately to prevent visual gap between thinking dots and response
2266 - // aria-busy released AFTER the final content is set, so the live region
2267 - // announces the finished message once (plan 67f126).
2268 1230 lastMessageDiv
2269 1231 .html(fullMessage)
2270 1232 .removeClass('bot-message user-message temporary-message')
2271 1233 .addClass(messageClass)
2272 1234 .attr('dir', 'auto')
2273 - .attr('aria-busy', 'false');
2274 -
2275 - // Only apply inline colors if AI theme is not active (let CSS handle it)
2276 - var skipColors = mxchatChat.skip_inline_colors || shouldSkipInlineColors(botId);
2277 - if (!skipColors) {
2278 - lastMessageDiv.css({
1235 + .css({
2279 1236 'background-color': bgColor,
2280 1237 'color': fontColor,
2281 1238 });
2282 - }
2283 1239
2284 1240 // Handle link tracking and scroll
2285 1241 if (sender === "bot" || sender === "agent") {
2286 - attachLinkTracking(lastMessageDiv, responseText, botId);
1242 + attachLinkTracking(lastMessageDiv, responseText);
2287 1243
2288 - const lastUserMessage = $chatBox.find('.user-message').last();
1244 + const lastUserMessage = $('#chat-box').find('.user-message').last();
2289 1245 if (lastUserMessage.length) {
2290 - scrollElementToTop(lastUserMessage, botId);
1246 + scrollElementToTop(lastUserMessage);
2291 1247 }
2292 1248 // Show notification if chat is hidden
2293 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
2294 - if ($floatingChatbot.hasClass('hidden')) {
2295 - showNotification(botId);
1249 + if ($('#floating-chatbot').hasClass('hidden')) {
1250 + showNotification();
2296 1251 }
2297 1252 }
2298 1253
2299 1254 // Re-enable chat input after response is displayed
2300 - enableChatInput(botId);
2301 -
2302 - if (sender === "bot" || sender === "agent") {
2303 - if (typeof mxchatInitHeaderMenu === 'function') mxchatInitHeaderMenu(botId);
2304 - }
1255 + enableChatInput();
2305 1256 } else {
2306 - appendMessage(sender, responseText, responseHtml, images, false, botId);
1257 + appendMessage(sender, responseText, responseHtml, images);
2307 1258 // Re-enable chat input after response is displayed
2308 - enableChatInput(botId);
1259 + enableChatInput();
2309 1260 }
2310 1261 }
2311 1262
2312 1263
2313 - function appendThinkingMessage(botId) {
2314 - botId = botId || 'default';
1264 + function appendThinkingMessage() {
1265 + // Remove any existing thinking dots first
1266 + $('.thinking-dots').remove();
2315 1267
2316 - // Don't show thinking dots in live agent mode - message is just forwarded to a human
2317 - var indicator = getElementDOM(botId, 'chat-mode-indicator');
2318 - if (indicator && indicator.textContent === 'Live Agent') {
2319 - return;
2320 - }
2321 -
2322 - var $chatBox = getElement(botId, 'chat-box');
2323 -
2324 - // Remove any existing thinking dots in this bot's chat first
2325 - $chatBox.find('.thinking-dots').remove();
2326 -
2327 - // Check if we should skip inline colors (AI theme is active)
2328 - var skipColors = shouldSkipInlineColors(botId);
2329 -
2330 1268 // Retrieve the bot message font color and background color
2331 1269 var botMessageFontColor = mxchatChat.bot_message_font_color;
2332 1270 var botMessageBgColor = mxchatChat.bot_message_bg_color;
2333 1271
2334 - // Build thinking dots HTML - skip inline colors if AI theme is active
2335 - // The dots are decorative; the sr-only span is what the live region
2336 - // announces for the waiting state (plan 67f126). Server-localized
2337 - // string — safe to inject (esc_html__ output, no user content).
2338 - var dotStyle = skipColors ? '' : ' style="background-color: ' + botMessageFontColor + ';"';
2339 - var srThinking = mxchatChat.thinking_announcement || 'Assistant is typing';
2340 - var thinkingHtml = '<span class="sr-only">' + srThinking + '</span>' +
2341 - '<div class="thinking-dots-container" aria-hidden="true">' +
1272 +
1273 + var thinkingHtml = '<div class="thinking-dots-container">' +
2342 1274 '<div class="thinking-dots">' +
2343 - '<span class="dot"' + dotStyle + '></span>' +
2344 - '<span class="dot"' + dotStyle + '></span>' +
2345 - '<span class="dot"' + dotStyle + '></span>' +
1275 + '<span class="dot" style="background-color: ' + botMessageFontColor + ';"></span>' +
1276 + '<span class="dot" style="background-color: ' + botMessageFontColor + ';"></span>' +
1277 + '<span class="dot" style="background-color: ' + botMessageFontColor + ';"></span>' +
2346 1278 '</div>' +
2347 1279 '</div>';
2348 1280
2349 - // Append the thinking dots to this bot's chat container - skip inline colors if AI theme is active
2350 - var messageStyle = skipColors ? '' : ' style="background-color: ' + botMessageBgColor + '; color: ' + botMessageFontColor + ';"';
2351 - $chatBox.append('<div class="bot-message temporary-message"' + messageStyle + '>' + thinkingHtml + '</div>');
2352 - scrollToBottom(botId);
1281 + // Append the thinking dots to the chat container (or within the temporary message div)
1282 + $("#chat-box").append('<div class="bot-message temporary-message" style="background-color: ' + botMessageBgColor + ';">' + thinkingHtml + '</div>');
1283 + scrollToBottom();
2353 1284 }
2354 -
2355 - function removeThinkingDots(botId) {
2356 - botId = botId || 'default';
2357 - var $chatBox = getElement(botId, 'chat-box');
2358 - // Remove by temporary-message class first, then fall back to any bot-message containing thinking dots
2359 - $chatBox.find('.thinking-dots').closest('.temporary-message').remove();
2360 - $chatBox.find('.bot-message .thinking-dots').closest('.bot-message').remove();
1285 +
1286 + function removeThinkingDots() {
1287 + $('.thinking-dots').closest('.temporary-message').remove();
2361 1288 }
2362 1289
2363 1290 // ====================================
2364 1291 // TEXT FORMATTING & PROCESSING
@@ -2392,12 +1319,9 @@
2392 1319 processedText = formatTextStyling(processedText);
2393 1320
2394 1321 // Process code blocks BEFORE processing links
2395 1322 processedText = formatCodeBlocks(processedText);
2396 -
2397 - // Process markdown tables BEFORE converting newlines to paragraphs
2398 - processedText = formatMarkdownTables(processedText);
2399 -
1323 +
2400 1324 // NOW convert to paragraphs
2401 1325 processedText = convertNewlinesToBreaks(processedText);
2402 1326
2403 1327 // IMPORTANT: Handle citation-style brackets FIRST [URL]
@@ -2410,63 +1334,37 @@
2410 1334 // Return as a proper link without the brackets
2411 1335 return `<a href="${safeUrl}" target="${linkTarget}">${cleanUrl}</a>`;
2412 1336 });
2413 1337
2414 - // Process markdown links: [text](url) and [](url)
2415 - // Uses balanced parenthesis matching to handle URLs containing parens
2416 - // (e.g. PDF filenames with dates like (2025-08-28).pdf)
2417 - processedText = (function(input) {
2418 - var result = '';
2419 - var i = 0;
2420 - while (i < input.length) {
2421 - // Look for [ at current position
2422 - if (input[i] === '[') {
2423 - // Find closing ]
2424 - var closeBracket = input.indexOf(']', i + 1);
2425 - if (closeBracket === -1 || closeBracket + 1 >= input.length || input[closeBracket + 1] !== '(') {
2426 - result += input[i];
2427 - i++;
2428 - continue;
2429 - }
2430 - var linkText = input.substring(i + 1, closeBracket);
2431 - // Check if URL starts with http
2432 - var urlStart = closeBracket + 2;
2433 - if (!input.substring(urlStart).match(/^https?:\/\//)) {
2434 - result += input[i];
2435 - i++;
2436 - continue;
2437 - }
2438 - // Find balanced closing paren
2439 - var depth = 1;
2440 - var j = urlStart;
2441 - while (j < input.length && depth > 0) {
2442 - if (input[j] === '(') depth++;
2443 - else if (input[j] === ')') depth--;
2444 - if (depth > 0) j++;
2445 - }
2446 - if (depth !== 0) {
2447 - result += input[i];
2448 - i++;
2449 - continue;
2450 - }
2451 - var url = input.substring(urlStart, j);
2452 - var cleanUrl = url.replace(/[\].,;!?]+$/, '');
2453 - var encodedUrl = safeEncodeUrl(cleanUrl);
2454 - if (!linkText || !linkText.trim()) {
2455 - result += '<a href="' + encodedUrl + '" target="' + linkTarget + '">' + cleanUrl + '</a>';
2456 - } else {
2457 - var safeText = sanitizeUserInput(linkText);
2458 - result += '<a href="' + encodedUrl + '" target="' + linkTarget + '">' + safeText + '</a>';
2459 - }
2460 - i = j + 1; // Skip past the closing )
2461 - } else {
2462 - result += input[i];
2463 - i++;
2464 - }
1338 + // Process proper markdown links with text: [text](url)
1339 + // This MUST have non-empty text in the first brackets
1340 + const markdownLinkPattern = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
1341 + processedText = processedText.replace(markdownLinkPattern, (match, text, url) => {
1342 + // Make sure we have actual text (not just whitespace)
1343 + if (!text || !text.trim()) {
1344 + // If no text, treat the URL as the text
1345 + let cleanUrl = url.replace(/[.,;!?]+$/, '');
1346 + const safeUrl = safeEncodeUrl(cleanUrl);
1347 + return `<a href="${safeUrl}" target="${linkTarget}">${cleanUrl}</a>`;
2465 1348 }
2466 - return result;
2467 - })(processedText);
1349 +
1350 + // Clean the URL
1351 + let cleanUrl = url.replace(/[\].,;!?]+$/, '');
1352 + const safeUrl = safeEncodeUrl(cleanUrl);
1353 + const safeText = sanitizeUserInput(text);
1354 + return `<a href="${safeUrl}" target="${linkTarget}">${safeText}</a>`;
1355 + });
2468 1356
1357 + // Handle empty markdown links: [](url)
1358 + // This is a specific case where there's no text
1359 + const emptyMarkdownPattern = /\[\]\((https?:\/\/[^\s)]+)\)/g;
1360 + processedText = processedText.replace(emptyMarkdownPattern, (match, url) => {
1361 + let cleanUrl = url.replace(/[.,;!?]+$/, '');
1362 + const safeUrl = safeEncodeUrl(cleanUrl);
1363 + // Use the URL itself as the link text
1364 + return `<a href="${safeUrl}" target="${linkTarget}">${cleanUrl}</a>`;
1365 + });
1366 +
2469 1367 // Process phone numbers: [text](tel:number)
2470 1368 const phonePattern = /\[([^\]]+)\]\((tel:[\d+\-\s()]+)\)/g;
2471 1369 processedText = processedText.replace(phonePattern, (match, text, phone) => {
2472 1370 const safePhone = safeEncodeUrl(phone);
@@ -2618,78 +1516,9 @@
2618 1516 });
2619 1517
2620 1518 return text;
2621 1519 }
2622 -
2623 - function formatMarkdownTables(text) {
2624 - var lines = text.split('\n');
2625 - var result = [];
2626 - var i = 0;
2627 -
2628 - while (i < lines.length) {
2629 - // Check for a table: current line has pipes AND next line is a separator row
2630 - if (i + 1 < lines.length &&
2631 - lines[i].indexOf('|') !== -1 &&
2632 - /^\s*\|?[\s\-:]+(\|[\s\-:]+)+\|?\s*$/.test(lines[i + 1])) {
2633 -
2634 - var tableLines = [];
2635 - var headerLine = lines[i];
2636 - var separatorLine = lines[i + 1];
2637 - tableLines.push(headerLine);
2638 - tableLines.push(separatorLine);
2639 -
2640 - // Collect remaining table rows
2641 - var j = i + 2;
2642 - while (j < lines.length && lines[j].indexOf('|') !== -1 && lines[j].trim() !== '') {
2643 - tableLines.push(lines[j]);
2644 - j++;
2645 - }
2646 -
2647 - // Parse alignment from separator row
2648 - var sepCells = separatorLine.split('|').filter(function(c) { return c.trim() !== ''; });
2649 - var alignments = sepCells.map(function(cell) {
2650 - var trimmed = cell.trim();
2651 - if (trimmed.charAt(0) === ':' && trimmed.charAt(trimmed.length - 1) === ':') return 'center';
2652 - if (trimmed.charAt(trimmed.length - 1) === ':') return 'right';
2653 - return 'left';
2654 - });
2655 -
2656 - // Build HTML table
2657 - var html = '<div class="mxchat-table-wrapper"><table class="mxchat-table">';
2658 -
2659 - // Header row
2660 - var headerCells = tableLines[0].split('|').filter(function(c) { return c.trim() !== ''; });
2661 - html += '<thead><tr>';
2662 - headerCells.forEach(function(cell, idx) {
2663 - var align = alignments[idx] || 'left';
2664 - html += '<th style="text-align:' + align + '">' + cell.trim() + '</th>';
2665 - });
2666 - html += '</tr></thead>';
2667 -
2668 - // Body rows
2669 - html += '<tbody>';
2670 - for (var r = 2; r < tableLines.length; r++) {
2671 - var rowCells = tableLines[r].split('|').filter(function(c) { return c.trim() !== ''; });
2672 - html += '<tr>';
2673 - rowCells.forEach(function(cell, idx) {
2674 - var align = alignments[idx] || 'left';
2675 - html += '<td style="text-align:' + align + '">' + cell.trim() + '</td>';
2676 - });
2677 - html += '</tr>';
2678 - }
2679 - html += '</tbody></table></div>';
2680 -
2681 - result.push(html);
2682 - i = j;
2683 - } else {
2684 - result.push(lines[i]);
2685 - i++;
2686 - }
2687 - }
2688 -
2689 - return result.join('\n');
2690 - }
2691 -
1520 +
2692 1521 function sanitizeUserInput(text) {
2693 1522 const div = document.createElement('div');
2694 1523 div.textContent = text;
2695 1524 return div.innerHTML;
@@ -2719,21 +1548,10 @@
2719 1548 // ====================================
2720 1549 // UI & SCROLLING CONTROLS
2721 1550 // ====================================
2722 1551
2723 - function scrollToBottom(botIdOrInstant, instant) {
2724 - // Handle backward compatibility: scrollToBottom() or scrollToBottom(true/false)
2725 - var botId = 'default';
2726 - if (typeof botIdOrInstant === 'string') {
2727 - botId = botIdOrInstant;
2728 - instant = instant || false;
2729 - } else if (typeof botIdOrInstant === 'boolean') {
2730 - instant = botIdOrInstant;
2731 - } else {
2732 - instant = false;
2733 - }
2734 -
2735 - var chatBox = getElement(botId, 'chat-box');
1552 + function scrollToBottom(instant = false) {
1553 + var chatBox = $('#chat-box');
2736 1554 if (instant) {
2737 1555 // Instantly set the scroll position to the bottom
2738 1556 chatBox.scrollTop(chatBox.prop("scrollHeight"));
2739 1557 } else {
@@ -2742,15 +1560,15 @@
2742 1560 const scrollHeight = chatBox.prop("scrollHeight");
2743 1561 const initialScroll = chatBox.scrollTop();
2744 1562 const distance = scrollHeight - initialScroll;
2745 1563 const duration = 500; // Duration in ms
2746 -
1564 +
2747 1565 function smoothScroll(timestamp) {
2748 1566 if (!start) start = timestamp;
2749 1567 const progress = timestamp - start;
2750 1568 const currentScroll = initialScroll + (distance * (progress / duration));
2751 1569 chatBox.scrollTop(currentScroll);
2752 -
1570 +
2753 1571 if (progress < duration) {
2754 1572 requestAnimationFrame(smoothScroll);
2755 1573 } else {
2756 1574 chatBox.scrollTop(scrollHeight); // Ensure it's exactly at the bottom
@@ -2755,37 +1573,31 @@
2755 1573 } else {
2756 1574 chatBox.scrollTop(scrollHeight); // Ensure it's exactly at the bottom
2757 1575 }
2758 1576 }
2759 -
1577 +
2760 1578 requestAnimationFrame(smoothScroll);
2761 1579 }
2762 1580 }
2763 -
2764 - function scrollElementToTop(element, botId, topOffset) {
2765 - botId = botId || 'default';
2766 - topOffset = (typeof topOffset === 'number') ? topOffset : 2;
2767 - var chatBox = getElement(botId, 'chat-box');
1581 +
1582 + function scrollElementToTop(element) {
1583 + var chatBox = $('#chat-box');
2768 1584 var elementTop = element.position().top + chatBox.scrollTop();
2769 - chatBox.animate({ scrollTop: Math.max(0, elementTop - topOffset) }, 500);
1585 + chatBox.animate({ scrollTop: elementTop }, 500);
2770 1586 }
2771 -
2772 - function showChatWidget(botId) {
2773 - botId = botId || 'default';
2774 - var $button = getElement(botId, 'floating-chatbot-button');
1587 +
1588 + function showChatWidget() {
2775 1589 // First ensure display is set
2776 - $button.css('display', 'flex');
1590 + $('#floating-chatbot-button').css('display', 'flex');
2777 1591 // Then handle the fade
2778 - $button.fadeTo(500, 1);
1592 + $('#floating-chatbot-button').fadeTo(500, 1);
2779 1593 // Force visibility
2780 - $button.removeClass('hidden');
1594 + $('#floating-chatbot-button').removeClass('hidden');
2781 1595 }
2782 1596
2783 - function hideChatWidget(botId) {
2784 - botId = botId || 'default';
2785 - var $button = getElement(botId, 'floating-chatbot-button');
2786 - $button.css('display', 'none');
2787 - $button.addClass('hidden');
1597 + function hideChatWidget() {
1598 + $('#floating-chatbot-button').css('display', 'none');
1599 + $('#floating-chatbot-button').addClass('hidden');
2788 1600 }
2789 1601
2790 1602 function disableScroll() {
2791 1603 if (isMobile()) {
@@ -2844,43 +1656,34 @@
2844 1656 chatButton.appendChild(notificationBadge);
2845 1657
2846 1658 }
2847 1659
2848 - function showNotification(botId) {
2849 - botId = botId || 'default';
2850 - const badge = getElementDOM(botId, 'chat-notification-badge');
2851 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
2852 - if (badge && $floatingChatbot.hasClass('hidden')) {
1660 + function showNotification() {
1661 + const badge = document.getElementById('chat-notification-badge');
1662 + if (badge && $('#floating-chatbot').hasClass('hidden')) {
2853 1663 badge.style.display = 'block';
2854 1664 badge.textContent = '1';
2855 1665 }
2856 1666 }
2857 -
2858 - function hideNotification(botId) {
2859 - botId = botId || 'default';
2860 - const badge = getElementDOM(botId, 'chat-notification-badge');
1667 +
1668 + function hideNotification() {
1669 + const badge = document.getElementById('chat-notification-badge');
2861 1670 if (badge) {
2862 1671 badge.style.display = 'none';
2863 1672 }
2864 1673 }
2865 -
2866 - function startNotificationChecking(botId) {
2867 - botId = botId || 'default';
1674 +
1675 + function startNotificationChecking() {
2868 1676 const chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
2869 1677 if (!chatPersistenceEnabled) return;
2870 -
2871 - createNotificationBadge(botId);
2872 - var instance = MxChatInstances.get(botId);
2873 - instance.notificationCheckInterval = setInterval(function() {
2874 - checkForNewMessages(botId);
2875 - }, 30000); // Check every 30 seconds
1678 +
1679 + createNotificationBadge();
1680 + notificationCheckInterval = setInterval(checkForNewMessages, 30000); // Check every 30 seconds
2876 1681 }
2877 -
2878 - function stopNotificationChecking(botId) {
2879 - botId = botId || 'default';
2880 - var instance = MxChatInstances.get(botId);
2881 - if (instance.notificationCheckInterval) {
2882 - clearInterval(instance.notificationCheckInterval);
1682 +
1683 + function stopNotificationChecking() {
1684 + if (notificationCheckInterval) {
1685 + clearInterval(notificationCheckInterval);
2883 1686 }
2884 1687 }
2885 1688
2886 1689 function checkForNewMessages() {
@@ -2906,35 +1709,28 @@
2906 1709 });
2907 1710 }
2908 1711
2909 1712
2910 -// ====================================
2911 -// LIVE AGENT FUNCTIONALITY
2912 -// ====================================
1713 + // ====================================
1714 + // LIVE AGENT FUNCTIONALITY
1715 + // ====================================
2913 1716
2914 -function startPolling(botId) {
2915 - botId = botId || 'default';
2916 - var instance = MxChatInstances.get(botId);
2917 - // Clear any existing interval first
2918 - stopPolling(botId);
2919 - instance.pollingInterval = setInterval(function() {
2920 - checkForAgentMessages(botId);
2921 - }, 5000);
2922 -}
1717 + function startPolling() {
1718 + // Clear any existing interval first
1719 + stopPolling();
1720 + // Start new polling interval
1721 + pollingInterval = setInterval(checkForAgentMessages, 5000);
1722 + }
2923 1723
2924 -function stopPolling(botId) {
2925 - botId = botId || 'default';
2926 - var instance = MxChatInstances.get(botId);
2927 - if (instance.pollingInterval) {
2928 - clearInterval(instance.pollingInterval);
2929 - instance.pollingInterval = null;
1724 + function stopPolling() {
1725 + if (pollingInterval) {
1726 + clearInterval(pollingInterval);
1727 + pollingInterval = null;
1728 + }
2930 1729 }
2931 -}
2932 -
2933 -function checkForAgentMessages(botId) {
2934 - botId = botId || 'default';
2935 - var instance = MxChatInstances.get(botId);
2936 - const sessionId = getChatSession(botId);
1730 +
1731 +function checkForAgentMessages() {
1732 + const sessionId = getChatSession();
2937 1733 $.ajax({
2938 1734 url: mxchatChat.ajax_url,
2939 1735 type: 'POST',
2940 1736 dataType: 'json',
@@ -2940,41 +1736,32 @@
2940 1736 dataType: 'json',
2941 1737 data: {
2942 1738 action: 'mxchat_fetch_new_messages',
2943 1739 session_id: sessionId,
2944 - last_seen_id: instance.lastSeenMessageId,
2945 - persistence_enabled: 'true',
1740 + last_seen_id: lastSeenMessageId,
1741 + persistence_enabled: 'true', // Add this too
2946 1742 nonce: mxchatChat.nonce
2947 1743 },
2948 1744 success: function (response) {
2949 1745 if (response.success && response.data?.new_messages) {
2950 1746 let hasNewMessage = false;
2951 -
1747 +
2952 1748 response.data.new_messages.forEach(function (message) {
2953 - if (message.role === "agent" && !instance.processedMessageIds.has(message.id)) {
1749 + if (message.role === "agent" && !processedMessageIds.has(message.id)) {
2954 1750 hasNewMessage = true;
2955 - appendMessage("agent", message.content, '', [], false, botId);
2956 - instance.lastSeenMessageId = message.id;
2957 - instance.processedMessageIds.add(message.id);
1751 + // CHANGE THIS LINE:
1752 + appendMessage("agent", message.content); // Instead of replaceLastMessage
1753 + lastSeenMessageId = message.id;
1754 + processedMessageIds.add(message.id);
2958 1755 }
2959 1756 });
2960 1757
2961 - if (hasNewMessage) {
2962 - enableChatInput(botId);
1758 + if (hasNewMessage && $('#floating-chatbot').hasClass('hidden')) {
1759 + showNotification();
2963 1760 }
2964 -
2965 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
2966 - if (hasNewMessage && $floatingChatbot.hasClass('hidden')) {
2967 - showNotification(botId);
2968 - }
2969 -
2970 - scrollToBottom(botId, true);
1761 +
1762 + scrollToBottom(true);
2971 1763 }
2972 -
2973 - // Handle chat mode transitions (e.g. agent ended chat via !endchat)
2974 - if (response.success && response.data?.chat_mode) {
2975 - updateChatModeIndicator(response.data.chat_mode, botId);
2976 - }
2977 1764 },
2978 1765 error: function (xhr, status, error) {
2979 1766 // Polling error - silently continue
2980 1767 }
@@ -2984,29 +1771,17 @@
2984 1771 // ====================================
2985 1772 // CHAT HISTORY & PERSISTENCE
2986 1773 // ====================================
2987 1774
2988 -function loadChatHistory(botId, onComplete) {
2989 - botId = botId || 'default';
2990 - var instance = MxChatInstances.get(botId);
2991 -
1775 +function loadChatHistory() {
2992 1776 // Prevent duplicate loading
2993 - if (instance.chatHistoryLoaded) {
2994 - if (onComplete) onComplete();
1777 + if (chatHistoryLoaded) {
2995 1778 return;
2996 1779 }
2997 -
2998 - // Use getChatSession which returns null if no session exists (does NOT create one)
2999 - var sessionId = getChatSession(botId);
1780 +
1781 + var sessionId = getChatSession();
3000 1782 var chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
3001 1783
3002 - // No session yet — nothing to load. History will load after first message via ensureSession.
3003 - if (!sessionId) {
3004 - instance.chatHistoryLoaded = true;
3005 - if (onComplete) onComplete();
3006 - return;
3007 - }
3008 -
3009 1784 if (chatPersistenceEnabled && sessionId) {
3010 1785 $.ajax({
3011 1786 url: mxchatChat.ajax_url,
3012 1787 type: 'POST',
@@ -3017,12 +1792,11 @@
3017 1792 },
3018 1793 success: function(response) {
3019 1794 // Handle session reset (IP changed while user was away)
3020 1795 if (response.success === false && response.data && response.data.action === 'reset_session') {
3021 - // Silent reset — new session but don't clear UI
3022 - MxChatInstances.silentResetSession(botId);
3023 - instance.chatHistoryLoaded = true; // Prevent retry loop
3024 - if (onComplete) onComplete();
1796 + // Silently reset session - user will start fresh
1797 + resetChatSession();
1798 + chatHistoryLoaded = true; // Prevent retry loop
3025 1799 return;
3026 1800 }
3027 1801
3028 1802 // Check if the response indicates success
@@ -3028,34 +1802,22 @@
3028 1802 // Check if the response indicates success
3029 1803 if (response.success) {
3030 1804 // Handle case where conversation data exists and is an array
3031 1805 if (response.data && Array.isArray(response.data.conversation)) {
3032 - var $chatBox = getElement(botId, 'chat-box');
1806 + var $chatBox = $('#chat-box');
3033 1807 var $fragment = $(document.createDocumentFragment());
3034 - let highestMessageId = instance.lastSeenMessageId;
1808 + let highestMessageId = lastSeenMessageId;
3035 1809
3036 1810 // Update chat mode if provided
3037 1811 if (response.data.chat_mode) {
3038 - updateChatModeIndicator(response.data.chat_mode, botId);
1812 + updateChatModeIndicator(response.data.chat_mode);
3039 1813 }
3040 1814
3041 1815 // Only process if there are actual messages
3042 1816 if (response.data.conversation.length > 0) {
3043 - // Restored history must be SILENT to screen readers
3044 - // (plan 67f126): these are DOM additions inside the
3045 - // live region and would otherwise announce as if
3046 - // they just arrived. Lift aria-live for the batch
3047 - // repopulate, restore it after the browser has
3048 - // processed the mutations.
3049 - var mxLiveRegionEl = $chatBox.get(0);
3050 - var mxSavedAriaLive = mxLiveRegionEl ? mxLiveRegionEl.getAttribute('aria-live') : null;
3051 - if (mxLiveRegionEl) {
3052 - mxLiveRegionEl.setAttribute('aria-live', 'off');
3053 - }
3054 -
3055 1817 // IMPORTANT: Clear existing messages before loading history
3056 1818 $chatBox.empty();
3057 -
1819 +
3058 1820 $.each(response.data.conversation, function(index, message) {
3059 1821 // Skip agent messages if persistence is off
3060 1822 if (!chatPersistenceEnabled && message.role === 'agent') {
3061 1823 return;
@@ -3090,23 +1852,9 @@
3090 1852 var content = message.content;
3091 1853 content = content.replace(/\\'/g, "'").replace(/\\"/g, '"');
3092 1854 content = decodeHTMLEntities(content);
3093 1855
3094 - // Skip linkify for messages containing structured HTML
3095 - // (forms, product cards, galleries, etc.) to avoid
3096 - // markdown formatting corrupting HTML attributes
3097 - // (e.g. underscores in name="field_name" becoming <em> tags).
3098 - // One family check instead of a per-card literal list: any
3099 - // element carrying an mxchat- prefixed class is MxChat-generated
3100 - // structured markup and replays raw. The old list drifted every
3101 - // time an add-on minted a new card class — the filtered-search
3102 - // card ("mxchat-filtered-product-card") missed it and replayed
3103 - // through linkify as visible markup.
3104 - if (/<[a-z][^>]*class\s*=\s*["'][^"']*\bmxchat-/i.test(content) ||
3105 - content.includes("<form") ||
3106 - content.includes("<input") ||
3107 - content.includes("<select") ||
3108 - content.includes("<textarea")) {
1856 + if (content.includes("mxchat-product-card") || content.includes("mxchat-image-gallery")) {
3109 1857 messageElement.html(content);
3110 1858 } else {
3111 1859 var formattedContent = linkify(content);
3112 1860 messageElement.html(formattedContent);
@@ -3116,57 +1864,42 @@
3116 1864
3117 1865 // Track message IDs
3118 1866 if (message.id) {
3119 1867 highestMessageId = Math.max(highestMessageId, message.id);
3120 - instance.processedMessageIds.add(message.id);
1868 + processedMessageIds.add(message.id);
3121 1869 }
3122 1870 });
3123 1871
3124 1872 // Only append messages and scroll if we have content
3125 1873 $chatBox.append($fragment);
3126 - scrollToBottom(botId, true);
1874 + scrollToBottom(true);
3127 1875
3128 - // Re-attach live semantics AFTER the rehydration
3129 - // mutations have been processed with the region off
3130 - // (plan 67f126). Restoring later announces nothing
3131 - // retroactively; new turns announce normally.
3132 - if (mxLiveRegionEl) {
3133 - setTimeout(function() {
3134 - mxLiveRegionEl.setAttribute('aria-live', mxSavedAriaLive || 'polite');
3135 - }, 200);
3136 - }
3137 -
3138 1876 // Collapse quick questions if we have conversation history
3139 - // BUT skip auto-collapse for embedded bots (they should stay expanded)
3140 - if (hasQuickQuestions(botId) && !isEmbeddedBot(botId)) {
3141 - collapseQuickQuestions(botId);
1877 + if (hasQuickQuestions()) {
1878 + collapseQuickQuestions();
3142 1879 }
3143 1880
3144 1881 // Update lastSeenMessageId after history loads
3145 - instance.lastSeenMessageId = highestMessageId;
1882 + lastSeenMessageId = highestMessageId;
3146 1883
3147 1884 // Only update chat mode if persistence is enabled and we have messages
3148 1885 if (chatPersistenceEnabled) {
3149 1886 var lastMessage = response.data.conversation[response.data.conversation.length - 1];
3150 1887 if (lastMessage.role === 'agent') {
3151 - updateChatModeIndicator('agent', botId);
1888 + updateChatModeIndicator('agent');
3152 1889 }
3153 1890 }
3154 -
1891 +
3155 1892 // Mark as loaded ONLY after successful load
3156 - instance.chatHistoryLoaded = true;
1893 + chatHistoryLoaded = true;
3157 1894 }
3158 1895 }
3159 1896 }
3160 - if (onComplete) onComplete();
3161 1897 },
3162 1898 error: function(xhr, status, error) {
3163 1899 // Error loading chat history - silently continue
3164 - if (onComplete) onComplete();
3165 1900 }
3166 1901 });
3167 - } else {
3168 - if (onComplete) onComplete();
3169 1902 }
3170 1903 }
3171 1904
3172 1905
@@ -3180,12 +1913,11 @@
3180 1913 element.addEventListener(eventType, handler);
3181 1914 }
3182 1915 }
3183 1916
3184 - function showActivePdf(filename, botId) {
3185 - botId = botId || 'default';
3186 - const container = getElementDOM(botId, 'active-pdf-container');
3187 - const nameElement = getElementDOM(botId, 'active-pdf-name');
1917 + function showActivePdf(filename) {
1918 + const container = document.getElementById('active-pdf-container');
1919 + const nameElement = document.getElementById('active-pdf-name');
3188 1920
3189 1921 if (!container || !nameElement) {
3190 1922 return;
3191 1923 }
@@ -3193,12 +1925,11 @@
3193 1925 nameElement.textContent = filename;
3194 1926 container.style.display = 'flex';
3195 1927 }
3196 1928
3197 - function showActiveWord(filename, botId) {
3198 - botId = botId || 'default';
3199 - const container = getElementDOM(botId, 'active-word-container');
3200 - const nameElement = getElementDOM(botId, 'active-word-name');
1929 + function showActiveWord(filename) {
1930 + const container = document.getElementById('active-word-container');
1931 + const nameElement = document.getElementById('active-word-name');
3201 1932
3202 1933 if (!container || !nameElement) {
3203 1934 return;
3204 1935 }
@@ -3205,17 +1936,15 @@
3205 1936
3206 1937 nameElement.textContent = filename;
3207 1938 container.style.display = 'flex';
3208 1939 }
3209 -
3210 - function removeActivePdf(botId) {
3211 - botId = botId || 'default';
3212 - var instance = MxChatInstances.get(botId);
3213 - const container = getElementDOM(botId, 'active-pdf-container');
3214 - const nameElement = getElementDOM(botId, 'active-pdf-name');
3215 -
3216 - if (!container || !nameElement || !instance.activePdfFile) return;
3217 -
1940 +
1941 + function removeActivePdf() {
1942 + const container = document.getElementById('active-pdf-container');
1943 + const nameElement = document.getElementById('active-pdf-name');
1944 +
1945 + if (!container || !nameElement || !activePdfFile) return;
1946 +
3218 1947 fetch(mxchatChat.ajax_url, {
3219 1948 method: 'POST',
3220 1949 headers: {
3221 1950 'Content-Type': 'application/x-www-form-urlencoded',
@@ -3221,9 +1950,9 @@
3221 1950 'Content-Type': 'application/x-www-form-urlencoded',
3222 1951 },
3223 1952 body: new URLSearchParams({
3224 1953 'action': 'mxchat_remove_pdf',
3225 - 'session_id': getChatSession(botId),
1954 + 'session_id': sessionId,
3226 1955 'nonce': mxchatChat.nonce
3227 1956 })
3228 1957 })
3229 1958 .then(response => response.json())
@@ -3230,10 +1959,10 @@
3230 1959 .then(data => {
3231 1960 if (data.success) {
3232 1961 container.style.display = 'none';
3233 1962 nameElement.textContent = '';
3234 - instance.activePdfFile = null;
3235 - appendMessage('bot', 'PDF removed.', '', [], false, botId);
1963 + activePdfFile = null;
1964 + appendMessage('bot', 'PDF removed.');
3236 1965 }
3237 1966 })
3238 1967 .catch(error => {
3239 1968 // Error removing PDF - silently continue
@@ -3239,16 +1968,14 @@
3239 1968 // Error removing PDF - silently continue
3240 1969 });
3241 1970 }
3242 1971
3243 - function removeActiveWord(botId) {
3244 - botId = botId || 'default';
3245 - var instance = MxChatInstances.get(botId);
3246 - const container = getElementDOM(botId, 'active-word-container');
3247 - const nameElement = getElementDOM(botId, 'active-word-name');
3248 -
3249 - if (!container || !nameElement || !instance.activeWordFile) return;
3250 -
1972 + function removeActiveWord() {
1973 + const container = document.getElementById('active-word-container');
1974 + const nameElement = document.getElementById('active-word-name');
1975 +
1976 + if (!container || !nameElement || !activeWordFile) return;
1977 +
3251 1978 fetch(mxchatChat.ajax_url, {
3252 1979 method: 'POST',
3253 1980 headers: {
3254 1981 'Content-Type': 'application/x-www-form-urlencoded',
@@ -3254,9 +1981,9 @@
3254 1981 'Content-Type': 'application/x-www-form-urlencoded',
3255 1982 },
3256 1983 body: new URLSearchParams({
3257 1984 'action': 'mxchat_remove_word',
3258 - 'session_id': getChatSession(botId),
1985 + 'session_id': sessionId,
3259 1986 'nonce': mxchatChat.nonce
3260 1987 })
3261 1988 })
3262 1989 .then(response => response.json())
@@ -3263,10 +1990,10 @@
3263 1990 .then(data => {
3264 1991 if (data.success) {
3265 1992 container.style.display = 'none';
3266 1993 nameElement.textContent = '';
3267 - instance.activeWordFile = null;
3268 - appendMessage('bot', 'Word document removed.', '', [], false, botId);
1994 + activeWordFile = null;
1995 + appendMessage('bot', 'Word document removed.');
3269 1996 }
3270 1997 })
3271 1998 .catch(error => {
3272 1999 // Error removing Word document - silently continue
@@ -3276,10 +2003,9 @@
3276 2003 // ====================================
3277 2004 // CONSENT & COMPLIANCE (GDPR)
3278 2005 // ====================================
3279 2006
3280 - function initializeChatVisibility(botId) {
3281 - botId = botId || 'default';
2007 + function initializeChatVisibility() {
3282 2008 const complianzEnabled = mxchatChat.complianz_toggle === 'on' ||
3283 2009 mxchatChat.complianz_toggle === '1' ||
3284 2010 mxchatChat.complianz_toggle === 1;
3285 2011
@@ -3284,35 +2010,34 @@
3284 2010 mxchatChat.complianz_toggle === 1;
3285 2011
3286 2012 if (complianzEnabled && typeof cmplz_has_consent === "function" && typeof complianz !== 'undefined') {
3287 2013 // Initial check
3288 - checkConsentAndShowChat(botId);
2014 + checkConsentAndShowChat();
3289 2015
3290 2016 // Listen for consent changes
3291 2017 $(document).on('cmplz_status_change', function(event) {
3292 - checkConsentAndShowChat(botId);
2018 + checkConsentAndShowChat();
3293 2019 });
3294 2020 } else {
3295 2021 // If Complianz is not enabled, always show
3296 - getElement(botId, 'floating-chatbot-button')
2022 + $('#floating-chatbot-button')
3297 2023 .css('display', 'flex')
3298 2024 .removeClass('hidden no-consent')
3299 2025 .fadeTo(500, 1);
3300 -
2026 +
3301 2027 // Also check pre-chat message when Complianz is not enabled
3302 - checkPreChatDismissal(botId);
2028 + checkPreChatDismissal();
3303 2029 }
3304 2030 }
3305 2031
3306 -
3307 - function checkConsentAndShowChat(botId) {
3308 - botId = botId || 'default';
2032 +
2033 + function checkConsentAndShowChat() {
3309 2034 var consentStatus = cmplz_has_consent('marketing');
3310 2035 var consentType = complianz.consenttype;
3311 2036
3312 - let $widget = getElement(botId, 'floating-chatbot-button');
3313 - let $chatbot = getElement(botId, 'floating-chatbot');
3314 - let $preChat = getElement(botId, 'pre-chat-message');
2037 + let $widget = $('#floating-chatbot-button');
2038 + let $chatbot = $('#floating-chatbot');
2039 + let $preChat = $('#pre-chat-message');
3315 2040
3316 2041 if (consentStatus === true) {
3317 2042 $widget
3318 2043 .removeClass('no-consent')
@@ -3321,9 +2046,9 @@
3321 2046 .fadeTo(500, 1);
3322 2047 $chatbot.removeClass('no-consent');
3323 2048
3324 2049 // Show pre-chat message if not dismissed
3325 - checkPreChatDismissal(botId);
2050 + checkPreChatDismissal();
3326 2051 } else {
3327 2052 $widget
3328 2053 .addClass('no-consent')
3329 2054 .fadeTo(500, 0, function() {
@@ -3341,38 +2066,46 @@
3341 2066
3342 2067 // ====================================
3343 2068 // PRE-CHAT MESSAGE HANDLING
3344 2069 // ====================================
3345 -
3346 - function checkPreChatDismissal(botId) {
3347 - botId = botId || 'default';
3348 - try {
3349 - var dismissedAt = localStorage.getItem('mxchat_pre_chat_dismissed_' + botId);
3350 - if (dismissedAt) {
3351 - // Re-show after 24 hours
3352 - var elapsed = Date.now() - parseInt(dismissedAt, 10);
3353 - if (elapsed < 86400000) {
3354 - getElement(botId, 'pre-chat-message').hide();
3355 - return;
2070 +
2071 + function checkPreChatDismissal() {
2072 + $.ajax({
2073 + url: mxchatChat.ajax_url,
2074 + type: 'POST',
2075 + data: {
2076 + action: 'mxchat_check_pre_chat_message_status',
2077 + _ajax_nonce: mxchatChat.nonce
2078 + },
2079 + success: function(response) {
2080 + if (response.success && !response.data.dismissed) {
2081 + $('#pre-chat-message').fadeIn(250);
2082 + } else {
2083 + $('#pre-chat-message').hide();
3356 2084 }
3357 - // Expired — clear and show again
3358 - localStorage.removeItem('mxchat_pre_chat_dismissed_' + botId);
2085 + },
2086 + error: function() {
2087 + // Error checking pre-chat dismissal - silently continue
3359 2088 }
3360 - getElement(botId, 'pre-chat-message').fadeIn(250);
3361 - } catch (e) {
3362 - // localStorage unavailable — show the message
3363 - getElement(botId, 'pre-chat-message').fadeIn(250);
3364 - }
2089 + });
3365 2090 }
3366 2091
3367 - function handlePreChatDismissal(botId) {
3368 - botId = botId || 'default';
3369 - getElement(botId, 'pre-chat-message').fadeOut(200);
3370 - try {
3371 - localStorage.setItem('mxchat_pre_chat_dismissed_' + botId, String(Date.now()));
3372 - } catch (e) {
3373 - // localStorage unavailable — dismissal won't persist
3374 - }
2092 + function handlePreChatDismissal() {
2093 + $('#pre-chat-message').fadeOut(200);
2094 + $.ajax({
2095 + url: mxchatChat.ajax_url,
2096 + type: 'POST',
2097 + data: {
2098 + action: 'mxchat_dismiss_pre_chat_message',
2099 + _ajax_nonce: mxchatChat.nonce
2100 + },
2101 + success: function() {
2102 + $('#pre-chat-message').hide();
2103 + },
2104 + error: function() {
2105 + // Error dismissing pre-chat message - silently continue
2106 + }
2107 + });
3375 2108 }
3376 2109
3377 2110
3378 2111 // ====================================
@@ -3398,180 +2131,87 @@
3398 2131 // ====================================
3399 2132
3400 2133 $(document).on('click', '.mxchat-popular-question', function () {
3401 2134 var question = $(this).text();
3402 - var botId = getBotIdFromElement(this);
3403 -
2135 +
3404 2136 // Append the question as if the user typed it
3405 - appendMessage("user", question, '', [], false, botId);
3406 -
2137 + appendMessage("user", question);
2138 +
3407 2139 // Only collapse if there are questions
3408 - if (hasQuickQuestions(botId)) {
3409 - collapseQuickQuestions(botId);
2140 + if (hasQuickQuestions()) {
2141 + collapseQuickQuestions();
3410 2142 }
3411 -
2143 +
3412 2144 // Send the question to the server
3413 - sendMessageToChatbot(question, botId);
2145 + sendMessageToChatbot(question);
3414 2146 });
3415 2147
3416 2148 $(document).on('click', '.questions-toggle-btn', function(e) {
3417 2149 e.preventDefault();
3418 2150 e.stopPropagation();
3419 - var botId = getBotIdFromElement(this);
3420 - expandQuickQuestions(botId);
2151 + expandQuickQuestions();
3421 2152 });
3422 2153
3423 2154 $(document).on('click', '.questions-collapse-btn', function(e) {
3424 2155 e.preventDefault();
3425 2156 e.stopPropagation();
3426 - var botId = getBotIdFromElement(this);
3427 - collapseQuickQuestions(botId);
2157 + collapseQuickQuestions();
3428 2158 });
3429 -
3430 -// Consent-safe YouTube embed (plan 03ba33): the server only ever ships a
3431 -// thumbnail facade — no Google iframe exists until the visitor taps play.
3432 -// Delegated so it also works for embeds restored from chat history.
3433 -$(document).on('click', '.mxchat-youtube-embed .mxchat-youtube-facade', function(e) {
3434 - e.preventDefault();
3435 - var $wrap = $(this).closest('.mxchat-youtube-embed');
3436 - var videoId = String($wrap.data('video-id') || '').replace(/[^A-Za-z0-9_-]/g, '');
3437 - if (!videoId) {
3438 - return;
3439 - }
3440 - var title = $wrap.find('.mxchat-youtube-title').text() || 'YouTube video';
3441 - var $iframe = $('<iframe>', {
3442 - src: 'https://www.youtube-nocookie.com/embed/' + videoId + '?autoplay=1&rel=0',
3443 - title: title,
3444 - allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
3445 - allowfullscreen: true,
3446 - frameborder: 0
3447 - }).addClass('mxchat-youtube-iframe');
3448 - $wrap.addClass('mxchat-youtube-playing');
3449 - $(this).replaceWith($iframe);
3450 -});
3451 2159
3452 - // Chatbot visibility toggle handlers - use class selector for multi-instance support
3453 - // Handles click + Enter/Space keypresses for keyboard accessibility (WCAG 2.1 SC 2.1.1).
3454 - $(document).on('click keydown', '.floating-chatbot-button', function(e) {
3455 - if (e.type === 'keydown') {
3456 - if (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'Spacebar') return;
3457 - e.preventDefault();
3458 - }
3459 - var botId = getBotIdFromElement(this);
3460 - var $chatbot = getElement(botId, 'floating-chatbot');
3461 - var $badge = getElement(botId, 'chat-notification-badge');
3462 - var $preChat = getElement(botId, 'pre-chat-message');
3463 -
3464 - if ($chatbot.hasClass('hidden')) {
3465 - $chatbot.removeClass('hidden').addClass('visible')
3466 - .attr('aria-modal', 'true').attr('role', 'dialog');
3467 - $(this).addClass('hidden').attr('aria-expanded', 'true');
3468 - $badge.hide(); // Hide notification when opening chat
2160 + // Chatbot visibility toggle handlers
2161 + $(document).on('click', '#floating-chatbot-button', function() {
2162 + var chatbot = $('#floating-chatbot');
2163 + if (chatbot.hasClass('hidden')) {
2164 + chatbot.removeClass('hidden').addClass('visible');
2165 + $(this).addClass('hidden');
2166 + $('#chat-notification-badge').hide(); // Hide notification when opening chat
3469 2167 disableScroll();
3470 - $preChat.fadeOut(250);
3471 -
3472 - // First open per page load: re-fetch behavior settings in case
3473 - // this page's inline values came from a stale full-page cache
3474 - // (plan-32db95). Idempotent — later opens are a no-op.
3475 - mxchatRefreshDynamicSettings();
3476 -
3477 - // Load chat history for returning visitors (persistence)
3478 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
3479 - if (chatPersistenceEnabled) {
3480 - MxChatInstances.ensureSession(botId);
3481 - }
3482 -
3483 - // Deferred email check — only on first widget open
3484 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3485 - var instance = MxChatInstances.get(botId);
3486 - if (emailBlocker && !instance.emailCheckDone) {
3487 - instance.emailCheckDone = true;
3488 - resolveEmailState(botId);
3489 - } else if (!emailBlocker) {
3490 - // No email collection — still route through showChatContainerForBot
3491 - // so the loader is shown while chat history loads
3492 - showChatContainerForBot(botId);
3493 - }
3494 -
3495 - // Move keyboard focus into the message input after the open transition.
3496 - setTimeout(function() {
3497 - var chatInput = getElementDOM(botId, 'chat-input');
3498 - if (chatInput && !chatInput.disabled) {
3499 - try { chatInput.focus({ preventScroll: true }); } catch (err) { chatInput.focus(); }
3500 - }
3501 - }, 300);
2168 + $('#pre-chat-message').fadeOut(250);
3502 2169 } else {
3503 - $chatbot.removeClass('visible').addClass('hidden').removeAttr('aria-modal');
3504 - $(this).removeClass('hidden').attr('aria-expanded', 'false');
2170 + chatbot.removeClass('visible').addClass('hidden');
2171 + $(this).removeClass('hidden');
3505 2172 enableScroll();
3506 - checkPreChatDismissal(botId);
2173 + checkPreChatDismissal();
3507 2174 }
3508 2175 });
3509 -
3510 - // Allow clicking anywhere on the title bar to close the chatbot.
3511 - // Returns keyboard focus to the launcher so keyboard users don't get
3512 - // stranded at <body> (WCAG SC 2.4.3 Focus Order). :focus-visible is
3513 - // heuristic-based so mouse-triggered close won't show a focus ring.
3514 - $(document).on('click', '.chatbot-top-bar', function() {
3515 - var botId = getBotIdFromElement(this);
3516 - getElement(botId, 'floating-chatbot').addClass('hidden').removeClass('visible').removeAttr('aria-modal');
3517 - var $launcher = getElement(botId, 'floating-chatbot-button');
3518 - $launcher.removeClass('hidden').attr('aria-expanded', 'false');
2176 +
2177 + $(document).on('click', '#exit-chat-button', function() {
2178 + $('#floating-chatbot').addClass('hidden').removeClass('visible');
2179 + $('#floating-chatbot-button').removeClass('hidden');
3519 2180 enableScroll();
3520 - try { $launcher.trigger('focus'); } catch (err) { /* no-op */ }
3521 2181 });
3522 -
3523 - // Global Escape-key handler — closes any visible chat widget and
3524 - // returns focus to its launcher. Standard modal-dismissal pattern;
3525 - // pairs with aria-modal="true" set on the widget when it opens.
3526 - $(document).on('keydown', function(e) {
3527 - if (e.key !== 'Escape' && e.key !== 'Esc') return;
3528 - var $visible = $('.floating-chatbot.visible');
3529 - if (!$visible.length) return;
3530 - e.preventDefault();
3531 - $visible.each(function() {
3532 - var botId = getBotIdFromElement(this);
3533 - $(this).addClass('hidden').removeClass('visible').removeAttr('aria-modal');
3534 - var $launcher = getElement(botId, 'floating-chatbot-button');
3535 - $launcher.removeClass('hidden').attr('aria-expanded', 'false');
3536 - try { $launcher.trigger('focus'); } catch (err) { /* no-op */ }
3537 - });
3538 - enableScroll();
3539 - });
3540 -
2182 +
3541 2183 $(document).on('click', '.close-pre-chat-message', function(e) {
3542 2184 e.stopPropagation(); // Prevent triggering the parent .pre-chat-message click
3543 - var botId = getBotIdFromElement(this);
3544 - handlePreChatDismissal(botId);
2185 + $('#pre-chat-message').fadeOut(200, function() {
2186 + $(this).remove();
2187 + });
3545 2188 });
2189 +
3546 2190
3547 -
3548 - // PDF upload button handlers - use class selector
3549 - $(document).on('click', '.pdf-upload-btn', function() {
3550 - var botId = getBotIdFromElement(this);
3551 - var pdfInput = getElementDOM(botId, 'pdf-upload');
3552 - if (pdfInput) pdfInput.click();
3553 - });
3554 -
3555 - // Word upload button handlers - use class selector
3556 - $(document).on('click', '.word-upload-btn', function() {
3557 - var botId = getBotIdFromElement(this);
3558 - var wordInput = getElementDOM(botId, 'word-upload');
3559 - if (wordInput) wordInput.click();
3560 - });
2191 + // PDF upload button handlers
2192 + if (document.getElementById('pdf-upload-btn')) {
2193 + document.getElementById('pdf-upload-btn').addEventListener('click', function() {
2194 + document.getElementById('pdf-upload').click();
2195 + });
2196 + }
3561 2197
3562 - // PDF file input change handler - delegated, bot-aware (was bound to stale un-suffixed id 'pdf-upload')
3563 - $(document).on('change', '.pdf-upload', async function(e) {
3564 - var botId = getBotIdFromElement(this);
3565 - var instance = MxChatInstances.get(botId);
3566 - const file = this.files[0];
3567 - const sessionId = MxChatInstances.ensureSession(botId);
3568 -
2198 + // Word upload button handlers
2199 + if (document.getElementById('word-upload-btn')) {
2200 + document.getElementById('word-upload-btn').addEventListener('click', function() {
2201 + document.getElementById('word-upload').click();
2202 + });
2203 + }
2204 +
2205 + // PDF file input change handler
2206 + addSafeEventListener('pdf-upload', 'change', async function(e) {
2207 + const file = e.target.files[0];
2208 +
3569 2209 if (!file || file.type !== 'application/pdf') {
3570 2210 alert('Please select a valid PDF file.');
3571 2211 return;
3572 2212 }
3573 -
2213 +
3574 2214 if (!sessionId) {
3575 2215 alert('Error: No session ID found');
3576 2216 return;
3577 2217 }
@@ -3579,49 +2219,47 @@
3579 2219 if (!mxchatChat || !mxchatChat.ajax_url || !mxchatChat.nonce) {
3580 2220 alert('Error: Ajax configuration missing');
3581 2221 return;
3582 2222 }
3583 -
2223 +
3584 2224 // Disable buttons and show loading state
3585 - const uploadBtn = getElementDOM(botId, 'pdf-upload-btn');
3586 - const sendBtn = getElementDOM(botId, 'send-button');
3587 - if (!uploadBtn) return;
2225 + const uploadBtn = document.getElementById('pdf-upload-btn');
2226 + const sendBtn = document.getElementById('send-button');
3588 2227 const originalBtnContent = uploadBtn.innerHTML;
3589 -
2228 +
3590 2229 try {
3591 - // Wait for page-cache nonce refresh before reading mxchatChat.nonce. See plan-c5457f.
3592 - await new Promise(function(resolve) { refreshNonceIfNeeded(resolve); });
3593 2230 const formData = new FormData();
3594 2231 formData.append('action', 'mxchat_upload_pdf');
3595 2232 formData.append('pdf_file', file);
3596 2233 formData.append('session_id', sessionId);
3597 2234 formData.append('nonce', mxchatChat.nonce);
3598 -
2235 +
3599 2236 uploadBtn.disabled = true;
3600 - if (sendBtn) sendBtn.disabled = true;
2237 + sendBtn.disabled = true;
3601 2238 uploadBtn.innerHTML = `<svg class="spinner" viewBox="0 0 50 50">
3602 2239 <circle cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
3603 2240 </svg>`;
3604 -
2241 +
3605 2242 const response = await fetch(mxchatChat.ajax_url, {
3606 2243 method: 'POST',
3607 2244 body: formData
3608 2245 });
3609 -
2246 +
3610 2247 const data = await response.json();
3611 -
2248 +
3612 2249 if (data.success) {
3613 2250 // Hide popular questions if they exist
3614 - if (hasQuickQuestions(botId)) {
3615 - collapseQuickQuestions(botId);
2251 + const popularQuestionsContainer = document.getElementById('mxchat-popular-questions');
2252 + if (hasQuickQuestions()) {
2253 + collapseQuickQuestions();
3616 2254 }
3617 -
2255 +
3618 2256 // Show the active PDF name
3619 - showActivePdf(data.data.filename, botId);
3620 -
3621 - appendMessage('bot', data.data.message, '', [], false, botId);
3622 - scrollToBottom(botId);
3623 - instance.activePdfFile = data.data.filename;
2257 + showActivePdf(data.data.filename);
2258 +
2259 + appendMessage('bot', data.data.message);
2260 + scrollToBottom();
2261 + activePdfFile = data.data.filename;
3624 2262 } else {
3625 2263 alert('Failed to upload PDF. Please try again.');
3626 2264 }
3627 2265 } catch (error) {
@@ -3627,76 +2265,66 @@
3627 2265 } catch (error) {
3628 2266 alert('Error uploading file. Please try again.');
3629 2267 } finally {
3630 2268 uploadBtn.disabled = false;
3631 - if (sendBtn) sendBtn.disabled = false;
2269 + sendBtn.disabled = false;
3632 2270 uploadBtn.innerHTML = originalBtnContent;
3633 2271 this.value = ''; // Reset file input
3634 2272 }
3635 2273 });
3636 2274
3637 - // Word file input change handler - delegated, bot-aware (was bound to stale un-suffixed id 'word-upload')
3638 - $(document).on('change', '.word-upload', async function(e) {
3639 - var botId = getBotIdFromElement(this);
3640 - var instance = MxChatInstances.get(botId);
3641 - const file = this.files[0];
3642 - const sessionId = MxChatInstances.ensureSession(botId);
3643 -
2275 + // Word file input change handler
2276 + addSafeEventListener('word-upload', 'change', async function(e) {
2277 + const file = e.target.files[0];
2278 +
3644 2279 if (!file || file.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
3645 2280 alert('Please select a valid Word document (.docx).');
3646 2281 return;
3647 2282 }
3648 -
2283 +
3649 2284 if (!sessionId) {
3650 2285 alert('Error: No session ID found');
3651 2286 return;
3652 2287 }
3653 2288
3654 - if (!mxchatChat || !mxchatChat.ajax_url || !mxchatChat.nonce) {
3655 - alert('Error: Ajax configuration missing');
3656 - return;
3657 - }
3658 -
3659 2289 // Disable buttons and show loading state
3660 - const uploadBtn = getElementDOM(botId, 'word-upload-btn');
3661 - const sendBtn = getElementDOM(botId, 'send-button');
3662 - if (!uploadBtn) return;
2290 + const uploadBtn = document.getElementById('word-upload-btn');
2291 + const sendBtn = document.getElementById('send-button');
3663 2292 const originalBtnContent = uploadBtn.innerHTML;
3664 -
2293 +
3665 2294 try {
3666 - // Wait for page-cache nonce refresh before reading mxchatChat.nonce. See plan-c5457f.
3667 - await new Promise(function(resolve) { refreshNonceIfNeeded(resolve); });
3668 2295 const formData = new FormData();
3669 2296 formData.append('action', 'mxchat_upload_word');
3670 2297 formData.append('word_file', file);
3671 2298 formData.append('session_id', sessionId);
3672 2299 formData.append('nonce', mxchatChat.nonce);
3673 -
2300 +
3674 2301 uploadBtn.disabled = true;
3675 - if (sendBtn) sendBtn.disabled = true;
2302 + sendBtn.disabled = true;
3676 2303 uploadBtn.innerHTML = `<svg class="spinner" viewBox="0 0 50 50">
3677 2304 <circle cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
3678 2305 </svg>`;
3679 -
2306 +
3680 2307 const response = await fetch(mxchatChat.ajax_url, {
3681 2308 method: 'POST',
3682 2309 body: formData
3683 2310 });
3684 -
2311 +
3685 2312 const data = await response.json();
3686 -
2313 +
3687 2314 if (data.success) {
3688 2315 // Hide popular questions if they exist
3689 - if (hasQuickQuestions(botId)) {
3690 - collapseQuickQuestions(botId);
2316 + const popularQuestionsContainer = document.getElementById('mxchat-popular-questions');
2317 + if (hasQuickQuestions()) {
2318 + collapseQuickQuestions();
3691 2319 }
3692 -
2320 +
3693 2321 // Show the active Word document name
3694 - showActiveWord(data.data.filename, botId);
3695 -
3696 - appendMessage('bot', data.data.message, '', [], false, botId);
3697 - scrollToBottom(botId);
3698 - instance.activeWordFile = data.data.filename;
2322 + showActiveWord(data.data.filename);
2323 +
2324 + appendMessage('bot', data.data.message);
2325 + scrollToBottom();
2326 + activeWordFile = data.data.filename;
3699 2327 } else {
3700 2328 alert('Failed to upload Word document. Please try again.');
3701 2329 }
3702 2330 } catch (error) {
@@ -3702,25 +2330,25 @@
3702 2330 } catch (error) {
3703 2331 alert('Error uploading file. Please try again.');
3704 2332 } finally {
3705 2333 uploadBtn.disabled = false;
3706 - if (sendBtn) sendBtn.disabled = false;
2334 + sendBtn.disabled = false;
3707 2335 uploadBtn.innerHTML = originalBtnContent;
3708 2336 this.value = ''; // Reset file input
3709 2337 }
3710 2338 });
3711 2339
3712 - // Remove button click handlers - delegated, bot-aware (were bound to stale un-suffixed ids)
3713 - $(document).on('click', '.remove-pdf-btn', function(e) {
2340 + // Remove button click handlers
2341 + document.getElementById('remove-pdf-btn')?.addEventListener('click', function(e) {
3714 2342 e.preventDefault();
3715 2343 e.stopPropagation();
3716 - removeActivePdf(getBotIdFromElement(this));
2344 + removeActivePdf();
3717 2345 });
3718 -
3719 - $(document).on('click', '.remove-word-btn', function(e) {
2346 +
2347 + document.getElementById('remove-word-btn')?.addEventListener('click', function(e) {
3720 2348 e.preventDefault();
3721 2349 e.stopPropagation();
3722 - removeActiveWord(getBotIdFromElement(this));
2350 + removeActiveWord();
3723 2351 });
3724 2352
3725 2353 // Window resize handlers
3726 2354 $(window).on('resize orientationchange', function() {
@@ -3758,511 +2386,431 @@
3758 2386 });
3759 2387
3760 2388
3761 2389 // ====================================
3762 -// INIT LOADER & CHAT CONTAINER HELPERS
2390 +// EMAIL COLLECTION SETUP - FIXED VERSION
3763 2391 // ====================================
3764 -// These must be outside the email collection block so they're always available
3765 -// (used by persistence loading even when email collection is off)
3766 -
3767 -function showInitLoader(botId) {
3768 - var loader = getElementDOM(botId, 'mxchat-init-loader');
3769 - if (loader) loader.style.display = 'flex';
3770 -}
3771 -
3772 -function hideInitLoader(botId) {
3773 - var loader = getElementDOM(botId, 'mxchat-init-loader');
3774 - if (loader) loader.style.display = 'none';
3775 -}
3776 -
3777 -function showEmailFormForBot(botId) {
3778 - hideInitLoader(botId);
3779 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3780 - var chatContainer = getElementDOM(botId, 'chat-container');
3781 - if (emailBlocker) emailBlocker.style.display = 'flex';
3782 - if (chatContainer) chatContainer.style.display = 'none';
3783 -}
3784 -
3785 -function showChatContainerForBot(botId) {
3786 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3787 - var chatContainer = getElementDOM(botId, 'chat-container');
3788 - if (emailBlocker) emailBlocker.style.display = 'none';
3789 -
3790 - var instance = MxChatInstances.get(botId);
3791 - var chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
3792 -
3793 - // If persistence is on and history hasn't loaded yet, show loader
3794 - // while history loads to prevent flash of empty chat
3795 - if (chatPersistenceEnabled && !instance.chatHistoryLoaded) {
3796 - if (chatContainer) chatContainer.style.display = 'none';
3797 - showInitLoader(botId);
3798 - loadChatHistory(botId, function() {
3799 - hideInitLoader(botId);
3800 - if (chatContainer) chatContainer.style.display = 'flex';
3801 - scrollToBottom(botId, true);
3802 - });
3803 - } else {
3804 - hideInitLoader(botId);
3805 - if (chatContainer) chatContainer.style.display = 'flex';
3806 - if (typeof loadChatHistory === 'function') {
3807 - loadChatHistory(botId);
3808 - }
3809 - }
3810 -}
3811 -
3812 -// ====================================
3813 -// EMAIL COLLECTION SETUP - MULTI-INSTANCE VERSION
3814 -// ====================================
3815 2392 // Only run email collection setup if it's enabled
3816 2393 if (mxchatChat && mxchatChat.email_collection_enabled === 'on') {
2394 + // Email collection form setup and handlers
2395 + const emailForm = document.getElementById('email-collection-form');
2396 + const emailBlocker = document.getElementById('email-blocker');
2397 + const chatbotWrapper = document.getElementById('chat-container');
3817 2398
3818 - // Track submitting state per bot
3819 - const emailSubmittingState = {};
3820 -
3821 - // Add CSS animations for email form (once globally)
3822 - if (!document.getElementById('email-error-styles')) {
3823 - const style = document.createElement('style');
3824 - style.id = 'email-error-styles';
3825 - style.textContent = `
3826 - @keyframes fadeInError {
3827 - from { opacity: 0; transform: translateY(-5px); }
3828 - to { opacity: 1; transform: translateY(0); }
3829 - }
3830 - .email-input-shake {
3831 - animation: shake 0.5s ease-in-out;
3832 - }
3833 - @keyframes shake {
3834 - 0%, 100% { transform: translateX(0); }
3835 - 25% { transform: translateX(-5px); }
3836 - 75% { transform: translateX(5px); }
3837 - }
3838 - @keyframes spin {
3839 - from { transform: rotate(0deg); }
3840 - to { transform: rotate(360deg); }
3841 - }
3842 - .email-spinner {
3843 - display: inline-block;
3844 - vertical-align: middle;
3845 - }
3846 - `;
3847 - document.head.appendChild(style);
3848 - }
3849 -
3850 - function isValidEmailAddress(email) {
3851 - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
3852 - return emailRegex.test(email.trim()) && email.length <= 254;
3853 - }
3854 -
3855 - function isValidNameInput(name) {
3856 - return name && name.trim().length >= 2 && name.trim().length <= 100;
3857 - }
3858 -
3859 - /**
3860 - * Replace {visitor_name} placeholder in intro message with actual visitor name
3861 - * @param {string} botId - The bot instance ID
3862 - * @param {string} visitorName - The visitor's name to insert
3863 - */
3864 - function replaceVisitorNamePlaceholder(botId, visitorName) {
3865 - var chatBox = getElementDOM(botId, 'chat-box');
3866 - if (!chatBox) return;
3867 -
3868 - // Find the first bot message (intro message)
3869 - var introMessage = chatBox.querySelector('.bot-message');
3870 - if (!introMessage) return;
3871 -
3872 - var messageContent = introMessage.querySelector('div[dir="auto"]');
3873 - if (!messageContent) return;
3874 -
3875 - var html = messageContent.innerHTML;
3876 -
3877 - // Replace {visitor_name} placeholder (case-insensitive)
3878 - if (visitorName && visitorName.trim()) {
3879 - // Escape HTML to prevent XSS
3880 - var safeName = $('<div>').text(visitorName.trim()).html();
3881 - html = html.replace(/\{visitor_name\}/gi, safeName);
3882 - } else {
3883 - // Remove placeholder and clean up spacing if no name provided
3884 - html = html.replace(/\{visitor_name\}/gi, '');
3885 - // Clean up any double spaces that might result
3886 - html = html.replace(/\s{2,}/g, ' ').trim();
2399 + if (emailForm && emailBlocker && chatbotWrapper) {
2400 +
2401 + // Add loading state management
2402 + let isSubmitting = false;
2403 +
2404 + // Optimized UI transition functions
2405 + function showEmailForm() {
2406 + emailBlocker.style.display = 'flex';
2407 + chatbotWrapper.style.display = 'none';
3887 2408 }
3888 2409
3889 - messageContent.innerHTML = html;
3890 - }
3891 -
3892 - function setEmailSubmissionState(botId, loading) {
3893 - var submitButton = getElementDOM(botId, 'email-submit-button');
3894 - var emailInput = getElementDOM(botId, 'user-email');
3895 - var nameInput = getElementDOM(botId, 'user-name');
3896 -
3897 - if (loading) {
3898 - emailSubmittingState[botId] = true;
3899 - if (submitButton) submitButton.disabled = true;
3900 - if (emailInput) emailInput.disabled = true;
3901 - if (nameInput) nameInput.disabled = true;
3902 -
3903 - if (submitButton && !submitButton.getAttribute('data-original-html')) {
3904 - submitButton.setAttribute('data-original-html', submitButton.innerHTML);
3905 - const originalText = submitButton.textContent;
3906 - submitButton.innerHTML = `
3907 - <svg class="email-spinner" style="width: 16px; height: 16px; margin-right: 8px; animation: spin 1s linear infinite;" viewBox="0 0 24 24">
3908 - <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="31.416" stroke-dashoffset="31.416">
3909 - <animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/>
3910 - <animate attributeName="stroke-dashoffset" dur="2s" values="0;-15.708;-31.416" repeatCount="indefinite"/>
3911 - </circle>
3912 - </svg>
3913 - ${originalText}
3914 - `;
3915 - submitButton.style.opacity = '0.8';
2410 + function showChatContainer() {
2411 + // Show chat immediately without delay
2412 + emailBlocker.style.display = 'none';
2413 + chatbotWrapper.style.display = 'flex';
2414 +
2415 + // Load chat history only after showing chat container
2416 + if (typeof loadChatHistory === 'function') {
2417 + loadChatHistory();
3916 2418 }
3917 - } else {
3918 - emailSubmittingState[botId] = false;
3919 - if (submitButton) submitButton.disabled = false;
3920 - if (emailInput) emailInput.disabled = false;
3921 - if (nameInput) nameInput.disabled = false;
3922 -
3923 - if (submitButton) {
3924 - const originalHtml = submitButton.getAttribute('data-original-html');
3925 - if (originalHtml) {
3926 - submitButton.innerHTML = originalHtml;
3927 - }
3928 - submitButton.style.opacity = '1';
3929 - }
3930 2419 }
3931 - }
3932 2420
3933 - function showEmailError(botId, message) {
3934 - clearEmailError(botId);
3935 -
3936 - var emailForm = getElementDOM(botId, 'email-collection-form');
3937 - if (!emailForm) return;
3938 -
3939 - const errorDiv = document.createElement('div');
3940 - errorDiv.className = 'email-error';
3941 - errorDiv.style.cssText = `
3942 - color: #e74c3c;
3943 - font-size: 12px;
3944 - margin-top: 8px;
3945 - padding: 4px 0;
3946 - animation: fadeInError 0.3s ease;
3947 - `;
3948 - errorDiv.textContent = message;
3949 - emailForm.appendChild(errorDiv);
3950 -
3951 - // Add shake animation to inputs
3952 - var emailInput = getElementDOM(botId, 'user-email');
3953 - var nameInput = getElementDOM(botId, 'user-name');
3954 -
3955 - if (emailInput) {
3956 - emailInput.classList.add('email-input-shake');
3957 - setTimeout(() => emailInput.classList.remove('email-input-shake'), 500);
2421 + // Enhanced email validation
2422 + function isValidEmail(email) {
2423 + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
2424 + return emailRegex.test(email.trim()) && email.length <= 254; // RFC 5321 limit
3958 2425 }
3959 - if (nameInput) {
3960 - nameInput.classList.add('email-input-shake');
3961 - setTimeout(() => nameInput.classList.remove('email-input-shake'), 500);
3962 - }
3963 - }
3964 2426
3965 - function clearEmailError(botId) {
3966 - var emailForm = getElementDOM(botId, 'email-collection-form');
3967 - if (emailForm) {
3968 - const existingErrors = emailForm.querySelectorAll('.email-error');
3969 - existingErrors.forEach(error => error.remove());
2427 + // Enhanced name validation
2428 + function isValidName(name) {
2429 + return name && name.trim().length >= 2 && name.trim().length <= 100;
3970 2430 }
3971 - }
3972 2431
3973 - // Resolve email state using server-side data when available, AJAX fallback otherwise
3974 - function resolveEmailState(botId) {
3975 - if (mxchatChat.skip_email_check && mxchatChat.initial_email_state) {
3976 - if (mxchatChat.initial_email_state.show_email_form) {
3977 - showEmailFormForBot(botId);
2432 + // Show loading state with spinner
2433 + function setSubmissionState(loading) {
2434 + const submitButton = document.getElementById('email-submit-button');
2435 + const emailInput = document.getElementById('user-email');
2436 + const nameInput = document.getElementById('user-name');
2437 +
2438 + if (loading) {
2439 + isSubmitting = true;
2440 + if (submitButton) submitButton.disabled = true;
2441 + if (emailInput) emailInput.disabled = true;
2442 + if (nameInput) nameInput.disabled = true;
2443 +
2444 + // Store original content and add spinner
2445 + if (submitButton && !submitButton.getAttribute('data-original-html')) {
2446 + submitButton.setAttribute('data-original-html', submitButton.innerHTML);
2447 +
2448 + // Add loading spinner while keeping original text
2449 + const originalText = submitButton.textContent;
2450 + submitButton.innerHTML = `
2451 + <svg class="email-spinner" style="width: 16px; height: 16px; margin-right: 8px; animation: spin 1s linear infinite;" viewBox="0 0 24 24">
2452 + <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="31.416" stroke-dashoffset="31.416">
2453 + <animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/>
2454 + <animate attributeName="stroke-dashoffset" dur="2s" values="0;-15.708;-31.416" repeatCount="indefinite"/>
2455 + </circle>
2456 + </svg>
2457 + ${originalText}
2458 + `;
2459 +
2460 + submitButton.style.opacity = '0.8';
2461 + }
3978 2462 } else {
3979 - showChatContainerForBot(botId);
2463 + isSubmitting = false;
2464 + if (submitButton) submitButton.disabled = false;
2465 + if (emailInput) emailInput.disabled = false;
2466 + if (nameInput) nameInput.disabled = false;
2467 +
2468 + // Restore original content
2469 + if (submitButton) {
2470 + const originalHtml = submitButton.getAttribute('data-original-html');
2471 + if (originalHtml) {
2472 + submitButton.innerHTML = originalHtml;
2473 + }
2474 + submitButton.style.opacity = '1';
2475 + }
3980 2476 }
3981 - } else {
3982 - checkSessionAndEmailForBot(botId);
3983 2477 }
3984 - }
3985 2478
3986 - function checkSessionAndEmailForBot(botId) {
3987 - const sessionId = MxChatInstances.ensureSession(botId);
3988 -
3989 - // Hide both panels while we check — show loader instead
3990 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3991 - var chatContainer = getElementDOM(botId, 'chat-container');
3992 - if (emailBlocker) emailBlocker.style.display = 'none';
3993 - if (chatContainer) chatContainer.style.display = 'none';
3994 - showInitLoader(botId);
3995 -
3996 - fetch(mxchatChat.ajax_url, {
3997 - method: 'POST',
3998 - headers: {
3999 - 'Content-Type': 'application/x-www-form-urlencoded',
4000 - },
4001 - body: new URLSearchParams({
4002 - action: 'mxchat_check_email_provided',
4003 - session_id: sessionId,
4004 - nonce: mxchatChat.nonce,
4005 - })
4006 - })
4007 - .then((response) => {
4008 - if (!response.ok) {
4009 - throw new Error(`HTTP error! status: ${response.status}`);
2479 + // Error display functions
2480 + function showEmailError(message) {
2481 + clearEmailError();
2482 +
2483 + const errorDiv = document.createElement('div');
2484 + errorDiv.className = 'email-error';
2485 + errorDiv.style.cssText = `
2486 + color: #e74c3c;
2487 + font-size: 12px;
2488 + margin-top: 8px;
2489 + padding: 4px 0;
2490 + animation: fadeInError 0.3s ease;
2491 + `;
2492 + errorDiv.textContent = message;
2493 +
2494 + // Add CSS animation if not already present
2495 + if (!document.getElementById('email-error-styles')) {
2496 + const style = document.createElement('style');
2497 + style.id = 'email-error-styles';
2498 + style.textContent = `
2499 + @keyframes fadeInError {
2500 + from { opacity: 0; transform: translateY(-5px); }
2501 + to { opacity: 1; transform: translateY(0); }
2502 + }
2503 + .email-input-shake {
2504 + animation: shake 0.5s ease-in-out;
2505 + }
2506 + @keyframes shake {
2507 + 0%, 100% { transform: translateX(0); }
2508 + 25% { transform: translateX(-5px); }
2509 + 75% { transform: translateX(5px); }
2510 + }
2511 + @keyframes spin {
2512 + from { transform: rotate(0deg); }
2513 + to { transform: rotate(360deg); }
2514 + }
2515 + .email-spinner {
2516 + display: inline-block;
2517 + vertical-align: middle;
2518 + }
2519 + `;
2520 + document.head.appendChild(style);
4010 2521 }
4011 - return response.json();
4012 - })
4013 - .then((data) => {
4014 - if (data.success) {
4015 - if (data.data.logged_in || data.data.email) {
4016 - showChatContainerForBot(botId);
4017 - } else {
4018 - showEmailFormForBot(botId);
4019 - }
4020 - } else {
4021 - showEmailFormForBot(botId);
2522 +
2523 + emailForm.appendChild(errorDiv);
2524 +
2525 + // Add shake animation to inputs
2526 + const emailInput = document.getElementById('user-email');
2527 + const nameInput = document.getElementById('user-name');
2528 +
2529 + if (emailInput) {
2530 + emailInput.classList.add('email-input-shake');
2531 + setTimeout(() => {
2532 + emailInput.classList.remove('email-input-shake');
2533 + }, 500);
4022 2534 }
4023 - })
4024 - .catch((error) => {
4025 - showEmailFormForBot(botId);
4026 - });
4027 - }
4028 -
4029 - // Event delegation for email form submission
4030 - $(document).on('submit', '.email-collection-form', function(e) {
4031 - e.preventDefault();
4032 - e.stopPropagation();
4033 -
4034 - var botId = getBotIdFromElement(this);
4035 -
4036 - // Prevent double submission
4037 - if (emailSubmittingState[botId]) {
4038 - return false;
2535 +
2536 + if (nameInput) {
2537 + nameInput.classList.add('email-input-shake');
2538 + setTimeout(() => {
2539 + nameInput.classList.remove('email-input-shake');
2540 + }, 500);
2541 + }
4039 2542 }
4040 2543
4041 - var emailInput = getElementDOM(botId, 'user-email');
4042 - var nameInput = getElementDOM(botId, 'user-name');
4043 - var consentInput = getElementDOM(botId, 'user-consent');
4044 - var userEmail = emailInput ? emailInput.value.trim() : '';
4045 - var userName = nameInput ? nameInput.value.trim() : '';
4046 - var sessionId = MxChatInstances.ensureSession(botId);
4047 -
4048 - // Validate email
4049 - if (!userEmail) {
4050 - showEmailError(botId, 'Please enter your email address.');
4051 - return false;
2544 + function clearEmailError() {
2545 + const existingErrors = emailForm.querySelectorAll('.email-error');
2546 + existingErrors.forEach(error => error.remove());
4052 2547 }
4053 2548
4054 - if (!isValidEmailAddress(userEmail)) {
4055 - showEmailError(botId, 'Please enter a valid email address.');
4056 - return false;
4057 - }
2549 + // MAIN FORM SUBMIT HANDLER
2550 + // Remove any existing event listeners first
2551 + emailForm.removeEventListener('submit', handleFormSubmit);
4058 2552
4059 - // Validate name if field exists and has content
4060 - if (nameInput && userName && !isValidNameInput(userName)) {
4061 - showEmailError(botId, 'Please enter a valid name (2-100 characters).');
4062 - return false;
4063 - }
2553 + // Add the form submit handler
2554 + emailForm.addEventListener('submit', handleFormSubmit);
4064 2555
4065 - // Consent checkbox (b062c4): backstop behind the native required
4066 - // attribute; the server enforces this independently either way.
4067 - if (consentInput && consentInput.required && !consentInput.checked) {
4068 - showEmailError(botId, 'Please tick the consent box to continue.');
4069 - return false;
4070 - }
2556 + function handleFormSubmit(event) {
2557 + event.preventDefault();
2558 + event.stopPropagation();
4071 2559
4072 - clearEmailError(botId);
4073 - setEmailSubmissionState(botId, true);
2560 + // Prevent double submission
2561 + if (isSubmitting) {
2562 + return false;
2563 + }
4074 2564
4075 - // Prepare form data
4076 - const formData = new URLSearchParams({
4077 - action: 'mxchat_handle_save_email_and_response',
4078 - email: userEmail,
4079 - session_id: sessionId,
4080 - nonce: mxchatChat.nonce,
4081 - });
2565 + const userEmail = document.getElementById('user-email').value.trim();
2566 + const nameInput = document.getElementById('user-name');
2567 + const userName = nameInput ? nameInput.value.trim() : '';
2568 + const sessionId = getChatSession();
4082 2569
4083 - if (userName) {
4084 - formData.append('name', userName);
4085 - }
2570 + // Validate email before submission
2571 + if (!userEmail) {
2572 + showEmailError('Please enter your email address.');
2573 + return false;
2574 + }
4086 2575
4087 - // Ticked/unticked both travel when the checkbox is rendered, so an
4088 - // optional-consent "no" is recorded as a decision, not an absence.
4089 - if (consentInput) {
4090 - formData.append('consent', consentInput.checked ? '1' : '0');
4091 - }
2576 + if (!isValidEmail(userEmail)) {
2577 + showEmailError('Please enter a valid email address.');
2578 + return false;
2579 + }
4092 2580
4093 - fetch(mxchatChat.ajax_url, {
4094 - method: 'POST',
4095 - headers: {
4096 - 'Content-Type': 'application/x-www-form-urlencoded',
4097 - },
4098 - body: formData
4099 - })
4100 - .then((response) => {
4101 - if (!response.ok) {
4102 - throw new Error(`HTTP error! status: ${response.status}`);
2581 + // Validate name if field exists
2582 + if (nameInput && !isValidName(userName)) {
2583 + showEmailError('Please enter a valid name (2-100 characters).');
2584 + return false;
4103 2585 }
4104 - return response.json();
4105 - })
4106 - .then((data) => {
4107 - setEmailSubmissionState(botId, false);
4108 2586
4109 - if (data.success) {
4110 - showChatContainerForBot(botId);
2587 + // Clear any existing errors
2588 + clearEmailError();
2589 + setSubmissionState(true);
4111 2590
4112 - // Replace {visitor_name} placeholder in intro message with actual name
4113 - if (userName) {
4114 - replaceVisitorNamePlaceholder(botId, userName);
4115 - } else {
4116 - // Remove placeholder if no name provided
4117 - replaceVisitorNamePlaceholder(botId, '');
4118 - }
2591 + // Prepare form data with optional name
2592 + const formData = new URLSearchParams({
2593 + action: 'mxchat_handle_save_email_and_response',
2594 + email: userEmail,
2595 + session_id: sessionId,
2596 + nonce: mxchatChat.nonce,
2597 + });
4119 2598
4120 - if (data.message && typeof appendMessage === 'function') {
4121 - setTimeout(() => {
4122 - appendMessage('bot', data.message, '', [], false, botId);
4123 - if (typeof scrollToBottom === 'function') {
4124 - scrollToBottom(botId);
4125 - }
4126 - }, 100);
4127 - }
4128 - } else {
4129 - showEmailError(botId, data.message || 'Failed to save email. Please try again.');
2599 + // Add name to form data if provided
2600 + if (userName) {
2601 + formData.append('name', userName);
4130 2602 }
4131 - })
4132 - .catch((error) => {
4133 - setEmailSubmissionState(botId, false);
4134 - showEmailError(botId, 'An error occurred. Please try again.');
4135 - });
4136 2603
4137 - return false;
4138 - });
2604 + fetch(mxchatChat.ajax_url, {
2605 + method: 'POST',
2606 + headers: {
2607 + 'Content-Type': 'application/x-www-form-urlencoded',
2608 + },
2609 + body: formData
2610 + })
2611 + .then((response) => {
2612 + if (!response.ok) {
2613 + throw new Error(`HTTP error! status: ${response.status}`);
2614 + }
2615 + return response.json();
2616 + })
2617 + .then((data) => {
2618 + setSubmissionState(false);
4139 2619
4140 - // Real-time email validation using event delegation
4141 - $(document).on('input', '.mxchat-email-input', function() {
4142 - var botId = getBotIdFromElement(this);
4143 - var $input = $(this);
2620 + if (data.success) {
2621 + // Show chat immediately
2622 + showChatContainer();
4144 2623
4145 - // Clear previous timeout
4146 - clearTimeout($input.data('validationTimeout'));
2624 + // Handle bot response if provided
2625 + if (data.message && typeof appendMessage === 'function') {
2626 + setTimeout(() => {
2627 + appendMessage('bot', data.message);
2628 + if (typeof scrollToBottom === 'function') {
2629 + scrollToBottom();
2630 + }
2631 + }, 100);
2632 + }
2633 + } else {
2634 + showEmailError(data.message || 'Failed to save email. Please try again.');
2635 + }
2636 + })
2637 + .catch((error) => {
2638 + setSubmissionState(false);
2639 + showEmailError('An error occurred. Please try again.');
2640 + });
2641 +
2642 + return false; // Extra prevention
2643 + }
4147 2644
4148 - // Debounce validation
4149 - var timeout = setTimeout(() => {
4150 - var email = this.value.trim();
4151 - clearEmailError(botId);
2645 + // Real-time email validation
2646 + const emailInput = document.getElementById('user-email');
2647 + if (emailInput) {
2648 + let validationTimeout;
2649 +
2650 + emailInput.addEventListener('input', function() {
2651 + // Clear previous validation timeout
2652 + if (validationTimeout) {
2653 + clearTimeout(validationTimeout);
2654 + }
2655 +
2656 + // Debounce validation
2657 + validationTimeout = setTimeout(() => {
2658 + const email = this.value.trim();
2659 + clearEmailError();
2660 +
2661 + if (email && !isValidEmail(email)) {
2662 + showEmailError('Please enter a valid email address.');
2663 + }
2664 + }, 500);
2665 + });
4152 2666
4153 - if (email && !isValidEmailAddress(email)) {
4154 - showEmailError(botId, 'Please enter a valid email address.');
4155 - }
4156 - }, 500);
2667 + // Handle Enter key
2668 + emailInput.addEventListener('keypress', function(e) {
2669 + if (e.key === 'Enter' && !isSubmitting) {
2670 + e.preventDefault();
2671 + emailForm.dispatchEvent(new Event('submit'));
2672 + }
2673 + });
2674 + }
4157 2675
4158 - $input.data('validationTimeout', timeout);
4159 - });
2676 + // Real-time name validation
2677 + const nameInput = document.getElementById('user-name');
2678 + if (nameInput) {
2679 + let nameValidationTimeout;
2680 +
2681 + nameInput.addEventListener('input', function() {
2682 + // Clear previous validation timeout
2683 + if (nameValidationTimeout) {
2684 + clearTimeout(nameValidationTimeout);
2685 + }
2686 +
2687 + // Debounce validation
2688 + nameValidationTimeout = setTimeout(() => {
2689 + const name = this.value.trim();
2690 + clearEmailError();
2691 +
2692 + if (name && !isValidName(name)) {
2693 + showEmailError('Name must be between 2 and 100 characters.');
2694 + }
2695 + }, 500);
2696 + });
4160 2697
4161 - // Handle Enter key in email input
4162 - $(document).on('keypress', '.mxchat-email-input', function(e) {
4163 - if (e.key === 'Enter') {
4164 - e.preventDefault();
4165 - var botId = getBotIdFromElement(this);
4166 - if (!emailSubmittingState[botId]) {
4167 - $(this).closest('.email-collection-form').submit();
4168 - }
2698 + // Handle Enter key
2699 + nameInput.addEventListener('keypress', function(e) {
2700 + if (e.key === 'Enter' && !isSubmitting) {
2701 + e.preventDefault();
2702 + emailForm.dispatchEvent(new Event('submit'));
2703 + }
2704 + });
4169 2705 }
4170 - });
4171 2706
4172 - // Handle Enter key in name input
4173 - $(document).on('keypress', '.mxchat-name-input', function(e) {
4174 - if (e.key === 'Enter') {
4175 - e.preventDefault();
4176 - var botId = getBotIdFromElement(this);
4177 - if (!emailSubmittingState[botId]) {
4178 - $(this).closest('.email-collection-form').submit();
2707 + // Initial state check
2708 + if (mxchatChat.skip_email_check && mxchatChat.initial_email_state) {
2709 + const emailState = mxchatChat.initial_email_state;
2710 + if (emailState.show_email_form) {
2711 + showEmailForm();
2712 + } else {
2713 + showChatContainer();
4179 2714 }
2715 + } else {
2716 + // Check email status via AJAX
2717 + setTimeout(checkSessionAndEmail, 100);
4180 2718 }
4181 - });
4182 2719
4183 - // Initialize email check for all bot instances
4184 - // For floating bots: defer until widget is opened (zero passive AJAX)
4185 - // For embedded bots: check immediately since the form is visible
4186 - $('.mxchat-chatbot-wrapper').each(function() {
4187 - var botId = $(this).data('bot-id') || 'default';
4188 - var emailBlocker = getElementDOM(botId, 'email-blocker');
2720 + // Check if email exists for the current session
2721 + function checkSessionAndEmail() {
2722 + const sessionId = getChatSession();
2723 +
2724 + fetch(mxchatChat.ajax_url, {
2725 + method: 'POST',
2726 + headers: {
2727 + 'Content-Type': 'application/x-www-form-urlencoded',
2728 + },
2729 + body: new URLSearchParams({
2730 + action: 'mxchat_check_email_provided',
2731 + session_id: sessionId,
2732 + nonce: mxchatChat.nonce,
2733 + })
2734 + })
2735 + .then((response) => {
2736 + if (!response.ok) {
2737 + throw new Error(`HTTP error! status: ${response.status}`);
2738 + }
2739 + return response.json();
2740 + })
2741 + .then((data) => {
2742 + if (data.success) {
2743 + if (data.data.logged_in || data.data.email) {
2744 + showChatContainer();
2745 + } else {
2746 + showEmailForm();
2747 + }
2748 + } else {
2749 + // On error, default to showing email form
2750 + showEmailForm();
2751 + }
2752 + })
2753 + .catch((error) => {
2754 + // Email check failed - default to email form
2755 + showEmailForm();
2756 + });
2757 + }
4189 2758
4190 - if (emailBlocker) {
4191 - if (isEmbeddedBot(botId)) {
4192 - // Embedded bots are always visible — check now
4193 - resolveEmailState(botId);
4194 - }
4195 - // Floating bots: handled in the widget open handler
4196 - } else if (isEmbeddedBot(botId)) {
4197 - // Embedded bot, no email collection — load history with loader
4198 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
4199 - if (chatPersistenceEnabled) {
4200 - MxChatInstances.ensureSession(botId);
4201 - showChatContainerForBot(botId);
4202 - }
4203 - }
4204 - });
2759 + } else {
2760 + // Email collection is enabled but essential elements are missing - silently continue
2761 + }
4205 2762 }
4206 2763
4207 - // Open chatbot when pre-chat message is clicked - use class selector for multi-instance
4208 - $(document).on('click', '.pre-chat-message', function() {
4209 - var botId = getBotIdFromElement(this);
4210 - var $chatbot = getElement(botId, 'floating-chatbot');
4211 - if ($chatbot.hasClass('hidden')) {
4212 - $chatbot.removeClass('hidden').addClass('visible');
4213 - getElement(botId, 'floating-chatbot-button').addClass('hidden');
4214 - handlePreChatDismissal(botId);
2764 + // Open chatbot when pre-chat message is clicked
2765 + $(document).on('click', '#pre-chat-message', function() {
2766 + var chatbot = $('#floating-chatbot');
2767 + if (chatbot.hasClass('hidden')) {
2768 + chatbot.removeClass('hidden').addClass('visible');
2769 + $('#floating-chatbot-button').addClass('hidden');
2770 + $('#pre-chat-message').fadeOut(250); // Hide pre-chat message
4215 2771 disableScroll(); // Disable scroll when chatbot opens
4216 -
4217 - // Load chat history for returning visitors (persistence)
4218 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
4219 - if (chatPersistenceEnabled) {
4220 - MxChatInstances.ensureSession(botId);
4221 - }
4222 -
4223 - // Deferred email check — only on first widget open
4224 - var emailBlocker = getElementDOM(botId, 'email-blocker');
4225 - var instance = MxChatInstances.get(botId);
4226 - if (emailBlocker && !instance.emailCheckDone) {
4227 - instance.emailCheckDone = true;
4228 - resolveEmailState(botId);
4229 - } else if (!emailBlocker) {
4230 - showChatContainerForBot(botId);
4231 - }
4232 2772 }
4233 2773 });
4234 2774
4235 - // Legacy duplicate close handler removed — handled by single event delegation above
2775 + var closeButton = document.querySelector('.close-pre-chat-message');
2776 + if (closeButton) {
2777 + closeButton.addEventListener('click', function() {
2778 + $('#pre-chat-message').fadeOut(200); // Hide the message
4236 2779
4237 -
4238 -function hasQuickQuestions(botId) {
4239 - botId = botId || 'default';
4240 - var questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
4241 - if (!questionsContainer) return false;
4242 - const questionButtons = questionsContainer.querySelectorAll('.mxchat-popular-question');
2780 + // Send an AJAX request to set the transient flag for 24 hours
2781 + $.ajax({
2782 + url: mxchatChat.ajax_url,
2783 + type: 'POST',
2784 + data: {
2785 + action: 'mxchat_dismiss_pre_chat_message',
2786 + _ajax_nonce: mxchatChat.nonce
2787 + },
2788 + success: function() {
2789 + // Ensure the message is hidden after dismissal
2790 + $('#pre-chat-message').hide();
2791 + },
2792 + error: function() {
2793 + // Error dismissing pre-chat message - silently continue
2794 + }
2795 + });
2796 + });
2797 + }
2798 +
2799 +
2800 +function hasQuickQuestions() {
2801 + const questionButtons = document.querySelectorAll('#mxchat-popular-questions .mxchat-popular-question');
4243 2802 return questionButtons.length > 0;
4244 2803 }
4245 2804
4246 -/**
4247 - * Check if a bot is embedded (not floating)
4248 - * Embedded bots don't have a .floating-chatbot wrapper
4249 - */
4250 -function isEmbeddedBot(botId) {
4251 - botId = botId || 'default';
4252 - var floatingWrapper = document.getElementById('floating-chatbot-' + botId);
4253 - return !floatingWrapper;
4254 -}
4255 -
4256 -function collapseQuickQuestions(botId) {
4257 - botId = botId || 'default';
4258 - const questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
4259 - if (questionsContainer && hasQuickQuestions(botId)) {
2805 +function collapseQuickQuestions() {
2806 + const questionsContainer = document.getElementById('mxchat-popular-questions');
2807 + if (questionsContainer && hasQuickQuestions()) {
4260 2808 questionsContainer.classList.add('collapsed');
4261 2809 questionsContainer.classList.add('has-been-collapsed');
4262 2810 try {
4263 - sessionStorage.setItem('mxchat_questions_collapsed_' + botId, 'true');
4264 - sessionStorage.setItem('mxchat_questions_has_been_collapsed_' + botId, 'true');
2811 + sessionStorage.setItem('mxchat_questions_collapsed', 'true');
2812 + sessionStorage.setItem('mxchat_questions_has_been_collapsed', 'true');
4265 2813 } catch (e) {
4266 2814 // Ignore if sessionStorage is not available
4267 2815 }
4268 2816 }
@@ -4267,15 +2815,14 @@
4267 2815 }
4268 2816 }
4269 2817 }
4270 2818
4271 -function expandQuickQuestions(botId) {
4272 - botId = botId || 'default';
4273 - const questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
4274 - if (questionsContainer && hasQuickQuestions(botId)) {
2819 +function expandQuickQuestions() {
2820 + const questionsContainer = document.getElementById('mxchat-popular-questions');
2821 + if (questionsContainer && hasQuickQuestions()) {
4275 2822 questionsContainer.classList.remove('collapsed');
4276 2823 try {
4277 - sessionStorage.setItem('mxchat_questions_collapsed_' + botId, 'false');
2824 + sessionStorage.setItem('mxchat_questions_collapsed', 'false');
4278 2825 } catch (e) {
4279 2826 // Ignore if sessionStorage is not available
4280 2827 }
4281 2828 }
@@ -4280,24 +2827,18 @@
4280 2827 }
4281 2828 }
4282 2829 }
4283 2830
4284 -function checkQuickQuestionsState(botId) {
4285 - botId = botId || 'default';
4286 - if (!hasQuickQuestions(botId)) {
2831 +function checkQuickQuestionsState() {
2832 + if (!hasQuickQuestions()) {
4287 2833 return; // Don't do anything if no questions exist
4288 2834 }
4289 -
4290 - // Skip restoring collapsed state for embedded bots - they should always start expanded
4291 - if (isEmbeddedBot(botId)) {
4292 - return;
4293 - }
4294 -
2835 +
4295 2836 try {
4296 - const isCollapsed = sessionStorage.getItem('mxchat_questions_collapsed_' + botId);
4297 - const hasBeenCollapsed = sessionStorage.getItem('mxchat_questions_has_been_collapsed_' + botId);
4298 -
4299 - const questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
2837 + const isCollapsed = sessionStorage.getItem('mxchat_questions_collapsed');
2838 + const hasBeenCollapsed = sessionStorage.getItem('mxchat_questions_has_been_collapsed');
2839 +
2840 + const questionsContainer = document.getElementById('mxchat-popular-questions');
4300 2841 if (questionsContainer) {
4301 2842 if (hasBeenCollapsed === 'true') {
4302 2843 questionsContainer.classList.add('has-been-collapsed');
4303 2844 }
@@ -4310,36 +2851,32 @@
4310 2851 }
4311 2852 }
4312 2853
4313 2854 // Global delegation for dynamically added links as fallback
4314 -// Use class selector for multi-instance support
4315 -$(document).on('click', '.chat-box a[href]:not([data-tracked])', function(e) {
2855 +$(document).on('click', '#chat-box a[href]:not([data-tracked])', function(e) {
4316 2856 const $link = $(this);
4317 2857 const messageDiv = $link.closest('.bot-message, .agent-message');
4318 -
2858 +
4319 2859 // Only process bot/agent message links
4320 2860 if (messageDiv.length > 0) {
4321 2861 const originalHref = $link.attr('href');
4322 -
2862 +
4323 2863 if (originalHref && (originalHref.startsWith('http://') || originalHref.startsWith('https://'))) {
4324 2864 e.preventDefault();
4325 2865 e.stopPropagation();
4326 -
2866 +
4327 2867 // Mark as tracked
4328 2868 $link.attr('data-tracked', 'true');
4329 -
4330 - // Get bot ID from the chat box context
4331 - var botId = getBotIdFromElement(this);
4332 -
2869 +
4333 2870 // Get message context from the message div
4334 2871 const messageText = messageDiv.text().substring(0, 200);
4335 -
2872 +
4336 2873 $.ajax({
4337 2874 url: mxchatChat.ajax_url,
4338 2875 type: 'POST',
4339 2876 data: {
4340 2877 action: 'mxchat_track_url_click',
4341 - session_id: getChatSession(botId),
2878 + session_id: getChatSession(),
4342 2879 url: originalHref,
4343 2880 message_context: messageText,
4344 2881 nonce: mxchatChat.nonce
4345 2882 },
@@ -4350,58 +2887,50 @@
4350 2887 window.location.href = originalHref;
4351 2888 }
4352 2889 }
4353 2890 });
4354 -
2891 +
4355 2892 return false;
4356 2893 }
4357 2894 }
4358 2895 });
4359 2896
4360 - // ====================================
4361 - // MAIN INITIALIZATION
4362 - // ====================================
2897 +
2898 +
2899 +
2900 +// ====================================
2901 +// MAIN INITIALIZATION
2902 +// ====================================
4363 2903
4364 - // Initialize all chatbot instances on the page
4365 - initializeAllInstances();
2904 +if ($('#floating-chatbot').hasClass('hidden')) {
2905 + $('#floating-chatbot-button').removeClass('hidden');
2906 +}
2907 +// Initialize when document is ready
2908 +setFullHeight();
2909 +trackOriginatingPage();
4366 2910
4367 - // Legacy initialization for single bot compatibility
4368 - $('.floating-chatbot.hidden').each(function() {
4369 - var botId = getBotIdFromElement(this);
4370 - getElement(botId, 'floating-chatbot-button').removeClass('hidden');
4371 - });
2911 +// Only load chat history if email collection is disabled
2912 +if (mxchatChat.email_collection_enabled !== 'on') {
2913 + loadChatHistory();
2914 +}
4372 2915
4373 - // Initialize when document is ready
4374 - setFullHeight();
2916 +initializeChatVisibility();
4375 2917
4376 - // Note: trackOriginatingPage() and loadChatHistory() are now deferred
4377 - // until the user's first interaction via MxChatInstances.ensureSession()
2918 +// Make functions globally available for add-ons
2919 +window.hasQuickQuestions = hasQuickQuestions;
2920 +window.collapseQuickQuestions = collapseQuickQuestions;
2921 +window.appendMessage = appendMessage;
2922 +window.appendThinkingMessage = appendThinkingMessage;
2923 +window.scrollToBottom = scrollToBottom;
2924 +window.scrollElementToTop = scrollElementToTop;
2925 +window.replaceLastMessage = replaceLastMessage;
2926 +window.callMxChat = callMxChat;
2927 +window.callMxChatStream = callMxChatStream;
2928 +window.shouldUseStreaming = shouldUseStreaming;
2929 +window.getChatSession = getChatSession;
2930 +window.getPageContext = getPageContext;
2931 +window.updateStreamingMessage = updateStreamingMessage;
4378 2932
4379 - // Initialize chat visibility for all instances
4380 - $('.mxchat-chatbot-wrapper').each(function() {
4381 - var botId = $(this).data('bot-id') || 'default';
4382 - initializeChatVisibility(botId);
4383 - });
4384 -
4385 - // Make functions globally available for add-ons
4386 - window.hasQuickQuestions = hasQuickQuestions;
4387 - window.collapseQuickQuestions = collapseQuickQuestions;
4388 - window.appendMessage = appendMessage;
4389 - window.appendThinkingMessage = appendThinkingMessage;
4390 - window.scrollToBottom = scrollToBottom;
4391 - window.scrollElementToTop = scrollElementToTop;
4392 - window.replaceLastMessage = replaceLastMessage;
4393 - window.callMxChat = callMxChat;
4394 - window.callMxChatStream = callMxChatStream;
4395 - window.shouldUseStreaming = shouldUseStreaming;
4396 - window.getChatSession = getChatSession;
4397 - window.getPageContext = getPageContext;
4398 - window.updateStreamingMessage = updateStreamingMessage;
4399 - window.MxChatInstances = MxChatInstances;
4400 - window.getElement = getElement;
4401 - window.getElementDOM = getElementDOM;
4402 - window.getBotIdFromElement = getBotIdFromElement;
4403 -
4404 2933 }); // End of jQuery ready
4405 2934
4406 2935
4407 2936 // ====================================
@@ -4428,312 +2957,6 @@
4428 2957 }, 2000);
4429 2958 });
4430 2959 }
4431 2960 }
4432 -});
4433 -
4434 -// ============================================================================
4435 -// SATISFACTION RATING (v3.2.6)
4436 -// ============================================================================
4437 -// Per-session 👍/👎 prompt that appears in the chat-box after 60s of user
4438 -// inactivity following a bot reply. One prompt per session, deduped via
4439 -// localStorage. Runs ONLY when the satisfaction_rating_enabled option is on —
4440 -// the option (default off) is authoritative.
4441 -jQuery(function($) {
4442 - if (typeof mxchatChat === 'undefined') return;
4443 - // wp_localize_script stringifies scalars: a PHP boolean false arrives as
4444 - // '' and true as '1', so this must be an explicit-enable allowlist — the
4445 - // old "disabled when exactly false/'off'" check let '' through and the
4446 - // bubble rendered on sites with the option off/unset (plan-4bba64). PHP
4447 - // now emits 'on'/'off' strings; true/'1'/1 keep cached pre-fix HTML
4448 - // (boolean-true localizations) working.
4449 - // NOTE (plan-32db95): this gate reads the INLINE value at DOM ready and is
4450 - // deliberately NOT re-evaluated after the widget's dynamic-settings refresh
4451 - // merges fresh values over mxchatChat (that merge fires on first widget
4452 - // open, after this module has already decided). Re-evaluating would mean
4453 - // restructuring the whole module to late-bind its listeners — not worth it
4454 - // for a prompt that is at worst stale for one page load on a cached page.
4455 - var sre = mxchatChat.satisfaction_rating_enabled;
4456 - if (sre !== 'on' && sre !== true && sre !== '1' && sre !== 1) return;
4457 -
4458 - // wp_localize_script stringifies ints, so accept both number and numeric string.
4459 - var idleRaw = mxchatChat.satisfaction_rating_idle_seconds;
4460 - var idleSeconds = (typeof idleRaw === 'number') ? idleRaw : parseInt(idleRaw, 10);
4461 - if (!isFinite(idleSeconds)) idleSeconds = 60;
4462 - if (idleSeconds < 5) idleSeconds = 5;
4463 - if (idleSeconds > 600) idleSeconds = 600;
4464 - var IDLE_MS = idleSeconds * 1000;
4465 - var MIN_BOT_REPLIES = 2;
4466 - var ratingState = {};
4467 -
4468 - function getState(botId) {
4469 - if (!ratingState[botId]) {
4470 - ratingState[botId] = { idleTimer: null, botReplies: 0, promptShown: false, dismissed: false };
4471 - }
4472 - return ratingState[botId];
4473 - }
4474 -
4475 - function getSessionId(botId) {
4476 - if (typeof MxChatInstances !== 'undefined' && MxChatInstances.getChatSession) {
4477 - return MxChatInstances.getChatSession(botId);
4478 - }
4479 - return null;
4480 - }
4481 -
4482 - function isAlreadyRated(sessionId) {
4483 - if (!sessionId) return false;
4484 - try { return localStorage.getItem('mxchat_rated:' + sessionId) === '1'; } catch (e) { return false; }
4485 - }
4486 -
4487 - function markRated(sessionId) {
4488 - if (!sessionId) return;
4489 - try { localStorage.setItem('mxchat_rated:' + sessionId, '1'); } catch (e) {}
4490 - }
4491 -
4492 - function esc(s) {
4493 - return String(s == null ? '' : s)
4494 - .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
4495 - .replace(/"/g, '&quot;').replace(/'/g, '&#039;');
4496 - }
4497 -
4498 - // Mirror shouldSkipInlineColors so rating bubbles defer to AI-theme CSS.
4499 - function ratingSkipInlineColors(botId) {
4500 - if (mxchatChat.skip_inline_colors) return true;
4501 - var botAssignments = mxchatChat.bot_theme_assignments || {};
4502 - return botAssignments.hasOwnProperty(botId);
4503 - }
4504 -
4505 - function botBubbleStyleAttr(botId) {
4506 - if (ratingSkipInlineColors(botId)) return '';
4507 - var bg = mxchatChat.bot_message_bg_color;
4508 - var fg = mxchatChat.bot_message_font_color;
4509 - if (!bg && !fg) return '';
4510 - return ' style="background-color: ' + esc(bg || '') + '; color: ' + esc(fg || '') + ';"';
4511 - }
4512 -
4513 - // Reads the rating bubble's actual computed fg+bg (whatever paints it —
4514 - // the inline color pickers OR the mxchat-theme AI customizer's injected CSS)
4515 - // and paints the filled "Send" pill so it fills with the bot font color and
4516 - // labels in the bubble bg. Mirrors mxchatSyncMenuColors(~:1512) for the read.
4517 - // We paint the submit button DIRECTLY (inline longhand) rather than relying
4518 - // on the CSS rule's var()s: Chromium resolves an INHERITED custom property
4519 - // unreliably inside a descendant's `background`, so a bubble-level var would
4520 - // silently fall back to the literal (white-block bug all over again). Inline
4521 - // longhand always wins. Same transparent-guard as the menu so we never paint
4522 - // a see-through value — in that case the CSS literal fallbacks keep it legible.
4523 - function syncRatingBubbleColors(botId) {
4524 - var $chatBox = getChatBoxByBotId(botId);
4525 - if (!$chatBox || !$chatBox.length) return;
4526 - var bubbleEl = $chatBox.find('.mxchat-rating-bot-bubble').last()[0];
4527 - if (!bubbleEl) return;
4528 - var cs = window.getComputedStyle(bubbleEl);
4529 - var fg = cs.color;
4530 - var bg = cs.backgroundColor;
4531 - var hasFg = fg && fg !== 'rgba(0, 0, 0, 0)' && fg !== 'transparent';
4532 - var hasBg = bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent';
4533 - // Expose on the bubble too, for any inheriting styles / future use.
4534 - if (hasFg) bubbleEl.style.setProperty('--mxchat-bot-fg', fg);
4535 - if (hasBg) bubbleEl.style.setProperty('--mxchat-bot-bg', bg);
4536 - // Paint the Send pill directly — the part that actually fixes the bug.
4537 - var submitEl = bubbleEl.querySelector('.mxchat-rating-submit');
4538 - if (submitEl) {
4539 - if (hasFg) submitEl.style.backgroundColor = fg; // fill = bot font color
4540 - if (hasBg) submitEl.style.color = bg; // label = bubble background
4541 - }
4542 - }
4543 -
4544 - function copy(key) {
4545 - var c = mxchatChat.satisfaction_rating_copy || {};
4546 - var d = {
4547 - question: 'Was this helpful?',
4548 - helpful: 'Helpful',
4549 - not_helpful: 'Not helpful',
4550 - dismiss: 'Dismiss',
4551 - thanks: 'Thanks! Anything we should improve? (optional)',
4552 - placeholder: 'Tell us what could be better…',
4553 - send: 'Send',
4554 - skip: 'Skip',
4555 - saved: 'Thanks for the feedback.'
4556 - };
4557 - return c[key] || d[key];
4558 - }
4559 -
4560 - function thumbUpSvg() {
4561 - 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>';
4562 - }
4563 - function thumbDownSvg() {
4564 - 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>';
4565 - }
4566 -
4567 - function buildPromptHtml(botId) {
4568 - var styleAttr = botBubbleStyleAttr(botId);
4569 - return ''
4570 - + '<div class="bot-message mxchat-rating-bot-bubble"' + styleAttr + '>'
4571 - + '<div class="mxchat-rating-prompt" data-bot-id="' + esc(botId) + '" role="group" aria-label="' + esc(copy('question')) + '">'
4572 - + '<div class="mxchat-rating-question">' + esc(copy('question')) + '</div>'
4573 - + '<div class="mxchat-rating-actions">'
4574 - + '<span class="mxchat-rating-buttons">'
4575 - + '<button type="button" class="mxchat-rating-btn" data-rating="1" aria-label="' + esc(copy('helpful')) + '">' + thumbUpSvg() + '</button>'
4576 - + '<button type="button" class="mxchat-rating-btn" data-rating="-1" aria-label="' + esc(copy('not_helpful')) + '">' + thumbDownSvg() + '</button>'
4577 - + '</span>'
4578 - + '<button type="button" class="mxchat-rating-dismiss" aria-label="' + esc(copy('dismiss')) + '">×</button>'
4579 - + '</div>'
4580 - + '</div>'
4581 - + '</div>';
4582 - }
4583 -
4584 - function buildFeedbackHtml(botId, rating) {
4585 - var styleAttr = botBubbleStyleAttr(botId);
4586 - return ''
4587 - + '<div class="bot-message mxchat-rating-bot-bubble"' + styleAttr + '>'
4588 - + '<div class="mxchat-rating-feedback" data-bot-id="' + esc(botId) + '" data-rating="' + esc(String(rating)) + '">'
4589 - + '<div class="mxchat-rating-feedback-label">' + esc(copy('thanks')) + '</div>'
4590 - + '<textarea class="mxchat-rating-feedback-input" maxlength="500" placeholder="' + esc(copy('placeholder')) + '" rows="2"></textarea>'
4591 - + '<div class="mxchat-rating-feedback-actions">'
4592 - + '<button type="button" class="mxchat-rating-skip">' + esc(copy('skip')) + '</button>'
4593 - + '<button type="button" class="mxchat-rating-submit">' + esc(copy('send')) + '</button>'
4594 - + '</div>'
4595 - + '</div>'
4596 - + '</div>';
4597 - }
4598 -
4599 - function buildSavedHtml(botId) {
4600 - var styleAttr = botBubbleStyleAttr(botId);
4601 - return ''
4602 - + '<div class="bot-message mxchat-rating-bot-bubble"' + styleAttr + '>'
4603 - + '<div class="mxchat-rating-saved">' + esc(copy('saved')) + '</div>'
4604 - + '</div>';
4605 - }
4606 -
4607 - function getChatBoxByBotId(botId) {
4608 - var $byId = $('#chat-box-' + botId);
4609 - if ($byId.length) return $byId.first();
4610 - return $('.chat-box').first();
4611 - }
4612 -
4613 - function scrollChatBoxToBottom($chatBox) {
4614 - if (!$chatBox || !$chatBox.length) return;
4615 - $chatBox.scrollTop($chatBox[0].scrollHeight);
4616 - }
4617 -
4618 - function showPrompt(botId) {
4619 - var s = getState(botId);
4620 - if (s.promptShown || s.dismissed) return;
4621 - var sessionId = getSessionId(botId);
4622 - if (!sessionId) return;
4623 - if (isAlreadyRated(sessionId)) { s.promptShown = true; return; }
4624 - var $chatBox = getChatBoxByBotId(botId);
4625 - if (!$chatBox.length) return;
4626 - if ($chatBox.find('.mxchat-rating-prompt').length) { s.promptShown = true; return; }
4627 - $chatBox.append(buildPromptHtml(botId));
4628 - syncRatingBubbleColors(botId);
4629 - s.promptShown = true;
4630 - scrollChatBoxToBottom($chatBox);
4631 - }
4632 -
4633 - function submitRating(botId, rating, feedback) {
4634 - var sessionId = getSessionId(botId);
4635 - if (!sessionId) return;
4636 - $.post(mxchatChat.ajax_url, {
4637 - action: 'mxchat_save_rating',
4638 - session_id: sessionId,
4639 - bot_id: botId,
4640 - rating: rating,
4641 - feedback: feedback || ''
4642 - });
4643 - markRated(sessionId);
4644 - }
4645 -
4646 - function onBotReply(botId) {
4647 - var s = getState(botId);
4648 - s.botReplies += 1;
4649 - if (s.promptShown || s.dismissed) return;
4650 - var sessionId = getSessionId(botId);
4651 - if (sessionId && isAlreadyRated(sessionId)) { s.promptShown = true; return; }
4652 - if (s.botReplies < MIN_BOT_REPLIES) return;
4653 - if (s.idleTimer) clearTimeout(s.idleTimer);
4654 - s.idleTimer = setTimeout(function() { showPrompt(botId); }, IDLE_MS);
4655 - }
4656 -
4657 - function onUserMessage(botId) {
4658 - var s = getState(botId);
4659 - if (s.idleTimer) { clearTimeout(s.idleTimer); s.idleTimer = null; }
4660 - }
4661 -
4662 - function botIdFromChatBox(el) {
4663 - var id = el && el.id ? el.id : '';
4664 - return id.indexOf('chat-box-') === 0 ? id.substring('chat-box-'.length) : 'default';
4665 - }
4666 -
4667 - function setupObserver(chatBox) {
4668 - var botId = botIdFromChatBox(chatBox);
4669 - try {
4670 - var observer = new MutationObserver(function(mutations) {
4671 - mutations.forEach(function(m) {
4672 - for (var i = 0; i < m.addedNodes.length; i++) {
4673 - var node = m.addedNodes[i];
4674 - if (!node || node.nodeType !== 1) continue;
4675 - var $n = $(node);
4676 - if ($n.hasClass('mxchat-rating-bot-bubble') || $n.hasClass('mxchat-rating-prompt') || $n.hasClass('mxchat-rating-feedback') || $n.hasClass('mxchat-rating-saved')) continue;
4677 - 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)
4678 - else if ($n.hasClass('user-message')) onUserMessage(botId);
4679 - }
4680 - });
4681 - });
4682 - observer.observe(chatBox, { childList: true });
4683 - } catch (e) { /* noop */ }
4684 - }
4685 -
4686 - $('.chat-box').each(function() { setupObserver(this); });
4687 -
4688 - $(document).on('click', '.mxchat-rating-btn', function(e) {
4689 - e.preventDefault();
4690 - var $btn = $(this);
4691 - var $prompt = $btn.closest('.mxchat-rating-prompt');
4692 - var $wrap = $btn.closest('.mxchat-rating-bot-bubble');
4693 - var botId = $prompt.data('bot-id') || 'default';
4694 - var rating = parseInt($btn.attr('data-rating'), 10);
4695 - if (rating !== 1 && rating !== -1) return;
4696 - submitRating(botId, rating, '');
4697 - ($wrap.length ? $wrap : $prompt).replaceWith(buildFeedbackHtml(botId, rating));
4698 - syncRatingBubbleColors(botId);
4699 - scrollChatBoxToBottom(getChatBoxByBotId(botId));
4700 - });
4701 -
4702 - $(document).on('click', '.mxchat-rating-dismiss', function(e) {
4703 - e.preventDefault();
4704 - var $prompt = $(this).closest('.mxchat-rating-prompt');
4705 - var $wrap = $(this).closest('.mxchat-rating-bot-bubble');
4706 - var botId = $prompt.data('bot-id') || 'default';
4707 - var s = getState(botId);
4708 - s.dismissed = true;
4709 - markRated(getSessionId(botId));
4710 - ($wrap.length ? $wrap : $prompt).remove();
4711 - });
4712 -
4713 - function closeFeedback($fb) {
4714 - var botId = $fb.data('bot-id') || 'default';
4715 - var $wrap = $fb.closest('.mxchat-rating-bot-bubble');
4716 - ($wrap.length ? $wrap : $fb).replaceWith(buildSavedHtml(botId));
4717 - syncRatingBubbleColors(botId);
4718 - scrollChatBoxToBottom(getChatBoxByBotId(botId));
4719 - }
4720 -
4721 - $(document).on('click', '.mxchat-rating-skip', function(e) {
4722 - e.preventDefault();
4723 - closeFeedback($(this).closest('.mxchat-rating-feedback'));
4724 - });
4725 -
4726 - $(document).on('click', '.mxchat-rating-submit', function(e) {
4727 - e.preventDefault();
4728 - var $fb = $(this).closest('.mxchat-rating-feedback');
4729 - var botId = $fb.data('bot-id') || 'default';
4730 - var rating = parseInt($fb.attr('data-rating'), 10);
4731 - if (rating !== 1 && rating !== -1) { closeFeedback($fb); return; }
4732 - var text = String($fb.find('.mxchat-rating-feedback-input').val() || '').trim();
4733 - if (text !== '') {
4734 - submitRating(botId, rating, text);
4735 - }
4736 - closeFeedback($fb);
4737 - });
4738 2961 });
4739 2962