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