← All changes | js/chat-script.js +1189 -3347 3.2.9 → 2.3.3 View file →

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