← All changes | js/chat-script.js +6 -303 3.2.5 → 3.2.0 View file →

		@@ -60,10 +60,10 @@
60	60	return Object.keys(this.instances);
61	61	},
62	62
63	63	// Session management per bot
64		- // Returns existing session ID from cookie or localStorage (with in-memory fallback),
65		- // or null if none exists. Does NOT create a new session — use ensureSession() for that.
	64	+ // Returns existing session ID from cookie or localStorage, or null if none exists.
	65	+ // Does NOT create a new session — use ensureSession() for that.
66	66	getChatSession: function(botId) {
67	67	var cookieName = 'mxchat_session_id_' + botId;
68	68	var storageKey = 'mxchat_session_id_' + botId;
69	69	var sessionId = getCookie(cookieName);
		@@ -72,21 +72,8 @@
72	72	if (!sessionId) {
73	73	try { sessionId = localStorage.getItem(storageKey); } catch (e) {}
74	74	}
75	75
76		- // Fallback to in-memory instance when cookie AND localStorage are both blocked
77		- // (Safari ITP, strict tracking prevention, cross-origin iframes with partitioned
78		- // storage). Without this, ensureSession() can generate and store an ID that
79		- // getChatSession() then can't read back, causing null session_ids on send.
80		- if (!sessionId && this.instances[botId] && this.instances[botId].sessionId) {
81		- sessionId = this.instances[botId].sessionId;
82		- }
83		-
84		- // Guard against stored sentinel values that indicate earlier broken writes.
85		- if (sessionId === 'null' || sessionId === 'undefined') {
86		- sessionId = null;
87		- }
88		-
89	76	// Re-sync cookie from localStorage if cookie was lost
90	77	if (sessionId && !getCookie(cookieName)) {
91	78	document.cookie = cookieName + "=" + sessionId + "; path=/; max-age=86400; SameSite=Lax";
92	79	}
		@@ -612,23 +599,13 @@
612	599
613	600	// Get instance for session start timestamp (used when persistence is OFF)
614	601	var instance = MxChatInstances.get(botId);
615	602
616		- // Guarantee a non-null session_id before the AJAX leaves. ensureSession() is idempotent
617		- // and returns the guaranteed-present session id from the in-memory instance even when
618		- // cookie/localStorage writes are silently blocked by the browser.
619		- var sessionId = MxChatInstances.ensureSession(botId);
620		- if (!sessionId || sessionId === 'null' || sessionId === 'undefined') {
621		- // Last-resort generation to ensure we never POST a null marker.
622		- sessionId = generateSessionId();
623		- MxChatInstances.setChatSession(botId, sessionId);
624		- }
625		-
626	603	// Prepare AJAX data
627	604	const ajaxData = {
628	605	action: 'mxchat_handle_chat_request',
629	606	message: message,
630		- session_id: sessionId,
	607	+ session_id: getChatSession(botId),
631	608	nonce: mxchatChat.nonce,
632	609	current_page_url: window.location.href,
633	610	current_page_title: document.title,
634	611	bot_id: botId,
		@@ -861,22 +838,12 @@
861	838
862	839	// Get instance for session start timestamp (used when persistence is OFF)
863	840	var instance = MxChatInstances.get(botId);
864	841
865		- // Guarantee a non-null session_id before the fetch. FormData.append() stringifies any
866		- // non-string value via String(), so passing `null` would POST the literal string "null"
867		- // and land in the transcripts table as a ghost session. ensureSession() always returns
868		- // a real string even when cookies/localStorage are blocked.
869		- var streamSessionId = MxChatInstances.ensureSession(botId);
870		- if (!streamSessionId || streamSessionId === 'null' || streamSessionId === 'undefined') {
871		- streamSessionId = generateSessionId();
872		- MxChatInstances.setChatSession(botId, streamSessionId);
873		- }
874		-
875	842	const formData = new FormData();
876	843	formData.append('action', 'mxchat_stream_chat');
877	844	formData.append('message', message);
878		- formData.append('session_id', streamSessionId);
	845	+ formData.append('session_id', getChatSession(botId));
879	846	formData.append('nonce', mxchatChat.nonce);
880	847	formData.append('current_page_url', window.location.href);
881	848	formData.append('current_page_title', document.title);
882	849	formData.append('bot_id', botId);
		@@ -976,16 +943,8 @@
976	943
977	944	// Re-enable chat input when stream ends with content
978	945	enableChatInput(botId);
979	946
980		- // Scroll the user's last message to the top now that the
981		- // bot's full reply has rendered (gives max reading room).
982		- var $chatBoxDone = getElement(botId, 'chat-box');
983		- var $lastUserMsgDone = $chatBoxDone.find('.user-message').last();
984		- if ($lastUserMsgDone.length) {
985		- scrollElementToTop($lastUserMsgDone, botId);
986		- }
987		-
988	947	if (callback) {
989	948	callback(accumulatedContent);
990	949	}
991	950	return;
		@@ -1008,16 +967,8 @@
1008	967
1009	968	// Re-enable chat input after streaming completes
1010	969	enableChatInput(botId);
1011	970
1012		- // Scroll the user's last message to the top now
1013		- // that the bot's full reply has rendered.
1014		- var $chatBoxStreamDone = getElement(botId, 'chat-box');
1015		- var $lastUserMsgStreamDone = $chatBoxStreamDone.find('.user-message').last();
1016		- if ($lastUserMsgStreamDone.length) {
1017		- scrollElementToTop($lastUserMsgStreamDone, botId);
1018		- }
1019		-
1020	971	if (callback) {
1021	972	callback(accumulatedContent);
1022	973	}
1023	974	return;
		@@ -1327,247 +1278,8 @@
1327	1278	}
1328	1279	});
1329	1280
1330	1281
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);
1343		- }
1344		- if (typeof mxchatInitHeaderMenu === 'function') {
1345		- mxchatInitHeaderMenu(botId);
1346		- }
1347		-}
1348		-
1349		-// Builds the list of overflow-menu items for a given bot.
1350		-// Adding a future item is one push to this array — do NOT hardcode "only download."
1351		-function mxchatGetHeaderMenuItems(botId) {
1352		- var items = [];
1353		- var settings = (typeof mxchatChat !== 'undefined') ? mxchatChat : {};
1354		-
1355		- // The `print_button_*` keys still gate this item for back-compat with
1356		- // existing user options. The action is now a transcript download, not print.
1357		- if (settings.print_button_enabled === 'on') {
1358		- items.push({
1359		- id: 'download-transcript',
1360		- label: settings.print_button_label || 'Download Transcript',
1361		- icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>',
1362		- action: function() {
1363		- mxchatDownloadTranscript(botId);
1364		- }
1365		- });
1366		- }
1367		-
1368		- return items;
1369		-}
1370		-
1371		-// Builds a clean markdown transcript of the current conversation and triggers
1372		-// a file download. Used by the "Download Transcript" menu item.
1373		-function mxchatDownloadTranscript(botId) {
1374		- var $chatBox = getElement(botId, 'chat-box');
1375		- if (!$chatBox || !$chatBox.length) return;
1376		-
1377		- var settings = (typeof mxchatChat !== 'undefined') ? mxchatChat : {};
1378		- var headerTitle = settings.print_header_title || 'Chat transcript';
1379		- var now = new Date();
1380		- var stamp = now.toLocaleString();
1381		-
1382		- var lines = [];
1383		- lines.push('# ' + headerTitle);
1384		- lines.push('');
1385		- lines.push('Exported: ' + stamp);
1386		- lines.push('');
1387		- lines.push('---');
1388		- lines.push('');
1389		-
1390		- $chatBox.find('.user-message, .bot-message, .agent-message').each(function() {
1391		- var $msg = $(this);
1392		- // Skip thinking placeholders and any in-flight temporary messages.
1393		- if ($msg.find('.thinking-dots').length) return;
1394		- if ($msg.hasClass('temporary-message')) return;
1395		-
1396		- var sender;
1397		- if ($msg.hasClass('user-message')) sender = 'User';
1398		- else if ($msg.hasClass('agent-message')) sender = 'Live Agent';
1399		- else sender = 'AI Agent';
1400		-
1401		- // Strip interactive UI from the cloned message so we get the conversation text.
1402		- var $clone = $msg.clone();
1403		- $clone.find('.copy-button, .message-toolbar, .mxchat-copy, button, script, style').remove();
1404		- var text = $clone.text().replace(/ /g, ' ').replace(/[ \t]+\n/g, '\n').replace(/\n{3,}/g, '\n\n').trim();
1405		- if (!text) return;
1406		-
1407		- lines.push('**' + sender + '**');
1408		- lines.push('');
1409		- lines.push(text);
1410		- lines.push('');
1411		- });
1412		-
1413		- var content = lines.join('\n');
1414		- var iso = now.toISOString().replace(/[:.]/g, '-').slice(0, 19);
1415		- var fname = 'mxchat-transcript-' + iso + '.md';
1416		- var blob = new Blob([content], { type: 'text/markdown;charset=utf-8' });
1417		- var url = URL.createObjectURL(blob);
1418		- var a = document.createElement('a');
1419		- a.href = url;
1420		- a.download = fname;
1421		- a.style.display = 'none';
1422		- document.body.appendChild(a);
1423		- a.click();
1424		- setTimeout(function() {
1425		- if (a.parentNode) a.parentNode.removeChild(a);
1426		- URL.revokeObjectURL(url);
1427		- }, 100);
1428		-}
1429		-
1430		-// Reads the bot bubble's actual computed bg+fg and writes them as CSS vars
1431		-// on the menu wrap, so the dropdown matches whatever paints the bubble —
1432		-// saved options, AI theme CSS, or the mxchat-theme add-on.
1433		-function mxchatSyncMenuColors(botId, $wrap) {
1434		- if (!$wrap || !$wrap.length) return;
1435		- var $bot = $wrap.closest('.mxchat-chatbot-wrapper').find('.bot-message').not('.temporary-message').first();
1436		- if (!$bot.length) return;
1437		- var cs = window.getComputedStyle($bot[0]);
1438		- if (cs.backgroundColor && cs.backgroundColor !== 'rgba(0, 0, 0, 0)' && cs.backgroundColor !== 'transparent') {
1439		- $wrap[0].style.setProperty('--mxchat-menu-bg', cs.backgroundColor);
1440		- }
1441		- // Bot text color usually lives on a child div, not .bot-message itself.
1442		- var $textChild = $bot.find('[style*="color"]').first();
1443		- var fg = ($textChild.length ? window.getComputedStyle($textChild[0]).color : cs.color);
1444		- if (fg) $wrap[0].style.setProperty('--mxchat-menu-fg', fg);
1445		-}
1446		-
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		-
1453		- var $trigger = $wrap.find('.mxchat-menu-trigger');
1454		- var $menu = $wrap.find('.mxchat-header-menu');
1455		- var items = mxchatGetHeaderMenuItems(botId);
1456		-
1457		- // Initial color sync — covers normal page load.
1458		- mxchatSyncMenuColors(botId, $wrap);
1459		-
1460		- if (!items.length) {
1461		- $trigger.hide();
1462		- $menu.hide();
1463		- $wrap.data('mxchatMenuReady', true);
1464		- return;
1465		- }
1466		-
1467		- // Build the menu items.
1468		- $menu.empty();
1469		- items.forEach(function(item, idx) {
1470		- var $btn = $('<button>', {
1471		- type: 'button',
1472		- 'class': 'mxchat-menu-item',
1473		- 'role': 'menuitem',
1474		- 'tabindex': '-1',
1475		- 'data-menu-id': item.id,
1476		- html: '<span class="mxchat-menu-item-icon">' + item.icon + '</span>' +
1477		- '<span class="mxchat-menu-item-label"></span>'
1478		- });
1479		- $btn.find('.mxchat-menu-item-label').text(item.label);
1480		- $btn.on('click', function(e) {
1481		- e.preventDefault();
1482		- e.stopPropagation();
1483		- closeMenu();
1484		- try { item.action(); } catch (err) { /* no-op */ }
1485		- });
1486		- $menu.append($btn);
1487		- });
1488		-
1489		- function openMenu() {
1490		- // Re-sync each open in case the active theme changed since init.
1491		- mxchatSyncMenuColors(botId, $wrap);
1492		- $menu.prop('hidden', false).attr('aria-hidden', 'false').addClass('is-open');
1493		- $trigger.attr('aria-expanded', 'true');
1494		- // Focus the first item for keyboard users
1495		- setTimeout(function() {
1496		- $menu.find('.mxchat-menu-item').first().attr('tabindex', '0').trigger('focus');
1497		- }, 0);
1498		- }
1499		- function closeMenu(returnFocus) {
1500		- $menu.prop('hidden', true).attr('aria-hidden', 'true').removeClass('is-open');
1501		- $trigger.attr('aria-expanded', 'false');
1502		- $menu.find('.mxchat-menu-item').attr('tabindex', '-1');
1503		- if (returnFocus) $trigger.trigger('focus');
1504		- }
1505		-
1506		- // Toggle on trigger click — stop propagation so the .chatbot-top-bar
1507		- // click-to-collapse handler does not fire.
1508		- $trigger.on('click', function(e) {
1509		- e.preventDefault();
1510		- e.stopPropagation();
1511		- if ($menu.hasClass('is-open')) closeMenu();
1512		- else openMenu();
1513		- });
1514		-
1515		- // Don't let clicks inside the menu bubble to the top-bar collapse handler.
1516		- $menu.on('click', function(e) {
1517		- e.stopPropagation();
1518		- });
1519		-
1520		- // Outside click closes the menu.
1521		- $(document).on('click.mxchatMenu-' + botId, function(e) {
1522		- if (!$menu.hasClass('is-open')) return;
1523		- if ($wrap.has(e.target).length || $wrap.is(e.target)) return;
1524		- closeMenu();
1525		- });
1526		-
1527		- // Keyboard: Escape closes and returns focus; arrow keys move focus; Enter activates.
1528		- $menu.on('keydown', '.mxchat-menu-item', function(e) {
1529		- var $items = $menu.find('.mxchat-menu-item');
1530		- var idx = $items.index(this);
1531		- if (e.key === 'Escape') {
1532		- e.preventDefault();
1533		- closeMenu(true);
1534		- } else if (e.key === 'ArrowDown') {
1535		- e.preventDefault();
1536		- var $next = $items.eq((idx + 1) % $items.length);
1537		- $items.attr('tabindex', '-1');
1538		- $next.attr('tabindex', '0').trigger('focus');
1539		- } else if (e.key === 'ArrowUp') {
1540		- e.preventDefault();
1541		- var $prev = $items.eq((idx - 1 + $items.length) % $items.length);
1542		- $items.attr('tabindex', '-1');
1543		- $prev.attr('tabindex', '0').trigger('focus');
1544		- } else if (e.key === 'Enter' || e.key === ' ') {
1545		- e.preventDefault();
1546		- $(this).trigger('click');
1547		- }
1548		- });
1549		- $trigger.on('keydown', function(e) {
1550		- if (e.key === 'Escape' && $menu.hasClass('is-open')) {
1551		- e.preventDefault();
1552		- closeMenu(true);
1553		- } else if ((e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') && !$menu.hasClass('is-open')) {
1554		- e.preventDefault();
1555		- openMenu();
1556		- }
1557		- });
1558		-
1559		- $wrap.data('mxchatMenuReady', true);
1560		-}
1561		-
1562		-// Initialize header menus for every rendered widget on DOM ready.
1563		-$(function() {
1564		- $('.mxchat-header-menu-wrap').each(function() {
1565		- var botId = $(this).data('bot-id');
1566		- if (botId) mxchatInitHeaderMenu(botId);
1567		- });
1568		-});
1569		-
1570	1282	function appendMessage(sender, messageText = '', messageHtml = '', images = [], isTemporary = false, botId = 'default') {
1571	1283	try {
1572	1284	// Determine styles based on sender type
1573	1285	let messageClass, bgColor, fontColor;
		@@ -1659,12 +1371,8 @@
1659	1371	if (lastUserMessage.length) {
1660	1372	scrollElementToTop(lastUserMessage, botId);
1661	1373	}
1662	1374	}
1663		-
1664		- if ((sender === "bot" || sender === "agent") && !isTemporary) {
1665		- mxchatEnsurePrintRoot(botId);
1666		- }
1667	1375	});
1668	1376
1669	1377	if (messageText.id) {
1670	1378	var instance = MxChatInstances.get(botId);
		@@ -1811,12 +1519,8 @@
1811	1519	}
1812	1520
1813	1521	// Re-enable chat input after response is displayed
1814	1522	enableChatInput(botId);
1815		-
1816		- if (sender === "bot" || sender === "agent") {
1817		- mxchatEnsurePrintRoot(botId);
1818		- }
1819	1523	} else {
1820	1524	appendMessage(sender, responseText, responseHtml, images, false, botId);
1821	1525	// Re-enable chat input after response is displayed
1822	1526	enableChatInput(botId);
		@@ -2269,14 +1973,13 @@
2269	1973	requestAnimationFrame(smoothScroll);
2270	1974	}
2271	1975	}
2272	1976
2273		- function scrollElementToTop(element, botId, topOffset) {
	1977	+ function scrollElementToTop(element, botId) {
2274	1978	botId = botId || 'default';
2275		- topOffset = (typeof topOffset === 'number') ? topOffset : 2;
2276	1979	var chatBox = getElement(botId, 'chat-box');
2277	1980	var elementTop = element.position().top + chatBox.scrollTop();
2278		- chatBox.animate({ scrollTop: Math.max(0, elementTop - topOffset) }, 500);
	1981	+ chatBox.animate({ scrollTop: elementTop }, 500);
2279	1982	}
2280	1983
2281	1984	function showChatWidget(botId) {
2282	1985	botId = botId || 'default';