PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 3.2.25
MxChat – AI Chatbot & Content Generation for WordPress v3.2.25
3.2.25 3.2.24 3.2.23 3.2.22 3.2.21 3.2.20 3.2.19 3.2.18 3.2.17 3.2.16 3.2.15 3.2.14 3.2.12 3.2.13 3.2.11 3.2.10 3.2.9 3.2.8 3.2.7 3.2.6 3.2.5 3.2.4 3.2.3 3.2.2 3.2.1 All 156 releases
← All changes | js/chat-script.js +1447 -256 3.2.5 → 3.2.25 View file →
@@ -1,20 +1,163 @@
1 1 jQuery(document).ready(function($) {
2 2
3 - // Nonce refresh is deferred until first user interaction (ensureSession)
4 - // to avoid admin-ajax calls on passive page loads.
5 - var nonceRefreshed = false;
6 - function refreshNonceIfNeeded(callback) {
7 - if (nonceRefreshed || typeof mxchatChat === 'undefined' || !mxchatChat.ajax_url) {
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') {
8 55 if (callback) callback();
9 56 return;
10 57 }
11 - nonceRefreshed = true;
12 - $.post(mxchatChat.ajax_url, { action: 'mxchat_refresh_nonce' }, function(res) {
13 - if (res && res.success && res.data && res.data.nonce) {
14 - mxchatChat.nonce = res.data.nonce;
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;
15 73 }
16 - if (callback) callback();
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 + }
17 160 });
18 161 }
19 162
20 163 // ====================================
@@ -24,8 +167,16 @@
24 167 // Instance registry - tracks all chatbot instances on the page
25 168 const MxChatInstances = {
26 169 instances: {},
27 170
171 + // Lifecycle facts add-ons can read after the fact (plan 65c9b6). The
172 + // events below fire once; a script that loads late checks these instead.
173 + toolbarReady: false,
174 + opened: {},
175 + hasOpened: function(botId) {
176 + return !!this.opened[botId || 'default'];
177 + },
178 +
28 179 // Initialize an instance for a bot
29 180 init: function(botId) {
30 181 if (!this.instances[botId]) {
31 182 // When persistence is OFF, track when this session started
@@ -141,9 +292,20 @@
141 292 var newSessionId = generateSessionId();
142 293 this.setChatSession(botId, newSessionId);
143 294 var $chatBox = getElement(botId, 'chat-box');
144 295 if ($chatBox.length) {
145 - $chatBox.find('.user-message, .bot-message:not(:first), .agent-message').remove();
296 + // Keep the greeting, drop everything else. Identify the greeting
297 + // by its marker class, NOT by position (plan a1a79b): after a
298 + // chat-persistence restore the first .bot-message is a real
299 + // reply, so ":not(:first)" left a stale answer sitting at the
300 + // top of an otherwise empty box. The positional fallback only
301 + // runs when the marker is absent — a page served from HTML cache
302 + // that predates this release — and behaves exactly as before.
303 + if ($chatBox.find('.mxchat-intro-message').length) {
304 + $chatBox.find('.user-message, .bot-message:not(.mxchat-intro-message), .agent-message').remove();
305 + } else {
306 + $chatBox.find('.user-message, .bot-message:not(:first), .agent-message').remove();
307 + }
146 308 }
147 309 if (this.instances[botId]) {
148 310 this.instances[botId].chatHistoryLoaded = false;
149 311 this.instances[botId].processedMessageIds = new Set();
@@ -163,8 +325,50 @@
163 325 }
164 326 };
165 327
166 328 // ====================================
329 + // LIFECYCLE EVENTS FOR ADD-ONS (plan 65c9b6)
330 + // ====================================
331 + //
332 + // Document-level CustomEvents an add-on listens for instead of polling the
333 + // DOM or firing requests on page load:
334 + // mxchat:toolbar-ready detail { enabled } once, right after the
335 + // toolbar show/hide pass; items rendered through the
336 + // mxchat_chat_toolbar_items filter can bind now.
337 + // mxchat:opened detail { botId, embedded } once per bot per page
338 + // load, the first time its window is shown — the
339 + // launcher, the pre-chat bubble, an embedded widget
340 + // (at load), or any script that reveals it.
341 + // Same facts, readable late: MxChatInstances.toolbarReady / hasOpened(botId).
342 + function mxchatDispatch(name, detail) {
343 + try {
344 + document.dispatchEvent(new CustomEvent(name, { detail: detail || {} }));
345 + } catch (err) { /* CustomEvent unsupported — nothing to notify */ }
346 + }
347 +
348 + function mxchatFireOpened(botId) {
349 + botId = botId || 'default';
350 + if (MxChatInstances.opened[botId]) return;
351 + MxChatInstances.opened[botId] = true;
352 + mxchatDispatch('mxchat:opened', { botId: botId, embedded: isEmbeddedBot(botId) });
353 + }
354 +
355 + // Catch openers this file does not own (the Trigger add-on, theme buttons,
356 + // custom scripts): a floating window gaining .visible counts as opened.
357 + function mxchatWatchForOpen(botId) {
358 + var el = getElementDOM(botId, 'floating-chatbot');
359 + if (!el || typeof MutationObserver === 'undefined') return;
360 + if (el.classList.contains('visible')) { mxchatFireOpened(botId); return; }
361 + var obs = new MutationObserver(function() {
362 + if (el.classList.contains('visible')) {
363 + mxchatFireOpened(botId);
364 + obs.disconnect();
365 + }
366 + });
367 + obs.observe(el, { attributes: true, attributeFilter: ['class'] });
368 + }
369 +
370 + // ====================================
167 371 // ELEMENT SELECTOR HELPERS
168 372 // ====================================
169 373
170 374 // Check if a specific bot has an AI theme assigned (skip inline colors)
@@ -200,8 +404,20 @@
200 404 var id = $floating.attr('id') || '';
201 405 var match = id.match(/floating-chatbot-(.+)/);
202 406 if (match) return match[1];
203 407 }
408 + // Fallback: the pre-chat teaser bubble (#pre-chat-message-{bot_id}) is a SIBLING
409 + // outside .mxchat-chatbot-wrapper / .floating-chatbot, so its children — e.g. the
410 + // .close-pre-chat-message button, which carries only a class and no id — miss both
411 + // branches above. Walk to the nearest ancestor whose id is pre-chat-message-{bot_id}
412 + // and read the suffix. (closest() includes the element itself, so a click directly on
413 + // #pre-chat-message-{bot_id} resolves here too.)
414 + var $preChat = $(element).closest('[id^="pre-chat-message-"]');
415 + if ($preChat.length) {
416 + var preId = $preChat.attr('id') || '';
417 + var preMatch = preId.match(/^pre-chat-message-(.+)$/);
418 + if (preMatch) return preMatch[1];
419 + }
204 420 // Fallback: check if element itself has an ID with bot suffix (e.g., floating-chatbot-button-{bot_id})
205 421 var elementId = $(element).attr('id') || '';
206 422 if (elementId) {
207 423 // Match patterns like: floating-chatbot-button-{bot_id}, pre-chat-message-{bot_id}
@@ -241,9 +457,27 @@
241 457 if (parts.length == 2) return parts.pop().split(";").shift();
242 458 }
243 459
244 460 function generateSessionId() {
245 - return 'mxchat_chat_' + Math.random().toString(36).substr(2, 9);
461 + // Session IDs function as the de-facto bearer token for an anonymous
462 + // chat, so generate them with a CSPRNG when available. Math.random is a
463 + // legacy fallback for ancient/sandboxed environments that lack
464 + // window.crypto. The 'mxchat_chat_' prefix is preserved exactly (other
465 + // code pattern-matches on it). (plan-0c17b5)
466 + var rand;
467 + try {
468 + if (window.crypto && window.crypto.getRandomValues) {
469 + var buf = new Uint8Array(16); // 128 bits
470 + window.crypto.getRandomValues(buf);
471 + rand = Array.prototype.map.call(buf, function (b) {
472 + return ('0' + b.toString(16)).slice(-2);
473 + }).join('');
474 + }
475 + } catch (e) {}
476 + if (!rand) {
477 + rand = Math.random().toString(36).substr(2, 9); // legacy fallback
478 + }
479 + return 'mxchat_chat_' + rand;
246 480 }
247 481
248 482 // Legacy function - now delegates to instance manager
249 483 function getChatSession(botId) {
@@ -287,23 +521,28 @@
287 521 // ====================================
288 522 // CONTEXTUAL AWARENESS FUNCTIONALITY
289 523 // ====================================
290 524
525 +// Plan f3e515: the page context is computed once per page, not once per message.
526 +// Keyed on URL + title + the content element's text length — cheap to check,
527 +// and enough to notice a navigation or a re-rendered content area.
528 +var pageContextCache = { key: null, value: null };
529 +
291 530 function getPageContext() {
292 531 // Check if contextual awareness is enabled
293 532 if (mxchatChat.contextual_awareness_toggle !== 'on') {
294 533 return null;
295 534 }
296 -
535 +
297 536 // Get page URL
298 537 const pageUrl = window.location.href;
299 -
538 +
300 539 // Get page title
301 540 const pageTitle = document.title || '';
302 -
541 +
303 542 // Get main content from the page
304 543 let pageContent = '';
305 -
544 +
306 545 // Try to get content from common content areas
307 546 const contentSelectors = [
308 547 'main',
309 548 '[role="main"]',
@@ -315,9 +554,9 @@
315 554 'article',
316 555 '#content',
317 556 '#main'
318 557 ];
319 -
558 +
320 559 let contentElement = null;
321 560 for (const selector of contentSelectors) {
322 561 contentElement = document.querySelector(selector);
323 562 if (contentElement) {
@@ -323,18 +562,31 @@
323 562 if (contentElement) {
324 563 break;
325 564 }
326 565 }
327 -
566 +
328 567 // If no specific content area found, use body but exclude header, footer, nav, sidebar
329 568 if (!contentElement) {
330 569 contentElement = document.body;
331 570 }
332 -
571 +
333 572 if (contentElement) {
334 - // Clone the element to avoid modifying the original
335 - const clone = contentElement.cloneNode(true);
336 -
573 + const cacheKey = pageUrl + '\u0000' + pageTitle + '\u0000' + (contentElement.textContent || '').length;
574 + if (pageContextCache.key === cacheKey) {
575 + return pageContextCache.value;
576 + }
577 +
578 + // Copy the element into a document that has no browsing context
579 + // (plan f3e515). A live cloneNode(true) constructed real <video> /
580 + // <audio> / <img> elements: media with a src runs resource selection
581 + // on creation whether or not it is attached, and an autoplay attribute
582 + // made the detached copy PLAY — audibly, once the visible player had
583 + // been unmuted through the property. Every message spawned another
584 + // one. Elements in an inert document never fetch or play, while
585 + // querySelectorAll / textContent / dataset all still work on them.
586 + const inertDocument = document.implementation.createHTMLDocument('');
587 + const clone = inertDocument.importNode(contentElement, true);
588 +
337 589 // Remove unwanted elements
338 590 const unwantedSelectors = [
339 591 'header',
340 592 'footer',
@@ -352,16 +604,25 @@
352 604 '#floating-chatbot',
353 605 '#floating-chatbot-button',
354 606 '.mxchat',
355 607 '[class*="chat"]',
356 - '[id*="chat"]'
608 + '[id*="chat"]',
609 + // Media contributes no text and (outside the inert document) fetches.
610 + 'video',
611 + 'audio',
612 + 'iframe',
613 + 'object',
614 + 'embed',
615 + 'picture',
616 + 'img',
617 + 'source'
357 618 ];
358 -
619 +
359 620 unwantedSelectors.forEach(selector => {
360 621 const elements = clone.querySelectorAll(selector);
361 622 elements.forEach(el => el.remove());
362 623 });
363 -
624 +
364 625 // Extract MxChat context data attributes before getting text content
365 626 const contextData = [];
366 627 clone.querySelectorAll('[data-mxchat-context]').forEach(el => {
367 628 const contextValue = el.dataset.mxchatContext;
@@ -368,34 +629,34 @@
368 629 if (contextValue && contextValue.trim()) {
369 630 contextData.push(contextValue);
370 631 }
371 632 });
372 -
633 +
373 634 // Get text content and clean it up
374 635 pageContent = clone.textContent || clone.innerText || '';
375 -
636 +
376 637 // Add context data to page content if any were found
377 638 if (contextData.length > 0) {
378 639 pageContent += '\n\nAdditional Context:\n' + contextData.join('\n');
379 640 }
380 -
641 +
381 642 // Clean up whitespace and limit length
382 643 pageContent = pageContent
383 644 .replace(/\s+/g, ' ')
384 645 .trim()
385 646 .substring(0, 3000); // Limit to 3000 characters to avoid token limits
647 +
648 + // Only return context if we have meaningful content
649 + const result = (!pageContent || pageContent.length < 50) ? null : {
650 + url: pageUrl,
651 + title: pageTitle,
652 + content: pageContent
653 + };
654 + pageContextCache = { key: cacheKey, value: result };
655 + return result;
386 656 }
387 -
388 - // Only return context if we have meaningful content
389 - if (!pageContent || pageContent.length < 50) {
390 - return null;
391 - }
392 -
393 - return {
394 - url: pageUrl,
395 - title: pageTitle,
396 - content: pageContent
397 - };
657 +
658 + return null;
398 659 }
399 660
400 661 // Track originating page when chat starts
401 662 function trackOriginatingPage() {
@@ -446,8 +707,26 @@
446 707 sendButton.style.pointerEvents = 'none';
447 708 }
448 709 }
449 710
711 +// Whether the input may grab focus after a completed reply (plan 03799f).
712 +// On coarse-pointer devices focusing a text input summons the on-screen
713 +// keyboard over the answer the visitor is trying to read, so 'auto' (the
714 +// default) focuses only on fine-pointer devices. The site-wide
715 +// mxchat_autofocus_after_reply PHP filter can force 'on'/'off'.
716 +// NOT used on widget open (:~3424) — that focus is a deliberate act and is
717 +// what makes the widget keyboard-accessible.
718 +function mxchatShouldAutofocusAfterReply() {
719 + var pref = (typeof mxchatChat !== 'undefined' && mxchatChat.autofocus_after_reply) || 'auto';
720 + if (pref === 'on') return true;
721 + if (pref === 'off') return false;
722 + try {
723 + return !window.matchMedia('(pointer: coarse)').matches;
724 + } catch (err) {
725 + return true;
726 + }
727 +}
728 +
450 729 function enableChatInput(botId) {
451 730 botId = botId || 'default';
452 731 var chatInput = getElementDOM(botId, 'chat-input');
453 732 var sendButton = getElementDOM(botId, 'send-button');
@@ -453,9 +732,11 @@
453 732 var sendButton = getElementDOM(botId, 'send-button');
454 733 if (chatInput) {
455 734 chatInput.disabled = false;
456 735 chatInput.style.opacity = '1';
457 - chatInput.focus();
736 + if (mxchatShouldAutofocusAfterReply()) {
737 + try { chatInput.focus({ preventScroll: true }); } catch (err) { chatInput.focus(); }
738 + }
458 739 }
459 740 if (sendButton) {
460 741 sendButton.disabled = false;
461 742 sendButton.style.opacity = '1';
@@ -460,10 +741,102 @@
460 741 sendButton.disabled = false;
461 742 sendButton.style.opacity = '1';
462 743 sendButton.style.pointerEvents = 'auto';
463 744 }
745 + // Every completion path re-enables input, so this is the single restore
746 + // point for the streaming Stop affordance (no-op when not in stop mode).
747 + mxchatRestoreSendButton(botId);
464 748 }
465 749
750 +// --- Streaming Stop control -------------------------------------------------
751 +// One live stream handle per bot instance, so Stop on one widget never aborts
752 +// another bot on the same page.
753 +var mxchatActiveStreams = {};
754 +// Original send-button markup, captured once per bot the first time the Stop
755 +// state is shown (never captured while already in stop mode, so a rapid
756 +// stop-then-resend can't save the stop glyph as the "original").
757 +var mxchatSendMarkup = {};
758 +
759 +function mxchatShowStopButton(botId) {
760 + var btn = getElementDOM(botId, 'send-button');
761 + if (!btn) return;
762 + if (!btn.classList.contains('mxchat-stop-mode')) {
763 + mxchatSendMarkup[botId] = {
764 + html: btn.innerHTML,
765 + label: btn.getAttribute('aria-label')
766 + };
767 + }
768 +
769 + // Mirror the send icon's rendered size + color so the stop glyph looks
770 + // native, including custom send images/colors and theme overrides.
771 + var child = btn.querySelector('svg, img');
772 + var size = 25;
773 + var color = '';
774 + if (child) {
775 + var rect = child.getBoundingClientRect();
776 + if (rect.width) {
777 + size = Math.round(Math.min(rect.width, rect.height));
778 + }
779 + var cs = window.getComputedStyle(child);
780 + color = (child.tagName.toLowerCase() === 'svg' ? cs.fill : cs.color) || '';
781 + }
782 + var stopLabel = (typeof mxchatChat !== 'undefined' && mxchatChat.stop_button_label) || 'Stop response';
783 + 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>';
784 + // An add-on's DIRECT send-button handler (e.g. mxchat-vision's rebind) can
785 + // start a stream synchronously while the originating click is still
786 + // bubbling up to our delegated handler. Without this guard, that handler
787 + // reads the just-added stop-mode class as a user Stop press and aborts the
788 + // brand-new stream — the user's message renders but no reply ever fires
789 + // (plan-4bba64 silent message loss). The flag only spans the current event
790 + // dispatch: cleared on the next macrotask, long before a real Stop click.
791 + btn.__mxchatStopJustShown = true;
792 + setTimeout(function () { btn.__mxchatStopJustShown = false; }, 0);
793 + btn.classList.add('mxchat-stop-mode');
794 + btn.setAttribute('aria-label', stopLabel);
795 + btn.setAttribute('title', stopLabel);
796 + // disableChatInput() ran when the turn was sent; the Stop control itself
797 + // must stay clickable while the textarea remains disabled.
798 + btn.disabled = false;
799 + btn.style.opacity = '1';
800 + btn.style.pointerEvents = 'auto';
801 +}
802 +
803 +function mxchatRestoreSendButton(botId) {
804 + var btn = getElementDOM(botId, 'send-button');
805 + var saved = mxchatSendMarkup[botId];
806 + if (!btn || !btn.classList.contains('mxchat-stop-mode') || !saved) return;
807 + btn.innerHTML = saved.html;
808 + btn.classList.remove('mxchat-stop-mode');
809 + btn.removeAttribute('title');
810 + if (saved.label) {
811 + btn.setAttribute('aria-label', saved.label);
812 + }
813 +}
814 +
815 +function mxchatStopStreaming(botId) {
816 + var entry = mxchatActiveStreams[botId];
817 + if (!entry || !entry.controller) return;
818 + entry.aborted = true;
819 + try { entry.controller.abort(); } catch (e) {}
820 +}
821 +
822 +// Returns true when a stream rejection came from an intentional Stop click:
823 +// keep the partial text as the turn's answer — no error UI, no fallback resend.
824 +function mxchatHandleStreamAbort(botId, accumulatedContent, callback) {
825 + var entry = mxchatActiveStreams[botId];
826 + if (!entry || !entry.aborted) return false;
827 + delete mxchatActiveStreams[botId];
828 + if (!accumulatedContent) {
829 + // Stopped before the first chunk: drop the thinking bubble, no orphan message.
830 + getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
831 + }
832 + enableChatInput(botId); // also restores the send icon
833 + if (callback) {
834 + callback(accumulatedContent || '');
835 + }
836 + return true;
837 +}
838 +
466 839 // Update your existing sendMessage function
467 840 function sendMessage(botId) {
468 841 botId = botId || 'default';
469 842 MxChatInstances.ensureSession(botId);
@@ -474,9 +847,12 @@
474 847 if (typeof customMxChatFilter === 'function') {
475 848 message = customMxChatFilter(message, "prompt");
476 849 }
477 850
478 - if (message) {
851 + // Whitespace-only is empty: nothing is sent and nothing is disabled. When
852 + // there IS a message the original string (spaces and all) is what goes out,
853 + // so the transcript is unchanged (plan b67fd5).
854 + if (message && String(message).trim() !== '') {
479 855 // Don't disable input in live agent mode - let users chat freely
480 856 var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
481 857 var isAgentMode = modeIndicator && modeIndicator.textContent === 'Live Agent';
482 858 if (!isAgentMode) {
@@ -484,8 +860,9 @@
484 860 }
485 861
486 862 appendMessage("user", message, '', [], false, botId);
487 863 $chatInput.val('');
864 + mxchatUpdateCharCounter($chatInput[0]); // reset the char counter after send (plan 7091a2)
488 865 $chatInput.css('height', 'auto');
489 866
490 867 if (hasQuickQuestions(botId)) {
491 868 collapseQuickQuestions(botId);
@@ -492,14 +869,16 @@
492 869 }
493 870 appendThinkingMessage(botId);
494 871 scrollToBottom(botId);
495 872
496 - const currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
873 + const currentModel = mxchatChat.model || 'gpt-5.6-sol';
497 874
498 875 // Check if streaming is enabled AND supported for this model
499 876 if (shouldUseStreaming(currentModel)) {
500 877 callMxChatStream(message, function(response) {
501 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message');
878 + // Content is final: releasing aria-busy lets the live region
879 + // announce the completed reply once (plan 67f126).
880 + getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message').attr('aria-busy', 'false');
502 881 }, botId);
503 882 } else {
504 883 callMxChat(message, function(response) {
505 884 replaceLastMessage("bot", response, '', [], botId);
@@ -517,8 +896,14 @@
517 896 if (typeof customMxChatFilter === 'function') {
518 897 message = customMxChatFilter(message, "prompt");
519 898 }
520 899
900 + // Nothing to send means nothing to disable (plan b67fd5): a caller handing
901 + // over an empty string must not lock the box the way Enter-on-empty did.
902 + if (!message || String(message).trim() === '') {
903 + return;
904 + }
905 +
521 906 // Don't disable input in live agent mode - let users chat freely
522 907 var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
523 908 var isAgentMode = modeIndicator && modeIndicator.textContent === 'Live Agent';
524 909 if (!isAgentMode) {
@@ -532,14 +917,15 @@
532 917 }
533 918 appendThinkingMessage(botId);
534 919 scrollToBottom(botId);
535 920
536 - const currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
921 + const currentModel = mxchatChat.model || 'gpt-5.6-sol';
537 922
538 923 // Check if streaming is enabled AND supported for this model
539 924 if (shouldUseStreaming(currentModel)) {
540 925 callMxChatStream(message, function(response) {
541 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message');
926 + // Final content — release aria-busy so the reply announces once (67f126).
927 + getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message').attr('aria-busy', 'false');
542 928 }, botId);
543 929 } else {
544 930 callMxChat(message, function(response) {
545 931 getElement(botId, 'chat-box').find('.temporary-message').remove();
@@ -603,8 +989,15 @@
603 989
604 990 function callMxChat(message, callback, botId) {
605 991 botId = botId || getMxChatBotId();
606 992
993 + // Streaming fallbacks land here: drop any leftover stream handle and
994 + // return the button to its send state (no-op for plain non-stream turns).
995 + if (mxchatActiveStreams[botId]) {
996 + delete mxchatActiveStreams[botId];
997 + }
998 + mxchatRestoreSendButton(botId);
999 +
607 1000 // Store the message in case we need to retry after session reset
608 1001 getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', message);
609 1002
610 1003 // Get page context if contextual awareness is enabled
@@ -622,8 +1015,13 @@
622 1015 sessionId = generateSessionId();
623 1016 MxChatInstances.setChatSession(botId, sessionId);
624 1017 }
625 1018
1019 + // Wait for the page-cache nonce refresh to complete before firing the
1020 + // chat-send AJAX. On cached pages the inline mxchatChat.nonce is stale
1021 + // until refreshNonceIfNeeded() returns; constructing ajaxData inside the
1022 + // callback guarantees we read the fresh value. See plan-c5457f.
1023 + refreshNonceIfNeeded(function() {
626 1024 // Prepare AJAX data
627 1025 const ajaxData = {
628 1026 action: 'mxchat_handle_chat_request',
629 1027 message: message,
@@ -634,14 +1032,14 @@
634 1032 bot_id: botId,
635 1033 // Pass session start timestamp so AI context matches what user sees
636 1034 session_start_timestamp: instance.sessionStartTimestamp || 0
637 1035 };
638 -
1036 +
639 1037 // Add page context if available
640 1038 if (pageContext) {
641 1039 ajaxData.page_context = JSON.stringify(pageContext);
642 1040 }
643 -
1041 +
644 1042 // CHECK FOR VISION FLAGS AND ADD THEM
645 1043 if (window.mxchatVisionProcessed) {
646 1044 ajaxData.vision_processed = true;
647 1045 ajaxData.original_user_message = window.mxchatOriginalMessage || message;
@@ -650,9 +1048,9 @@
650 1048 window.mxchatVisionProcessed = false;
651 1049 window.mxchatOriginalMessage = null;
652 1050 window.mxchatVisionImagesCount = 0;
653 1051 }
654 -
1052 +
655 1053 $.ajax({
656 1054 url: mxchatChat.ajax_url,
657 1055 type: 'POST',
658 1056 dataType: 'json',
@@ -697,12 +1095,13 @@
697 1095 // Re-send the original message with the new session (user message is already displayed)
698 1096 var originalMessage = getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message');
699 1097 if (originalMessage) {
700 1098 getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', null);
701 - var currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
1099 + var currentModel = mxchatChat.model || 'gpt-5.6-sol';
702 1100 if (shouldUseStreaming(currentModel)) {
703 1101 callMxChatStream(originalMessage, function(response) {
704 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message');
1102 + // Final content — release aria-busy so the reply announces once (67f126).
1103 + getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message').attr('aria-busy', 'false');
705 1104 }, botId);
706 1105 } else {
707 1106 callMxChat(originalMessage, function(response) {
708 1107 replaceLastMessage("bot", response, '', [], botId);
@@ -841,8 +1240,9 @@
841 1240
842 1241 replaceLastMessage("bot", errorMessage, '', [], botId);
843 1242 }
844 1243 });
1244 + }); // refreshNonceIfNeeded
845 1245 }
846 1246
847 1247 function callMxChatStream(message, callback, botId) {
848 1248 botId = botId || getMxChatBotId();
@@ -849,9 +1249,9 @@
849 1249
850 1250 // Store the message in case we need to retry after session reset
851 1251 getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', message);
852 1252
853 - const currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
1253 + const currentModel = mxchatChat.model || 'gpt-5.6-sol';
854 1254 if (!isStreamingSupported(currentModel)) {
855 1255 callMxChat(message, callback, botId);
856 1256 return;
857 1257 }
@@ -871,8 +1271,11 @@
871 1271 streamSessionId = generateSessionId();
872 1272 MxChatInstances.setChatSession(botId, streamSessionId);
873 1273 }
874 1274
1275 + // Wait for the page-cache nonce refresh before constructing formData (which
1276 + // captures mxchatChat.nonce by value). Mirrors callMxChat's wrapping. See plan-c5457f.
1277 + refreshNonceIfNeeded(function() {
875 1278 const formData = new FormData();
876 1279 formData.append('action', 'mxchat_stream_chat');
877 1280 formData.append('message', message);
878 1281 formData.append('session_id', streamSessionId);
@@ -901,13 +1304,40 @@
901 1304
902 1305 let accumulatedContent = '';
903 1306 let testingDataReceived = false;
904 1307 let streamingStarted = false;
1308 + // Server-pushed html to append as its OWN bot bubble once the stream
1309 + // finishes (e.g. the consent-safe YouTube embed, plan 03ba33). Rendering is
1310 + // deferred to the end of the stream so the embed always lands BELOW the
1311 + // streamed text.
1312 + let pendingAppendHtml = '';
905 1313
1314 + // Render the stashed appendix as its own bot bubble below the streamed
1315 + // text — mirrors how it is saved in the transcript, so history replays
1316 + // identically. Called from BOTH ends of a stream: the [DONE] line and
1317 + // the stream simply closing (the OpenAI Responses path and Gemini end
1318 + // without a [DONE] line). The stash is cleared, so a stream that sends
1319 + // [DONE] and then closes renders it once. Any future appendix-type
1320 + // event belongs in here, not in one of the two branches.
1321 + function flushAppendHtml() {
1322 + if (pendingAppendHtml) {
1323 + appendMessage("bot", "", pendingAppendHtml, [], false, botId);
1324 + pendingAppendHtml = '';
1325 + }
1326 + }
1327 +
1328 + // Abortable stream: a fresh controller per turn, keyed by bot instance.
1329 + // The Stop control (send button swapped in place) aborts both the read
1330 + // loop and the underlying request.
1331 + var streamControl = { controller: new AbortController(), aborted: false };
1332 + mxchatActiveStreams[botId] = streamControl;
1333 + mxchatShowStopButton(botId);
1334 +
906 1335 fetch(mxchatChat.ajax_url, {
907 1336 method: 'POST',
908 1337 body: formData,
909 - credentials: 'same-origin'
1338 + credentials: 'same-origin',
1339 + signal: streamControl.controller.signal
910 1340 })
911 1341 .then(response => {
912 1342 // Store the response for potential fallback handling
913 1343 const responseClone = response.clone();
@@ -976,8 +1406,10 @@
976 1406
977 1407 // Re-enable chat input when stream ends with content
978 1408 enableChatInput(botId);
979 1409
1410 + flushAppendHtml();
1411 +
980 1412 // Scroll the user's last message to the top now that the
981 1413 // bot's full reply has rendered (gives max reading room).
982 1414 var $chatBoxDone = getElement(botId, 'chat-box');
983 1415 var $lastUserMsgDone = $chatBoxDone.find('.user-message').last();
@@ -1008,8 +1440,10 @@
1008 1440
1009 1441 // Re-enable chat input after streaming completes
1010 1442 enableChatInput(botId);
1011 1443
1444 + flushAppendHtml();
1445 +
1012 1446 // Scroll the user's last message to the top now
1013 1447 // that the bot's full reply has rendered.
1014 1448 var $chatBoxStreamDone = getElement(botId, 'chat-box');
1015 1449 var $lastUserMsgStreamDone = $chatBoxStreamDone.find('.user-message').last();
@@ -1043,8 +1477,21 @@
1043 1477 streamingStarted = true;
1044 1478 accumulatedContent += json.content;
1045 1479 updateStreamingMessage(accumulatedContent, botId);
1046 1480 }
1481 + // Stash appendix html (e.g. video embed) for [DONE]
1482 + else if (json.append_html) {
1483 + pendingAppendHtml = json.append_html;
1484 + }
1485 + // Server-side final pass changed the assembled text
1486 + // (ffef6f: dead-link stripping) — swap the rendered
1487 + // bubble for the validated version. Arrives at most
1488 + // once, just before [DONE].
1489 + else if (json.replace_content) {
1490 + streamingStarted = true;
1491 + accumulatedContent = json.replace_content;
1492 + updateStreamingMessage(accumulatedContent, botId);
1493 + }
1047 1494 // Handle complete response in stream (fallback response)
1048 1495 else if (json.text || json.message || json.html) {
1049 1496 handleNonStreamResponse(json, callback, botId);
1050 1497 return;
@@ -1074,8 +1521,9 @@
1074 1521 }
1075 1522
1076 1523 processStream();
1077 1524 }).catch(streamError => {
1525 + if (mxchatHandleStreamAbort(botId, accumulatedContent, callback)) return;
1078 1526 getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1079 1527 callMxChat(message, callback, botId);
1080 1528 });
1081 1529 }
@@ -1082,8 +1530,9 @@
1082 1530
1083 1531 processStream();
1084 1532 })
1085 1533 .catch(error => {
1534 + if (mxchatHandleStreamAbort(botId, accumulatedContent, callback)) return;
1086 1535 // Check if we have server error data with chat mode
1087 1536 if (error && error.isServerError && error.data) {
1088 1537 // Check for chat mode in error data
1089 1538 if (error.data.chat_mode) {
@@ -1096,8 +1545,9 @@
1096 1545 getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1097 1546 callMxChat(message, callback, botId);
1098 1547 }
1099 1548 });
1549 + }); // refreshNonceIfNeeded
1100 1550 }
1101 1551
1102 1552 // Helper function to handle non-streaming responses
1103 1553 function handleNonStreamResponse(data, callback, botId) {
@@ -1143,9 +1593,9 @@
1143 1593 // Re-send the original message with the new session (user message is already displayed)
1144 1594 var originalMessage = getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message');
1145 1595 if (originalMessage) {
1146 1596 getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', null);
1147 - var currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
1597 + var currentModel = mxchatChat.model || 'gpt-5.6-sol';
1148 1598 if (shouldUseStreaming(currentModel)) {
1149 1599 callMxChatStream(originalMessage, callback, botId);
1150 1600 } else {
1151 1601 callMxChat(originalMessage, callback, botId);
@@ -1278,8 +1728,15 @@
1278 1728 var $chatBox = getElement(botId, 'chat-box');
1279 1729 const tempMessage = $chatBox.find('.bot-message.temporary-message').last();
1280 1730
1281 1731 if (tempMessage.length) {
1732 + // aria-busy=true for the whole stream: the bubble is rewritten on
1733 + // every chunk, and without busy a polite live region announces those
1734 + // rewrites continuously. Flipped false once the reply is final, so
1735 + // assistive tech announces the completed message ONCE (plan 67f126).
1736 + if (tempMessage.attr('aria-busy') !== 'true') {
1737 + tempMessage.attr('aria-busy', 'true');
1738 + }
1282 1739 // Update existing message
1283 1740 tempMessage.html(formattedContent);
1284 1741 } else {
1285 1742 // Create new temporary message if it doesn't exist
@@ -1306,47 +1763,98 @@
1306 1763 // Update the event handlers to use the correct function names (using event delegation)
1307 1764 // Use class-based selectors for multi-instance support
1308 1765 $(document).on('click', '.send-button', function() {
1309 1766 var botId = getBotIdFromElement(this);
1310 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
1311 - if (!(modeIndicator && modeIndicator.textContent === 'Live Agent')) {
1312 - disableChatInput(botId);
1767 + // While a response is streaming the button is a Stop control.
1768 + if (this.classList.contains('mxchat-stop-mode')) {
1769 + // Same click that just started this stream (an add-on's direct handler
1770 + // ran before this delegated one) — not a Stop press. See
1771 + // mxchatShowStopButton for the full story (plan-4bba64).
1772 + if (this.__mxchatStopJustShown) return;
1773 + mxchatStopStreaming(botId);
1774 + return;
1313 1775 }
1776 + // sendMessage() owns the disable - see the Enter handler below (plan b67fd5).
1314 1777 sendMessage(botId);
1315 1778 });
1316 1779
1317 -// Override enter key handler (using event delegation)
1780 +// Enter sends, Shift+Enter inserts a newline (using event delegation).
1781 +// sendMessage() owns the disable: it greys the box only when a real message is
1782 +// about to go out. Disabling here first left the widget locked for good after
1783 +// Enter on an empty box - the send returned early and no reply path ever
1784 +// re-enabled it (plan b67fd5).
1318 1785 $(document).on('keypress', '.chat-input', function(e) {
1319 1786 if (e.which == 13 && !e.shiftKey) {
1320 1787 e.preventDefault();
1321 - var botId = getBotIdFromElement(this);
1322 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
1323 - if (!(modeIndicator && modeIndicator.textContent === 'Live Agent')) {
1324 - disableChatInput(botId);
1325 - }
1326 - sendMessage(botId);
1788 + sendMessage(getBotIdFromElement(this));
1327 1789 }
1328 1790 });
1329 1791
1330 -
1331 -// Tags the chat-box transcript so the print stylesheet can target it,
1332 -// and lazily initializes the header overflow menu for this bot if the
1333 -// markup is present but not yet wired (covers dynamically-rendered widgets).
1334 -// Idempotent; safe to call on every appended message.
1335 -function mxchatEnsurePrintRoot(botId) {
1336 - var $chatBox = getElement(botId, 'chat-box');
1337 - if (!$chatBox || !$chatBox.length) return;
1338 - $chatBox.addClass('mxchat-conversation-print-root');
1339 - if (!$chatBox.attr('data-print-title')) {
1340 - var nowStr = new Date().toLocaleString();
1341 - var headerTitle = ((typeof mxchatChat !== 'undefined' && mxchatChat.print_header_title) || 'Chat transcript') + ' — ' + nowStr;
1342 - $chatBox.attr('data-print-title', headerTitle);
1792 +// Chat input character counter + soft limit feedback (plan 7091a2).
1793 +// Language-neutral: numbers + color only, no translatable strings. The counter
1794 +// reveals near the cap and ramps neutral -> amber -> red; an over-limit keystroke
1795 +// or trimmed paste produces a brief border-flash/shake so the maxlength cap (plan
1796 +// a3fae2) is never a silent "input jumps back". Per-bot scoped via .input-container.
1797 +function mxchatUpdateCharCounter(inputEl) {
1798 + if (!inputEl || !inputEl.closest) return;
1799 + var max = parseInt(inputEl.getAttribute('maxlength'), 10);
1800 + var container = inputEl.closest('.input-container');
1801 + if (!container || !max || max <= 0) return;
1802 + var counter = container.querySelector('.mxchat-char-counter');
1803 + if (!counter) return;
1804 + var len = inputEl.value.length;
1805 + var ratio = len / max;
1806 + var nearThreshold = 0.8; // start surfacing the counter at 80% of the cap
1807 + var cur = counter.querySelector('.mxchat-char-counter-current');
1808 + if (cur) cur.textContent = len;
1809 + var warn = ratio >= nearThreshold && len < max;
1810 + var full = len >= max;
1811 + counter.classList.toggle('is-visible', ratio >= nearThreshold);
1812 + counter.classList.toggle('is-warn', warn);
1813 + counter.classList.toggle('is-full', full);
1814 + container.classList.toggle('mxchat-input-near-limit', warn);
1815 + container.classList.toggle('mxchat-input-at-limit', full);
1816 +}
1817 +
1818 +function mxchatBumpInput(inputEl) {
1819 + var container = inputEl && inputEl.closest ? inputEl.closest('.input-container') : null;
1820 + if (!container) return;
1821 + container.classList.remove('mxchat-input-bump');
1822 + void container.offsetWidth; // reflow so a rapid second hit retriggers the animation
1823 + container.classList.add('mxchat-input-bump');
1824 + clearTimeout($(container).data('mxchatBumpTimeout'));
1825 + var t = setTimeout(function() { container.classList.remove('mxchat-input-bump'); }, 220);
1826 + $(container).data('mxchatBumpTimeout', t);
1827 +}
1828 +
1829 +// Live counter update on every input.
1830 +$(document).on('input', '.chat-input', function() {
1831 + mxchatUpdateCharCounter(this);
1832 +});
1833 +
1834 +// Visible "you've hit the edge" feedback when a printable keystroke is about to be
1835 +// rejected at the cap (maxlength silently swallows it otherwise).
1836 +$(document).on('keydown', '.chat-input', function(e) {
1837 + var max = parseInt(this.getAttribute('maxlength'), 10);
1838 + if (!max || max <= 0 || this.value.length < max) return;
1839 + if (e.ctrlKey || e.metaKey || e.altKey) return;
1840 + // A single printable char with no selection to overwrite WILL be rejected.
1841 + if (e.key && e.key.length === 1 && this.selectionStart === this.selectionEnd) {
1842 + mxchatBumpInput(this);
1343 1843 }
1344 - if (typeof mxchatInitHeaderMenu === 'function') {
1345 - mxchatInitHeaderMenu(botId);
1346 - }
1347 -}
1844 +});
1348 1845
1846 +// A paste that gets trimmed to the cap also bumps, so truncation is never silent.
1847 +$(document).on('paste', '.chat-input', function() {
1848 + var el = this;
1849 + var max = parseInt(el.getAttribute('maxlength'), 10);
1850 + if (!max || max <= 0) return;
1851 + setTimeout(function() {
1852 + mxchatUpdateCharCounter(el);
1853 + if (el.value.length >= max) mxchatBumpInput(el);
1854 + }, 0);
1855 +});
1856 +
1349 1857 // Builds the list of overflow-menu items for a given bot.
1350 1858 // Adding a future item is one push to this array — do NOT hardcode "only download."
1351 1859 function mxchatGetHeaderMenuItems(botId) {
1352 1860 var items = [];
@@ -1364,8 +1872,26 @@
1364 1872 }
1365 1873 });
1366 1874 }
1367 1875
1876 + // "Start new chat" — surfaces the EXISTING per-conversation reset
1877 + // (MxChatInstances.resetChatSession) so a visitor can start a fresh thread
1878 + // without the site owner disabling chat persistence globally. Default OFF;
1879 + // gated by the reset_chat_enabled option. plan ac2e81.
1880 + if (settings.reset_chat_enabled === 'on') {
1881 + items.push({
1882 + id: 'reset-chat',
1883 + label: settings.reset_chat_label || 'Start new chat',
1884 + 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>',
1885 + action: function() {
1886 + var confirmMsg = settings.reset_chat_confirm || 'Start a new chat? This clears the current conversation.';
1887 + if (window.confirm(confirmMsg)) {
1888 + MxChatInstances.resetChatSession(botId);
1889 + }
1890 + }
1891 + });
1892 + }
1893 +
1368 1894 return items;
1369 1895 }
1370 1896
1371 1897 // Builds a clean markdown transcript of the current conversation and triggers
@@ -1443,30 +1969,31 @@
1443 1969 var fg = ($textChild.length ? window.getComputedStyle($textChild[0]).color : cs.color);
1444 1970 if (fg) $wrap[0].style.setProperty('--mxchat-menu-fg', fg);
1445 1971 }
1446 1972
1447 -// One-time per-widget init: renders menu items, wires open/close,
1448 -// outside-click, Escape, and arrow-key navigation. If no items, hides the trigger.
1449 -function mxchatInitHeaderMenu(botId) {
1450 - var $wrap = $('.mxchat-header-menu-wrap[data-bot-id="' + botId + '"]').first();
1451 - if (!$wrap.length || $wrap.data('mxchatMenuReady')) return;
1452 -
1973 +// Renders (or re-renders) the item list for one menu wrap. Split out of
1974 +// mxchatInitHeaderMenu so the dynamic-settings merge (plan-32db95) can
1975 +// rebuild items + trigger visibility WITHOUT re-binding the one-time
1976 +// open/close/keyboard wiring. closeMenu is passed in by the init closure;
1977 +// a rebuild before init (never happens, but harmless) just skips it.
1978 +function mxchatRenderHeaderMenuItems(botId, $wrap, closeMenuFn) {
1453 1979 var $trigger = $wrap.find('.mxchat-menu-trigger');
1454 1980 var $menu = $wrap.find('.mxchat-header-menu');
1455 1981 var items = mxchatGetHeaderMenuItems(botId);
1456 1982
1457 - // Initial color sync — covers normal page load.
1458 - mxchatSyncMenuColors(botId, $wrap);
1983 + $menu.empty();
1459 1984
1460 1985 if (!items.length) {
1461 1986 $trigger.hide();
1462 1987 $menu.hide();
1463 - $wrap.data('mxchatMenuReady', true);
1464 1988 return;
1465 1989 }
1466 1990
1467 - // Build the menu items.
1468 - $menu.empty();
1991 + // Clear any inline display:none a previous zero-item render left behind —
1992 + // open/close visibility is governed by the hidden prop + is-open class.
1993 + $trigger.css('display', '');
1994 + $menu.css('display', '');
1995 +
1469 1996 items.forEach(function(item, idx) {
1470 1997 var $btn = $('<button>', {
1471 1998 type: 'button',
1472 1999 'class': 'mxchat-menu-item',
@@ -1479,14 +2006,50 @@
1479 2006 $btn.find('.mxchat-menu-item-label').text(item.label);
1480 2007 $btn.on('click', function(e) {
1481 2008 e.preventDefault();
1482 2009 e.stopPropagation();
1483 - closeMenu();
2010 + if (closeMenuFn) closeMenuFn();
1484 2011 try { item.action(); } catch (err) { /* no-op */ }
1485 2012 });
1486 2013 $menu.append($btn);
1487 2014 });
2015 +}
1488 2016
2017 +// Re-render every menu on the page after a dynamic-settings merge
2018 +// (multi-bot: each wrap re-reads its items). An OPEN menu is left alone —
2019 +// swapping items under the user mid-interaction yanks focus — and the
2020 +// rebuild runs when it closes instead (closeMenu checks the pending flag).
2021 +function mxchatRebuildHeaderMenus() {
2022 + $('.mxchat-header-menu-wrap').each(function() {
2023 + var $wrap = $(this);
2024 + var botId = $wrap.data('bot-id');
2025 + if (!botId) return;
2026 + if (!$wrap.data('mxchatMenuReady')) {
2027 + mxchatInitHeaderMenu(botId);
2028 + return;
2029 + }
2030 + if ($wrap.find('.mxchat-header-menu').hasClass('is-open')) {
2031 + $wrap.data('mxchatMenuRebuildPending', true);
2032 + return;
2033 + }
2034 + mxchatRenderHeaderMenuItems(botId, $wrap, $wrap.data('mxchatMenuClose'));
2035 + });
2036 +}
2037 +
2038 +// One-time per-widget init: renders menu items, wires open/close,
2039 +// outside-click, Escape, and arrow-key navigation. If no items, hides the
2040 +// trigger. Wiring happens even when there are zero items at init, so a
2041 +// later dynamic-settings rebuild that adds items has a working trigger.
2042 +function mxchatInitHeaderMenu(botId) {
2043 + var $wrap = $('.mxchat-header-menu-wrap[data-bot-id="' + botId + '"]').first();
2044 + if (!$wrap.length || $wrap.data('mxchatMenuReady')) return;
2045 +
2046 + var $trigger = $wrap.find('.mxchat-menu-trigger');
2047 + var $menu = $wrap.find('.mxchat-header-menu');
2048 +
2049 + // Initial color sync — covers normal page load.
2050 + mxchatSyncMenuColors(botId, $wrap);
2051 +
1489 2052 function openMenu() {
1490 2053 // Re-sync each open in case the active theme changed since init.
1491 2054 mxchatSyncMenuColors(botId, $wrap);
1492 2055 $menu.prop('hidden', false).attr('aria-hidden', 'false').addClass('is-open');
@@ -1500,8 +2063,14 @@
1500 2063 $menu.prop('hidden', true).attr('aria-hidden', 'true').removeClass('is-open');
1501 2064 $trigger.attr('aria-expanded', 'false');
1502 2065 $menu.find('.mxchat-menu-item').attr('tabindex', '-1');
1503 2066 if (returnFocus) $trigger.trigger('focus');
2067 + // A dynamic-settings rebuild that arrived while the menu was open
2068 + // was deferred (mxchatRebuildHeaderMenus) — run it now.
2069 + if ($wrap.data('mxchatMenuRebuildPending')) {
2070 + $wrap.removeData('mxchatMenuRebuildPending');
2071 + mxchatRenderHeaderMenuItems(botId, $wrap, closeMenu);
2072 + }
1504 2073 }
1505 2074
1506 2075 // Toggle on trigger click — stop propagation so the .chatbot-top-bar
1507 2076 // click-to-collapse handler does not fire.
@@ -1555,8 +2124,13 @@
1555 2124 openMenu();
1556 2125 }
1557 2126 });
1558 2127
2128 + // Expose closeMenu for out-of-closure re-renders (mxchatRebuildHeaderMenus),
2129 + // then do the initial item render.
2130 + $wrap.data('mxchatMenuClose', closeMenu);
2131 + mxchatRenderHeaderMenuItems(botId, $wrap, closeMenu);
2132 +
1559 2133 $wrap.data('mxchatMenuReady', true);
1560 2134 }
1561 2135
1562 2136 // Initialize header menus for every rendered widget on DOM ready.
@@ -1564,8 +2138,18 @@
1564 2138 $('.mxchat-header-menu-wrap').each(function() {
1565 2139 var botId = $(this).data('bot-id');
1566 2140 if (botId) mxchatInitHeaderMenu(botId);
1567 2141 });
2142 +
2143 + // Embedded (non-floating) widgets are open from the moment the page
2144 + // renders — refresh dynamic settings at init (plan-32db95). Floating
2145 + // widgets refresh on first launcher open instead.
2146 + var hasEmbeddedWidget = $('.mxchat-chatbot-wrapper').filter(function() {
2147 + return !$(this).closest('.floating-chatbot').length;
2148 + }).length > 0;
2149 + if (hasEmbeddedWidget) {
2150 + mxchatRefreshDynamicSettings();
2151 + }
1568 2152 });
1569 2153
1570 2154 function appendMessage(sender, messageText = '', messageHtml = '', images = [], isTemporary = false, botId = 'default') {
1571 2155 try {
@@ -1642,9 +2226,11 @@
1642 2226
1643 2227 messageDiv.html(fullMessage);
1644 2228
1645 2229 if (isTemporary) {
1646 - messageDiv.addClass('temporary-message');
2230 + // In-flight bubble: hold aria-busy so the live region stays quiet
2231 + // until the content is finalized (plan 67f126).
2232 + messageDiv.addClass('temporary-message').attr('aria-busy', 'true');
1647 2233 }
1648 2234
1649 2235 // Append to the correct chatbot instance's chat-box
1650 2236 var $chatBox = getElement(botId, 'chat-box');
@@ -1661,9 +2247,9 @@
1661 2247 }
1662 2248 }
1663 2249
1664 2250 if ((sender === "bot" || sender === "agent") && !isTemporary) {
1665 - mxchatEnsurePrintRoot(botId);
2251 + if (typeof mxchatInitHeaderMenu === 'function') mxchatInitHeaderMenu(botId);
1666 2252 }
1667 2253 });
1668 2254
1669 2255 if (messageText.id) {
@@ -1675,8 +2261,56 @@
1675 2261 // Error rendering message - silently continue
1676 2262 }
1677 2263 }
1678 2264
2265 +// Link clicks in bot and agent messages: the click is recorded, the browser
2266 +// follows the anchor itself. Navigation must not wait for the tracking
2267 +// request: a window.open() made from that request's callback is outside the
2268 +// visitor's tap, and Safari's pop-up blocker drops it without a message.
2269 +
2270 +// Give a tracked anchor the target it should open in, and noopener on a new tab.
2271 +function prepareTrackedLink($link) {
2272 + if (linkTarget === '_blank' && $link.attr('target') !== '_blank') {
2273 + $link.attr('target', '_blank');
2274 + }
2275 + if ($link.attr('target') === '_blank') {
2276 + var rel = $link.attr('rel') || '';
2277 + if (!/(^|\s)noopener(\s|$)/.test(rel)) {
2278 + $link.attr('rel', $.trim(rel + ' noopener'));
2279 + }
2280 + }
2281 +}
2282 +
2283 +// Record one click, fire-and-forget. sendBeacon survives the page unloading
2284 +// when the link opens in the same tab.
2285 +function trackLinkClick(href, messageContext, botId) {
2286 + var fields = {
2287 + action: 'mxchat_track_url_click',
2288 + session_id: getChatSession(botId),
2289 + url: href,
2290 + message_context: messageContext,
2291 + nonce: mxchatChat.nonce
2292 + };
2293 + try {
2294 + if (navigator.sendBeacon && typeof FormData !== 'undefined') {
2295 + var body = new FormData();
2296 + $.each(fields, function(name, value) {
2297 + body.append(name, value == null ? '' : value);
2298 + });
2299 + if (navigator.sendBeacon(mxchatChat.ajax_url, body)) {
2300 + return;
2301 + }
2302 + }
2303 + } catch (error) {
2304 + // Fall through to the plain request
2305 + }
2306 + $.ajax({
2307 + url: mxchatChat.ajax_url,
2308 + type: 'POST',
2309 + data: fields
2310 + });
2311 +}
2312 +
1679 2313 // Helper function to attach link tracking with proper event handling
1680 2314 function attachLinkTracking(messageDiv, messageText, botId) {
1681 2315 botId = botId || 'default';
1682 2316 // Use a slight delay to ensure DOM is ready
@@ -1694,11 +2328,13 @@
1694 2328 if (originalHref && (originalHref.startsWith('http://') || originalHref.startsWith('https://'))) {
1695 2329 // Remove any existing click handlers first
1696 2330 $link.off('click.tracking');
1697 2331
2332 + // The anchor carries its own target: the browser follows it
2333 + prepareTrackedLink($link);
2334 +
1698 2335 // Add new click handler with namespace
1699 2336 $link.on('click.tracking', function(e) {
1700 - e.preventDefault();
1701 2337 e.stopPropagation();
1702 2338
1703 2339 const messageContext = typeof messageText === 'string'
1704 2340 ? messageText.substring(0, 200)
@@ -1703,30 +2339,10 @@
1703 2339 const messageContext = typeof messageText === 'string'
1704 2340 ? messageText.substring(0, 200)
1705 2341 : '';
1706 2342
1707 - // Track the click
1708 - $.ajax({
1709 - url: mxchatChat.ajax_url,
1710 - type: 'POST',
1711 - data: {
1712 - action: 'mxchat_track_url_click',
1713 - session_id: getChatSession(botId),
1714 - url: originalHref,
1715 - message_context: messageContext,
1716 - nonce: mxchatChat.nonce
1717 - },
1718 - complete: function() {
1719 - // Always redirect, even if tracking fails
1720 - if ($link.attr('target') === '_blank' || linkTarget === '_blank') {
1721 - window.open(originalHref, '_blank');
1722 - } else {
1723 - window.location.href = originalHref;
1724 - }
1725 - }
1726 - });
1727 -
1728 - return false; // Extra insurance to prevent default
2343 + prepareTrackedLink($link);
2344 + trackLinkClick(originalHref, messageContext, botId);
1729 2345 });
1730 2346 }
1731 2347 });
1732 2348 }, 100); // Small delay to ensure DOM is ready
@@ -1766,13 +2382,16 @@
1766 2382
1767 2383 if (images.length > 0) {
1768 2384 fullMessage += '<div class="image-gallery" dir="auto">';
1769 2385 images.forEach(img => {
2386 + const safeTitle = sanitizeUserInput(img.title);
2387 + const safeUrl = escapeAttr(img.image_url);
2388 + const safeThumbnail = escapeAttr(img.thumbnail_url);
1770 2389 fullMessage += `
1771 2390 <div style="margin-bottom: 10px;">
1772 - <strong>${img.title}</strong><br>
1773 - <a href="${img.image_url}" target="_blank">
1774 - <img src="${img.thumbnail_url}" alt="${img.title}" style="max-width: 100px; height: auto; margin: 5px;" />
2391 + <strong>${safeTitle}</strong><br>
2392 + <a href="${safeUrl}" target="_blank">
2393 + <img src="${safeThumbnail}" alt="${safeTitle}" style="max-width: 100px; height: auto; margin: 5px;" />
1775 2394 </a>
1776 2395 </div>`;
1777 2396 });
1778 2397 fullMessage += '</div>';
@@ -1779,13 +2398,16 @@
1779 2398 }
1780 2399
1781 2400 if (lastMessageDiv.length) {
1782 2401 // Replace content immediately to prevent visual gap between thinking dots and response
2402 + // aria-busy released AFTER the final content is set, so the live region
2403 + // announces the finished message once (plan 67f126).
1783 2404 lastMessageDiv
1784 2405 .html(fullMessage)
1785 2406 .removeClass('bot-message user-message temporary-message')
1786 2407 .addClass(messageClass)
1787 - .attr('dir', 'auto');
2408 + .attr('dir', 'auto')
2409 + .attr('aria-busy', 'false');
1788 2410
1789 2411 // Only apply inline colors if AI theme is not active (let CSS handle it)
1790 2412 var skipColors = mxchatChat.skip_inline_colors || shouldSkipInlineColors(botId);
1791 2413 if (!skipColors) {
@@ -1813,9 +2435,9 @@
1813 2435 // Re-enable chat input after response is displayed
1814 2436 enableChatInput(botId);
1815 2437
1816 2438 if (sender === "bot" || sender === "agent") {
1817 - mxchatEnsurePrintRoot(botId);
2439 + if (typeof mxchatInitHeaderMenu === 'function') mxchatInitHeaderMenu(botId);
1818 2440 }
1819 2441 } else {
1820 2442 appendMessage(sender, responseText, responseHtml, images, false, botId);
1821 2443 // Re-enable chat input after response is displayed
@@ -1845,10 +2467,15 @@
1845 2467 var botMessageFontColor = mxchatChat.bot_message_font_color;
1846 2468 var botMessageBgColor = mxchatChat.bot_message_bg_color;
1847 2469
1848 2470 // Build thinking dots HTML - skip inline colors if AI theme is active
2471 + // The dots are decorative; the sr-only span is what the live region
2472 + // announces for the waiting state (plan 67f126). Server-localized
2473 + // string — safe to inject (esc_html__ output, no user content).
1849 2474 var dotStyle = skipColors ? '' : ' style="background-color: ' + botMessageFontColor + ';"';
1850 - var thinkingHtml = '<div class="thinking-dots-container">' +
2475 + var srThinking = mxchatChat.thinking_announcement || 'Assistant is typing';
2476 + var thinkingHtml = '<span class="sr-only">' + srThinking + '</span>' +
2477 + '<div class="thinking-dots-container" aria-hidden="true">' +
1851 2478 '<div class="thinking-dots">' +
1852 2479 '<span class="dot"' + dotStyle + '></span>' +
1853 2480 '<span class="dot"' + dotStyle + '></span>' +
1854 2481 '<span class="dot"' + dotStyle + '></span>' +
@@ -1883,27 +2510,42 @@
1883 2510 // Check for % followed by exactly 2 hex digits
1884 2511 return /%[0-9a-fA-F]{2}/.test(url);
1885 2512 }
1886 2513
1887 - // Helper function to safely encode URLs only if needed
2514 + // Helper function to safely encode URLs only if needed, then make the
2515 + // result attribute-safe. "Don't double-encode an already-encoded URL"
2516 + // used to mean "return it untouched" — so a literal quote riding next
2517 + // to a %20 reached href="…" intact and closed the attribute
2518 + // (plan 2db182). Every href this function feeds now goes through
2519 + // escapeAttr(), whether or not the URL was already percent-encoded.
1888 2520 function safeEncodeUrl(url) {
1889 - // If URL already contains encoded characters, return as-is
1890 - if (isUrlEncoded(url)) {
1891 - return url;
1892 - }
1893 - // Otherwise, encode it
1894 - return encodeURI(url);
2521 + const encoded = isUrlEncoded(url) ? url : encodeURI(url);
2522 + return escapeAttr(encoded);
1895 2523 }
1896 2524
1897 - // Process markdown headers FIRST
1898 - let processedText = formatMarkdownHeaders(inputText);
1899 -
2525 + // Take backslash escapes and code (fenced + inline) out of the text FIRST
2526 + // (plan 9dc34f). Styling used to run before formatCodeBlocks(), so a
2527 + // backtick could not protect an underscore and \_ was not an escape at
2528 + // all; the header rule also ran over fenced code. Each escape becomes a
2529 + // placeholder carrying its literal character, each code span a
2530 + // placeholder carrying its rendered HTML; both are restored below, after
2531 + // the styling rules have run, so nothing downstream changes.
2532 + const literals = protectLiterals(inputText);
2533 + let processedText = literals.text;
2534 +
2535 + // Process markdown headers
2536 + processedText = formatMarkdownHeaders(processedText);
2537 +
1900 2538 // Process text styling (bold, italic, strikethrough)
1901 2539 processedText = formatTextStyling(processedText);
1902 -
1903 - // Process code blocks BEFORE processing links
2540 +
2541 + // Legacy raw <?php ... ?> blocks (fenced + inline code were already
2542 + // rendered inside protectLiterals) — still BEFORE processing links
1904 2543 processedText = formatCodeBlocks(processedText);
1905 2544
2545 + // Put the rendered code and the escaped characters back
2546 + processedText = literals.restore(processedText);
2547 +
1906 2548 // Process markdown tables BEFORE converting newlines to paragraphs
1907 2549 processedText = formatMarkdownTables(processedText);
1908 2550
1909 2551 // NOW convert to paragraphs
@@ -1915,10 +2557,13 @@
1915 2557 processedText = processedText.replace(/\[(https?:\/\/[^\]]+)\]/g, (match, url) => {
1916 2558 // Clean the URL of any trailing punctuation
1917 2559 let cleanUrl = url.replace(/[.,;!?]+$/, '');
1918 2560 const safeUrl = safeEncodeUrl(cleanUrl);
2561 + // The bracket body is the only link text that can carry angle
2562 + // brackets (the standalone matcher excludes them) — keep it text.
2563 + const safeText = cleanUrl.replace(/</g, '&lt;').replace(/>/g, '&gt;');
1919 2564 // Return as a proper link without the brackets
1920 - return `<a href="${safeUrl}" target="${linkTarget}">${cleanUrl}</a>`;
2565 + return `<a href="${safeUrl}" target="${linkTarget}">${safeText}</a>`;
1921 2566 });
1922 2567
1923 2568 // Process markdown links: [text](url) and [](url)
1924 2569 // Uses balanced parenthesis matching to handle URLs containing parens
@@ -1992,9 +2637,17 @@
1992 2637 });
1993 2638
1994 2639 // Process standalone URLs - but NOT if they're already in <a> tags or brackets
1995 2640 // Updated pattern to be more careful about what it matches
1996 - const urlPattern = /(^|[^">=\[\]])(https?:\/\/[^\s<"\[\]]+)(?![^<]*<\/a>)(?!\])/gim;
2641 + //
2642 + // The prefix group (plan 78618d) is the start of a line, an ordinary
2643 + // character, OR a tag this formatter itself opened or closed (paragraph,
2644 + // list item, table cell, heading, emphasis, line break), so an address
2645 + // that opens a paragraph or sits inside **bold** is linked too. Never
2646 + // an anchor (its text would be linked twice; the lookahead guards that
2647 + // as well) and never a code span, which stays as typed. No lookbehind,
2648 + // for Safari.
2649 + const urlPattern = /(^|[^">=\[\]]|<\/?(?:p|li|td|th|h[1-6]|strong|em|b|i|del|br)(?:\s[^<>]*)?\/?>)(https?:\/\/[^\s<"\[\]]+)(?![^<]*<\/a>)(?!\])/gim;
1997 2650 processedText = processedText.replace(urlPattern, (match, prefix, url) => {
1998 2651 // Extra check: make sure this isn't already linked
1999 2652 if (match.includes('href=') || match.includes('</a>')) {
2000 2653 return match;
@@ -2005,10 +2658,14 @@
2005 2658 const safeUrl = safeEncodeUrl(cleanUrl);
2006 2659 return `${prefix}<a href="${safeUrl}" target="${linkTarget}">${cleanUrl}</a>`;
2007 2660 });
2008 2661
2009 - // Process www. URLs - but NOT if they're already in <a> tags or brackets
2010 - const wwwPattern = /(^|[^">/\[\]])(www\.[\S]+)(?![^<]*<\/a>)(?!\])/gim;
2662 + // Process www. URLs - but NOT if they're already in <a> tags or brackets.
2663 + // The address stops at the same characters the https pattern stops at
2664 + // (plan 78618d): it used to run through the closing paragraph tag, so
2665 + // "Try www.example.com/page." linked to www.example.com/page.%3C/p%3E.
2666 + // Same prefix group as the https pattern, same reasons.
2667 + const wwwPattern = /(^|[^">/\[\]]|<\/?(?:p|li|td|th|h[1-6]|strong|em|b|i|del|br)(?:\s[^<>]*)?\/?>)(www\.[^\s<"\[\]]+)(?![^<]*<\/a>)(?!\])/gim;
2011 2668 processedText = processedText.replace(wwwPattern, (match, prefix, url) => {
2012 2669 // Extra check: make sure this isn't already linked
2013 2670 if (match.includes('href=') || match.includes('</a>')) {
2014 2671 return match;
@@ -2022,8 +2679,30 @@
2022 2679
2023 2680 return processedText;
2024 2681 }
2025 2682
2683 + // One left-to-right pass over backslash escapes and code (plan 9dc34f).
2684 + // A single alternation keeps the two honest with each other: an escaped
2685 + // backtick is consumed as an escape before it can open a code span, and a
2686 + // code span is consumed whole so the escapes inside it stay verbatim.
2687 + // Placeholders are private-use characters — no underscore, asterisk,
2688 + // backtick, hash, pipe or bracket for a later rule to match.
2689 + function protectLiterals(text) {
2690 + const store = [];
2691 + const out = String(text).replace(/\\([\\`*_~])|(```[\s\S]*?```)|(`[^`\n]+`)/g, function(match, escaped) {
2692 + store.push(escaped !== undefined ? escaped : formatCodeBlocks(match));
2693 + return '\uE000' + (store.length - 1) + '\uE001';
2694 + });
2695 + return {
2696 + text: out,
2697 + restore: function(t) {
2698 + return String(t).replace(/\uE000(\d+)\uE001/g, function(m, i) {
2699 + return store[Number(i)];
2700 + });
2701 + }
2702 + };
2703 + }
2704 +
2026 2705 function formatMarkdownHeaders(text) {
2027 2706 // Handle h1 to h6 headers
2028 2707 return text.replace(/^(#{1,6})\s+(.+)$/gm, function(match, hashes, content) {
2029 2708 const level = hashes.length;
@@ -2050,13 +2729,19 @@
2050 2729 protectedSegments.push(match);
2051 2730 return placeholder;
2052 2731 });
2053 2732
2054 - // Step 1c: Also protect bare URLs that might exist
2733 + // Step 1c: Also protect bare URLs that might exist. Trailing emphasis
2734 + // markers are not part of the address (plan 78618d): **https://x.com**
2735 + // used to protect "https://x.com**", so the bold never paired and the
2736 + // asterisks ended up inside the link. The markers stay outside the
2737 + // placeholder so the styling rules below can pair them.
2055 2738 protectedText = protectedText.replace(/(https?:\/\/[^\s<>"]+)/gi, function(match) {
2739 + const markers = match.match(/[*_~]+$/);
2740 + const url = markers ? match.slice(0, match.length - markers[0].length) : match;
2056 2741 const placeholder = `__PROTECTED_${protectedSegments.length}__`;
2057 - protectedSegments.push(match);
2058 - return placeholder;
2742 + protectedSegments.push(url);
2743 + return placeholder + (markers ? markers[0] : '');
2059 2744 });
2060 2745
2061 2746 // Step 2: Now apply text styling to the protected text
2062 2747 // Handle bold text (**text**)
@@ -2065,11 +2750,24 @@
2065 2750 // Handle italic text (*text* or _text_) - Safari-compatible (no lookbehind)
2066 2751 // Match single asterisks that aren't part of bold (**) by checking they're not followed/preceded by another *
2067 2752 protectedText = protectedText.replace(/(?!\*\*)\*([^*\n]+)\*(?!\*)/g, '<em>$1</em>');
2068 2753
2069 - // Handle underscores for italic - Safari-compatible (no lookbehind)
2070 - // Exclude __PROTECTED_N__ placeholders by checking the content doesn't contain PROTECTED
2071 - protectedText = protectedText.replace(/(?!__)_((?!PROTECTED)[^_\n]+)_(?!_)/g, '<em>$1</em>');
2754 + // Handle underscores for italic - Safari-compatible (no lookbehind), and
2755 + // word-bounded (plan 9dc34f): the opener must follow the start of the
2756 + // text or a non-word character, the closer must precede the end or a
2757 + // non-word character, and the content may not start or end with a
2758 + // space. So my_var_name, MXCHAT_API_KEY and snake_case stay as typed
2759 + // while "use _this_ word" still italicises. A token whose content is
2760 + // entirely upper-case letters and digits (_VALUE_, _ID_) is a placeholder
2761 + // convention, not prose emphasis — it is left verbatim too (ticket 440).
2762 + // __PROTECTED_N__ placeholders cannot match: their underscores are all
2763 + // adjacent to another underscore or a word character.
2764 + protectedText = protectedText.replace(/(^|[^\p{L}\p{N}_])_((?!PROTECTED)[^\s_](?:[^_\n]*[^\s_])?)_(?![\p{L}\p{N}_])/gu, function(match, before, content) {
2765 + if (/^[\p{Lu}\p{N}]+$/u.test(content)) {
2766 + return match;
2767 + }
2768 + return before + '<em>' + content + '</em>';
2769 + });
2072 2770
2073 2771 // Handle strikethrough (~~text~~)
2074 2772 protectedText = protectedText.replace(/~~(.*?)~~/g, '<del>$1</del>');
2075 2773
@@ -2203,8 +2901,24 @@
2203 2901 div.textContent = text;
2204 2902 return div.innerHTML;
2205 2903 }
2206 2904
2905 + // Attribute-safe URL for href="…" / src="…" interpolation (plan 2db182).
2906 + // Percent-encodes the characters that can end or extend an attribute.
2907 + // Valid in every scheme the widget emits (http, https, tel, mailto) and
2908 + // never changes where a legitimate link resolves — encodeURI() already
2909 + // produces most of these, this just guarantees them for URLs that skip
2910 + // encodeURI() because they were percent-encoded on arrival.
2911 + function escapeAttr(url) {
2912 + return String(url)
2913 + .replace(/"/g, '%22')
2914 + .replace(/'/g, '%27')
2915 + .replace(/</g, '%3C')
2916 + .replace(/>/g, '%3E')
2917 + .replace(/`/g, '%60')
2918 + .replace(/ /g, '%20');
2919 + }
2920 +
2207 2921 function escapeHtml(unsafe) {
2208 2922 // Skip escaping if it's already escaped or contains HTML code block markup
2209 2923 if (unsafe.includes('&lt;') || unsafe.includes('&gt;') ||
2210 2924 unsafe.includes('<pre><code') || unsafe.includes('</code></pre>')) {
@@ -2548,9 +3262,30 @@
2548 3262 }
2549 3263
2550 3264 // Only process if there are actual messages
2551 3265 if (response.data.conversation.length > 0) {
2552 - // IMPORTANT: Clear existing messages before loading history
3266 + // Restored history must be SILENT to screen readers
3267 + // (plan 67f126): these are DOM additions inside the
3268 + // live region and would otherwise announce as if
3269 + // they just arrived. Lift aria-live for the batch
3270 + // repopulate, restore it after the browser has
3271 + // processed the mutations.
3272 + var mxLiveRegionEl = $chatBox.get(0);
3273 + var mxSavedAriaLive = mxLiveRegionEl ? mxLiveRegionEl.getAttribute('aria-live') : null;
3274 + if (mxLiveRegionEl) {
3275 + mxLiveRegionEl.setAttribute('aria-live', 'off');
3276 + }
3277 +
3278 + // IMPORTANT: Clear existing messages before loading history.
3279 + // Detach the greeting first and put it back below —
3280 + // it is server-rendered and never stored in the
3281 + // transcript, so the old unconditional .empty()
3282 + // deleted it for the rest of the page life (plan
3283 + // a1a79b). Detach rather than rebuild: intro_message
3284 + // is not localized to JS, and this node already
3285 + // carries the per-bot inline colors and any
3286 + // {visitor_name} substitution already applied to it.
3287 + var $mxIntro = $chatBox.find('.mxchat-intro-message').first().detach();
2553 3288 $chatBox.empty();
2554 3289
2555 3290 $.each(response.data.conversation, function(index, message) {
2556 3291 // Skip agent messages if persistence is off
@@ -2587,15 +3322,28 @@
2587 3322 var content = message.content;
2588 3323 content = content.replace(/\\'/g, "'").replace(/\\"/g, '"');
2589 3324 content = decodeHTMLEntities(content);
2590 3325
3326 + // A visitor's own rows get the same treatment as the
3327 + // live turn (appendMessage escapes user text before
3328 + // linkify). Without this a replayed user message came
3329 + // back as live markup after a refresh (plan 2db182).
3330 + // Bot/agent rows are trusted HTML and stay as they were.
3331 + if (message.role === 'user') {
3332 + content = sanitizeUserInput(content);
3333 + }
3334 +
2591 3335 // Skip linkify for messages containing structured HTML
2592 3336 // (forms, product cards, galleries, etc.) to avoid
2593 3337 // markdown formatting corrupting HTML attributes
2594 - // (e.g. underscores in name="field_name" becoming <em> tags)
2595 - if (content.includes("mxchat-product-card") ||
2596 - content.includes("mxchat-image-gallery") ||
2597 - content.includes("mxchat-featured-products") ||
3338 + // (e.g. underscores in name="field_name" becoming <em> tags).
3339 + // One family check instead of a per-card literal list: any
3340 + // element carrying an mxchat- prefixed class is MxChat-generated
3341 + // structured markup and replays raw. The old list drifted every
3342 + // time an add-on minted a new card class — the filtered-search
3343 + // card ("mxchat-filtered-product-card") missed it and replayed
3344 + // through linkify as visible markup.
3345 + if (/<[a-z][^>]*class\s*=\s*["'][^"']*\bmxchat-/i.test(content) ||
2598 3346 content.includes("<form") ||
2599 3347 content.includes("<input") ||
2600 3348 content.includes("<select") ||
2601 3349 content.includes("<textarea")) {
@@ -2613,12 +3361,29 @@
2613 3361 instance.processedMessageIds.add(message.id);
2614 3362 }
2615 3363 });
2616 3364
2617 - // Only append messages and scroll if we have content
3365 + // Only append messages and scroll if we have content.
3366 + // Greeting goes back FIRST, above the restored
3367 + // history: "Hello — [earlier conversation]" is the
3368 + // natural reading and matches the order a fresh
3369 + // visitor sees (plan a1a79b).
3370 + if ($mxIntro && $mxIntro.length) {
3371 + $chatBox.append($mxIntro);
3372 + }
2618 3373 $chatBox.append($fragment);
2619 3374 scrollToBottom(botId, true);
2620 3375
3376 + // Re-attach live semantics AFTER the rehydration
3377 + // mutations have been processed with the region off
3378 + // (plan 67f126). Restoring later announces nothing
3379 + // retroactively; new turns announce normally.
3380 + if (mxLiveRegionEl) {
3381 + setTimeout(function() {
3382 + mxLiveRegionEl.setAttribute('aria-live', mxSavedAriaLive || 'polite');
3383 + }, 200);
3384 + }
3385 +
2621 3386 // Collapse quick questions if we have conversation history
2622 3387 // BUT skip auto-collapse for embedded bots (they should stay expanded)
2623 3388 if (hasQuickQuestions(botId) && !isEmbeddedBot(botId)) {
2624 3389 collapseQuickQuestions(botId);
@@ -2713,10 +3478,10 @@
2713 3478 .then(data => {
2714 3479 if (data.success) {
2715 3480 container.style.display = 'none';
2716 3481 nameElement.textContent = '';
2717 - activePdfFile = null;
2718 - appendMessage('bot', 'PDF removed.');
3482 + instance.activePdfFile = null;
3483 + appendMessage('bot', 'PDF removed.', '', [], false, botId);
2719 3484 }
2720 3485 })
2721 3486 .catch(error => {
2722 3487 // Error removing PDF - silently continue
@@ -2722,14 +3487,16 @@
2722 3487 // Error removing PDF - silently continue
2723 3488 });
2724 3489 }
2725 3490
2726 - function removeActiveWord() {
2727 - const container = document.getElementById('active-word-container');
2728 - const nameElement = document.getElementById('active-word-name');
2729 -
2730 - if (!container || !nameElement || !activeWordFile) return;
2731 -
3491 + function removeActiveWord(botId) {
3492 + botId = botId || 'default';
3493 + var instance = MxChatInstances.get(botId);
3494 + const container = getElementDOM(botId, 'active-word-container');
3495 + const nameElement = getElementDOM(botId, 'active-word-name');
3496 +
3497 + if (!container || !nameElement || !instance.activeWordFile) return;
3498 +
2732 3499 fetch(mxchatChat.ajax_url, {
2733 3500 method: 'POST',
2734 3501 headers: {
2735 3502 'Content-Type': 'application/x-www-form-urlencoded',
@@ -2735,9 +3502,9 @@
2735 3502 'Content-Type': 'application/x-www-form-urlencoded',
2736 3503 },
2737 3504 body: new URLSearchParams({
2738 3505 'action': 'mxchat_remove_word',
2739 - 'session_id': sessionId,
3506 + 'session_id': getChatSession(botId),
2740 3507 'nonce': mxchatChat.nonce
2741 3508 })
2742 3509 })
2743 3510 .then(response => response.json())
@@ -2744,10 +3511,10 @@
2744 3511 .then(data => {
2745 3512 if (data.success) {
2746 3513 container.style.display = 'none';
2747 3514 nameElement.textContent = '';
2748 - activeWordFile = null;
2749 - appendMessage('bot', 'Word document removed.');
3515 + instance.activeWordFile = null;
3516 + appendMessage('bot', 'Word document removed.', '', [], false, botId);
2750 3517 }
2751 3518 })
2752 3519 .catch(error => {
2753 3520 // Error removing Word document - silently continue
@@ -2906,11 +3673,38 @@
2906 3673 e.stopPropagation();
2907 3674 var botId = getBotIdFromElement(this);
2908 3675 collapseQuickQuestions(botId);
2909 3676 });
3677 +
3678 +// Consent-safe YouTube embed (plan 03ba33): the server only ever ships a
3679 +// thumbnail facade — no Google iframe exists until the visitor taps play.
3680 +// Delegated so it also works for embeds restored from chat history.
3681 +$(document).on('click', '.mxchat-youtube-embed .mxchat-youtube-facade', function(e) {
3682 + e.preventDefault();
3683 + var $wrap = $(this).closest('.mxchat-youtube-embed');
3684 + var videoId = String($wrap.data('video-id') || '').replace(/[^A-Za-z0-9_-]/g, '');
3685 + if (!videoId) {
3686 + return;
3687 + }
3688 + var title = $wrap.find('.mxchat-youtube-title').text() || 'YouTube video';
3689 + var $iframe = $('<iframe>', {
3690 + src: 'https://www.youtube-nocookie.com/embed/' + videoId + '?autoplay=1&rel=0',
3691 + title: title,
3692 + allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
3693 + allowfullscreen: true,
3694 + frameborder: 0
3695 + }).addClass('mxchat-youtube-iframe');
3696 + $wrap.addClass('mxchat-youtube-playing');
3697 + $(this).replaceWith($iframe);
3698 +});
2910 3699
2911 3700 // Chatbot visibility toggle handlers - use class selector for multi-instance support
2912 - $(document).on('click', '.floating-chatbot-button', function() {
3701 + // Handles click + Enter/Space keypresses for keyboard accessibility (WCAG 2.1 SC 2.1.1).
3702 + $(document).on('click keydown', '.floating-chatbot-button', function(e) {
3703 + if (e.type === 'keydown') {
3704 + if (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'Spacebar') return;
3705 + e.preventDefault();
3706 + }
2913 3707 var botId = getBotIdFromElement(this);
2914 3708 var $chatbot = getElement(botId, 'floating-chatbot');
2915 3709 var $badge = getElement(botId, 'chat-notification-badge');
2916 3710 var $preChat = getElement(botId, 'pre-chat-message');
@@ -2915,14 +3709,21 @@
2915 3709 var $badge = getElement(botId, 'chat-notification-badge');
2916 3710 var $preChat = getElement(botId, 'pre-chat-message');
2917 3711
2918 3712 if ($chatbot.hasClass('hidden')) {
2919 - $chatbot.removeClass('hidden').addClass('visible');
2920 - $(this).addClass('hidden');
3713 + $chatbot.removeClass('hidden').addClass('visible')
3714 + .attr('aria-modal', 'true').attr('role', 'dialog');
3715 + $(this).addClass('hidden').attr('aria-expanded', 'true');
2921 3716 $badge.hide(); // Hide notification when opening chat
2922 3717 disableScroll();
2923 3718 $preChat.fadeOut(250);
3719 + mxchatFireOpened(botId);
2924 3720
3721 + // First open per page load: re-fetch behavior settings in case
3722 + // this page's inline values came from a stale full-page cache
3723 + // (plan-32db95). Idempotent — later opens are a no-op.
3724 + mxchatRefreshDynamicSettings();
3725 +
2925 3726 // Load chat history for returning visitors (persistence)
2926 3727 var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
2927 3728 if (chatPersistenceEnabled) {
2928 3729 MxChatInstances.ensureSession(botId);
@@ -2938,24 +3739,55 @@
2938 3739 // No email collection — still route through showChatContainerForBot
2939 3740 // so the loader is shown while chat history loads
2940 3741 showChatContainerForBot(botId);
2941 3742 }
3743 +
3744 + // Move keyboard focus into the message input after the open transition.
3745 + setTimeout(function() {
3746 + var chatInput = getElementDOM(botId, 'chat-input');
3747 + if (chatInput && !chatInput.disabled) {
3748 + try { chatInput.focus({ preventScroll: true }); } catch (err) { chatInput.focus(); }
3749 + }
3750 + }, 300);
2942 3751 } else {
2943 - $chatbot.removeClass('visible').addClass('hidden');
2944 - $(this).removeClass('hidden');
3752 + $chatbot.removeClass('visible').addClass('hidden').removeAttr('aria-modal');
3753 + $(this).removeClass('hidden').attr('aria-expanded', 'false');
2945 3754 enableScroll();
2946 3755 checkPreChatDismissal(botId);
2947 3756 }
2948 3757 });
2949 3758
2950 - // Allow clicking anywhere on the title bar to close the chatbot
3759 + // Allow clicking anywhere on the title bar to close the chatbot.
3760 + // Returns keyboard focus to the launcher so keyboard users don't get
3761 + // stranded at <body> (WCAG SC 2.4.3 Focus Order). :focus-visible is
3762 + // heuristic-based so mouse-triggered close won't show a focus ring.
2951 3763 $(document).on('click', '.chatbot-top-bar', function() {
2952 3764 var botId = getBotIdFromElement(this);
2953 - getElement(botId, 'floating-chatbot').addClass('hidden').removeClass('visible');
2954 - getElement(botId, 'floating-chatbot-button').removeClass('hidden');
3765 + getElement(botId, 'floating-chatbot').addClass('hidden').removeClass('visible').removeAttr('aria-modal');
3766 + var $launcher = getElement(botId, 'floating-chatbot-button');
3767 + $launcher.removeClass('hidden').attr('aria-expanded', 'false');
2955 3768 enableScroll();
3769 + try { $launcher.trigger('focus'); } catch (err) { /* no-op */ }
2956 3770 });
2957 3771
3772 + // Global Escape-key handler — closes any visible chat widget and
3773 + // returns focus to its launcher. Standard modal-dismissal pattern;
3774 + // pairs with aria-modal="true" set on the widget when it opens.
3775 + $(document).on('keydown', function(e) {
3776 + if (e.key !== 'Escape' && e.key !== 'Esc') return;
3777 + var $visible = $('.floating-chatbot.visible');
3778 + if (!$visible.length) return;
3779 + e.preventDefault();
3780 + $visible.each(function() {
3781 + var botId = getBotIdFromElement(this);
3782 + $(this).addClass('hidden').removeClass('visible').removeAttr('aria-modal');
3783 + var $launcher = getElement(botId, 'floating-chatbot-button');
3784 + $launcher.removeClass('hidden').attr('aria-expanded', 'false');
3785 + try { $launcher.trigger('focus'); } catch (err) { /* no-op */ }
3786 + });
3787 + enableScroll();
3788 + });
3789 +
2958 3790 $(document).on('click', '.close-pre-chat-message', function(e) {
2959 3791 e.stopPropagation(); // Prevent triggering the parent .pre-chat-message click
2960 3792 var botId = getBotIdFromElement(this);
2961 3793 handlePreChatDismissal(botId);
@@ -2975,17 +3807,20 @@
2975 3807 var wordInput = getElementDOM(botId, 'word-upload');
2976 3808 if (wordInput) wordInput.click();
2977 3809 });
2978 3810
2979 - // PDF file input change handler
2980 - addSafeEventListener('pdf-upload', 'change', async function(e) {
2981 - const file = e.target.files[0];
2982 -
3811 + // PDF file input change handler - delegated, bot-aware (was bound to stale un-suffixed id 'pdf-upload')
3812 + $(document).on('change', '.pdf-upload', async function(e) {
3813 + var botId = getBotIdFromElement(this);
3814 + var instance = MxChatInstances.get(botId);
3815 + const file = this.files[0];
3816 + const sessionId = MxChatInstances.ensureSession(botId);
3817 +
2983 3818 if (!file || file.type !== 'application/pdf') {
2984 3819 alert('Please select a valid PDF file.');
2985 3820 return;
2986 3821 }
2987 -
3822 +
2988 3823 if (!sessionId) {
2989 3824 alert('Error: No session ID found');
2990 3825 return;
2991 3826 }
@@ -2993,47 +3828,49 @@
2993 3828 if (!mxchatChat || !mxchatChat.ajax_url || !mxchatChat.nonce) {
2994 3829 alert('Error: Ajax configuration missing');
2995 3830 return;
2996 3831 }
2997 -
3832 +
2998 3833 // Disable buttons and show loading state
2999 - const uploadBtn = document.getElementById('pdf-upload-btn');
3000 - const sendBtn = document.getElementById('send-button');
3834 + const uploadBtn = getElementDOM(botId, 'pdf-upload-btn');
3835 + const sendBtn = getElementDOM(botId, 'send-button');
3836 + if (!uploadBtn) return;
3001 3837 const originalBtnContent = uploadBtn.innerHTML;
3002 -
3838 +
3003 3839 try {
3840 + // Wait for page-cache nonce refresh before reading mxchatChat.nonce. See plan-c5457f.
3841 + await new Promise(function(resolve) { refreshNonceIfNeeded(resolve); });
3004 3842 const formData = new FormData();
3005 3843 formData.append('action', 'mxchat_upload_pdf');
3006 3844 formData.append('pdf_file', file);
3007 3845 formData.append('session_id', sessionId);
3008 3846 formData.append('nonce', mxchatChat.nonce);
3009 -
3847 +
3010 3848 uploadBtn.disabled = true;
3011 - sendBtn.disabled = true;
3849 + if (sendBtn) sendBtn.disabled = true;
3012 3850 uploadBtn.innerHTML = `<svg class="spinner" viewBox="0 0 50 50">
3013 3851 <circle cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
3014 3852 </svg>`;
3015 -
3853 +
3016 3854 const response = await fetch(mxchatChat.ajax_url, {
3017 3855 method: 'POST',
3018 3856 body: formData
3019 3857 });
3020 -
3858 +
3021 3859 const data = await response.json();
3022 -
3860 +
3023 3861 if (data.success) {
3024 3862 // Hide popular questions if they exist
3025 - const popularQuestionsContainer = document.getElementById('mxchat-popular-questions');
3026 - if (hasQuickQuestions()) {
3027 - collapseQuickQuestions();
3863 + if (hasQuickQuestions(botId)) {
3864 + collapseQuickQuestions(botId);
3028 3865 }
3029 -
3866 +
3030 3867 // Show the active PDF name
3031 - showActivePdf(data.data.filename);
3032 -
3033 - appendMessage('bot', data.data.message);
3034 - scrollToBottom();
3035 - activePdfFile = data.data.filename;
3868 + showActivePdf(data.data.filename, botId);
3869 +
3870 + appendMessage('bot', data.data.message, '', [], false, botId);
3871 + scrollToBottom(botId);
3872 + instance.activePdfFile = data.data.filename;
3036 3873 } else {
3037 3874 alert('Failed to upload PDF. Please try again.');
3038 3875 }
3039 3876 } catch (error) {
@@ -3039,66 +3876,76 @@
3039 3876 } catch (error) {
3040 3877 alert('Error uploading file. Please try again.');
3041 3878 } finally {
3042 3879 uploadBtn.disabled = false;
3043 - sendBtn.disabled = false;
3880 + if (sendBtn) sendBtn.disabled = false;
3044 3881 uploadBtn.innerHTML = originalBtnContent;
3045 3882 this.value = ''; // Reset file input
3046 3883 }
3047 3884 });
3048 3885
3049 - // Word file input change handler
3050 - addSafeEventListener('word-upload', 'change', async function(e) {
3051 - const file = e.target.files[0];
3052 -
3886 + // Word file input change handler - delegated, bot-aware (was bound to stale un-suffixed id 'word-upload')
3887 + $(document).on('change', '.word-upload', async function(e) {
3888 + var botId = getBotIdFromElement(this);
3889 + var instance = MxChatInstances.get(botId);
3890 + const file = this.files[0];
3891 + const sessionId = MxChatInstances.ensureSession(botId);
3892 +
3053 3893 if (!file || file.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
3054 3894 alert('Please select a valid Word document (.docx).');
3055 3895 return;
3056 3896 }
3057 -
3897 +
3058 3898 if (!sessionId) {
3059 3899 alert('Error: No session ID found');
3060 3900 return;
3061 3901 }
3062 3902
3903 + if (!mxchatChat || !mxchatChat.ajax_url || !mxchatChat.nonce) {
3904 + alert('Error: Ajax configuration missing');
3905 + return;
3906 + }
3907 +
3063 3908 // Disable buttons and show loading state
3064 - const uploadBtn = document.getElementById('word-upload-btn');
3065 - const sendBtn = document.getElementById('send-button');
3909 + const uploadBtn = getElementDOM(botId, 'word-upload-btn');
3910 + const sendBtn = getElementDOM(botId, 'send-button');
3911 + if (!uploadBtn) return;
3066 3912 const originalBtnContent = uploadBtn.innerHTML;
3067 -
3913 +
3068 3914 try {
3915 + // Wait for page-cache nonce refresh before reading mxchatChat.nonce. See plan-c5457f.
3916 + await new Promise(function(resolve) { refreshNonceIfNeeded(resolve); });
3069 3917 const formData = new FormData();
3070 3918 formData.append('action', 'mxchat_upload_word');
3071 3919 formData.append('word_file', file);
3072 3920 formData.append('session_id', sessionId);
3073 3921 formData.append('nonce', mxchatChat.nonce);
3074 -
3922 +
3075 3923 uploadBtn.disabled = true;
3076 - sendBtn.disabled = true;
3924 + if (sendBtn) sendBtn.disabled = true;
3077 3925 uploadBtn.innerHTML = `<svg class="spinner" viewBox="0 0 50 50">
3078 3926 <circle cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
3079 3927 </svg>`;
3080 -
3928 +
3081 3929 const response = await fetch(mxchatChat.ajax_url, {
3082 3930 method: 'POST',
3083 3931 body: formData
3084 3932 });
3085 -
3933 +
3086 3934 const data = await response.json();
3087 -
3935 +
3088 3936 if (data.success) {
3089 3937 // Hide popular questions if they exist
3090 - const popularQuestionsContainer = document.getElementById('mxchat-popular-questions');
3091 - if (hasQuickQuestions()) {
3092 - collapseQuickQuestions();
3938 + if (hasQuickQuestions(botId)) {
3939 + collapseQuickQuestions(botId);
3093 3940 }
3094 -
3941 +
3095 3942 // Show the active Word document name
3096 - showActiveWord(data.data.filename);
3097 -
3098 - appendMessage('bot', data.data.message);
3099 - scrollToBottom();
3100 - activeWordFile = data.data.filename;
3943 + showActiveWord(data.data.filename, botId);
3944 +
3945 + appendMessage('bot', data.data.message, '', [], false, botId);
3946 + scrollToBottom(botId);
3947 + instance.activeWordFile = data.data.filename;
3101 3948 } else {
3102 3949 alert('Failed to upload Word document. Please try again.');
3103 3950 }
3104 3951 } catch (error) {
@@ -3104,25 +3951,25 @@
3104 3951 } catch (error) {
3105 3952 alert('Error uploading file. Please try again.');
3106 3953 } finally {
3107 3954 uploadBtn.disabled = false;
3108 - sendBtn.disabled = false;
3955 + if (sendBtn) sendBtn.disabled = false;
3109 3956 uploadBtn.innerHTML = originalBtnContent;
3110 3957 this.value = ''; // Reset file input
3111 3958 }
3112 3959 });
3113 3960
3114 - // Remove button click handlers
3115 - document.getElementById('remove-pdf-btn')?.addEventListener('click', function(e) {
3961 + // Remove button click handlers - delegated, bot-aware (were bound to stale un-suffixed ids)
3962 + $(document).on('click', '.remove-pdf-btn', function(e) {
3116 3963 e.preventDefault();
3117 3964 e.stopPropagation();
3118 - removeActivePdf();
3965 + removeActivePdf(getBotIdFromElement(this));
3119 3966 });
3120 -
3121 - document.getElementById('remove-word-btn')?.addEventListener('click', function(e) {
3967 +
3968 + $(document).on('click', '.remove-word-btn', function(e) {
3122 3969 e.preventDefault();
3123 3970 e.stopPropagation();
3124 - removeActiveWord();
3971 + removeActiveWord(getBotIdFromElement(this));
3125 3972 });
3126 3973
3127 3974 // Window resize handlers
3128 3975 $(window).on('resize orientationchange', function() {
@@ -3139,9 +3986,12 @@
3139 3986 $('.chat-toolbar').show();
3140 3987 } else {
3141 3988 $('.chat-toolbar').hide();
3142 3989 }
3143 -
3990 + // Toolbar pass done — server-rendered add-on items can bind (plan 65c9b6).
3991 + MxChatInstances.toolbarReady = true;
3992 + mxchatDispatch('mxchat:toolbar-ready', { enabled: mxchatChat.chat_toolbar_toggle === 'on' });
3993 +
3144 3994 // Apply toolbar icon colors
3145 3995 const toolbarElements = [
3146 3996 '#mxchat-chatbot .toolbar-btn svg',
3147 3997 '#mxchat-chatbot .active-pdf-name',
@@ -3266,10 +4116,13 @@
3266 4116 function replaceVisitorNamePlaceholder(botId, visitorName) {
3267 4117 var chatBox = getElementDOM(botId, 'chat-box');
3268 4118 if (!chatBox) return;
3269 4119
3270 - // Find the first bot message (intro message)
3271 - var introMessage = chatBox.querySelector('.bot-message');
4120 + // Find the greeting by its marker, not by position (plan a1a79b) —
4121 + // after a persistence restore the first .bot-message is a restored
4122 + // reply, and {visitor_name} was being substituted into that instead.
4123 + // Positional fallback for HTML cached before this release only.
4124 + var introMessage = chatBox.querySelector('.mxchat-intro-message') || chatBox.querySelector('.bot-message');
3272 4125 if (!introMessage) return;
3273 4126
3274 4127 var messageContent = introMessage.querySelector('div[dir="auto"]');
3275 4128 if (!messageContent) return;
@@ -3413,14 +4266,25 @@
3413 4266 return response.json();
3414 4267 })
3415 4268 .then((data) => {
3416 4269 if (data.success) {
3417 - if (data.data.logged_in || data.data.email) {
4270 + // A success response means the server has already decided the
4271 + // required info is on file. With email optional (c0cfaf) that
4272 + // info can be a name and no address, so keying on data.email
4273 + // alone re-prompted a name-only visitor on every page load.
4274 + if (data.data.logged_in || data.data.email || data.data.name) {
3418 4275 showChatContainerForBot(botId);
3419 4276 } else {
3420 4277 showEmailFormForBot(botId);
3421 4278 }
3422 4279 } else {
4280 + // Pre-fill for a signed-in visitor being shown the form
4281 + // (c0cfaf). It arrives on this nocache'd response rather than
4282 + // in the page HTML, which is cacheable. Never overwrite what
4283 + // the visitor has already typed.
4284 + if (data.data) {
4285 + prefillEmailForm(botId, data.data.prefill_name, data.data.prefill_email);
4286 + }
3423 4287 showEmailFormForBot(botId);
3424 4288 }
3425 4289 })
3426 4290 .catch((error) => {
@@ -3427,8 +4291,19 @@
3427 4291 showEmailFormForBot(botId);
3428 4292 });
3429 4293 }
3430 4294
4295 + function prefillEmailForm(botId, name, email) {
4296 + var nameInput = getElementDOM(botId, 'user-name');
4297 + var emailInput = getElementDOM(botId, 'user-email');
4298 + if (nameInput && name && !nameInput.value) {
4299 + nameInput.value = name;
4300 + }
4301 + if (emailInput && email && !emailInput.value) {
4302 + emailInput.value = email;
4303 + }
4304 + }
4305 +
3431 4306 // Event delegation for email form submission
3432 4307 $(document).on('submit', '.email-collection-form', function(e) {
3433 4308 e.preventDefault();
3434 4309 e.stopPropagation();
@@ -3441,23 +4316,34 @@
3441 4316 }
3442 4317
3443 4318 var emailInput = getElementDOM(botId, 'user-email');
3444 4319 var nameInput = getElementDOM(botId, 'user-name');
4320 + var consentInput = getElementDOM(botId, 'user-consent');
3445 4321 var userEmail = emailInput ? emailInput.value.trim() : '';
3446 4322 var userName = nameInput ? nameInput.value.trim() : '';
3447 4323 var sessionId = MxChatInstances.ensureSession(botId);
3448 4324
3449 - // Validate email
3450 - if (!userEmail) {
4325 + // Validate email. The address is optional when the owner turned
4326 + // "Require Email Address" off (c0cfaf) — but anything actually typed
4327 + // still has to be a valid address. The server enforces both rules
4328 + // independently.
4329 + var emailRequired = (mxchatChat.lead_capture_require_email || 'on') !== 'off';
4330 +
4331 + if (emailRequired && !userEmail) {
3451 4332 showEmailError(botId, 'Please enter your email address.');
3452 4333 return false;
3453 4334 }
3454 4335
3455 - if (!isValidEmailAddress(userEmail)) {
4336 + if (userEmail && !isValidEmailAddress(userEmail)) {
3456 4337 showEmailError(botId, 'Please enter a valid email address.');
3457 4338 return false;
3458 4339 }
3459 4340
4341 + if (!emailRequired && !userEmail && !userName) {
4342 + showEmailError(botId, 'Please enter your name or email address.');
4343 + return false;
4344 + }
4345 +
3460 4346 // Validate name if field exists and has content
3461 4347 if (nameInput && userName && !isValidNameInput(userName)) {
3462 4348 showEmailError(botId, 'Please enter a valid name (2-100 characters).');
3463 4349 return false;
@@ -3462,8 +4348,15 @@
3462 4348 showEmailError(botId, 'Please enter a valid name (2-100 characters).');
3463 4349 return false;
3464 4350 }
3465 4351
4352 + // Consent checkbox (b062c4): backstop behind the native required
4353 + // attribute; the server enforces this independently either way.
4354 + if (consentInput && consentInput.required && !consentInput.checked) {
4355 + showEmailError(botId, 'Please tick the consent box to continue.');
4356 + return false;
4357 + }
4358 +
3466 4359 clearEmailError(botId);
3467 4360 setEmailSubmissionState(botId, true);
3468 4361
3469 4362 // Prepare form data
@@ -3477,8 +4370,14 @@
3477 4370 if (userName) {
3478 4371 formData.append('name', userName);
3479 4372 }
3480 4373
4374 + // Ticked/unticked both travel when the checkbox is rendered, so an
4375 + // optional-consent "no" is recorded as a decision, not an absence.
4376 + if (consentInput) {
4377 + formData.append('consent', consentInput.checked ? '1' : '0');
4378 + }
4379 +
3481 4380 fetch(mxchatChat.ajax_url, {
3482 4381 method: 'POST',
3483 4382 headers: {
3484 4383 'Content-Type': 'application/x-www-form-urlencoded',
@@ -3600,8 +4499,9 @@
3600 4499 $chatbot.removeClass('hidden').addClass('visible');
3601 4500 getElement(botId, 'floating-chatbot-button').addClass('hidden');
3602 4501 handlePreChatDismissal(botId);
3603 4502 disableScroll(); // Disable scroll when chatbot opens
4503 + mxchatFireOpened(botId);
3604 4504
3605 4505 // Load chat history for returning visitors (persistence)
3606 4506 var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
3607 4507 if (chatPersistenceEnabled) {
@@ -3708,14 +4608,8 @@
3708 4608 if (messageDiv.length > 0) {
3709 4609 const originalHref = $link.attr('href');
3710 4610
3711 4611 if (originalHref && (originalHref.startsWith('http://') || originalHref.startsWith('https://'))) {
3712 - e.preventDefault();
3713 - e.stopPropagation();
3714 -
3715 - // Mark as tracked
3716 - $link.attr('data-tracked', 'true');
3717 -
3718 4612 // Get bot ID from the chat box context
3719 4613 var botId = getBotIdFromElement(this);
3720 4614
3721 4615 // Get message context from the message div
@@ -3720,28 +4614,12 @@
3720 4614
3721 4615 // Get message context from the message div
3722 4616 const messageText = messageDiv.text().substring(0, 200);
3723 4617
3724 - $.ajax({
3725 - url: mxchatChat.ajax_url,
3726 - type: 'POST',
3727 - data: {
3728 - action: 'mxchat_track_url_click',
3729 - session_id: getChatSession(botId),
3730 - url: originalHref,
3731 - message_context: messageText,
3732 - nonce: mxchatChat.nonce
3733 - },
3734 - complete: function() {
3735 - if ($link.attr('target') === '_blank' || linkTarget === '_blank') {
3736 - window.open(originalHref, '_blank');
3737 - } else {
3738 - window.location.href = originalHref;
3739 - }
3740 - }
3741 - });
3742 -
3743 - return false;
4618 + // Same path as attachLinkTracking(): set the target, record the
4619 + // click, and let the browser follow the anchor.
4620 + prepareTrackedLink($link);
4621 + trackLinkClick(originalHref, messageText, botId);
3744 4622 }
3745 4623 }
3746 4624 });
3747 4625
@@ -3767,8 +4645,15 @@
3767 4645 // Initialize chat visibility for all instances
3768 4646 $('.mxchat-chatbot-wrapper').each(function() {
3769 4647 var botId = $(this).data('bot-id') || 'default';
3770 4648 initializeChatVisibility(botId);
4649 + // An embedded widget is on screen from the first paint; a floating one
4650 + // reports mxchat:opened when its window is shown (plan 65c9b6).
4651 + if (isEmbeddedBot(botId)) {
4652 + mxchatFireOpened(botId);
4653 + } else {
4654 + mxchatWatchForOpen(botId);
4655 + }
3771 4656 });
3772 4657
3773 4658 // Make functions globally available for add-ons
3774 4659 window.hasQuickQuestions = hasQuickQuestions;
@@ -3816,6 +4701,312 @@
3816 4701 }, 2000);
3817 4702 });
3818 4703 }
3819 4704 }
4705 +});
4706 +
4707 +// ============================================================================
4708 +// SATISFACTION RATING (v3.2.6)
4709 +// ============================================================================
4710 +// Per-session 👍/👎 prompt that appears in the chat-box after 60s of user
4711 +// inactivity following a bot reply. One prompt per session, deduped via
4712 +// localStorage. Runs ONLY when the satisfaction_rating_enabled option is on —
4713 +// the option (default off) is authoritative.
4714 +jQuery(function($) {
4715 + if (typeof mxchatChat === 'undefined') return;
4716 + // wp_localize_script stringifies scalars: a PHP boolean false arrives as
4717 + // '' and true as '1', so this must be an explicit-enable allowlist — the
4718 + // old "disabled when exactly false/'off'" check let '' through and the
4719 + // bubble rendered on sites with the option off/unset (plan-4bba64). PHP
4720 + // now emits 'on'/'off' strings; true/'1'/1 keep cached pre-fix HTML
4721 + // (boolean-true localizations) working.
4722 + // NOTE (plan-32db95): this gate reads the INLINE value at DOM ready and is
4723 + // deliberately NOT re-evaluated after the widget's dynamic-settings refresh
4724 + // merges fresh values over mxchatChat (that merge fires on first widget
4725 + // open, after this module has already decided). Re-evaluating would mean
4726 + // restructuring the whole module to late-bind its listeners — not worth it
4727 + // for a prompt that is at worst stale for one page load on a cached page.
4728 + var sre = mxchatChat.satisfaction_rating_enabled;
4729 + if (sre !== 'on' && sre !== true && sre !== '1' && sre !== 1) return;
4730 +
4731 + // wp_localize_script stringifies ints, so accept both number and numeric string.
4732 + var idleRaw = mxchatChat.satisfaction_rating_idle_seconds;
4733 + var idleSeconds = (typeof idleRaw === 'number') ? idleRaw : parseInt(idleRaw, 10);
4734 + if (!isFinite(idleSeconds)) idleSeconds = 60;
4735 + if (idleSeconds < 5) idleSeconds = 5;
4736 + if (idleSeconds > 600) idleSeconds = 600;
4737 + var IDLE_MS = idleSeconds * 1000;
4738 + var MIN_BOT_REPLIES = 2;
4739 + var ratingState = {};
4740 +
4741 + function getState(botId) {
4742 + if (!ratingState[botId]) {
4743 + ratingState[botId] = { idleTimer: null, botReplies: 0, promptShown: false, dismissed: false };
4744 + }
4745 + return ratingState[botId];
4746 + }
4747 +
4748 + function getSessionId(botId) {
4749 + if (typeof MxChatInstances !== 'undefined' && MxChatInstances.getChatSession) {
4750 + return MxChatInstances.getChatSession(botId);
4751 + }
4752 + return null;
4753 + }
4754 +
4755 + function isAlreadyRated(sessionId) {
4756 + if (!sessionId) return false;
4757 + try { return localStorage.getItem('mxchat_rated:' + sessionId) === '1'; } catch (e) { return false; }
4758 + }
4759 +
4760 + function markRated(sessionId) {
4761 + if (!sessionId) return;
4762 + try { localStorage.setItem('mxchat_rated:' + sessionId, '1'); } catch (e) {}
4763 + }
4764 +
4765 + function esc(s) {
4766 + return String(s == null ? '' : s)
4767 + .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
4768 + .replace(/"/g, '&quot;').replace(/'/g, '&#039;');
4769 + }
4770 +
4771 + // Mirror shouldSkipInlineColors so rating bubbles defer to AI-theme CSS.
4772 + function ratingSkipInlineColors(botId) {
4773 + if (mxchatChat.skip_inline_colors) return true;
4774 + var botAssignments = mxchatChat.bot_theme_assignments || {};
4775 + return botAssignments.hasOwnProperty(botId);
4776 + }
4777 +
4778 + function botBubbleStyleAttr(botId) {
4779 + if (ratingSkipInlineColors(botId)) return '';
4780 + var bg = mxchatChat.bot_message_bg_color;
4781 + var fg = mxchatChat.bot_message_font_color;
4782 + if (!bg && !fg) return '';
4783 + return ' style="background-color: ' + esc(bg || '') + '; color: ' + esc(fg || '') + ';"';
4784 + }
4785 +
4786 + // Reads the rating bubble's actual computed fg+bg (whatever paints it —
4787 + // the inline color pickers OR the mxchat-theme AI customizer's injected CSS)
4788 + // and paints the filled "Send" pill so it fills with the bot font color and
4789 + // labels in the bubble bg. Mirrors mxchatSyncMenuColors(~:1512) for the read.
4790 + // We paint the submit button DIRECTLY (inline longhand) rather than relying
4791 + // on the CSS rule's var()s: Chromium resolves an INHERITED custom property
4792 + // unreliably inside a descendant's `background`, so a bubble-level var would
4793 + // silently fall back to the literal (white-block bug all over again). Inline
4794 + // longhand always wins. Same transparent-guard as the menu so we never paint
4795 + // a see-through value — in that case the CSS literal fallbacks keep it legible.
4796 + function syncRatingBubbleColors(botId) {
4797 + var $chatBox = getChatBoxByBotId(botId);
4798 + if (!$chatBox || !$chatBox.length) return;
4799 + var bubbleEl = $chatBox.find('.mxchat-rating-bot-bubble').last()[0];
4800 + if (!bubbleEl) return;
4801 + var cs = window.getComputedStyle(bubbleEl);
4802 + var fg = cs.color;
4803 + var bg = cs.backgroundColor;
4804 + var hasFg = fg && fg !== 'rgba(0, 0, 0, 0)' && fg !== 'transparent';
4805 + var hasBg = bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent';
4806 + // Expose on the bubble too, for any inheriting styles / future use.
4807 + if (hasFg) bubbleEl.style.setProperty('--mxchat-bot-fg', fg);
4808 + if (hasBg) bubbleEl.style.setProperty('--mxchat-bot-bg', bg);
4809 + // Paint the Send pill directly — the part that actually fixes the bug.
4810 + var submitEl = bubbleEl.querySelector('.mxchat-rating-submit');
4811 + if (submitEl) {
4812 + if (hasFg) submitEl.style.backgroundColor = fg; // fill = bot font color
4813 + if (hasBg) submitEl.style.color = bg; // label = bubble background
4814 + }
4815 + }
4816 +
4817 + function copy(key) {
4818 + var c = mxchatChat.satisfaction_rating_copy || {};
4819 + var d = {
4820 + question: 'Was this helpful?',
4821 + helpful: 'Helpful',
4822 + not_helpful: 'Not helpful',
4823 + dismiss: 'Dismiss',
4824 + thanks: 'Thanks! Anything we should improve? (optional)',
4825 + placeholder: 'Tell us what could be better…',
4826 + send: 'Send',
4827 + skip: 'Skip',
4828 + saved: 'Thanks for the feedback.'
4829 + };
4830 + return c[key] || d[key];
4831 + }
4832 +
4833 + function thumbUpSvg() {
4834 + 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>';
4835 + }
4836 + function thumbDownSvg() {
4837 + 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>';
4838 + }
4839 +
4840 + function buildPromptHtml(botId) {
4841 + var styleAttr = botBubbleStyleAttr(botId);
4842 + return ''
4843 + + '<div class="bot-message mxchat-rating-bot-bubble"' + styleAttr + '>'
4844 + + '<div class="mxchat-rating-prompt" data-bot-id="' + esc(botId) + '" role="group" aria-label="' + esc(copy('question')) + '">'
4845 + + '<div class="mxchat-rating-question">' + esc(copy('question')) + '</div>'
4846 + + '<div class="mxchat-rating-actions">'
4847 + + '<span class="mxchat-rating-buttons">'
4848 + + '<button type="button" class="mxchat-rating-btn" data-rating="1" aria-label="' + esc(copy('helpful')) + '">' + thumbUpSvg() + '</button>'
4849 + + '<button type="button" class="mxchat-rating-btn" data-rating="-1" aria-label="' + esc(copy('not_helpful')) + '">' + thumbDownSvg() + '</button>'
4850 + + '</span>'
4851 + + '<button type="button" class="mxchat-rating-dismiss" aria-label="' + esc(copy('dismiss')) + '">×</button>'
4852 + + '</div>'
4853 + + '</div>'
4854 + + '</div>';
4855 + }
4856 +
4857 + function buildFeedbackHtml(botId, rating) {
4858 + var styleAttr = botBubbleStyleAttr(botId);
4859 + return ''
4860 + + '<div class="bot-message mxchat-rating-bot-bubble"' + styleAttr + '>'
4861 + + '<div class="mxchat-rating-feedback" data-bot-id="' + esc(botId) + '" data-rating="' + esc(String(rating)) + '">'
4862 + + '<div class="mxchat-rating-feedback-label">' + esc(copy('thanks')) + '</div>'
4863 + + '<textarea class="mxchat-rating-feedback-input" maxlength="500" placeholder="' + esc(copy('placeholder')) + '" rows="2"></textarea>'
4864 + + '<div class="mxchat-rating-feedback-actions">'
4865 + + '<button type="button" class="mxchat-rating-skip">' + esc(copy('skip')) + '</button>'
4866 + + '<button type="button" class="mxchat-rating-submit">' + esc(copy('send')) + '</button>'
4867 + + '</div>'
4868 + + '</div>'
4869 + + '</div>';
4870 + }
4871 +
4872 + function buildSavedHtml(botId) {
4873 + var styleAttr = botBubbleStyleAttr(botId);
4874 + return ''
4875 + + '<div class="bot-message mxchat-rating-bot-bubble"' + styleAttr + '>'
4876 + + '<div class="mxchat-rating-saved">' + esc(copy('saved')) + '</div>'
4877 + + '</div>';
4878 + }
4879 +
4880 + function getChatBoxByBotId(botId) {
4881 + var $byId = $('#chat-box-' + botId);
4882 + if ($byId.length) return $byId.first();
4883 + return $('.chat-box').first();
4884 + }
4885 +
4886 + function scrollChatBoxToBottom($chatBox) {
4887 + if (!$chatBox || !$chatBox.length) return;
4888 + $chatBox.scrollTop($chatBox[0].scrollHeight);
4889 + }
4890 +
4891 + function showPrompt(botId) {
4892 + var s = getState(botId);
4893 + if (s.promptShown || s.dismissed) return;
4894 + var sessionId = getSessionId(botId);
4895 + if (!sessionId) return;
4896 + if (isAlreadyRated(sessionId)) { s.promptShown = true; return; }
4897 + var $chatBox = getChatBoxByBotId(botId);
4898 + if (!$chatBox.length) return;
4899 + if ($chatBox.find('.mxchat-rating-prompt').length) { s.promptShown = true; return; }
4900 + $chatBox.append(buildPromptHtml(botId));
4901 + syncRatingBubbleColors(botId);
4902 + s.promptShown = true;
4903 + scrollChatBoxToBottom($chatBox);
4904 + }
4905 +
4906 + function submitRating(botId, rating, feedback) {
4907 + var sessionId = getSessionId(botId);
4908 + if (!sessionId) return;
4909 + $.post(mxchatChat.ajax_url, {
4910 + action: 'mxchat_save_rating',
4911 + session_id: sessionId,
4912 + bot_id: botId,
4913 + rating: rating,
4914 + feedback: feedback || ''
4915 + });
4916 + markRated(sessionId);
4917 + }
4918 +
4919 + function onBotReply(botId) {
4920 + var s = getState(botId);
4921 + s.botReplies += 1;
4922 + if (s.promptShown || s.dismissed) return;
4923 + var sessionId = getSessionId(botId);
4924 + if (sessionId && isAlreadyRated(sessionId)) { s.promptShown = true; return; }
4925 + if (s.botReplies < MIN_BOT_REPLIES) return;
4926 + if (s.idleTimer) clearTimeout(s.idleTimer);
4927 + s.idleTimer = setTimeout(function() { showPrompt(botId); }, IDLE_MS);
4928 + }
4929 +
4930 + function onUserMessage(botId) {
4931 + var s = getState(botId);
4932 + if (s.idleTimer) { clearTimeout(s.idleTimer); s.idleTimer = null; }
4933 + }
4934 +
4935 + function botIdFromChatBox(el) {
4936 + var id = el && el.id ? el.id : '';
4937 + return id.indexOf('chat-box-') === 0 ? id.substring('chat-box-'.length) : 'default';
4938 + }
4939 +
4940 + function setupObserver(chatBox) {
4941 + var botId = botIdFromChatBox(chatBox);
4942 + try {
4943 + var observer = new MutationObserver(function(mutations) {
4944 + mutations.forEach(function(m) {
4945 + for (var i = 0; i < m.addedNodes.length; i++) {
4946 + var node = m.addedNodes[i];
4947 + if (!node || node.nodeType !== 1) continue;
4948 + var $n = $(node);
4949 + if ($n.hasClass('mxchat-rating-bot-bubble') || $n.hasClass('mxchat-rating-prompt') || $n.hasClass('mxchat-rating-feedback') || $n.hasClass('mxchat-rating-saved')) continue;
4950 + 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)
4951 + else if ($n.hasClass('user-message')) onUserMessage(botId);
4952 + }
4953 + });
4954 + });
4955 + observer.observe(chatBox, { childList: true });
4956 + } catch (e) { /* noop */ }
4957 + }
4958 +
4959 + $('.chat-box').each(function() { setupObserver(this); });
4960 +
4961 + $(document).on('click', '.mxchat-rating-btn', function(e) {
4962 + e.preventDefault();
4963 + var $btn = $(this);
4964 + var $prompt = $btn.closest('.mxchat-rating-prompt');
4965 + var $wrap = $btn.closest('.mxchat-rating-bot-bubble');
4966 + var botId = $prompt.data('bot-id') || 'default';
4967 + var rating = parseInt($btn.attr('data-rating'), 10);
4968 + if (rating !== 1 && rating !== -1) return;
4969 + submitRating(botId, rating, '');
4970 + ($wrap.length ? $wrap : $prompt).replaceWith(buildFeedbackHtml(botId, rating));
4971 + syncRatingBubbleColors(botId);
4972 + scrollChatBoxToBottom(getChatBoxByBotId(botId));
4973 + });
4974 +
4975 + $(document).on('click', '.mxchat-rating-dismiss', function(e) {
4976 + e.preventDefault();
4977 + var $prompt = $(this).closest('.mxchat-rating-prompt');
4978 + var $wrap = $(this).closest('.mxchat-rating-bot-bubble');
4979 + var botId = $prompt.data('bot-id') || 'default';
4980 + var s = getState(botId);
4981 + s.dismissed = true;
4982 + markRated(getSessionId(botId));
4983 + ($wrap.length ? $wrap : $prompt).remove();
4984 + });
4985 +
4986 + function closeFeedback($fb) {
4987 + var botId = $fb.data('bot-id') || 'default';
4988 + var $wrap = $fb.closest('.mxchat-rating-bot-bubble');
4989 + ($wrap.length ? $wrap : $fb).replaceWith(buildSavedHtml(botId));
4990 + syncRatingBubbleColors(botId);
4991 + scrollChatBoxToBottom(getChatBoxByBotId(botId));
4992 + }
4993 +
4994 + $(document).on('click', '.mxchat-rating-skip', function(e) {
4995 + e.preventDefault();
4996 + closeFeedback($(this).closest('.mxchat-rating-feedback'));
4997 + });
4998 +
4999 + $(document).on('click', '.mxchat-rating-submit', function(e) {
5000 + e.preventDefault();
5001 + var $fb = $(this).closest('.mxchat-rating-feedback');
5002 + var botId = $fb.data('bot-id') || 'default';
5003 + var rating = parseInt($fb.attr('data-rating'), 10);
5004 + if (rating !== 1 && rating !== -1) { closeFeedback($fb); return; }
5005 + var text = String($fb.find('.mxchat-rating-feedback-input').val() || '').trim();
5006 + if (text !== '') {
5007 + submitRating(botId, rating, text);
5008 + }
5009 + closeFeedback($fb);
5010 + });
3820 5011 });
3821 5012