PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 2.2.1
MxChat – AI Chatbot & Content Generation for WordPress v2.2.1
3.2.21 3.2.20 3.2.19 3.2.18 3.2.17 3.2.16 3.2.15 3.2.14 3.2.12 3.2.13 3.2.11 3.2.10 3.2.9 3.2.8 3.2.7 3.2.6 3.2.5 3.2.4 3.2.3 3.2.2 3.2.1 2.0.3 2.0.4 2.0.5 2.0.6 All 152 releases
← All changes | js/chat-script.js +1197 -3055 3.2.3 → 2.2.1 View file →
@@ -1,754 +1,433 @@
1 1 jQuery(document).ready(function($) {
2 +//console.log('mxchatChat object:', mxchatChat);
3 +//console.log('Link Target Toggle Value:', mxchatChat.link_target_toggle);
4 +// Add these variables at the top of your chat-script.js file
5 + const toolbarIconColor = mxchatChat.toolbar_icon_color || '#212121';
2 6
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) {
8 - if (callback) callback();
9 - return;
10 - }
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;
15 - }
16 - if (callback) callback();
17 - });
18 - }
7 + // Initialize color settings
8 + var userMessageBgColor = mxchatChat.user_message_bg_color;
9 + var userMessageFontColor = mxchatChat.user_message_font_color;
10 + var botMessageBgColor = mxchatChat.bot_message_bg_color;
11 + var botMessageFontColor = mxchatChat.bot_message_font_color;
12 + // Add live agent message colors
13 + var liveAgentMessageBgColor = mxchatChat.live_agent_message_bg_color;
14 + var liveAgentMessageFontColor = mxchatChat.live_agent_message_font_color;
19 15
20 - // ====================================
21 - // MULTI-INSTANCE MANAGEMENT SYSTEM
22 - // ====================================
23 16
24 - // Instance registry - tracks all chatbot instances on the page
25 - const MxChatInstances = {
26 - instances: {},
17 + var linkTarget = mxchatChat.link_target_toggle === 'on' ? '_blank' : '_self';
18 + let lastSeenMessageId = '';
19 + let notificationCheckInterval;
20 + let notificationBadge;
21 + // Initialize session ID
22 + var sessionId = getChatSession();
27 23
28 - // Initialize an instance for a bot
29 - init: function(botId) {
30 - if (!this.instances[botId]) {
31 - // When persistence is OFF, track when this session started
32 - // so the AI only sees messages from this page load
33 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
24 + let pollingInterval; // Variable to store the interval ID
25 + let processedMessageIds = new Set(); // Add this at the top with your other variables
26 +//console.log('Live Agent BG Color:', liveAgentMessageBgColor);
27 +//console.log('Live Agent Font Color:', liveAgentMessageFontColor);
28 + let activePdfFile = null;
29 + let activeWordFile = null;
34 30
35 - this.instances[botId] = {
36 - botId: botId,
37 - sessionId: null,
38 - lastSeenMessageId: '',
39 - notificationCheckInterval: null,
40 - pollingInterval: null,
41 - processedMessageIds: new Set(),
42 - activePdfFile: null,
43 - activeWordFile: null,
44 - chatHistoryLoaded: false,
45 - isStreaming: false,
46 - // Fresh context timestamp - only used when persistence is OFF
47 - sessionStartTimestamp: chatPersistenceEnabled ? 0 : Date.now()
48 - };
49 - }
50 - return this.instances[botId];
51 - },
52 31
53 - // Get instance by botId
54 - get: function(botId) {
55 - return this.instances[botId] || this.init(botId);
56 - },
32 +// Function to create and append notification badge
33 +// Function to create and append notification badge
34 +function createNotificationBadge() {
35 + //console.log("Creating notification badge...");
36 + const chatButton = document.getElementById('floating-chatbot-button');
37 + //console.log("Chat button found:", !!chatButton);
38 +
39 + if (!chatButton) return;
57 40
58 - // Get all active bot IDs
59 - getAllBotIds: function() {
60 - return Object.keys(this.instances);
61 - },
41 + // Remove any existing badge first
42 + const existingBadge = chatButton.querySelector('.chat-notification-badge');
43 + if (existingBadge) {
44 + //console.log("Removing existing badge");
45 + existingBadge.remove();
46 + }
62 47
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.
66 - getChatSession: function(botId) {
67 - var cookieName = 'mxchat_session_id_' + botId;
68 - var storageKey = 'mxchat_session_id_' + botId;
69 - var sessionId = getCookie(cookieName);
48 + notificationBadge = document.createElement('div');
49 + notificationBadge.className = 'chat-notification-badge';
50 + notificationBadge.style.cssText = `
51 + display: none;
52 + position: absolute;
53 + top: -5px;
54 + right: -5px;
55 + background-color: red;
56 + color: white;
57 + border-radius: 50%;
58 + padding: 4px 8px;
59 + font-size: 12px;
60 + font-weight: bold;
61 + z-index: 10001;
62 + `;
63 + chatButton.style.position = 'relative';
64 + chatButton.appendChild(notificationBadge);
65 +
66 +}
70 67
71 - // Fallback to localStorage if cookie is missing (e.g. cleared by browser/consent)
72 - if (!sessionId) {
73 - try { sessionId = localStorage.getItem(storageKey); } catch (e) {}
74 - }
68 +// Function to check for new messages
69 +function checkForNewMessages() {
70 + const sessionId = getChatSession();
71 + const chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
72 +
73 + if (!chatPersistenceEnabled) return;
75 74
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;
75 + $.ajax({
76 + url: mxchatChat.ajax_url,
77 + type: 'POST',
78 + data: {
79 + action: 'mxchat_check_new_messages',
80 + session_id: sessionId,
81 + last_seen_id: lastSeenMessageId,
82 + nonce: mxchatChat.nonce
83 + },
84 + success: function(response) {
85 + if (response.success && response.data.hasNewMessages) {
86 + showNotification();
82 87 }
88 + }
89 + });
90 +}
83 91
84 - // Guard against stored sentinel values that indicate earlier broken writes.
85 - if (sessionId === 'null' || sessionId === 'undefined') {
86 - sessionId = null;
87 - }
92 +// Function to show notification
93 +function showNotification() {
94 + const badge = document.getElementById('chat-notification-badge');
95 + if (badge && $('#floating-chatbot').hasClass('hidden')) {
96 + badge.style.display = 'block';
97 + badge.textContent = '1';
98 + }
99 +}
88 100
89 - // Re-sync cookie from localStorage if cookie was lost
90 - if (sessionId && !getCookie(cookieName)) {
91 - document.cookie = cookieName + "=" + sessionId + "; path=/; max-age=86400; SameSite=Lax";
92 - }
101 +function hideNotification() {
102 + const badge = document.getElementById('chat-notification-badge');
103 + if (badge) {
104 + badge.style.display = 'none';
105 + }
106 +}
107 +// Function to start notification checking
108 +function startNotificationChecking() {
109 + const chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
110 + if (!chatPersistenceEnabled) return;
93 111
94 - return sessionId || null;
95 - },
112 + createNotificationBadge();
113 + notificationCheckInterval = setInterval(checkForNewMessages, 30000); // Check every 30 seconds
114 +}
96 115
97 - // Lazy session initializer — called on first user interaction
98 - ensureSession: function(botId) {
99 - botId = botId || 'default';
100 - var instance = this.instances[botId] || this.init(botId);
116 +// Function to stop notification checking
117 +function stopNotificationChecking() {
118 + if (notificationCheckInterval) {
119 + clearInterval(notificationCheckInterval);
120 + }
121 +}
101 122
102 - if (instance.sessionId) {
103 - return instance.sessionId;
104 - }
105 123
106 - // Check for existing session from cookie or localStorage
107 - var existingSession = this.getChatSession(botId);
108 124
109 - if (existingSession) {
110 - instance.sessionId = existingSession;
111 - } else {
112 - // Brand new session
113 - var newId = generateSessionId();
114 - this.setChatSession(botId, newId);
115 - instance.sessionId = newId;
116 - }
117 125
118 - // Now that we have a session, do the deferred work
119 - refreshNonceIfNeeded();
120 - trackOriginatingPage();
126 +function getChatSession() {
127 + var sessionId = getCookie('mxchat_session_id');
128 + //console.log("Session ID retrieved from cookie: ", sessionId);
121 129
122 - // Note: loadChatHistory is handled by showChatContainerForBot with loader UI,
123 - // so we do NOT call it here to avoid a race condition.
130 + if (!sessionId) {
131 + sessionId = generateSessionId();
132 + //console.log("Generated new session ID: ", sessionId);
133 + setChatSession(sessionId);
134 + }
124 135
125 - return instance.sessionId;
126 - },
136 + //console.log("Final session ID: ", sessionId);
137 + return sessionId;
138 +}
127 139
128 - setChatSession: function(botId, sessionId) {
129 - var cookieName = 'mxchat_session_id_' + botId;
130 - var storageKey = 'mxchat_session_id_' + botId;
131 - document.cookie = cookieName + "=" + sessionId + "; path=/; max-age=86400; SameSite=Lax";
132 - try { localStorage.setItem(storageKey, sessionId); } catch (e) {}
133 - if (this.instances[botId]) {
134 - this.instances[botId].sessionId = sessionId;
135 - }
136 - },
140 +function setChatSession(sessionId) {
141 + // Set the cookie with a 24-hour expiration (86400 seconds)
142 + document.cookie = "mxchat_session_id=" + sessionId + "; path=/; max-age=86400; SameSite=Lax";
143 +}
137 144
138 - resetChatSession: function(botId) {
139 - // Clear old session from localStorage before setting new one
140 - try { localStorage.removeItem('mxchat_session_id_' + botId); } catch (e) {}
141 - var newSessionId = generateSessionId();
142 - this.setChatSession(botId, newSessionId);
143 - var $chatBox = getElement(botId, 'chat-box');
144 - if ($chatBox.length) {
145 - $chatBox.find('.user-message, .bot-message:not(:first), .agent-message').remove();
146 - }
147 - if (this.instances[botId]) {
148 - this.instances[botId].chatHistoryLoaded = false;
149 - this.instances[botId].processedMessageIds = new Set();
150 - }
151 - },
145 +// Get cookie value by name
146 +function getCookie(name) {
147 + let value = "; " + document.cookie;
148 + let parts = value.split("; " + name + "=");
149 + if (parts.length == 2) return parts.pop().split(";").shift();
150 +}
152 151
153 - // Silent reset — new session ID without clearing the chat UI
154 - // Used when IP changes mid-conversation so the user doesn't see messages vanish
155 - silentResetSession: function(botId) {
156 - try { localStorage.removeItem('mxchat_session_id_' + botId); } catch (e) {}
157 - var newSessionId = generateSessionId();
158 - this.setChatSession(botId, newSessionId);
159 - if (this.instances[botId]) {
160 - this.instances[botId].sessionId = newSessionId;
161 - }
162 - return newSessionId;
163 - }
164 - };
152 +// Generate a new session ID
153 +function generateSessionId() {
154 + return 'mxchat_chat_' + Math.random().toString(36).substr(2, 9);
155 +}
165 156
166 - // ====================================
167 - // ELEMENT SELECTOR HELPERS
168 - // ====================================
157 +// Function to send the message to the chatbot (backend)
158 +function sendMessageToChatbot(message) {
159 + var sessionId = getChatSession(); // Reuse the session ID logic
169 160
170 - // Check if a specific bot has an AI theme assigned (skip inline colors)
171 - function shouldSkipInlineColors(botId) {
172 - // If global AI theme is active, skip inline colors for all bots
173 - if (mxchatChat.skip_inline_colors) {
174 - return true;
175 - }
176 - // Check if this specific bot has a theme assignment
177 - var botAssignments = mxchatChat.bot_theme_assignments || {};
178 - return botAssignments.hasOwnProperty(botId);
179 - }
161 + // Hide the popular questions section
162 + $('#mxchat-popular-questions').hide();
180 163
181 - // Get element by ID with bot suffix - returns jQuery object
182 - function getElement(botId, elementName) {
183 - return $('#' + elementName + '-' + botId);
184 - }
164 + // Show thinking indicator (no need to append the user's message again)
165 + appendThinkingMessage();
166 + scrollToBottom();
185 167
186 - // Get element by ID with bot suffix - returns DOM element
187 - function getElementDOM(botId, elementName) {
188 - return document.getElementById(elementName + '-' + botId);
189 - }
168 + //console.log("Sending message to chatbot:", message); // Log the message
169 + //console.log("Session ID:", sessionId); // Log the session ID
190 170
191 - // Get bot ID from any element within a chatbot instance
192 - function getBotIdFromElement(element) {
193 - var $wrapper = $(element).closest('.mxchat-chatbot-wrapper');
194 - if ($wrapper.length) {
195 - return $wrapper.data('bot-id') || 'default';
196 - }
197 - // Fallback: try to find from floating container
198 - var $floating = $(element).closest('.floating-chatbot');
199 - if ($floating.length) {
200 - var id = $floating.attr('id') || '';
201 - var match = id.match(/floating-chatbot-(.+)/);
202 - if (match) return match[1];
203 - }
204 - // Fallback: check if element itself has an ID with bot suffix (e.g., floating-chatbot-button-{bot_id})
205 - var elementId = $(element).attr('id') || '';
206 - if (elementId) {
207 - // Match patterns like: floating-chatbot-button-{bot_id}, pre-chat-message-{bot_id}
208 - var idMatch = elementId.match(/^(?:floating-chatbot-button|pre-chat-message|chat-notification-badge)-(.+)$/);
209 - if (idMatch) return idMatch[1];
210 - }
211 - return 'default';
212 - }
171 + // Call the chatbot using the same call logic as sendMessage
172 + callMxChat(message, function(response) {
173 + // ** Ensure temporary thinking message is removed before adding new response **
174 + $('.temporary-message').remove();
213 175
214 - // Get wrapper element for a bot
215 - function getWrapper(botId) {
216 - return getElement(botId, 'mxchat-chatbot-wrapper');
217 - }
176 + // Replace thinking indicator with actual response
177 + replaceLastMessage("bot", response);
178 + });
179 +}
218 180
219 - // ====================================
220 - // GLOBAL VARIABLES & CONFIGURATION
221 - // ====================================
222 - const toolbarIconColor = mxchatChat.toolbar_icon_color || '#212121';
223 181
224 - // Initialize color settings (these are global as they come from PHP)
225 - var userMessageBgColor = mxchatChat.user_message_bg_color;
226 - var userMessageFontColor = mxchatChat.user_message_font_color;
227 - var botMessageBgColor = mxchatChat.bot_message_bg_color;
228 - var botMessageFontColor = mxchatChat.bot_message_font_color;
229 - var liveAgentMessageBgColor = mxchatChat.live_agent_message_bg_color;
230 - var liveAgentMessageFontColor = mxchatChat.live_agent_message_font_color;
231 182
232 - var linkTarget = mxchatChat.link_target_toggle === 'on' ? '_blank' : '_self';
233 183
234 - // ====================================
235 - // SESSION MANAGEMENT (Legacy compatibility)
236 - // ====================================
184 +function sendMessage() {
185 + var message = $('#chat-input').val(); // Get value from textarea
186 + if (message) {
187 + appendMessage("user", message); // Append user's message
188 + $('#chat-input').val(''); // Clear the textarea
189 + $('#chat-input').css('height', 'auto'); // Reset height after clearing content
237 190
238 - function getCookie(name) {
239 - let value = "; " + document.cookie;
240 - let parts = value.split("; " + name + "=");
241 - if (parts.length == 2) return parts.pop().split(";").shift();
242 - }
191 + // Hide the popular questions section
192 + $('#mxchat-popular-questions').hide();
243 193
244 - function generateSessionId() {
245 - return 'mxchat_chat_' + Math.random().toString(36).substr(2, 9);
246 - }
194 + // Show typing indicator
195 + appendThinkingMessage();
196 + scrollToBottom();
247 197
248 - // Legacy function - now delegates to instance manager
249 - function getChatSession(botId) {
250 - botId = botId || 'default';
251 - return MxChatInstances.getChatSession(botId);
198 + callMxChat(message, function(response) {
199 + // Replace typing indicator with actual response
200 + replaceLastMessage("bot", response);
201 + });
252 202 }
203 +}
253 204
254 - function setChatSession(sessionId, botId) {
255 - botId = botId || 'default';
256 - MxChatInstances.setChatSession(botId, sessionId);
257 - }
258 205
259 - function resetChatSession(botId) {
260 - botId = botId || 'default';
261 - MxChatInstances.resetChatSession(botId);
262 - }
263 206
264 - // ====================================
265 - // INITIALIZE ALL CHATBOT INSTANCES
266 - // ====================================
207 + // Function to append a thinking message with animation
208 + function appendThinkingMessage() {
209 + // Remove any existing thinking dots first
210 + $('.thinking-dots').remove();
267 211
268 - function initializeAllInstances() {
269 - // Find all chatbot wrappers on the page
270 - $('.mxchat-chatbot-wrapper').each(function() {
271 - var botId = $(this).data('bot-id') || 'default';
272 - MxChatInstances.init(botId);
273 - initializeBotInstance(botId);
274 - });
275 - }
212 + // Retrieve the bot message font color and background color
213 + var botMessageFontColor = mxchatChat.bot_message_font_color;
214 + var botMessageBgColor = mxchatChat.bot_message_bg_color;
276 215
277 - function initializeBotInstance(botId) {
278 - var instance = MxChatInstances.get(botId);
279 216
280 - // Initialize quick questions state for this bot
281 - checkQuickQuestionsState(botId);
217 + var thinkingHtml = '<div class="thinking-dots-container">' +
218 + '<div class="thinking-dots">' +
219 + '<span class="dot" style="background-color: ' + botMessageFontColor + ';"></span>' +
220 + '<span class="dot" style="background-color: ' + botMessageFontColor + ';"></span>' +
221 + '<span class="dot" style="background-color: ' + botMessageFontColor + ';"></span>' +
222 + '</div>' +
223 + '</div>';
282 224
283 - // Note: Event handlers use event delegation with class selectors,
284 - // so they work automatically for all instances without per-bot setup
225 + // Append the thinking dots to the chat container (or within the temporary message div)
226 + $("#chat-box").append('<div class="bot-message temporary-message" style="background-color: ' + botMessageBgColor + ';">' + thinkingHtml + '</div>');
227 + scrollToBottom();
285 228 }
286 229
287 -// ====================================
288 -// CONTEXTUAL AWARENESS FUNCTIONALITY
289 -// ====================================
290 -
291 -function getPageContext() {
292 - // Check if contextual awareness is enabled
293 - if (mxchatChat.contextual_awareness_toggle !== 'on') {
294 - return null;
295 - }
296 -
297 - // Get page URL
298 - const pageUrl = window.location.href;
299 -
300 - // Get page title
301 - const pageTitle = document.title || '';
302 -
303 - // Get main content from the page
304 - let pageContent = '';
305 -
306 - // Try to get content from common content areas
307 - const contentSelectors = [
308 - 'main',
309 - '[role="main"]',
310 - '.content',
311 - '.main-content',
312 - '.post-content',
313 - '.entry-content',
314 - '.page-content',
315 - 'article',
316 - '#content',
317 - '#main'
318 - ];
319 -
320 - let contentElement = null;
321 - for (const selector of contentSelectors) {
322 - contentElement = document.querySelector(selector);
323 - if (contentElement) {
324 - break;
325 - }
326 - }
327 -
328 - // If no specific content area found, use body but exclude header, footer, nav, sidebar
329 - if (!contentElement) {
330 - contentElement = document.body;
331 - }
332 -
333 - if (contentElement) {
334 - // Clone the element to avoid modifying the original
335 - const clone = contentElement.cloneNode(true);
336 -
337 - // Remove unwanted elements
338 - const unwantedSelectors = [
339 - 'header',
340 - 'footer',
341 - 'nav',
342 - '.navigation',
343 - '.sidebar',
344 - '.widget',
345 - '.menu',
346 - 'script',
347 - 'style',
348 - '.comments',
349 - '#comments',
350 - '.breadcrumb',
351 - '.breadcrumbs',
352 - '#floating-chatbot',
353 - '#floating-chatbot-button',
354 - '.mxchat',
355 - '[class*="chat"]',
356 - '[id*="chat"]'
357 - ];
358 -
359 - unwantedSelectors.forEach(selector => {
360 - const elements = clone.querySelectorAll(selector);
361 - elements.forEach(el => el.remove());
362 - });
363 -
364 - // Extract MxChat context data attributes before getting text content
365 - const contextData = [];
366 - clone.querySelectorAll('[data-mxchat-context]').forEach(el => {
367 - const contextValue = el.dataset.mxchatContext;
368 - if (contextValue && contextValue.trim()) {
369 - contextData.push(contextValue);
230 + // Trigger send button click when "Enter" key is pressed in the textarea
231 + $('#chat-input').keypress(function(e) {
232 + if (e.which == 13 && !e.shiftKey) { // Check if "Enter" is pressed without Shift
233 + e.preventDefault(); // Prevent default "Enter" behavior
234 + $('#send-button').click(); // Trigger send button click
370 235 }
371 236 });
372 -
373 - // Get text content and clean it up
374 - pageContent = clone.textContent || clone.innerText || '';
375 -
376 - // Add context data to page content if any were found
377 - if (contextData.length > 0) {
378 - pageContent += '\n\nAdditional Context:\n' + contextData.join('\n');
379 - }
380 -
381 - // Clean up whitespace and limit length
382 - pageContent = pageContent
383 - .replace(/\s+/g, ' ')
384 - .trim()
385 - .substring(0, 3000); // Limit to 3000 characters to avoid token limits
386 - }
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 - };
398 -}
399 237
400 -// Track originating page when chat starts
401 -function trackOriginatingPage() {
402 - const sessionId = getChatSession();
403 - const pageUrl = window.location.href;
404 - const pageTitle = document.title || 'Untitled Page';
405 -
406 - // Only track once per session
407 - const trackingKey = 'mxchat_originating_tracked_' + sessionId;
408 - if (sessionStorage.getItem(trackingKey)) {
409 - return;
410 - }
411 -
412 - $.ajax({
413 - url: mxchatChat.ajax_url,
414 - type: 'POST',
415 - data: {
416 - action: 'mxchat_track_originating_page',
417 - session_id: sessionId,
418 - page_url: pageUrl,
419 - page_title: pageTitle,
420 - nonce: mxchatChat.nonce
421 - },
422 - success: function(response) {
423 - if (response.success) {
424 - sessionStorage.setItem(trackingKey, 'true');
425 - }
426 - }
238 + // Handle send button click
239 + $('#send-button').click(function() {
240 + sendMessage();
427 241 });
428 -}
429 242
430 -// ====================================
431 -// CORE CHAT FUNCTIONALITY
432 -// ====================================
243 + // Handle click on popular questions
244 + $('.mxchat-popular-question').on('click', function () {
245 + var question = $(this).text(); // Get the text of the clicked question
433 246
434 -// Helper functions to disable/enable chat input while waiting for response
435 -function disableChatInput(botId) {
436 - botId = botId || 'default';
437 - var chatInput = getElementDOM(botId, 'chat-input');
438 - var sendButton = getElementDOM(botId, 'send-button');
439 - if (chatInput) {
440 - chatInput.disabled = true;
441 - chatInput.style.opacity = '0.6';
442 - }
443 - if (sendButton) {
444 - sendButton.disabled = true;
445 - sendButton.style.opacity = '0.5';
446 - sendButton.style.pointerEvents = 'none';
447 - }
448 -}
247 + // Append the question as if the user typed it
248 + appendMessage("user", question);
449 249
450 -function enableChatInput(botId) {
451 - botId = botId || 'default';
452 - var chatInput = getElementDOM(botId, 'chat-input');
453 - var sendButton = getElementDOM(botId, 'send-button');
454 - if (chatInput) {
455 - chatInput.disabled = false;
456 - chatInput.style.opacity = '1';
457 - chatInput.focus();
458 - }
459 - if (sendButton) {
460 - sendButton.disabled = false;
461 - sendButton.style.opacity = '1';
462 - sendButton.style.pointerEvents = 'auto';
463 - }
464 -}
250 + // Send the question to the server (backend)
251 + sendMessageToChatbot(question);
252 + });
465 253
466 -// Update your existing sendMessage function
467 -function sendMessage(botId) {
468 - botId = botId || 'default';
469 - MxChatInstances.ensureSession(botId);
470 - var $chatInput = getElement(botId, 'chat-input');
471 - var message = $chatInput.val();
472 254
473 - // ADD PROMPT HOOK HERE
474 - if (typeof customMxChatFilter === 'function') {
475 - message = customMxChatFilter(message, "prompt");
476 - }
255 +// Add this new function to handle markdown headers
256 +function formatMarkdownHeaders(text) {
257 + // Handle h1 to h6 headers
258 + return text.replace(/^(#{1,6})\s(.+)$/gm, function(match, hashes, content) {
259 + const level = hashes.length;
260 + return `<h${level} class="chat-heading">${content}</h${level}>`;
261 + });
262 +}
477 263
478 - if (message) {
479 - // Don't disable input in live agent mode - let users chat freely
480 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
481 - var isAgentMode = modeIndicator && modeIndicator.textContent === 'Live Agent';
482 - if (!isAgentMode) {
483 - disableChatInput(botId);
484 - }
264 +// Update the linkify function to handle URLs, markdown, and phone numbers
265 +function linkify(inputText) {
266 + if (!inputText) return '';
267 +
268 + // Process markdown headers
269 + let processedText = formatMarkdownHeaders(inputText);
270 +
271 + // Process markdown links
272 + const markdownLinkPattern = /\[([^\]]+)\]\((https?:\/\/[^\s]+)\)/g;
273 + processedText = processedText.replace(markdownLinkPattern, (match, text, url) => {
274 + const safeUrl = encodeURI(url);
275 + const safeText = sanitizeUserInput(text);
276 + return `<a href="${safeUrl}" target="${linkTarget}">${safeText}</a>`;
277 + });
485 278
486 - appendMessage("user", message, '', [], false, botId);
487 - $chatInput.val('');
488 - $chatInput.css('height', 'auto');
279 + // Process phone numbers (tel:)
280 + const phonePattern = /\[([^\]]+)\]\((tel:[\d+]+)\)/g;
281 + processedText = processedText.replace(phonePattern, (match, text, phone) => {
282 + const safePhone = encodeURI(phone);
283 + const safeText = sanitizeUserInput(text);
284 + return `<a href="${safePhone}">${safeText}</a>`;
285 + });
489 286
490 - if (hasQuickQuestions(botId)) {
491 - collapseQuickQuestions(botId);
492 - }
493 - appendThinkingMessage(botId);
494 - scrollToBottom(botId);
287 + // Process standalone URLs
288 + const urlPattern = /(^|[^">])(https?:\/\/[^\s<]+)/gim;
289 + processedText = processedText.replace(urlPattern, (match, prefix, url) => {
290 + const safeUrl = encodeURI(url);
291 + return `${prefix}<a href="${safeUrl}" target="${linkTarget}">${url}</a>`;
292 + });
495 293
496 - const currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
294 + // Process www. URLs
295 + const wwwPattern = /(^|[^">])(www\.[\S]+(\b|$))(?![^<]*<\/a>)/gim;
296 + processedText = processedText.replace(wwwPattern, (match, prefix, url) => {
297 + const safeUrl = encodeURI(`http://${url}`);
298 + return `${prefix}<a href="${safeUrl}" target="${linkTarget}">${url}</a>`;
299 + });
497 300
498 - // Check if streaming is enabled AND supported for this model
499 - if (shouldUseStreaming(currentModel)) {
500 - callMxChatStream(message, function(response) {
501 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message');
502 - }, botId);
503 - } else {
504 - callMxChat(message, function(response) {
505 - replaceLastMessage("bot", response, '', [], botId);
506 - }, botId);
507 - }
508 - }
301 + return processedText;
509 302 }
510 303
511 -// Update your existing sendMessageToChatbot function
512 -function sendMessageToChatbot(message, botId) {
513 - botId = botId || 'default';
514 - MxChatInstances.ensureSession(botId);
304 +function scrollElementToTop(element) {
305 + var chatBox = $('#chat-box');
306 + var elementTop = element.position().top + chatBox.scrollTop();
307 + chatBox.animate({ scrollTop: elementTop }, 500);
308 +}
515 309
516 - // ADD PROMPT HOOK HERE
517 - if (typeof customMxChatFilter === 'function') {
518 - message = customMxChatFilter(message, "prompt");
519 - }
520 310
521 - // Don't disable input in live agent mode - let users chat freely
522 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
523 - var isAgentMode = modeIndicator && modeIndicator.textContent === 'Live Agent';
524 - if (!isAgentMode) {
525 - disableChatInput(botId);
526 - }
311 +// Optimized scrollToBottom function for instant scrolling
312 +function scrollToBottom(instant = false) {
313 + var chatBox = $('#chat-box');
314 + if (instant) {
315 + // Instantly set the scroll position to the bottom
316 + chatBox.scrollTop(chatBox.prop("scrollHeight"));
317 + } else {
318 + // Use requestAnimationFrame for smoother scrolling if needed
319 + let start = null;
320 + const scrollHeight = chatBox.prop("scrollHeight");
321 + const initialScroll = chatBox.scrollTop();
322 + const distance = scrollHeight - initialScroll;
323 + const duration = 500; // Duration in ms
527 324
528 - var sessionId = getChatSession(botId);
325 + function smoothScroll(timestamp) {
326 + if (!start) start = timestamp;
327 + const progress = timestamp - start;
328 + const currentScroll = initialScroll + (distance * (progress / duration));
329 + chatBox.scrollTop(currentScroll);
529 330
530 - if (hasQuickQuestions(botId)) {
531 - collapseQuickQuestions(botId);
532 - }
533 - appendThinkingMessage(botId);
534 - scrollToBottom(botId);
331 + if (progress < duration) {
332 + requestAnimationFrame(smoothScroll);
333 + } else {
334 + chatBox.scrollTop(scrollHeight); // Ensure it's exactly at the bottom
335 + }
336 + }
535 337
536 - const currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
537 -
538 - // Check if streaming is enabled AND supported for this model
539 - if (shouldUseStreaming(currentModel)) {
540 - callMxChatStream(message, function(response) {
541 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message');
542 - }, botId);
543 - } else {
544 - callMxChat(message, function(response) {
545 - getElement(botId, 'chat-box').find('.temporary-message').remove();
546 - replaceLastMessage("bot", response, '', [], botId);
547 - }, botId);
338 + requestAnimationFrame(smoothScroll);
548 339 }
549 340 }
550 341
551 -// Updated shouldUseStreaming function with debugging
552 -function shouldUseStreaming(model) {
553 - // Check if streaming is enabled in settings (using your toggle naming pattern)
554 - const streamingEnabled = mxchatChat.enable_streaming_toggle === 'on';
555 -
556 - // Check if model supports streaming
557 - const streamingSupported = isStreamingSupported(model);
558 -
559 -
560 - // Only use streaming if both enabled and supported
561 - return streamingEnabled && streamingSupported;
562 -}
563 342
564 -// Helper function to handle chat mode updates
565 -function handleChatModeUpdates(response, responseText) {
566 - // Check for explicit chat mode in response (THIS IS THE KEY FIX)
567 - if (response.chat_mode) {
568 - updateChatModeIndicator(response.chat_mode);
569 - return; // Return early since we found explicit mode
343 + // Function to format text with **bold** inside double asterisks
344 + function formatBoldText(text) {
345 + return text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
570 346 }
571 - // Check for fallback response chat mode
572 - else if (response.fallbackResponse && response.fallbackResponse.chat_mode) {
573 - updateChatModeIndicator(response.fallbackResponse.chat_mode);
574 - return; // Return early since we found explicit mode
575 - }
347 +
348 + // Function to convert newline characters to HTML line breaks and handle paragraph spacing
349 +function convertNewlinesToBreaks(text) {
350 + // Split the text into paragraphs (marked by double newlines or multiple <br> tags)
351 + const paragraphs = text.split(/(?:\n\n|\<br\>\s*\<br\>)/g);
576 352
577 - // Only do text-based detection if no explicit mode was provided
578 - // Check for specific AI chatbot response text
579 - if (responseText === 'You are now chatting with the AI chatbot.' ||
580 - responseText.includes('now chatting with the AI') ||
581 - responseText.includes('switched to AI mode') ||
582 - responseText.includes('AI chatbot is now')) {
583 - updateChatModeIndicator('ai');
584 - }
585 - // Check for agent transfer messages
586 - else if (responseText.includes('agent') &&
587 - (responseText.includes('transfer') || responseText.includes('connected'))) {
588 - updateChatModeIndicator('agent');
589 - }
353 + // Wrap each paragraph in <p> tags
354 + return paragraphs
355 + .map(para => `<p>${para.trim()}</p>`)
356 + .join('');
590 357 }
591 -
592 -// Function to get bot ID from any element or wrapper
593 -// If element is provided, finds the bot ID from its wrapper
594 -// If no element, returns 'default' (for backward compatibility)
595 -function getMxChatBotId(element) {
596 - if (element) {
597 - return getBotIdFromElement(element);
358 + // Copy to clipboard function
359 + // Function to copy text to clipboard
360 + function copyToClipboard(text) {
361 + var tempInput = $('<input>');
362 + $('body').append(tempInput);
363 + tempInput.val(text).select();
364 + document.execCommand('copy');
365 + tempInput.remove();
598 366 }
599 - // Fallback: find first chatbot wrapper on page
600 - const chatbotWrapper = document.querySelector('.mxchat-chatbot-wrapper');
601 - return chatbotWrapper ? chatbotWrapper.getAttribute('data-bot-id') || 'default' : 'default';
602 -}
603 367
604 -function callMxChat(message, callback, botId) {
605 - botId = botId || getMxChatBotId();
606 368
607 - // Store the message in case we need to retry after session reset
608 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', message);
609 -
610 - // Get page context if contextual awareness is enabled
611 - const pageContext = getPageContext();
612 -
613 - // Get instance for session start timestamp (used when persistence is OFF)
614 - var instance = MxChatInstances.get(botId);
615 -
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);
369 +function updateChatModeIndicator(mode) {
370 + const indicator = document.getElementById('chat-mode-indicator');
371 + if (indicator) {
372 + // For Live Agent, keep as is; for AI mode, use the customized text
373 + if (mode === 'agent') {
374 + indicator.textContent = 'Live Agent';
375 + } else {
376 + // Get the custom AI agent text from a data attribute we'll add to the element
377 + const customAiText = indicator.getAttribute('data-ai-text') || 'AI Agent';
378 + indicator.textContent = customAiText;
379 + }
624 380 }
381 + // Start or stop polling based on mode
382 + if (mode === 'agent') {
383 + startPolling();
384 + } else {
385 + stopPolling();
386 + }
387 +}
625 388
626 - // Prepare AJAX data
627 - const ajaxData = {
628 - action: 'mxchat_handle_chat_request',
629 - message: message,
630 - session_id: sessionId,
631 - nonce: mxchatChat.nonce,
632 - current_page_url: window.location.href,
633 - current_page_title: document.title,
634 - bot_id: botId,
635 - // Pass session start timestamp so AI context matches what user sees
636 - session_start_timestamp: instance.sessionStartTimestamp || 0
637 - };
638 -
639 - // Add page context if available
640 - if (pageContext) {
641 - ajaxData.page_context = JSON.stringify(pageContext);
642 - }
643 -
644 - // CHECK FOR VISION FLAGS AND ADD THEM
645 - if (window.mxchatVisionProcessed) {
646 - ajaxData.vision_processed = true;
647 - ajaxData.original_user_message = window.mxchatOriginalMessage || message;
648 - ajaxData.vision_images_count = window.mxchatVisionImagesCount || 0;
649 - // Clear the flags after use
650 - window.mxchatVisionProcessed = false;
651 - window.mxchatOriginalMessage = null;
652 - window.mxchatVisionImagesCount = 0;
653 - }
654 -
389 +function callMxChat(message, callback) {
655 390 $.ajax({
656 391 url: mxchatChat.ajax_url,
657 392 type: 'POST',
658 393 dataType: 'json',
659 - data: ajaxData,
394 + data: {
395 + action: 'mxchat_handle_chat_request',
396 + message: message,
397 + session_id: getChatSession(),
398 + nonce: mxchatChat.nonce
399 + },
660 400 success: function(response) {
661 - // IMMEDIATE CHAT MODE UPDATE - This should be FIRST
662 - if (response.chat_mode) {
663 - updateChatModeIndicator(response.chat_mode, botId);
664 - }
665 -
666 - // Also check in data property if response is wrapped
667 - if (response.data && response.data.chat_mode) {
668 - updateChatModeIndicator(response.data.chat_mode, botId);
669 - }
670 -
671 - // SECURITY FIX: Check for errors FIRST before checking for success
672 - // This ensures API errors (quota exceeded, invalid key, rate limit) are properly displayed
673 - if (response.success === false || (response.data && response.data.error_message)) {
674 - let errorMessage = "";
675 - let errorCode = "";
676 -
677 - // Check various possible error locations in the response
678 - if (response.data && response.data.error_message) {
679 - errorMessage = response.data.error_message;
680 - errorCode = response.data.error_code || "";
681 - } else if (response.error_message) {
682 - errorMessage = response.error_message;
683 - errorCode = response.error_code || "";
684 - } else if (response.message) {
685 - errorMessage = response.message;
686 - } else if (typeof response.data === 'string') {
687 - errorMessage = response.data;
688 - } else {
689 - // Fallback for any other unexpected response format
690 - errorMessage = "An error occurred. Please try again or contact support.";
691 - }
692 -
693 - // Handle session reset action (IP changed, session expired, etc.)
694 - // Silent reset — keep chat UI intact, just get a new session and retry
695 - if (response.data && response.data.action === 'reset_session') {
696 - MxChatInstances.silentResetSession(botId);
697 - // Re-send the original message with the new session (user message is already displayed)
698 - var originalMessage = getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message');
699 - if (originalMessage) {
700 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', null);
701 - var currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
702 - if (shouldUseStreaming(currentModel)) {
703 - callMxChatStream(originalMessage, function(response) {
704 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').removeClass('temporary-message');
705 - }, botId);
706 - } else {
707 - callMxChat(originalMessage, function(response) {
708 - replaceLastMessage("bot", response, '', [], botId);
709 - }, botId);
710 - }
711 - }
712 - return;
713 - }
714 -
715 - // Format user-friendly error message
716 - let displayMessage = errorMessage;
717 -
718 - // Customize message for admin users
719 - if (mxchatChat.is_admin) {
720 - // For admin users, show more technical details including error code
721 - displayMessage = errorMessage + (errorCode ? " (Error code: " + errorCode + ")" : "");
722 - }
723 -
724 - replaceLastMessage("bot", displayMessage, '', [], botId);
725 - return; // Exit early for errors
726 - }
727 -
728 - // NOW check if this is a successful response by looking for text, html, or message fields
401 + // Log the full response for debugging
402 + //console.log("API Response:", response);
403 +
404 + // First check if this is a successful response by looking for text, html, or message fields
729 405 // This preserves compatibility with your server response format
730 - if (response.text !== undefined || response.html !== undefined || response.message !== undefined ||
406 + if (response.text !== undefined || response.html !== undefined || response.message !== undefined ||
731 407 (response.success === true && response.data && response.data.status === 'waiting_for_agent')) {
732 -
408 +
733 409 // Handle successful response - this is your original success handling code
734 -
735 - // Handle other responses
736 - let responseText = response.text || '';
737 - let responseHtml = response.html || '';
738 - let responseMessage = response.message || '';
739 -
410 +
411 + // Existing chat mode check
412 + if (response.chat_mode) {
413 + updateChatModeIndicator(response.chat_mode);
414 + }
415 + else if (response.fallbackResponse && response.fallbackResponse.chat_mode) {
416 + updateChatModeIndicator(response.fallbackResponse.chat_mode);
417 + }
418 +
740 419 // Add PDF filename handling
741 420 if (response.data && response.data.filename) {
742 - showActivePdf(response.data.filename, botId);
743 - var instance = MxChatInstances.get(botId);
744 - instance.activePdfFile = response.data.filename;
421 + showActivePdf(response.data.filename);
422 + activePdfFile = response.data.filename;
745 423 }
746 -
424 +
747 425 // Add redirect check here
748 426 if (response.redirect_url) {
427 + let responseText = response.text || '';
749 428 if (responseText) {
750 - replaceLastMessage("bot", responseText, '', [], botId);
429 + replaceLastMessage("bot", responseText);
751 430 }
752 431 setTimeout(() => {
753 432 window.location.href = response.redirect_url;
754 433 }, 1500);
@@ -753,73 +432,107 @@
753 432 window.location.href = response.redirect_url;
754 433 }, 1500);
755 434 return;
756 435 }
757 -
436 +
758 437 // Check for live agent response
759 438 if (response.success && response.data && response.data.status === 'waiting_for_agent') {
760 - removeThinkingDots(botId);
761 - updateChatModeIndicator('agent', botId);
762 - enableChatInput(botId);
439 + updateChatModeIndicator('agent');
763 440 return;
764 441 }
765 -
442 +
443 + // Handle other responses
444 + let responseText = response.text || '';
445 + let responseHtml = response.html || '';
446 + let responseMessage = response.message || '';
447 +
448 + if (responseText === 'You are now chatting with the AI chatbot.') {
449 + updateChatModeIndicator('ai');
450 + }
451 +
766 452 // Handle the message and show notification if chat is hidden
767 453 if (responseText || responseHtml || responseMessage) {
768 -
769 - // ADD RESPONSE HOOKS HERE - BEFORE DISPLAYING
770 - if (responseText && typeof customMxChatFilter === 'function') {
771 - responseText = customMxChatFilter(responseText, "response");
772 - }
773 - if (responseMessage && typeof customMxChatFilter === 'function') {
774 - responseMessage = customMxChatFilter(responseMessage, "response");
775 - }
776 -
777 454 // Update the messages as before
778 455 if (responseText && responseHtml) {
779 - replaceLastMessage("bot", responseText, responseHtml, [], botId);
456 + replaceLastMessage("bot", responseText, responseHtml);
780 457 } else if (responseText) {
781 - replaceLastMessage("bot", responseText, '', [], botId);
458 + replaceLastMessage("bot", responseText);
782 459 } else if (responseHtml) {
783 - replaceLastMessage("bot", "", responseHtml, [], botId);
460 + replaceLastMessage("bot", "", responseHtml);
784 461 } else if (responseMessage) {
785 - replaceLastMessage("bot", responseMessage, '', [], botId);
462 + replaceLastMessage("bot", responseMessage);
786 463 }
787 -
464 +
788 465 // Check if chat is hidden and show notification
789 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
790 - if ($floatingChatbot.hasClass('hidden')) {
791 - var $badge = getElement(botId, 'chat-notification-badge');
792 - if ($badge.length) {
793 - $badge.show();
466 + if ($('#floating-chatbot').hasClass('hidden')) {
467 + const badge = $('#chat-notification-badge');
468 + if (badge.length) {
469 + badge.show();
794 470 }
795 471 }
796 472 } else {
797 - var emptyMsg = "I received an empty response. Please try again or contact support if this persists.";
798 - if (response.vectorstore_error) {
799 - emptyMsg = "I received an empty response. Debug info: " + response.vectorstore_error;
800 - }
801 - replaceLastMessage("bot", emptyMsg, '', [], botId);
473 + //console.error("Unexpected response format:", response);
474 + replaceLastMessage("bot", "I received an empty response. Please try again or contact support if this persists.");
802 475 }
803 -
476 +
804 477 if (response.message_id) {
805 - var instance = MxChatInstances.get(botId);
806 - instance.lastSeenMessageId = response.message_id;
478 + lastSeenMessageId = response.message_id;
807 479 }
808 -
480 +
809 481 return;
810 482 }
811 -
812 - // Fallback for truly unexpected response formats
813 - replaceLastMessage("bot", "Unexpected response format. Please try again or contact support.", '', [], botId);
483 +
484 + // If we got here, it's likely an error response
485 + // Now we can check for error conditions with our robust error handling
486 +
487 + let errorMessage = "";
488 + let errorCode = "";
489 +
490 + // Check various possible error locations in the response
491 + if (response.data && response.data.error_message) {
492 + errorMessage = response.data.error_message;
493 + errorCode = response.data.error_code || "";
494 + } else if (response.error_message) {
495 + errorMessage = response.error_message;
496 + errorCode = response.error_code || "";
497 + } else if (response.message) {
498 + errorMessage = response.message;
499 + } else if (typeof response.data === 'string') {
500 + errorMessage = response.data;
501 + } else if (!response.success) {
502 + // Explicit check for success: false without other error info
503 + errorMessage = "An error occurred. Please try again or contact support.";
504 + } else {
505 + // Fallback for any other unexpected response format
506 + errorMessage = "Unexpected response received. Please try again or contact support.";
507 + }
508 +
509 + // Log the error with code for debugging
510 + //console.log("Response data:", response.data);
511 + //console.error("API Error:", errorMessage, "Code:", errorCode);
512 +
513 + // Format user-friendly error message
514 + let displayMessage = errorMessage;
515 +
516 + // Customize message for admin users
517 + if (mxchatChat.is_admin) {
518 + // For admin users, show more technical details including error code
519 + displayMessage = errorMessage + (errorCode ? " (Error code: " + errorCode + ")" : "");
520 + }
521 +
522 + replaceLastMessage("bot", displayMessage);
814 523 },
815 524 error: function(xhr, status, error) {
525 + console.error("AJAX Error:", status, error);
526 + //console.log("Response Text:", xhr.responseText);
527 +
816 528 let errorMessage = "An unexpected error occurred.";
817 -
529 +
818 530 // Try to parse the response if it's JSON
819 531 try {
820 532 const responseJson = JSON.parse(xhr.responseText);
821 -
533 + //console.log("Parsed error response:", responseJson);
534 +
822 535 if (responseJson.data && responseJson.data.error_message) {
823 536 errorMessage = responseJson.data.error_message;
824 537 } else if (responseJson.message) {
825 538 errorMessage = responseJson.message;
@@ -837,483 +550,21 @@
837 550 } else if (xhr.status >= 500) {
838 551 errorMessage = "Server error: The server encountered an issue. Please try again later.";
839 552 }
840 553 }
841 -
842 - replaceLastMessage("bot", errorMessage, '', [], botId);
554 +
555 + replaceLastMessage("bot", errorMessage);
843 556 }
844 557 });
845 558 }
846 -
847 -function callMxChatStream(message, callback, botId) {
848 - botId = botId || getMxChatBotId();
849 -
850 - // Store the message in case we need to retry after session reset
851 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', message);
852 -
853 - const currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
854 - if (!isStreamingSupported(currentModel)) {
855 - callMxChat(message, callback, botId);
856 - return;
857 - }
858 -
859 - // Get page context if contextual awareness is enabled
860 - const pageContext = getPageContext();
861 -
862 - // Get instance for session start timestamp (used when persistence is OFF)
863 - var instance = MxChatInstances.get(botId);
864 -
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 - const formData = new FormData();
876 - formData.append('action', 'mxchat_stream_chat');
877 - formData.append('message', message);
878 - formData.append('session_id', streamSessionId);
879 - formData.append('nonce', mxchatChat.nonce);
880 - formData.append('current_page_url', window.location.href);
881 - formData.append('current_page_title', document.title);
882 - formData.append('bot_id', botId);
883 - // Pass session start timestamp so AI context matches what user sees
884 - formData.append('session_start_timestamp', instance.sessionStartTimestamp || 0);
885 -
886 - // Add page context if available
887 - if (pageContext) {
888 - formData.append('page_context', JSON.stringify(pageContext));
889 - }
890 -
891 - // CHECK FOR VISION FLAGS AND ADD THEM
892 - if (window.mxchatVisionProcessed) {
893 - formData.append('vision_processed', 'true');
894 - formData.append('original_user_message', window.mxchatOriginalMessage || message);
895 - formData.append('vision_images_count', window.mxchatVisionImagesCount || '0');
896 - // Clear the flags after use
897 - window.mxchatVisionProcessed = false;
898 - window.mxchatOriginalMessage = null;
899 - window.mxchatVisionImagesCount = 0;
900 - }
901 -
902 - let accumulatedContent = '';
903 - let testingDataReceived = false;
904 - let streamingStarted = false;
905 -
906 - fetch(mxchatChat.ajax_url, {
907 - method: 'POST',
908 - body: formData,
909 - credentials: 'same-origin'
910 - })
911 - .then(response => {
912 - // Store the response for potential fallback handling
913 - const responseClone = response.clone();
914 -
915 - if (!response.ok) {
916 - // Try to get error details from response
917 - return responseClone.json().then(errorData => {
918 - throw { isServerError: true, data: errorData };
919 - }).catch(() => {
920 - throw new Error('Network response was not ok');
921 - });
922 - }
923 -
924 - // Check if response is JSON instead of streaming
925 - const contentType = response.headers.get('content-type');
926 - if (contentType && contentType.includes('application/json')) {
927 - return responseClone.json().then(data => {
928 - // IMMEDIATE CHAT MODE UPDATE for JSON response
929 - if (data.chat_mode) {
930 - updateChatModeIndicator(data.chat_mode, botId);
931 - }
932 -
933 - // Check for testing panel
934 - if (window.mxchatTestPanelInstance && data.testing_data) {
935 - window.mxchatTestPanelInstance.handleTestingData(data.testing_data);
936 - }
937 -
938 - // Handle the JSON response directly
939 - handleNonStreamResponse(data, callback, botId);
940 - return Promise.resolve(); // Prevent further processing
941 - });
942 - }
943 -
944 - // Continue with streaming processing
945 - const reader = response.body.getReader();
946 - const decoder = new TextDecoder();
947 - let buffer = '';
948 -
949 - function processStream() {
950 - reader.read().then(({ done, value }) => {
951 - if (done) {
952 - // If streaming completed but no content was received, try to get response as fallback
953 - if (!streamingStarted || !accumulatedContent) {
954 - // Try to read the response as JSON
955 - responseClone.text().then(text => {
956 - try {
957 - const data = JSON.parse(text);
958 - if (data.text || data.message || data.html) {
959 - handleNonStreamResponse(data, callback, botId);
960 - } else {
961 - // No valid data, fall back to regular call
962 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
963 - callMxChat(message, callback, botId);
964 - }
965 - } catch (e) {
966 - // Could not parse, fall back to regular call
967 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
968 - callMxChat(message, callback, botId);
969 - }
970 - }).catch(() => {
971 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
972 - callMxChat(message, callback, botId);
973 - });
974 - return;
975 - }
976 -
977 - // Re-enable chat input when stream ends with content
978 - enableChatInput(botId);
979 -
980 - if (callback) {
981 - callback(accumulatedContent);
982 - }
983 - return;
984 - }
985 -
986 - buffer += decoder.decode(value, { stream: true });
987 - const lines = buffer.split('\n');
988 - buffer = lines.pop() || '';
989 -
990 - for (const line of lines) {
991 - if (line.startsWith('data: ')) {
992 - const data = line.substring(6);
993 -
994 - if (data === '[DONE]') {
995 - if (!accumulatedContent) {
996 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
997 - callMxChat(message, callback, botId);
998 - return;
999 - }
1000 -
1001 - // Re-enable chat input after streaming completes
1002 - enableChatInput(botId);
1003 -
1004 - if (callback) {
1005 - callback(accumulatedContent);
1006 - }
1007 - return;
1008 - }
1009 -
1010 - try {
1011 - const json = JSON.parse(data);
1012 -
1013 - // IMMEDIATE CHAT MODE UPDATE FOR STREAMING
1014 - if (json.chat_mode) {
1015 - updateChatModeIndicator(json.chat_mode, botId);
1016 - }
1017 -
1018 - // Handle testing data
1019 - if (json.testing_data && !testingDataReceived) {
1020 - if (window.mxchatTestPanelInstance) {
1021 - window.mxchatTestPanelInstance.handleTestingData(json.testing_data);
1022 - testingDataReceived = true;
1023 - }
1024 - }
1025 - // Handle content streaming
1026 - else if (json.content) {
1027 - streamingStarted = true;
1028 - accumulatedContent += json.content;
1029 - updateStreamingMessage(accumulatedContent, botId);
1030 - }
1031 - // Handle complete response in stream (fallback response)
1032 - else if (json.text || json.message || json.html) {
1033 - handleNonStreamResponse(json, callback, botId);
1034 - return;
1035 - }
1036 - // Handle errors
1037 - else if (json.error) {
1038 -
1039 - // Get error message from various possible fields
1040 - let errorMessage = json.error_message || json.message || json.text ||
1041 - (typeof json.error === 'string' ? json.error : 'An error occurred. Please try again.');
1042 -
1043 - // Re-enable chat input on error
1044 - enableChatInput(botId);
1045 -
1046 - // Display the error directly in the chat
1047 - replaceLastMessage("bot", errorMessage, '', [], botId);
1048 -
1049 - if (callback) {
1050 - callback(errorMessage);
1051 - }
1052 - return;
1053 - }
1054 - } catch (e) {
1055 - // SSE data parsing error - silently continue
1056 - }
1057 - }
1058 - }
1059 -
1060 - processStream();
1061 - }).catch(streamError => {
1062 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1063 - callMxChat(message, callback, botId);
1064 - });
1065 - }
1066 -
1067 - processStream();
1068 - })
1069 - .catch(error => {
1070 - // Check if we have server error data with chat mode
1071 - if (error && error.isServerError && error.data) {
1072 - // Check for chat mode in error data
1073 - if (error.data.chat_mode) {
1074 - updateChatModeIndicator(error.data.chat_mode, botId);
1075 - }
1076 -
1077 - handleNonStreamResponse(error.data, callback, botId);
1078 - } else {
1079 - // Only fall back to regular call if we don't have any response data
1080 - getElement(botId, 'chat-box').find('.bot-message.temporary-message').remove();
1081 - callMxChat(message, callback, botId);
1082 - }
1083 - });
559 +// Sanitize only user input
560 +function sanitizeUserInput(text) {
561 + const div = document.createElement('div');
562 + div.textContent = text;
563 + return div.innerHTML;
1084 564 }
1085 565
1086 -// Helper function to handle non-streaming responses
1087 -function handleNonStreamResponse(data, callback, botId) {
1088 - botId = botId || 'default';
1089 -
1090 - // IMMEDIATE CHAT MODE UPDATE FOR NON-STREAMING RESPONSES
1091 - if (data.chat_mode) {
1092 - updateChatModeIndicator(data.chat_mode, botId);
1093 - }
1094 -
1095 - // Also check in data property if response is wrapped
1096 - if (data.data && data.data.chat_mode) {
1097 - updateChatModeIndicator(data.data.chat_mode, botId);
1098 - }
1099 -
1100 - // NOTE: Don't remove temporary message here - let replaceLastMessage handle it
1101 - // This prevents a visual gap between thinking dots disappearing and content appearing
1102 -
1103 - // SECURITY FIX: Check for errors FIRST
1104 - if (data.success === false || (data.data && data.data.error_message)) {
1105 - let errorMessage = "";
1106 - let errorCode = "";
1107 -
1108 - // Check various possible error locations
1109 - if (data.data && data.data.error_message) {
1110 - errorMessage = data.data.error_message;
1111 - errorCode = data.data.error_code || "";
1112 - } else if (data.error_message) {
1113 - errorMessage = data.error_message;
1114 - errorCode = data.error_code || "";
1115 - } else if (data.message) {
1116 - errorMessage = data.message;
1117 - } else if (typeof data.data === 'string') {
1118 - errorMessage = data.data;
1119 - } else {
1120 - errorMessage = "An error occurred. Please try again or contact support.";
1121 - }
1122 -
1123 - // Handle session reset action (IP changed, session expired, etc.)
1124 - // Silent reset — keep chat UI intact, just get a new session and retry
1125 - if (data.data && data.data.action === 'reset_session') {
1126 - MxChatInstances.silentResetSession(botId);
1127 - // Re-send the original message with the new session (user message is already displayed)
1128 - var originalMessage = getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message');
1129 - if (originalMessage) {
1130 - getElement(botId, 'mxchat-chatbot-wrapper').find('.mxchat-input-holder textarea').data('pending-message', null);
1131 - var currentModel = mxchatChat.model || 'gpt-5.1-chat-latest';
1132 - if (shouldUseStreaming(currentModel)) {
1133 - callMxChatStream(originalMessage, callback, botId);
1134 - } else {
1135 - callMxChat(originalMessage, callback, botId);
1136 - }
1137 - }
1138 - return;
1139 - }
1140 -
1141 - // Format user-friendly error message
1142 - let displayMessage = errorMessage;
1143 - if (mxchatChat.is_admin) {
1144 - displayMessage = errorMessage + (errorCode ? " (Error code: " + errorCode + ")" : "");
1145 - }
1146 -
1147 - replaceLastMessage("bot", displayMessage, '', [], botId);
1148 -
1149 - if (callback) {
1150 - callback('');
1151 - }
1152 - return; // Exit early for errors
1153 - }
1154 -
1155 - // Check for live agent response
1156 - if (data.success && data.data && data.data.status === 'waiting_for_agent') {
1157 - removeThinkingDots(botId);
1158 - // Also remove any leftover bot-message that lost its temporary-message class
1159 - var $chatBox = getElement(botId, 'chat-box');
1160 - $chatBox.find('.bot-message .thinking-dots').closest('.bot-message').remove();
1161 - updateChatModeIndicator('agent', botId);
1162 - enableChatInput(botId);
1163 - if (callback) {
1164 - callback('');
1165 - }
1166 - return;
1167 - }
1168 -
1169 - // Handle different response formats
1170 - if (data.text || data.html || data.message) {
1171 -
1172 - // Apply response hooks
1173 - if (data.text && typeof customMxChatFilter === 'function') {
1174 - data.text = customMxChatFilter(data.text, "response");
1175 - }
1176 - if (data.message && typeof customMxChatFilter === 'function') {
1177 - data.message = customMxChatFilter(data.message, "response");
1178 - }
1179 -
1180 - // Display the response
1181 - if (data.text && data.html) {
1182 - replaceLastMessage("bot", data.text, data.html, [], botId);
1183 - } else if (data.text) {
1184 - replaceLastMessage("bot", data.text, '', [], botId);
1185 - } else if (data.html) {
1186 - replaceLastMessage("bot", "", data.html, [], botId);
1187 - } else if (data.message) {
1188 - replaceLastMessage("bot", data.message, '', [], botId);
1189 - }
1190 - }
1191 -
1192 - // Handle other response properties
1193 - if (data.data && data.data.filename) {
1194 - showActivePdf(data.data.filename, botId);
1195 - var instance = MxChatInstances.get(botId);
1196 - instance.activePdfFile = data.data.filename;
1197 - }
1198 -
1199 - if (data.redirect_url) {
1200 - setTimeout(() => {
1201 - window.location.href = data.redirect_url;
1202 - }, 1500);
1203 - }
1204 -
1205 - // Ensure chat input is re-enabled (safety net for edge cases)
1206 - enableChatInput(botId);
1207 -
1208 - if (callback) {
1209 - callback(data.text || data.message || '');
1210 - }
1211 -}
1212 -
1213 -// Enhanced updateChatModeIndicator function for immediate DOM updates
1214 -function updateChatModeIndicator(mode, botId) {
1215 - botId = botId || 'default';
1216 - const indicator = getElementDOM(botId, 'chat-mode-indicator');
1217 - if (indicator) {
1218 - const oldText = indicator.textContent;
1219 -
1220 - if (mode === 'agent') {
1221 - indicator.textContent = 'Live Agent';
1222 - startPolling(botId);
1223 - } else {
1224 - // Everything else is AI mode
1225 - const customAiText = indicator.getAttribute('data-ai-text') || 'AI Agent';
1226 - indicator.textContent = customAiText;
1227 - stopPolling(botId);
1228 - }
1229 -
1230 - // Force immediate DOM update and reflow
1231 - if (oldText !== indicator.textContent) {
1232 - // Force a reflow to ensure the change is visible immediately
1233 - indicator.style.display = 'none';
1234 - indicator.offsetHeight; // Trigger reflow
1235 - indicator.style.display = '';
1236 -
1237 - // Double-check after a brief moment to ensure the change stuck
1238 - setTimeout(() => {
1239 - if (mode === 'agent' && indicator.textContent !== 'Live Agent') {
1240 - indicator.textContent = 'Live Agent';
1241 - } else if (mode !== 'agent' && indicator.textContent === 'Live Agent') {
1242 - const customAiText = indicator.getAttribute('data-ai-text') || 'AI Agent';
1243 - indicator.textContent = customAiText;
1244 - }
1245 - }, 50);
1246 - }
1247 - }
1248 -}
1249 -
1250 -// Function to update message during streaming
1251 -function updateStreamingMessage(content, botId) {
1252 - botId = botId || 'default';
1253 -
1254 - // ADD RESPONSE HOOK FOR REAL-TIME STREAMING
1255 - if (typeof customMxChatFilter === 'function') {
1256 - content = customMxChatFilter(content, "response");
1257 - }
1258 -
1259 - const formattedContent = linkify(content);
1260 -
1261 - // Find the temporary message in this bot's chat box
1262 - var $chatBox = getElement(botId, 'chat-box');
1263 - const tempMessage = $chatBox.find('.bot-message.temporary-message').last();
1264 -
1265 - if (tempMessage.length) {
1266 - // Update existing message
1267 - tempMessage.html(formattedContent);
1268 - } else {
1269 - // Create new temporary message if it doesn't exist
1270 - appendMessage("bot", content, '', [], true, botId);
1271 - }
1272 -}
1273 -
1274 -function isStreamingSupported(model) {
1275 - if (!model) return false;
1276 -
1277 - const modelPrefix = model.split('-')[0].toLowerCase();
1278 -
1279 - // Support streaming for OpenAI, Claude, Grok, DeepSeek, and OpenRouter models
1280 - const isSupported = modelPrefix === 'gpt' ||
1281 - modelPrefix === 'o1' ||
1282 - modelPrefix === 'claude' ||
1283 - modelPrefix === 'grok' ||
1284 - modelPrefix === 'deepseek' ||
1285 - model === 'openrouter'; // Add this line - check full model name for OpenRouter
1286 -
1287 - return isSupported;
1288 -}
1289 -
1290 -// Update the event handlers to use the correct function names (using event delegation)
1291 -// Use class-based selectors for multi-instance support
1292 -$(document).on('click', '.send-button', function() {
1293 - var botId = getBotIdFromElement(this);
1294 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
1295 - if (!(modeIndicator && modeIndicator.textContent === 'Live Agent')) {
1296 - disableChatInput(botId);
1297 - }
1298 - sendMessage(botId);
1299 -});
1300 -
1301 -// Override enter key handler (using event delegation)
1302 -$(document).on('keypress', '.chat-input', function(e) {
1303 - if (e.which == 13 && !e.shiftKey) {
1304 - e.preventDefault();
1305 - var botId = getBotIdFromElement(this);
1306 - var modeIndicator = getElementDOM(botId, 'chat-mode-indicator');
1307 - if (!(modeIndicator && modeIndicator.textContent === 'Live Agent')) {
1308 - disableChatInput(botId);
1309 - }
1310 - sendMessage(botId);
1311 - }
1312 -});
1313 -
1314 -
1315 -function appendMessage(sender, messageText = '', messageHtml = '', images = [], isTemporary = false, botId = 'default') {
566 +function appendMessage(sender, messageText = '', messageHtml = '', images = [], isTemporary = false) {
1316 567 try {
1317 568 // Determine styles based on sender type
1318 569 let messageClass, bgColor, fontColor;
1319 570
@@ -1334,37 +585,34 @@
1334 585 }
1335 586
1336 587 const messageDiv = $('<div>')
1337 588 .addClass(messageClass)
1338 - .attr('dir', 'auto');
1339 -
1340 - // Only apply inline colors if AI theme is not active (let CSS handle it)
1341 - var skipColors = shouldSkipInlineColors(botId);
1342 - if (skipColors) {
1343 - messageDiv.css({
1344 - 'margin-bottom': '1em'
1345 - });
1346 - } else {
1347 - messageDiv.css({
589 + .attr('dir', 'auto') // Add dir="auto" for automatic text direction
590 + .css({
1348 591 'background': bgColor,
1349 592 'color': fontColor,
1350 593 'margin-bottom': '1em'
1351 594 });
595 +
596 + // Process the message content based on sender
597 + let fullMessage;
598 + if (sender === "user") {
599 + // For user messages, apply linkify after sanitization
600 + fullMessage = linkify(formatBoldText(convertNewlinesToBreaks(formatCodeBlocks(messageText))));
601 + } else {
602 + // For bot/agent messages, preserve HTML
603 + fullMessage = messageText;
1352 604 }
1353 605
1354 - // Process the message content - always run linkify to convert markdown
1355 - // links and format text. linkify() handles existing HTML safely via
1356 - // negative lookaheads that skip URLs already inside <a> tags.
1357 - let fullMessage = linkify(messageText);
1358 -
1359 606 // Add images if provided
1360 607 if (images && images.length > 0) {
1361 - fullMessage += '<div class="image-gallery" dir="auto">';
608 + fullMessage += '<div class="image-gallery" dir="auto">'; // Add dir="auto" to image gallery
1362 609 images.forEach(img => {
610 + // Ensure image URLs and titles are properly escaped
1363 611 const safeTitle = sanitizeUserInput(img.title);
1364 612 const safeUrl = encodeURI(img.image_url);
1365 613 const safeThumbnail = encodeURI(img.thumbnail_url);
1366 -
614 +
1367 615 fullMessage += `
1368 616 <div style="margin-bottom: 10px;">
1369 617 <strong>${safeTitle}</strong><br>
1370 618 <a href="${safeUrl}" target="_blank">
@@ -1376,14 +624,9 @@
1376 624 }
1377 625
1378 626 // Append HTML content if provided
1379 627 if (messageHtml && sender !== "user") {
1380 - // Only add line breaks if there's actual text content before the HTML
1381 - if (fullMessage && fullMessage.trim()) {
1382 - fullMessage += '<br><br>' + messageHtml;
1383 - } else {
1384 - fullMessage = messageHtml;
1385 - }
628 + fullMessage += '<br><br>' + messageHtml;
1386 629 }
1387 630
1388 631 messageDiv.html(fullMessage);
1389 632
@@ -1390,94 +633,29 @@
1390 633 if (isTemporary) {
1391 634 messageDiv.addClass('temporary-message');
1392 635 }
1393 636
1394 - // Append to the correct chatbot instance's chat-box
1395 - var $chatBox = getElement(botId, 'chat-box');
1396 - messageDiv.hide().appendTo($chatBox).fadeIn(300, function() {
1397 - // FIXED: Use event delegation for link tracking
1398 - if (sender === "bot" || sender === "agent") {
1399 - attachLinkTracking(messageDiv, messageText, botId);
1400 - }
1401 -
637 + messageDiv.hide().appendTo('#chat-box').fadeIn(300, function() {
1402 638 if (sender === "bot") {
1403 - const lastUserMessage = $chatBox.find('.user-message').last();
639 + const lastUserMessage = $('#chat-box').find('.user-message').last();
1404 640 if (lastUserMessage.length) {
1405 - scrollElementToTop(lastUserMessage, botId);
641 + scrollElementToTop(lastUserMessage);
1406 642 }
1407 643 }
1408 644 });
1409 645
1410 646 if (messageText.id) {
1411 - var instance = MxChatInstances.get(botId);
1412 - instance.lastSeenMessageId = messageText.id;
1413 - hideNotification(botId);
647 + lastSeenMessageId = messageText.id;
648 + hideNotification();
1414 649 }
1415 650 } catch (error) {
1416 - // Error rendering message - silently continue
651 + console.error("Error rendering message:", error);
1417 652 }
1418 653 }
1419 654
1420 -// Helper function to attach link tracking with proper event handling
1421 -function attachLinkTracking(messageDiv, messageText, botId) {
1422 - botId = botId || 'default';
1423 - // Use a slight delay to ensure DOM is ready
1424 - setTimeout(function() {
1425 - const links = messageDiv.find('a[href]').not('[data-tracked]');
1426 -
1427 - links.each(function() {
1428 - const $link = $(this);
1429 - const originalHref = $link.attr('href');
1430 -
1431 - // Mark as tracked to avoid duplicate handlers
1432 - $link.attr('data-tracked', 'true');
1433 -
1434 - // Only track external URLs
1435 - if (originalHref && (originalHref.startsWith('http://') || originalHref.startsWith('https://'))) {
1436 - // Remove any existing click handlers first
1437 - $link.off('click.tracking');
1438 -
1439 - // Add new click handler with namespace
1440 - $link.on('click.tracking', function(e) {
1441 - e.preventDefault();
1442 - e.stopPropagation();
1443 -
1444 - const messageContext = typeof messageText === 'string'
1445 - ? messageText.substring(0, 200)
1446 - : '';
1447 -
1448 - // Track the click
1449 - $.ajax({
1450 - url: mxchatChat.ajax_url,
1451 - type: 'POST',
1452 - data: {
1453 - action: 'mxchat_track_url_click',
1454 - session_id: getChatSession(botId),
1455 - url: originalHref,
1456 - message_context: messageContext,
1457 - nonce: mxchatChat.nonce
1458 - },
1459 - complete: function() {
1460 - // Always redirect, even if tracking fails
1461 - if ($link.attr('target') === '_blank' || linkTarget === '_blank') {
1462 - window.open(originalHref, '_blank');
1463 - } else {
1464 - window.location.href = originalHref;
1465 - }
1466 - }
1467 - });
1468 -
1469 - return false; // Extra insurance to prevent default
1470 - });
1471 - }
1472 - });
1473 - }, 100); // Small delay to ensure DOM is ready
1474 -}
1475 -
1476 -function replaceLastMessage(sender, responseText, responseHtml = '', images = [], botId = 'default') {
655 +function replaceLastMessage(sender, responseText, responseHtml = '', images = []) {
1477 656 var messageClass = sender === "user" ? "user-message" : sender === "agent" ? "agent-message" : "bot-message";
1478 - var $chatBox = getElement(botId, 'chat-box');
1479 - var lastMessageDiv = $chatBox.find('.bot-message.temporary-message, .agent-message.temporary-message').last();
657 + var lastMessageDiv = $('#chat-box').find('.bot-message.temporary-message, .agent-message.temporary-message').last();
1480 658
1481 659 // Determine styles
1482 660 let bgColor, fontColor;
1483 661 if (sender === "user") {
@@ -1490,24 +668,15 @@
1490 668 bgColor = botMessageBgColor;
1491 669 fontColor = botMessageFontColor;
1492 670 }
1493 671
1494 - // Always run linkify to convert markdown links and format text.
1495 - // linkify() already handles existing HTML (its URL patterns use negative lookaheads
1496 - // to avoid double-processing URLs that are already inside <a> tags).
1497 - var fullMessage = linkify(responseText);
1498 -
672 + var fullMessage = linkify(formatBoldText(convertNewlinesToBreaks(formatCodeBlocks(responseText))));
1499 673 if (responseHtml) {
1500 - // Only add line breaks if there's actual text content before the HTML
1501 - if (fullMessage && fullMessage.trim()) {
1502 - fullMessage += '<br><br>' + responseHtml;
1503 - } else {
1504 - fullMessage = responseHtml;
1505 - }
674 + fullMessage += '<br><br>' + responseHtml;
1506 675 }
1507 676
1508 677 if (images.length > 0) {
1509 - fullMessage += '<div class="image-gallery" dir="auto">';
678 + fullMessage += '<div class="image-gallery" dir="auto">'; // Add dir="auto" to image gallery
1510 679 images.forEach(img => {
1511 680 fullMessage += `
1512 681 <div style="margin-bottom: 10px;">
1513 682 <strong>${img.title}</strong><br>
@@ -1519,667 +688,59 @@
1519 688 fullMessage += '</div>';
1520 689 }
1521 690
1522 691 if (lastMessageDiv.length) {
1523 - // Replace content immediately to prevent visual gap between thinking dots and response
1524 - lastMessageDiv
1525 - .html(fullMessage)
1526 - .removeClass('bot-message user-message temporary-message')
1527 - .addClass(messageClass)
1528 - .attr('dir', 'auto');
1529 -
1530 - // Only apply inline colors if AI theme is not active (let CSS handle it)
1531 - var skipColors = mxchatChat.skip_inline_colors || shouldSkipInlineColors(botId);
1532 - if (!skipColors) {
1533 - lastMessageDiv.css({
1534 - 'background-color': bgColor,
1535 - 'color': fontColor,
1536 - });
1537 - }
1538 -
1539 - // Handle link tracking and scroll
1540 - if (sender === "bot" || sender === "agent") {
1541 - attachLinkTracking(lastMessageDiv, responseText, botId);
1542 -
1543 - const lastUserMessage = $chatBox.find('.user-message').last();
1544 - if (lastUserMessage.length) {
1545 - scrollElementToTop(lastUserMessage, botId);
1546 - }
1547 - // Show notification if chat is hidden
1548 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
1549 - if ($floatingChatbot.hasClass('hidden')) {
1550 - showNotification(botId);
1551 - }
1552 - }
1553 -
1554 - // Re-enable chat input after response is displayed
1555 - enableChatInput(botId);
692 + lastMessageDiv.fadeOut(200, function() {
693 + $(this)
694 + .html(fullMessage)
695 + .removeClass('bot-message user-message')
696 + .addClass(messageClass)
697 + .attr('dir', 'auto') // Add dir="auto" for automatic text direction
698 + .css({
699 + 'background-color': bgColor,
700 + 'color': fontColor,
701 + })
702 + .removeClass('temporary-message')
703 + .fadeIn(200, function() {
704 + if (sender === "bot" || sender === "agent") {
705 + const lastUserMessage = $('#chat-box').find('.user-message').last();
706 + if (lastUserMessage.length) {
707 + scrollElementToTop(lastUserMessage);
708 + }
709 + // Show notification if chat is hidden
710 + if ($('#floating-chatbot').hasClass('hidden')) {
711 + showNotification();
712 + }
713 + }
714 + });
715 + });
1556 716 } else {
1557 - appendMessage(sender, responseText, responseHtml, images, false, botId);
1558 - // Re-enable chat input after response is displayed
1559 - enableChatInput(botId);
717 + appendMessage(sender, responseText, responseHtml, images);
1560 718 }
1561 719 }
1562 720
1563 721
1564 - function appendThinkingMessage(botId) {
1565 - botId = botId || 'default';
1566 722
1567 - // Don't show thinking dots in live agent mode - message is just forwarded to a human
1568 - var indicator = getElementDOM(botId, 'chat-mode-indicator');
1569 - if (indicator && indicator.textContent === 'Live Agent') {
1570 - return;
1571 - }
1572 -
1573 - var $chatBox = getElement(botId, 'chat-box');
1574 -
1575 - // Remove any existing thinking dots in this bot's chat first
1576 - $chatBox.find('.thinking-dots').remove();
1577 -
1578 - // Check if we should skip inline colors (AI theme is active)
1579 - var skipColors = shouldSkipInlineColors(botId);
1580 -
1581 - // Retrieve the bot message font color and background color
1582 - var botMessageFontColor = mxchatChat.bot_message_font_color;
1583 - var botMessageBgColor = mxchatChat.bot_message_bg_color;
1584 -
1585 - // Build thinking dots HTML - skip inline colors if AI theme is active
1586 - var dotStyle = skipColors ? '' : ' style="background-color: ' + botMessageFontColor + ';"';
1587 - var thinkingHtml = '<div class="thinking-dots-container">' +
1588 - '<div class="thinking-dots">' +
1589 - '<span class="dot"' + dotStyle + '></span>' +
1590 - '<span class="dot"' + dotStyle + '></span>' +
1591 - '<span class="dot"' + dotStyle + '></span>' +
1592 - '</div>' +
1593 - '</div>';
1594 -
1595 - // Append the thinking dots to this bot's chat container - skip inline colors if AI theme is active
1596 - var messageStyle = skipColors ? '' : ' style="background-color: ' + botMessageBgColor + '; color: ' + botMessageFontColor + ';"';
1597 - $chatBox.append('<div class="bot-message temporary-message"' + messageStyle + '>' + thinkingHtml + '</div>');
1598 - scrollToBottom(botId);
1599 - }
1600 -
1601 - function removeThinkingDots(botId) {
1602 - botId = botId || 'default';
1603 - var $chatBox = getElement(botId, 'chat-box');
1604 - // Remove by temporary-message class first, then fall back to any bot-message containing thinking dots
1605 - $chatBox.find('.thinking-dots').closest('.temporary-message').remove();
1606 - $chatBox.find('.bot-message .thinking-dots').closest('.bot-message').remove();
1607 - }
1608 -
1609 - // ====================================
1610 - // TEXT FORMATTING & PROCESSING
1611 - // ====================================
1612 -
1613 - function linkify(inputText) {
1614 - if (!inputText) {
1615 - return '';
1616 - }
1617 -
1618 - // Helper function to check if URL is already encoded
1619 - function isUrlEncoded(url) {
1620 - // Check for % followed by exactly 2 hex digits
1621 - return /%[0-9a-fA-F]{2}/.test(url);
1622 - }
1623 -
1624 - // Helper function to safely encode URLs only if needed
1625 - function safeEncodeUrl(url) {
1626 - // If URL already contains encoded characters, return as-is
1627 - if (isUrlEncoded(url)) {
1628 - return url;
1629 - }
1630 - // Otherwise, encode it
1631 - return encodeURI(url);
1632 - }
1633 -
1634 - // Process markdown headers FIRST
1635 - let processedText = formatMarkdownHeaders(inputText);
1636 -
1637 - // Process text styling (bold, italic, strikethrough)
1638 - processedText = formatTextStyling(processedText);
1639 -
1640 - // Process code blocks BEFORE processing links
1641 - processedText = formatCodeBlocks(processedText);
1642 -
1643 - // Process markdown tables BEFORE converting newlines to paragraphs
1644 - processedText = formatMarkdownTables(processedText);
1645 -
1646 - // NOW convert to paragraphs
1647 - processedText = convertNewlinesToBreaks(processedText);
1648 -
1649 - // IMPORTANT: Handle citation-style brackets FIRST [URL]
1650 - // This prevents them from being processed as markdown links
1651 - // Match [URL] where URL is a complete URL in square brackets (common in AI citations)
1652 - processedText = processedText.replace(/\[(https?:\/\/[^\]]+)\]/g, (match, url) => {
1653 - // Clean the URL of any trailing punctuation
1654 - let cleanUrl = url.replace(/[.,;!?]+$/, '');
1655 - const safeUrl = safeEncodeUrl(cleanUrl);
1656 - // Return as a proper link without the brackets
1657 - return `<a href="${safeUrl}" target="${linkTarget}">${cleanUrl}</a>`;
1658 - });
1659 -
1660 - // Process markdown links: [text](url) and [](url)
1661 - // Uses balanced parenthesis matching to handle URLs containing parens
1662 - // (e.g. PDF filenames with dates like (2025-08-28).pdf)
1663 - processedText = (function(input) {
1664 - var result = '';
1665 - var i = 0;
1666 - while (i < input.length) {
1667 - // Look for [ at current position
1668 - if (input[i] === '[') {
1669 - // Find closing ]
1670 - var closeBracket = input.indexOf(']', i + 1);
1671 - if (closeBracket === -1 || closeBracket + 1 >= input.length || input[closeBracket + 1] !== '(') {
1672 - result += input[i];
1673 - i++;
1674 - continue;
1675 - }
1676 - var linkText = input.substring(i + 1, closeBracket);
1677 - // Check if URL starts with http
1678 - var urlStart = closeBracket + 2;
1679 - if (!input.substring(urlStart).match(/^https?:\/\//)) {
1680 - result += input[i];
1681 - i++;
1682 - continue;
1683 - }
1684 - // Find balanced closing paren
1685 - var depth = 1;
1686 - var j = urlStart;
1687 - while (j < input.length && depth > 0) {
1688 - if (input[j] === '(') depth++;
1689 - else if (input[j] === ')') depth--;
1690 - if (depth > 0) j++;
1691 - }
1692 - if (depth !== 0) {
1693 - result += input[i];
1694 - i++;
1695 - continue;
1696 - }
1697 - var url = input.substring(urlStart, j);
1698 - var cleanUrl = url.replace(/[\].,;!?]+$/, '');
1699 - var encodedUrl = safeEncodeUrl(cleanUrl);
1700 - if (!linkText || !linkText.trim()) {
1701 - result += '<a href="' + encodedUrl + '" target="' + linkTarget + '">' + cleanUrl + '</a>';
1702 - } else {
1703 - var safeText = sanitizeUserInput(linkText);
1704 - result += '<a href="' + encodedUrl + '" target="' + linkTarget + '">' + safeText + '</a>';
1705 - }
1706 - i = j + 1; // Skip past the closing )
1707 - } else {
1708 - result += input[i];
1709 - i++;
1710 - }
1711 - }
1712 - return result;
1713 - })(processedText);
1714 -
1715 - // Process phone numbers: [text](tel:number)
1716 - const phonePattern = /\[([^\]]+)\]\((tel:[\d+\-\s()]+)\)/g;
1717 - processedText = processedText.replace(phonePattern, (match, text, phone) => {
1718 - const safePhone = safeEncodeUrl(phone);
1719 - const safeText = sanitizeUserInput(text);
1720 - return `<a href="${safePhone}">${safeText}</a>`;
1721 - });
1722 -
1723 - // Process mailto links: [text](mailto:email)
1724 - const mailtoPattern = /\[([^\]]+)\]\((mailto:[^\)]+)\)/g;
1725 - processedText = processedText.replace(mailtoPattern, (match, text, mailto) => {
1726 - const safeMailto = safeEncodeUrl(mailto);
1727 - const safeText = sanitizeUserInput(text);
1728 - return `<a href="${safeMailto}">${safeText}</a>`;
1729 - });
1730 -
1731 - // Process standalone URLs - but NOT if they're already in <a> tags or brackets
1732 - // Updated pattern to be more careful about what it matches
1733 - const urlPattern = /(^|[^">=\[\]])(https?:\/\/[^\s<"\[\]]+)(?![^<]*<\/a>)(?!\])/gim;
1734 - processedText = processedText.replace(urlPattern, (match, prefix, url) => {
1735 - // Extra check: make sure this isn't already linked
1736 - if (match.includes('href=') || match.includes('</a>')) {
1737 - return match;
1738 - }
1739 -
1740 - // Clean trailing punctuation
1741 - let cleanUrl = url.replace(/[.,;!?)]+$/, '');
1742 - const safeUrl = safeEncodeUrl(cleanUrl);
1743 - return `${prefix}<a href="${safeUrl}" target="${linkTarget}">${cleanUrl}</a>`;
1744 - });
1745 -
1746 - // Process www. URLs - but NOT if they're already in <a> tags or brackets
1747 - const wwwPattern = /(^|[^">/\[\]])(www\.[\S]+)(?![^<]*<\/a>)(?!\])/gim;
1748 - processedText = processedText.replace(wwwPattern, (match, prefix, url) => {
1749 - // Extra check: make sure this isn't already linked
1750 - if (match.includes('href=') || match.includes('</a>')) {
1751 - return match;
1752 - }
1753 -
1754 - // Clean trailing punctuation
1755 - let cleanUrl = url.replace(/[.,;!?)]+$/, '');
1756 - const safeUrl = safeEncodeUrl(`http://${cleanUrl}`);
1757 - return `${prefix}<a href="${safeUrl}" target="${linkTarget}">${cleanUrl}</a>`;
1758 - });
1759 -
1760 - return processedText;
723 +function startPolling() {
724 + // Clear any existing interval first
725 + stopPolling();
726 + // Start new polling interval
727 + pollingInterval = setInterval(checkForAgentMessages, 5000);
728 + //console.log("Started agent message polling");
1761 729 }
1762 -
1763 - function formatMarkdownHeaders(text) {
1764 - // Handle h1 to h6 headers
1765 - return text.replace(/^(#{1,6})\s+(.+)$/gm, function(match, hashes, content) {
1766 - const level = hashes.length;
1767 - return `<h${level} class="chat-heading chat-heading-${level}">${content.trim()}</h${level}>`;
1768 - });
1769 - }
1770 -
1771 -function formatTextStyling(text) {
1772 - // IMPORTANT: Protect BOTH HTML href and Markdown URLs from formatting
1773 - const protectedSegments = [];
1774 - let protectedText = text;
1775 -
1776 - // Step 1a: Protect HTML href="..." attributes
1777 - protectedText = protectedText.replace(/href\s*=\s*["']([^"']+)["']/gi, function(match) {
1778 - const placeholder = `__PROTECTED_${protectedSegments.length}__`;
1779 - protectedSegments.push(match);
1780 - return placeholder;
1781 - });
1782 -
1783 - // Step 1b: Protect Markdown links [text](url)
1784 - // This is crucial - we need to protect the URLs in markdown format
1785 - protectedText = protectedText.replace(/\[([^\]]*)\]\(([^)]+)\)/g, function(match) {
1786 - const placeholder = `__PROTECTED_${protectedSegments.length}__`;
1787 - protectedSegments.push(match);
1788 - return placeholder;
1789 - });
1790 -
1791 - // Step 1c: Also protect bare URLs that might exist
1792 - protectedText = protectedText.replace(/(https?:\/\/[^\s<>"]+)/gi, function(match) {
1793 - const placeholder = `__PROTECTED_${protectedSegments.length}__`;
1794 - protectedSegments.push(match);
1795 - return placeholder;
1796 - });
1797 -
1798 - // Step 2: Now apply text styling to the protected text
1799 - // Handle bold text (**text**)
1800 - protectedText = protectedText.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
1801 730
1802 - // Handle italic text (*text* or _text_) - Safari-compatible (no lookbehind)
1803 - // Match single asterisks that aren't part of bold (**) by checking they're not followed/preceded by another *
1804 - protectedText = protectedText.replace(/(?!\*\*)\*([^*\n]+)\*(?!\*)/g, '<em>$1</em>');
1805 -
1806 - // Handle underscores for italic - Safari-compatible (no lookbehind)
1807 - // Exclude __PROTECTED_N__ placeholders by checking the content doesn't contain PROTECTED
1808 - protectedText = protectedText.replace(/(?!__)_((?!PROTECTED)[^_\n]+)_(?!_)/g, '<em>$1</em>');
1809 -
1810 - // Handle strikethrough (~~text~~)
1811 - protectedText = protectedText.replace(/~~(.*?)~~/g, '<del>$1</del>');
1812 -
1813 - // Step 3: Restore all protected segments
1814 - protectedSegments.forEach((original, index) => {
1815 - const placeholder = `__PROTECTED_${index}__`;
1816 - protectedText = protectedText.replace(placeholder, original);
1817 - });
1818 -
1819 - return protectedText;
1820 -}
1821 - function formatBoldText(text) {
1822 - // This function is kept for compatibility but now uses formatTextStyling
1823 - return formatTextStyling(text);
731 +function stopPolling() {
732 + if (pollingInterval) {
733 + clearInterval(pollingInterval);
734 + pollingInterval = null;
735 + //console.log("Stopped agent message polling");
1824 736 }
1825 -
1826 -function convertNewlinesToBreaks(text) {
1827 - // Split the text into paragraphs (marked by double newlines or multiple <br> tags)
1828 - const paragraphs = text.split(/(?:\n\n|\<br\>\s*\<br\>)/g);
1829 -
1830 - // Filter out empty paragraphs and wrap each paragraph in <p> tags
1831 - return paragraphs
1832 - .map(para => para.trim())
1833 - .filter(para => para.length > 0) // Remove empty paragraphs
1834 - .map(para => `<p>${para}</p>`)
1835 - .join('');
1836 737 }
1837 - function formatCodeBlocks(text) {
1838 - // Handle fenced code blocks with language specification (```language)
1839 - text = text.replace(/```(\w+)?\n?([\s\S]*?)```/g, (match, language, code) => {
1840 - const lang = language || 'text';
1841 - const escapedCode = escapeHtml(code.trim());
1842 - return `<div class="mxchat-code-block-container">
1843 - <div class="mxchat-code-header">
1844 - <span class="mxchat-code-language">${lang}</span>
1845 - <button class="mxchat-copy-button" aria-label="Copy to clipboard">Copy</button>
1846 - </div>
1847 - <pre class="mxchat-code-block"><code class="language-${lang}">${escapedCode}</code></pre>
1848 - </div>`;
1849 - });
1850 738
1851 - // Handle inline code with single backticks
1852 - text = text.replace(/`([^`\n]+)`/g, '<code class="mxchat-inline-code">$1</code>');
1853 739
1854 - // Handle raw PHP tags (legacy support)
1855 - text = text.replace(/(<\?php[\s\S]*?\?>)/g, (match) => {
1856 - const escapedCode = escapeHtml(match);
1857 - return `<div class="mxchat-code-block-container">
1858 - <div class="mxchat-code-header">
1859 - <span class="mxchat-code-language">php</span>
1860 - <button class="mxchat-copy-button" aria-label="Copy to clipboard">Copy</button>
1861 - </div>
1862 - <pre class="mxchat-code-block"><code class="language-php">${escapedCode}</code></pre>
1863 - </div>`;
1864 - });
1865 -
1866 - return text;
1867 - }
1868 -
1869 - function formatMarkdownTables(text) {
1870 - var lines = text.split('\n');
1871 - var result = [];
1872 - var i = 0;
1873 -
1874 - while (i < lines.length) {
1875 - // Check for a table: current line has pipes AND next line is a separator row
1876 - if (i + 1 < lines.length &&
1877 - lines[i].indexOf('|') !== -1 &&
1878 - /^\s*\|?[\s\-:]+(\|[\s\-:]+)+\|?\s*$/.test(lines[i + 1])) {
1879 -
1880 - var tableLines = [];
1881 - var headerLine = lines[i];
1882 - var separatorLine = lines[i + 1];
1883 - tableLines.push(headerLine);
1884 - tableLines.push(separatorLine);
1885 -
1886 - // Collect remaining table rows
1887 - var j = i + 2;
1888 - while (j < lines.length && lines[j].indexOf('|') !== -1 && lines[j].trim() !== '') {
1889 - tableLines.push(lines[j]);
1890 - j++;
1891 - }
1892 -
1893 - // Parse alignment from separator row
1894 - var sepCells = separatorLine.split('|').filter(function(c) { return c.trim() !== ''; });
1895 - var alignments = sepCells.map(function(cell) {
1896 - var trimmed = cell.trim();
1897 - if (trimmed.charAt(0) === ':' && trimmed.charAt(trimmed.length - 1) === ':') return 'center';
1898 - if (trimmed.charAt(trimmed.length - 1) === ':') return 'right';
1899 - return 'left';
1900 - });
1901 -
1902 - // Build HTML table
1903 - var html = '<div class="mxchat-table-wrapper"><table class="mxchat-table">';
1904 -
1905 - // Header row
1906 - var headerCells = tableLines[0].split('|').filter(function(c) { return c.trim() !== ''; });
1907 - html += '<thead><tr>';
1908 - headerCells.forEach(function(cell, idx) {
1909 - var align = alignments[idx] || 'left';
1910 - html += '<th style="text-align:' + align + '">' + cell.trim() + '</th>';
1911 - });
1912 - html += '</tr></thead>';
1913 -
1914 - // Body rows
1915 - html += '<tbody>';
1916 - for (var r = 2; r < tableLines.length; r++) {
1917 - var rowCells = tableLines[r].split('|').filter(function(c) { return c.trim() !== ''; });
1918 - html += '<tr>';
1919 - rowCells.forEach(function(cell, idx) {
1920 - var align = alignments[idx] || 'left';
1921 - html += '<td style="text-align:' + align + '">' + cell.trim() + '</td>';
1922 - });
1923 - html += '</tr>';
1924 - }
1925 - html += '</tbody></table></div>';
1926 -
1927 - result.push(html);
1928 - i = j;
1929 - } else {
1930 - result.push(lines[i]);
1931 - i++;
1932 - }
1933 - }
1934 -
1935 - return result.join('\n');
1936 - }
1937 -
1938 - function sanitizeUserInput(text) {
1939 - const div = document.createElement('div');
1940 - div.textContent = text;
1941 - return div.innerHTML;
1942 - }
1943 -
1944 - function escapeHtml(unsafe) {
1945 - // Skip escaping if it's already escaped or contains HTML code block markup
1946 - if (unsafe.includes('&lt;') || unsafe.includes('&gt;') ||
1947 - unsafe.includes('<pre><code') || unsafe.includes('</code></pre>')) {
1948 - return unsafe;
1949 - }
1950 -
1951 - return unsafe
1952 - .replace(/&/g, "&amp;")
1953 - .replace(/</g, "&lt;")
1954 - .replace(/>/g, "&gt;")
1955 - .replace(/"/g, "&quot;")
1956 - .replace(/'/g, "&#039;");
1957 - }
1958 -
1959 - function decodeHTMLEntities(text) {
1960 - var textArea = document.createElement('textarea');
1961 - textArea.innerHTML = text;
1962 - return textArea.value;
1963 - }
1964 -
1965 - // ====================================
1966 - // UI & SCROLLING CONTROLS
1967 - // ====================================
1968 -
1969 - function scrollToBottom(botIdOrInstant, instant) {
1970 - // Handle backward compatibility: scrollToBottom() or scrollToBottom(true/false)
1971 - var botId = 'default';
1972 - if (typeof botIdOrInstant === 'string') {
1973 - botId = botIdOrInstant;
1974 - instant = instant || false;
1975 - } else if (typeof botIdOrInstant === 'boolean') {
1976 - instant = botIdOrInstant;
1977 - } else {
1978 - instant = false;
1979 - }
1980 -
1981 - var chatBox = getElement(botId, 'chat-box');
1982 - if (instant) {
1983 - // Instantly set the scroll position to the bottom
1984 - chatBox.scrollTop(chatBox.prop("scrollHeight"));
1985 - } else {
1986 - // Use requestAnimationFrame for smoother scrolling if needed
1987 - let start = null;
1988 - const scrollHeight = chatBox.prop("scrollHeight");
1989 - const initialScroll = chatBox.scrollTop();
1990 - const distance = scrollHeight - initialScroll;
1991 - const duration = 500; // Duration in ms
1992 -
1993 - function smoothScroll(timestamp) {
1994 - if (!start) start = timestamp;
1995 - const progress = timestamp - start;
1996 - const currentScroll = initialScroll + (distance * (progress / duration));
1997 - chatBox.scrollTop(currentScroll);
1998 -
1999 - if (progress < duration) {
2000 - requestAnimationFrame(smoothScroll);
2001 - } else {
2002 - chatBox.scrollTop(scrollHeight); // Ensure it's exactly at the bottom
2003 - }
2004 - }
2005 -
2006 - requestAnimationFrame(smoothScroll);
2007 - }
2008 - }
2009 -
2010 - function scrollElementToTop(element, botId) {
2011 - botId = botId || 'default';
2012 - var chatBox = getElement(botId, 'chat-box');
2013 - var elementTop = element.position().top + chatBox.scrollTop();
2014 - chatBox.animate({ scrollTop: elementTop }, 500);
2015 - }
2016 -
2017 - function showChatWidget(botId) {
2018 - botId = botId || 'default';
2019 - var $button = getElement(botId, 'floating-chatbot-button');
2020 - // First ensure display is set
2021 - $button.css('display', 'flex');
2022 - // Then handle the fade
2023 - $button.fadeTo(500, 1);
2024 - // Force visibility
2025 - $button.removeClass('hidden');
2026 - }
2027 -
2028 - function hideChatWidget(botId) {
2029 - botId = botId || 'default';
2030 - var $button = getElement(botId, 'floating-chatbot-button');
2031 - $button.css('display', 'none');
2032 - $button.addClass('hidden');
2033 - }
2034 -
2035 - function disableScroll() {
2036 - if (isMobile()) {
2037 - $('body').css('overflow', 'hidden');
2038 - }
2039 - }
2040 -
2041 - function enableScroll() {
2042 - if (isMobile()) {
2043 - $('body').css('overflow', '');
2044 - }
2045 - }
2046 -
2047 - function isMobile() {
2048 - // This can be a simple check, or more sophisticated detection of mobile devices
2049 - return window.innerWidth <= 768; // Example threshold for mobile devices
2050 - }
2051 -
2052 - function setFullHeight() {
2053 - var vh = $(window).innerHeight() * 0.01;
2054 - $(':root').css('--vh', vh + 'px');
2055 - }
2056 -
2057 -
2058 - // ====================================
2059 - // NOTIFICATION SYSTEM
2060 - // ====================================
2061 -
2062 - function createNotificationBadge() {
2063 - const chatButton = document.getElementById('floating-chatbot-button');
2064 -
2065 - if (!chatButton) return;
2066 -
2067 - // Remove any existing badge first
2068 - const existingBadge = chatButton.querySelector('.chat-notification-badge');
2069 - if (existingBadge) {
2070 - existingBadge.remove();
2071 - }
2072 -
2073 - notificationBadge = document.createElement('div');
2074 - notificationBadge.className = 'chat-notification-badge';
2075 - notificationBadge.style.cssText = `
2076 - display: none;
2077 - position: absolute;
2078 - top: -5px;
2079 - right: -5px;
2080 - background-color: red;
2081 - color: white;
2082 - border-radius: 50%;
2083 - padding: 4px 8px;
2084 - font-size: 12px;
2085 - font-weight: bold;
2086 - z-index: 10001;
2087 - `;
2088 - chatButton.style.position = 'relative';
2089 - chatButton.appendChild(notificationBadge);
2090 -
2091 - }
2092 -
2093 - function showNotification(botId) {
2094 - botId = botId || 'default';
2095 - const badge = getElementDOM(botId, 'chat-notification-badge');
2096 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
2097 - if (badge && $floatingChatbot.hasClass('hidden')) {
2098 - badge.style.display = 'block';
2099 - badge.textContent = '1';
2100 - }
2101 - }
2102 -
2103 - function hideNotification(botId) {
2104 - botId = botId || 'default';
2105 - const badge = getElementDOM(botId, 'chat-notification-badge');
2106 - if (badge) {
2107 - badge.style.display = 'none';
2108 - }
2109 - }
2110 -
2111 - function startNotificationChecking(botId) {
2112 - botId = botId || 'default';
2113 - const chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
2114 - if (!chatPersistenceEnabled) return;
2115 -
2116 - createNotificationBadge(botId);
2117 - var instance = MxChatInstances.get(botId);
2118 - instance.notificationCheckInterval = setInterval(function() {
2119 - checkForNewMessages(botId);
2120 - }, 30000); // Check every 30 seconds
2121 - }
2122 -
2123 - function stopNotificationChecking(botId) {
2124 - botId = botId || 'default';
2125 - var instance = MxChatInstances.get(botId);
2126 - if (instance.notificationCheckInterval) {
2127 - clearInterval(instance.notificationCheckInterval);
2128 - }
2129 - }
2130 -
2131 - function checkForNewMessages() {
2132 - const sessionId = getChatSession();
2133 - const chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
2134 -
2135 - if (!chatPersistenceEnabled) return;
2136 -
2137 - $.ajax({
2138 - url: mxchatChat.ajax_url,
2139 - type: 'POST',
2140 - data: {
2141 - action: 'mxchat_check_new_messages',
2142 - session_id: sessionId,
2143 - last_seen_id: lastSeenMessageId,
2144 - nonce: mxchatChat.nonce
2145 - },
2146 - success: function(response) {
2147 - if (response.success && response.data.hasNewMessages) {
2148 - showNotification();
2149 - }
2150 - }
2151 - });
2152 - }
2153 -
2154 -
2155 -// ====================================
2156 -// LIVE AGENT FUNCTIONALITY
2157 -// ====================================
2158 -
2159 -function startPolling(botId) {
2160 - botId = botId || 'default';
2161 - var instance = MxChatInstances.get(botId);
2162 - // Clear any existing interval first
2163 - stopPolling(botId);
2164 - instance.pollingInterval = setInterval(function() {
2165 - checkForAgentMessages(botId);
2166 - }, 5000);
2167 -}
2168 -
2169 -function stopPolling(botId) {
2170 - botId = botId || 'default';
2171 - var instance = MxChatInstances.get(botId);
2172 - if (instance.pollingInterval) {
2173 - clearInterval(instance.pollingInterval);
2174 - instance.pollingInterval = null;
2175 - }
2176 -}
2177 -
2178 -function checkForAgentMessages(botId) {
2179 - botId = botId || 'default';
2180 - var instance = MxChatInstances.get(botId);
2181 - const sessionId = getChatSession(botId);
740 +// Update your checkForAgentMessages function
741 +function checkForAgentMessages() {
742 + const sessionId = getChatSession();
2182 743 $.ajax({
2183 744 url: mxchatChat.ajax_url,
2184 745 type: 'POST',
2185 746 dataType: 'json',
@@ -2185,73 +746,43 @@
2185 746 dataType: 'json',
2186 747 data: {
2187 748 action: 'mxchat_fetch_new_messages',
2188 749 session_id: sessionId,
2189 - last_seen_id: instance.lastSeenMessageId,
2190 - persistence_enabled: 'true',
750 + last_seen_id: lastSeenMessageId,
2191 751 nonce: mxchatChat.nonce
2192 752 },
2193 753 success: function (response) {
2194 754 if (response.success && response.data?.new_messages) {
2195 755 let hasNewMessage = false;
2196 -
756 +
2197 757 response.data.new_messages.forEach(function (message) {
2198 - if (message.role === "agent" && !instance.processedMessageIds.has(message.id)) {
758 + if (message.role === "agent" && !processedMessageIds.has(message.id)) {
2199 759 hasNewMessage = true;
2200 - appendMessage("agent", message.content, '', [], false, botId);
2201 - instance.lastSeenMessageId = message.id;
2202 - instance.processedMessageIds.add(message.id);
760 + replaceLastMessage("agent", message.content);
761 + lastSeenMessageId = message.id;
762 + processedMessageIds.add(message.id);
2203 763 }
2204 764 });
2205 765
2206 - if (hasNewMessage) {
2207 - enableChatInput(botId);
766 + if (hasNewMessage && $('#floating-chatbot').hasClass('hidden')) {
767 + showNotification();
2208 768 }
2209 -
2210 - var $floatingChatbot = getElement(botId, 'floating-chatbot');
2211 - if (hasNewMessage && $floatingChatbot.hasClass('hidden')) {
2212 - showNotification(botId);
2213 - }
2214 -
2215 - scrollToBottom(botId, true);
769 +
770 + scrollToBottom(true);
2216 771 }
2217 -
2218 - // Handle chat mode transitions (e.g. agent ended chat via !endchat)
2219 - if (response.success && response.data?.chat_mode) {
2220 - updateChatModeIndicator(response.data.chat_mode, botId);
2221 - }
2222 772 },
2223 773 error: function (xhr, status, error) {
2224 - // Polling error - silently continue
774 + console.error("Polling error:", xhr, status, error);
2225 775 }
2226 776 });
2227 777 }
2228 778
2229 - // ====================================
2230 - // CHAT HISTORY & PERSISTENCE
2231 - // ====================================
2232 779
2233 -function loadChatHistory(botId, onComplete) {
2234 - botId = botId || 'default';
2235 - var instance = MxChatInstances.get(botId);
2236 780
2237 - // Prevent duplicate loading
2238 - if (instance.chatHistoryLoaded) {
2239 - if (onComplete) onComplete();
2240 - return;
2241 - }
2242 -
2243 - // Use getChatSession which returns null if no session exists (does NOT create one)
2244 - var sessionId = getChatSession(botId);
781 +function loadChatHistory() {
782 + var sessionId = getChatSession();
2245 783 var chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
2246 784
2247 - // No session yet — nothing to load. History will load after first message via ensureSession.
2248 - if (!sessionId) {
2249 - instance.chatHistoryLoaded = true;
2250 - if (onComplete) onComplete();
2251 - return;
2252 - }
2253 -
2254 785 if (chatPersistenceEnabled && sessionId) {
2255 786 $.ajax({
2256 787 url: mxchatChat.ajax_url,
2257 788 type: 'POST',
@@ -2260,1280 +791,889 @@
2260 791 action: 'mxchat_fetch_conversation_history',
2261 792 session_id: sessionId
2262 793 },
2263 794 success: function(response) {
2264 - // Handle session reset (IP changed while user was away)
2265 - if (response.success === false && response.data && response.data.action === 'reset_session') {
2266 - // Silent reset — new session but don't clear UI
2267 - MxChatInstances.silentResetSession(botId);
2268 - instance.chatHistoryLoaded = true; // Prevent retry loop
2269 - if (onComplete) onComplete();
2270 - return;
2271 - }
795 + if (response.success && response.data && Array.isArray(response.data.conversation)) {
2272 796
2273 - // Check if the response indicates success
2274 - if (response.success) {
2275 - // Handle case where conversation data exists and is an array
2276 - if (response.data && Array.isArray(response.data.conversation)) {
2277 - var $chatBox = getElement(botId, 'chat-box');
2278 - var $fragment = $(document.createDocumentFragment());
2279 - let highestMessageId = instance.lastSeenMessageId;
2280 797
2281 - // Update chat mode if provided
2282 - if (response.data.chat_mode) {
2283 - updateChatModeIndicator(response.data.chat_mode, botId);
2284 - }
798 + var $chatBox = $('#chat-box');
799 + var $fragment = $(document.createDocumentFragment());
800 + let highestMessageId = lastSeenMessageId;
2285 801
2286 - // Only process if there are actual messages
2287 - if (response.data.conversation.length > 0) {
2288 - // IMPORTANT: Clear existing messages before loading history
2289 - $chatBox.empty();
802 + if (response.data.chat_mode) {
803 + updateChatModeIndicator(response.data.chat_mode);
804 + }
2290 805
2291 - $.each(response.data.conversation, function(index, message) {
2292 - // Skip agent messages if persistence is off
2293 - if (!chatPersistenceEnabled && message.role === 'agent') {
2294 - return;
2295 - }
806 + $.each(response.data.conversation, function(index, message) {
807 + // Skip agent messages if persistence is off
808 + if (!chatPersistenceEnabled && message.role === 'agent') {
809 + return;
810 + }
2296 811
2297 - var messageClass, messageBgColor, messageFontColor;
812 + var messageClass, messageBgColor, messageFontColor;
2298 813
2299 - switch (message.role) {
2300 - case 'user':
2301 - messageClass = 'user-message';
2302 - messageBgColor = userMessageBgColor;
2303 - messageFontColor = userMessageFontColor;
2304 - break;
2305 - case 'agent':
2306 - messageClass = 'agent-message';
2307 - messageBgColor = liveAgentMessageBgColor;
2308 - messageFontColor = liveAgentMessageFontColor;
2309 - break;
2310 - default:
2311 - messageClass = 'bot-message';
2312 - messageBgColor = botMessageBgColor;
2313 - messageFontColor = botMessageFontColor;
2314 - break;
2315 - }
814 + switch (message.role) {
815 + case 'user':
816 + messageClass = 'user-message';
817 + messageBgColor = userMessageBgColor;
818 + messageFontColor = userMessageFontColor;
819 + break;
820 + case 'agent':
821 + messageClass = 'agent-message';
822 + messageBgColor = liveAgentMessageBgColor;
823 + messageFontColor = liveAgentMessageFontColor;
824 + break;
825 + default:
826 + messageClass = 'bot-message';
827 + messageBgColor = botMessageBgColor;
828 + messageFontColor = botMessageFontColor;
829 + break;
830 + }
2316 831
2317 - var messageElement = $('<div>').addClass(messageClass)
2318 - .css({
2319 - 'background': messageBgColor,
2320 - 'color': messageFontColor
2321 - });
832 + var messageElement = $('<div>').addClass(messageClass)
833 + .css({
834 + 'background': messageBgColor,
835 + 'color': messageFontColor
836 + });
2322 837
2323 - var content = message.content;
2324 - content = content.replace(/\\'/g, "'").replace(/\\"/g, '"');
2325 - content = decodeHTMLEntities(content);
838 + var content = message.content;
839 + content = content.replace(/\\'/g, "'").replace(/\\"/g, '"');
840 + content = decodeHTMLEntities(content);
2326 841
2327 - // Skip linkify for messages containing structured HTML
2328 - // (forms, product cards, galleries, etc.) to avoid
2329 - // markdown formatting corrupting HTML attributes
2330 - // (e.g. underscores in name="field_name" becoming <em> tags)
2331 - if (content.includes("mxchat-product-card") ||
2332 - content.includes("mxchat-image-gallery") ||
2333 - content.includes("mxchat-featured-products") ||
2334 - content.includes("<form") ||
2335 - content.includes("<input") ||
2336 - content.includes("<select") ||
2337 - content.includes("<textarea")) {
2338 - messageElement.html(content);
2339 - } else {
2340 - var formattedContent = linkify(content);
2341 - messageElement.html(formattedContent);
2342 - }
842 + if (content.includes("mxchat-product-card") || content.includes("mxchat-image-gallery")) {
843 + messageElement.html(content);
844 + } else {
845 + var formattedContent = linkify(
846 + formatBoldText(
847 + convertNewlinesToBreaks(formatCodeBlocks(content))
848 + )
849 + );
850 + messageElement.html(formattedContent);
851 + }
2343 852
2344 - $fragment.append(messageElement);
853 + $fragment.append(messageElement);
2345 854
2346 - // Track message IDs
2347 - if (message.id) {
2348 - highestMessageId = Math.max(highestMessageId, message.id);
2349 - instance.processedMessageIds.add(message.id);
2350 - }
2351 - });
855 + // In loadChatHistory, change this part:
856 + if (message.id) {
857 + highestMessageId = Math.max(highestMessageId, message.id);
858 + processedMessageIds.add(message.id); // Add all message IDs to processed set
859 + }
860 + });
2352 861
2353 - // Only append messages and scroll if we have content
2354 - $chatBox.append($fragment);
2355 - scrollToBottom(botId, true);
862 + $chatBox.append($fragment);
863 + scrollToBottom(true);
2356 864
2357 - // Collapse quick questions if we have conversation history
2358 - // BUT skip auto-collapse for embedded bots (they should stay expanded)
2359 - if (hasQuickQuestions(botId) && !isEmbeddedBot(botId)) {
2360 - collapseQuickQuestions(botId);
2361 - }
865 + if (response.data.conversation.length > 0) {
866 + $('#mxchat-popular-questions').hide();
867 + }
2362 868
2363 - // Update lastSeenMessageId after history loads
2364 - instance.lastSeenMessageId = highestMessageId;
869 + // Update lastSeenMessageId after history loads
870 + lastSeenMessageId = highestMessageId;
2365 871
2366 - // Only update chat mode if persistence is enabled and we have messages
2367 - if (chatPersistenceEnabled) {
2368 - var lastMessage = response.data.conversation[response.data.conversation.length - 1];
2369 - if (lastMessage.role === 'agent') {
2370 - updateChatModeIndicator('agent', botId);
2371 - }
2372 - }
2373 -
2374 - // Mark as loaded ONLY after successful load
2375 - instance.chatHistoryLoaded = true;
872 + // Only update chat mode if persistence is enabled
873 + if (chatPersistenceEnabled && response.data.conversation.length > 0) {
874 + var lastMessage = response.data.conversation[response.data.conversation.length - 1];
875 + if (lastMessage.role === 'agent') {
876 + updateChatModeIndicator('agent');
2376 877 }
2377 878 }
879 + } else {
880 + console.warn("No conversation history found.");
2378 881 }
2379 - if (onComplete) onComplete();
2380 882 },
2381 883 error: function(xhr, status, error) {
2382 - // Error loading chat history - silently continue
2383 - if (onComplete) onComplete();
884 + console.error("Error loading chat history:", status, error);
885 + appendMessage("bot", "Unable to load chat history.");
2384 886 }
2385 887 });
2386 888 } else {
2387 - if (onComplete) onComplete();
889 + console.warn("Chat persistence is disabled or no session ID found. Not loading history.");
2388 890 }
2389 891 }
2390 892
893 +// Function to decode HTML entities
894 +function decodeHTMLEntities(text) {
895 + var textArea = document.createElement('textarea');
896 + textArea.innerHTML = text;
897 + return textArea.value;
898 +}
2391 899
2392 - // ====================================
2393 - // FILE UPLOAD FUNCTIONALITY
2394 - // ====================================
2395 -
2396 - function addSafeEventListener(elementId, eventType, handler) {
2397 - const element = document.getElementById(elementId);
2398 - if (element) {
2399 - element.addEventListener(eventType, handler);
2400 - }
900 +
901 +// Update formatCodeBlocks function
902 +function formatCodeBlocks(text) {
903 + // First handle raw PHP tags
904 + text = text.replace(/(<\?php[\s\S]*?\?>)/g, (match) => {
905 + return `<pre><code class="language-php">${escapeHtml(match)}</code></pre>`;
906 + });
907 +
908 + // Then handle code blocks with backticks
909 + text = text.replace(/```php5?\n([\s\S]+?)```/gi, (match, code) => {
910 + return `<pre><code class="language-php">${escapeHtml(code)}</code></pre>`;
911 + });
912 +
913 + return text;
914 +}
915 +
916 +// Update escapeHtml function to preserve existing code blocks
917 +function escapeHtml(unsafe) {
918 + // First check if it's already a code block
919 + if (unsafe.includes('<pre><code') || unsafe.includes('</code></pre>')) {
920 + return unsafe;
2401 921 }
2402 922
2403 - function showActivePdf(filename, botId) {
2404 - botId = botId || 'default';
2405 - const container = getElementDOM(botId, 'active-pdf-container');
2406 - const nameElement = getElementDOM(botId, 'active-pdf-name');
923 + return unsafe
924 + .replace(/&/g, "&amp;")
925 + .replace(/</g, "&lt;")
926 + .replace(/>/g, "&gt;")
927 + .replace(/"/g, "&quot;")
928 + .replace(/'/g, "&#039;");
929 +}
930 +// Utility function to escape HTML
931 +function escapeHtml(unsafe) {
932 + return unsafe
933 + .replace(/&/g, "&amp;")
934 + .replace(/</g, "&lt;")
935 + .replace(/>/g, "&gt;")
936 + .replace(/"/g, "&quot;")
937 + .replace(/'/g, "&#039;");
938 +}
2407 939
2408 - if (!container || !nameElement) {
2409 - return;
2410 - }
2411 940
2412 - nameElement.textContent = filename;
2413 - container.style.display = 'flex';
2414 - }
2415 941
2416 - function showActiveWord(filename, botId) {
2417 - botId = botId || 'default';
2418 - const container = getElementDOM(botId, 'active-word-container');
2419 - const nameElement = getElementDOM(botId, 'active-word-name');
2420 942
2421 - if (!container || !nameElement) {
2422 - return;
2423 - }
943 +// Function to convert newlines, skipping preformatted text
944 +function convertNewlinesToBreaks(text) {
945 + // Split while preserving code blocks
946 + return text.split(/(<pre\b[^>]*>[\s\S]*?<\/pre>)/g).map(part => {
947 + if (part.startsWith('<pre')) return part;
948 + return part.replace(/(^|[^>])\n/g, '$1<br>');
949 + }).join('');
950 +}
2424 951
2425 - nameElement.textContent = filename;
2426 - container.style.display = 'flex';
2427 - }
2428 952
2429 - function removeActivePdf(botId) {
2430 - botId = botId || 'default';
2431 - var instance = MxChatInstances.get(botId);
2432 - const container = getElementDOM(botId, 'active-pdf-container');
2433 - const nameElement = getElementDOM(botId, 'active-pdf-name');
2434 953
2435 - if (!container || !nameElement || !instance.activePdfFile) return;
2436 954
2437 - fetch(mxchatChat.ajax_url, {
2438 - method: 'POST',
2439 - headers: {
2440 - 'Content-Type': 'application/x-www-form-urlencoded',
2441 - },
2442 - body: new URLSearchParams({
2443 - 'action': 'mxchat_remove_pdf',
2444 - 'session_id': getChatSession(botId),
2445 - 'nonce': mxchatChat.nonce
2446 - })
2447 - })
2448 - .then(response => response.json())
2449 - .then(data => {
2450 - if (data.success) {
2451 - container.style.display = 'none';
2452 - nameElement.textContent = '';
2453 - activePdfFile = null;
2454 - appendMessage('bot', 'PDF removed.');
2455 - }
2456 - })
2457 - .catch(error => {
2458 - // Error removing PDF - silently continue
2459 - });
955 + // Helper function to check if a string is an image HTML
956 + function isImageHtml(str) {
957 + return str.startsWith('<img') && str.endsWith('>');
2460 958 }
2461 959
2462 - function removeActiveWord() {
2463 - const container = document.getElementById('active-word-container');
2464 - const nameElement = document.getElementById('active-word-name');
2465 -
2466 - if (!container || !nameElement || !activeWordFile) return;
2467 -
2468 - fetch(mxchatChat.ajax_url, {
2469 - method: 'POST',
2470 - headers: {
2471 - 'Content-Type': 'application/x-www-form-urlencoded',
2472 - },
2473 - body: new URLSearchParams({
2474 - 'action': 'mxchat_remove_word',
2475 - 'session_id': sessionId,
2476 - 'nonce': mxchatChat.nonce
2477 - })
2478 - })
2479 - .then(response => response.json())
2480 - .then(data => {
2481 - if (data.success) {
2482 - container.style.display = 'none';
2483 - nameElement.textContent = '';
2484 - activeWordFile = null;
2485 - appendMessage('bot', 'Word document removed.');
2486 - }
2487 - })
2488 - .catch(error => {
2489 - // Error removing Word document - silently continue
2490 - });
960 + // Function to remove thinking dots
961 + function removeThinkingDots() {
962 + $('.thinking-dots').closest('.temporary-message').remove();
2491 963 }
2492 964
2493 - // ====================================
2494 - // CONSENT & COMPLIANCE (GDPR)
2495 - // ====================================
965 + function isMobile() {
966 + // This can be a simple check, or more sophisticated detection of mobile devices
967 + return window.innerWidth <= 768; // Example threshold for mobile devices
968 + }
2496 969
2497 - function initializeChatVisibility(botId) {
2498 - botId = botId || 'default';
2499 - const complianzEnabled = mxchatChat.complianz_toggle === 'on' ||
2500 - mxchatChat.complianz_toggle === '1' ||
2501 - mxchatChat.complianz_toggle === 1;
2502 -
2503 - if (complianzEnabled && typeof cmplz_has_consent === "function" && typeof complianz !== 'undefined') {
2504 - // Initial check
2505 - checkConsentAndShowChat(botId);
2506 -
2507 - // Listen for consent changes
2508 - $(document).on('cmplz_status_change', function(event) {
2509 - checkConsentAndShowChat(botId);
2510 - });
2511 - } else {
2512 - // If Complianz is not enabled, always show
2513 - getElement(botId, 'floating-chatbot-button')
2514 - .css('display', 'flex')
2515 - .removeClass('hidden no-consent')
2516 - .fadeTo(500, 1);
2517 -
2518 - // Also check pre-chat message when Complianz is not enabled
2519 - checkPreChatDismissal(botId);
970 + function disableScroll() {
971 + if (isMobile()) {
972 + $('body').css('overflow', 'hidden');
2520 973 }
2521 974 }
2522 975
2523 -
2524 - function checkConsentAndShowChat(botId) {
2525 - botId = botId || 'default';
2526 - var consentStatus = cmplz_has_consent('marketing');
2527 - var consentType = complianz.consenttype;
2528 -
2529 - let $widget = getElement(botId, 'floating-chatbot-button');
2530 - let $chatbot = getElement(botId, 'floating-chatbot');
2531 - let $preChat = getElement(botId, 'pre-chat-message');
2532 -
2533 - if (consentStatus === true) {
2534 - $widget
2535 - .removeClass('no-consent')
2536 - .css('display', 'flex')
2537 - .removeClass('hidden')
2538 - .fadeTo(500, 1);
2539 - $chatbot.removeClass('no-consent');
2540 -
2541 - // Show pre-chat message if not dismissed
2542 - checkPreChatDismissal(botId);
2543 - } else {
2544 - $widget
2545 - .addClass('no-consent')
2546 - .fadeTo(500, 0, function() {
2547 - $(this)
2548 - .css('display', 'none')
2549 - .addClass('hidden');
2550 - });
2551 - $chatbot.addClass('no-consent');
2552 -
2553 - // Hide pre-chat message when no consent
2554 - $preChat.hide();
976 + function enableScroll() {
977 + if (isMobile()) {
978 + $('body').css('overflow', '');
2555 979 }
2556 980 }
2557 981
2558 -
2559 - // ====================================
2560 - // PRE-CHAT MESSAGE HANDLING
2561 - // ====================================
2562 -
2563 - function checkPreChatDismissal(botId) {
2564 - botId = botId || 'default';
2565 - try {
2566 - var dismissedAt = localStorage.getItem('mxchat_pre_chat_dismissed_' + botId);
2567 - if (dismissedAt) {
2568 - // Re-show after 24 hours
2569 - var elapsed = Date.now() - parseInt(dismissedAt, 10);
2570 - if (elapsed < 86400000) {
2571 - getElement(botId, 'pre-chat-message').hide();
2572 - return;
982 +// Pre-chat dismissal check function (wrapped in a function for reuse)
983 + function checkPreChatDismissal() {
984 + $.ajax({
985 + url: mxchatChat.ajax_url,
986 + type: 'POST',
987 + data: {
988 + action: 'mxchat_check_pre_chat_message_status',
989 + _ajax_nonce: mxchatChat.nonce
990 + },
991 + success: function(response) {
992 + if (response.success && !response.data.dismissed) {
993 + $('#pre-chat-message').fadeIn(250);
994 + } else {
995 + $('#pre-chat-message').hide();
2573 996 }
2574 - // Expired — clear and show again
2575 - localStorage.removeItem('mxchat_pre_chat_dismissed_' + botId);
997 + },
998 + error: function() {
999 + console.error('Failed to check pre-chat message dismissal status.');
2576 1000 }
2577 - getElement(botId, 'pre-chat-message').fadeIn(250);
2578 - } catch (e) {
2579 - // localStorage unavailable — show the message
2580 - getElement(botId, 'pre-chat-message').fadeIn(250);
2581 - }
1001 + });
2582 1002 }
1003 +
1004 + // Function to show the chatbot widget
1005 +function showChatWidget() {
1006 + // First ensure display is set
1007 + $('#floating-chatbot-button').css('display', 'flex');
1008 + // Then handle the fade
1009 + $('#floating-chatbot-button').fadeTo(500, 1);
1010 + // Force visibility
1011 + $('#floating-chatbot-button').removeClass('hidden');
1012 + //console.log('Showing widget');
1013 +}
2583 1014
2584 - function handlePreChatDismissal(botId) {
2585 - botId = botId || 'default';
2586 - getElement(botId, 'pre-chat-message').fadeOut(200);
2587 - try {
2588 - localStorage.setItem('mxchat_pre_chat_dismissed_' + botId, String(Date.now()));
2589 - } catch (e) {
2590 - // localStorage unavailable — dismissal won't persist
2591 - }
2592 - }
1015 +// Function to hide the chatbot widget
1016 +function hideChatWidget() {
1017 + $('#floating-chatbot-button').css('display', 'none');
1018 + $('#floating-chatbot-button').addClass('hidden');
1019 + //console.log('Hiding widget');
1020 +}
2593 1021
1022 +function initializeChatVisibility() {
1023 + //console.log('Initializing chat visibility');
1024 + const complianzEnabled = mxchatChat.complianz_toggle === 'on' ||
1025 + mxchatChat.complianz_toggle === '1' ||
1026 + mxchatChat.complianz_toggle === 1;
2594 1027
2595 - // ====================================
2596 - // UTILITY FUNCTIONS
2597 - // ====================================
2598 -
2599 - function copyToClipboard(text) {
2600 - var tempInput = $('<input>');
2601 - $('body').append(tempInput);
2602 - tempInput.val(text).select();
2603 - document.execCommand('copy');
2604 - tempInput.remove();
2605 - }
1028 + if (complianzEnabled && typeof cmplz_has_consent === "function" && typeof complianz !== 'undefined') {
1029 + // Initial check
1030 + checkConsentAndShowChat();
2606 1031
2607 -
2608 - function isImageHtml(str) {
2609 - return str.startsWith('<img') && str.endsWith('>');
1032 + // Listen for consent changes
1033 + $(document).on('cmplz_status_change', function(event) {
1034 + //console.log('Status change detected');
1035 + checkConsentAndShowChat();
1036 + });
1037 + } else {
1038 + // If Complianz is not enabled, always show
1039 + $('#floating-chatbot-button')
1040 + .css('display', 'flex')
1041 + .removeClass('hidden no-consent')
1042 + .fadeTo(500, 1);
1043 +
1044 + // Also check pre-chat message when Complianz is not enabled
1045 + checkPreChatDismissal();
2610 1046 }
1047 +}
2611 1048
2612 1049
2613 - // ====================================
2614 - // EVENT HANDLERS & INITIALIZATION
2615 - // ====================================
2616 1050
2617 -$(document).on('click', '.mxchat-popular-question', function () {
2618 - var question = $(this).text();
2619 - var botId = getBotIdFromElement(this);
1051 +function checkConsentAndShowChat() {
1052 + var consentStatus = cmplz_has_consent('marketing');
1053 + var consentType = complianz.consenttype;
1054 +
1055 + //console.log('Checking consent:', {status: consentStatus,type: consentType});
2620 1056
2621 - // Append the question as if the user typed it
2622 - appendMessage("user", question, '', [], false, botId);
1057 + let $widget = $('#floating-chatbot-button');
1058 + let $chatbot = $('#floating-chatbot');
1059 + let $preChat = $('#pre-chat-message');
1060 +
1061 + if (consentStatus === true) {
1062 + //console.log('Consent granted - showing widget');
1063 + $widget
1064 + .removeClass('no-consent')
1065 + .css('display', 'flex')
1066 + .removeClass('hidden')
1067 + .fadeTo(500, 1);
1068 + $chatbot.removeClass('no-consent');
1069 +
1070 + // Show pre-chat message if not dismissed
1071 + checkPreChatDismissal();
1072 + } else {
1073 + //console.log('No consent - hiding widget');
1074 + $widget
1075 + .addClass('no-consent')
1076 + .fadeTo(500, 0, function() {
1077 + $(this)
1078 + .css('display', 'none')
1079 + .addClass('hidden');
1080 + });
1081 + $chatbot.addClass('no-consent');
1082 +
1083 + // Hide pre-chat message when no consent
1084 + $preChat.hide();
1085 + }
1086 +}
2623 1087
2624 - // Only collapse if there are questions
2625 - if (hasQuickQuestions(botId)) {
2626 - collapseQuickQuestions(botId);
1088 + // Function to dismiss pre-chat message for 24 hours
1089 + function handlePreChatDismissal() {
1090 + $('#pre-chat-message').fadeOut(200);
1091 + $.ajax({
1092 + url: mxchatChat.ajax_url,
1093 + type: 'POST',
1094 + data: {
1095 + action: 'mxchat_dismiss_pre_chat_message',
1096 + _ajax_nonce: mxchatChat.nonce
1097 + },
1098 + success: function() {
1099 + $('#pre-chat-message').hide();
1100 + },
1101 + error: function() {
1102 + console.error('Failed to dismiss pre-chat message.');
1103 + }
1104 + });
2627 1105 }
2628 1106
2629 - // Send the question to the server
2630 - sendMessageToChatbot(question, botId);
2631 -});
1107 + // Handle pre-chat message dismissal on button click
1108 + $(document).on('click', '.close-pre-chat-message', function(e) {
1109 + e.stopPropagation();
1110 + handlePreChatDismissal();
1111 + });
2632 1112
2633 -$(document).on('click', '.questions-toggle-btn', function(e) {
2634 - e.preventDefault();
2635 - e.stopPropagation();
2636 - var botId = getBotIdFromElement(this);
2637 - expandQuickQuestions(botId);
2638 -});
2639 -
2640 -$(document).on('click', '.questions-collapse-btn', function(e) {
2641 - e.preventDefault();
2642 - e.stopPropagation();
2643 - var botId = getBotIdFromElement(this);
2644 - collapseQuickQuestions(botId);
2645 -});
2646 -
2647 - // Chatbot visibility toggle handlers - use class selector for multi-instance support
2648 - $(document).on('click', '.floating-chatbot-button', function() {
2649 - var botId = getBotIdFromElement(this);
2650 - var $chatbot = getElement(botId, 'floating-chatbot');
2651 - var $badge = getElement(botId, 'chat-notification-badge');
2652 - var $preChat = getElement(botId, 'pre-chat-message');
2653 -
2654 - if ($chatbot.hasClass('hidden')) {
2655 - $chatbot.removeClass('hidden').addClass('visible');
1113 + // Toggle chatbot visibility on floating button click
1114 + $(document).on('click', '#floating-chatbot-button', function() {
1115 + var chatbot = $('#floating-chatbot');
1116 + if (chatbot.hasClass('hidden')) {
1117 + chatbot.removeClass('hidden').addClass('visible');
2656 1118 $(this).addClass('hidden');
2657 - $badge.hide(); // Hide notification when opening chat
1119 + $('#chat-notification-badge').hide(); // Hide notification when opening chat
2658 1120 disableScroll();
2659 - $preChat.fadeOut(250);
2660 -
2661 - // Load chat history for returning visitors (persistence)
2662 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
2663 - if (chatPersistenceEnabled) {
2664 - MxChatInstances.ensureSession(botId);
2665 - }
2666 -
2667 - // Deferred email check — only on first widget open
2668 - var emailBlocker = getElementDOM(botId, 'email-blocker');
2669 - var instance = MxChatInstances.get(botId);
2670 - if (emailBlocker && !instance.emailCheckDone) {
2671 - instance.emailCheckDone = true;
2672 - resolveEmailState(botId);
2673 - } else if (!emailBlocker) {
2674 - // No email collection — still route through showChatContainerForBot
2675 - // so the loader is shown while chat history loads
2676 - showChatContainerForBot(botId);
2677 - }
1121 + $('#pre-chat-message').fadeOut(250);
2678 1122 } else {
2679 - $chatbot.removeClass('visible').addClass('hidden');
1123 + chatbot.removeClass('visible').addClass('hidden');
2680 1124 $(this).removeClass('hidden');
2681 1125 enableScroll();
2682 - checkPreChatDismissal(botId);
1126 + checkPreChatDismissal();
2683 1127 }
2684 1128 });
2685 1129
2686 - // Allow clicking anywhere on the title bar to close the chatbot
2687 - $(document).on('click', '.chatbot-top-bar', function() {
2688 - var botId = getBotIdFromElement(this);
2689 - getElement(botId, 'floating-chatbot').addClass('hidden').removeClass('visible');
2690 - getElement(botId, 'floating-chatbot-button').removeClass('hidden');
1130 + $(document).on('click', '#exit-chat-button', function() {
1131 + $('#floating-chatbot').addClass('hidden').removeClass('visible');
1132 + $('#floating-chatbot-button').removeClass('hidden');
2691 1133 enableScroll();
2692 1134 });
2693 1135
1136 + // Close pre-chat message on click
2694 1137 $(document).on('click', '.close-pre-chat-message', function(e) {
2695 1138 e.stopPropagation(); // Prevent triggering the parent .pre-chat-message click
2696 - var botId = getBotIdFromElement(this);
2697 - handlePreChatDismissal(botId);
1139 + $('#pre-chat-message').fadeOut(200, function() {
1140 + $(this).remove();
1141 + });
2698 1142 });
2699 1143
1144 + // Open chatbot when pre-chat message is clicked
1145 + $(document).on('click', '#pre-chat-message', function() {
1146 + var chatbot = $('#floating-chatbot');
1147 + if (chatbot.hasClass('hidden')) {
1148 + chatbot.removeClass('hidden').addClass('visible');
1149 + $('#floating-chatbot-button').addClass('hidden');
1150 + $('#pre-chat-message').fadeOut(250); // Hide pre-chat message
1151 + disableScroll(); // Disable scroll when chatbot opens
1152 + }
1153 + });
2700 1154
2701 - // PDF upload button handlers - use class selector
2702 - $(document).on('click', '.pdf-upload-btn', function() {
2703 - var botId = getBotIdFromElement(this);
2704 - var pdfInput = getElementDOM(botId, 'pdf-upload');
2705 - if (pdfInput) pdfInput.click();
2706 - });
1155 + // If the chatbot is initially hidden, ensure the button is visible
1156 + if ($('#floating-chatbot').hasClass('hidden')) {
1157 + $('#floating-chatbot-button').removeClass('hidden');
1158 + }
2707 1159
2708 - // Word upload button handlers - use class selector
2709 - $(document).on('click', '.word-upload-btn', function() {
2710 - var botId = getBotIdFromElement(this);
2711 - var wordInput = getElementDOM(botId, 'word-upload');
2712 - if (wordInput) wordInput.click();
2713 - });
2714 -
2715 - // PDF file input change handler
2716 - addSafeEventListener('pdf-upload', 'change', async function(e) {
2717 - const file = e.target.files[0];
2718 -
2719 - if (!file || file.type !== 'application/pdf') {
2720 - alert('Please select a valid PDF file.');
2721 - return;
2722 - }
2723 -
2724 - if (!sessionId) {
2725 - alert('Error: No session ID found');
2726 - return;
2727 - }
1160 + function setFullHeight() {
1161 + var vh = $(window).innerHeight() * 0.01;
1162 + $(':root').css('--vh', vh + 'px');
1163 + }
2728 1164
2729 - if (!mxchatChat || !mxchatChat.ajax_url || !mxchatChat.nonce) {
2730 - alert('Error: Ajax configuration missing');
2731 - return;
2732 - }
2733 -
2734 - // Disable buttons and show loading state
2735 - const uploadBtn = document.getElementById('pdf-upload-btn');
2736 - const sendBtn = document.getElementById('send-button');
2737 - const originalBtnContent = uploadBtn.innerHTML;
2738 -
2739 - try {
2740 - const formData = new FormData();
2741 - formData.append('action', 'mxchat_upload_pdf');
2742 - formData.append('pdf_file', file);
2743 - formData.append('session_id', sessionId);
2744 - formData.append('nonce', mxchatChat.nonce);
2745 -
2746 - uploadBtn.disabled = true;
2747 - sendBtn.disabled = true;
2748 - uploadBtn.innerHTML = `<svg class="spinner" viewBox="0 0 50 50">
2749 - <circle cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
2750 - </svg>`;
2751 -
2752 - const response = await fetch(mxchatChat.ajax_url, {
2753 - method: 'POST',
2754 - body: formData
2755 - });
2756 -
2757 - const data = await response.json();
2758 -
2759 - if (data.success) {
2760 - // Hide popular questions if they exist
2761 - const popularQuestionsContainer = document.getElementById('mxchat-popular-questions');
2762 - if (hasQuickQuestions()) {
2763 - collapseQuickQuestions();
2764 - }
2765 -
2766 - // Show the active PDF name
2767 - showActivePdf(data.data.filename);
2768 -
2769 - appendMessage('bot', data.data.message);
2770 - scrollToBottom();
2771 - activePdfFile = data.data.filename;
2772 - } else {
2773 - alert('Failed to upload PDF. Please try again.');
2774 - }
2775 - } catch (error) {
2776 - alert('Error uploading file. Please try again.');
2777 - } finally {
2778 - uploadBtn.disabled = false;
2779 - sendBtn.disabled = false;
2780 - uploadBtn.innerHTML = originalBtnContent;
2781 - this.value = ''; // Reset file input
2782 - }
2783 - });
2784 -
2785 - // Word file input change handler
2786 - addSafeEventListener('word-upload', 'change', async function(e) {
2787 - const file = e.target.files[0];
2788 -
2789 - if (!file || file.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
2790 - alert('Please select a valid Word document (.docx).');
2791 - return;
2792 - }
2793 -
2794 - if (!sessionId) {
2795 - alert('Error: No session ID found');
2796 - return;
2797 - }
1165 + // Set the height when the page loads
2798 1166
2799 - // Disable buttons and show loading state
2800 - const uploadBtn = document.getElementById('word-upload-btn');
2801 - const sendBtn = document.getElementById('send-button');
2802 - const originalBtnContent = uploadBtn.innerHTML;
2803 -
2804 - try {
2805 - const formData = new FormData();
2806 - formData.append('action', 'mxchat_upload_word');
2807 - formData.append('word_file', file);
2808 - formData.append('session_id', sessionId);
2809 - formData.append('nonce', mxchatChat.nonce);
2810 -
2811 - uploadBtn.disabled = true;
2812 - sendBtn.disabled = true;
2813 - uploadBtn.innerHTML = `<svg class="spinner" viewBox="0 0 50 50">
2814 - <circle cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
2815 - </svg>`;
2816 -
2817 - const response = await fetch(mxchatChat.ajax_url, {
2818 - method: 'POST',
2819 - body: formData
2820 - });
2821 -
2822 - const data = await response.json();
2823 -
2824 - if (data.success) {
2825 - // Hide popular questions if they exist
2826 - const popularQuestionsContainer = document.getElementById('mxchat-popular-questions');
2827 - if (hasQuickQuestions()) {
2828 - collapseQuickQuestions();
2829 - }
2830 -
2831 - // Show the active Word document name
2832 - showActiveWord(data.data.filename);
2833 -
2834 - appendMessage('bot', data.data.message);
2835 - scrollToBottom();
2836 - activeWordFile = data.data.filename;
2837 - } else {
2838 - alert('Failed to upload Word document. Please try again.');
2839 - }
2840 - } catch (error) {
2841 - alert('Error uploading file. Please try again.');
2842 - } finally {
2843 - uploadBtn.disabled = false;
2844 - sendBtn.disabled = false;
2845 - uploadBtn.innerHTML = originalBtnContent;
2846 - this.value = ''; // Reset file input
2847 - }
2848 - });
2849 -
2850 - // Remove button click handlers
2851 - document.getElementById('remove-pdf-btn')?.addEventListener('click', function(e) {
2852 - e.preventDefault();
2853 - e.stopPropagation();
2854 - removeActivePdf();
2855 - });
2856 -
2857 - document.getElementById('remove-word-btn')?.addEventListener('click', function(e) {
2858 - e.preventDefault();
2859 - e.stopPropagation();
2860 - removeActiveWord();
2861 - });
2862 -
2863 - // Window resize handlers
1167 +
1168 + // Set the height on resize and orientation change events
2864 1169 $(window).on('resize orientationchange', function() {
2865 1170 setFullHeight();
2866 1171 });
2867 1172
2868 1173
2869 - // ====================================
2870 - // TOOLBAR & STYLING SETUP
2871 - // ====================================
2872 -
2873 - // Apply toolbar settings
2874 - if (mxchatChat.chat_toolbar_toggle === 'on') {
2875 - $('.chat-toolbar').show();
2876 - } else {
2877 - $('.chat-toolbar').hide();
1174 + // Now handle the close button to dismiss the pre-chat message for 24 hours
1175 + var closeButton = document.querySelector('.close-pre-chat-message');
1176 + if (closeButton) {
1177 + closeButton.addEventListener('click', function() {
1178 + $('#pre-chat-message').fadeOut(200); // Hide the message
1179 +
1180 + // Send an AJAX request to set the transient flag for 24 hours
1181 + $.ajax({
1182 + url: mxchatChat.ajax_url,
1183 + type: 'POST',
1184 + data: {
1185 + action: 'mxchat_dismiss_pre_chat_message',
1186 + _ajax_nonce: mxchatChat.nonce
1187 + },
1188 + success: function() {
1189 + //console.log('Pre-chat message dismissed for 24 hours.');
1190 +
1191 + // Ensure the message is hidden after dismissal
1192 + $('#pre-chat-message').hide();
1193 + },
1194 + error: function() {
1195 + //console.error('Failed to dismiss pre-chat message.');
1196 + }
1197 + });
1198 + });
2878 1199 }
2879 -
2880 - // Apply toolbar icon colors
2881 - const toolbarElements = [
2882 - '#mxchat-chatbot .toolbar-btn svg',
2883 - '#mxchat-chatbot .active-pdf-name',
2884 - '#mxchat-chatbot .active-word-name',
2885 - '#mxchat-chatbot .remove-pdf-btn svg',
2886 - '#mxchat-chatbot .remove-word-btn svg',
2887 - '#mxchat-chatbot .toolbar-perplexity svg'
2888 - ];
2889 -
2890 - toolbarElements.forEach(selector => {
2891 - $(selector).css({
2892 - 'fill': toolbarIconColor,
2893 - 'stroke': toolbarIconColor,
2894 - 'color': toolbarIconColor
2895 - });
2896 - });
2897 1200
2898 1201
2899 -// ====================================
2900 -// INIT LOADER & CHAT CONTAINER HELPERS
2901 -// ====================================
2902 -// These must be outside the email collection block so they're always available
2903 -// (used by persistence loading even when email collection is off)
2904 1202
2905 -function showInitLoader(botId) {
2906 - var loader = getElementDOM(botId, 'mxchat-init-loader');
2907 - if (loader) loader.style.display = 'flex';
2908 -}
2909 1203
2910 -function hideInitLoader(botId) {
2911 - var loader = getElementDOM(botId, 'mxchat-init-loader');
2912 - if (loader) loader.style.display = 'none';
1204 +// Event listener for Add to Cart button
1205 +$(document).on('click', '.mxchat-add-to-cart-button', function() {
1206 + var productId = $(this).data('product-id');
1207 + // Add a special prefix to indicate this is from button
1208 + appendMessage("user", "add to cart");
1209 + sendMessageToChatbot("!addtocart"); // Special command to indicate button click
1210 +});
1211 +
1212 +
1213 +if (document.getElementById('pdf-upload-btn')) {
1214 + document.getElementById('pdf-upload-btn').addEventListener('click', function() {
1215 + document.getElementById('pdf-upload').click();
1216 + });
2913 1217 }
2914 1218
2915 -function showEmailFormForBot(botId) {
2916 - hideInitLoader(botId);
2917 - var emailBlocker = getElementDOM(botId, 'email-blocker');
2918 - var chatContainer = getElementDOM(botId, 'chat-container');
2919 - if (emailBlocker) emailBlocker.style.display = 'flex';
2920 - if (chatContainer) chatContainer.style.display = 'none';
1219 +if (document.getElementById('word-upload-btn')) {
1220 + document.getElementById('word-upload-btn').addEventListener('click', function() {
1221 + document.getElementById('word-upload').click();
1222 + });
2921 1223 }
2922 1224
2923 -function showChatContainerForBot(botId) {
2924 - var emailBlocker = getElementDOM(botId, 'email-blocker');
2925 - var chatContainer = getElementDOM(botId, 'chat-container');
2926 - if (emailBlocker) emailBlocker.style.display = 'none';
2927 -
2928 - var instance = MxChatInstances.get(botId);
2929 - var chatPersistenceEnabled = mxchatChat.chat_persistence_toggle === 'on';
2930 -
2931 - // If persistence is on and history hasn't loaded yet, show loader
2932 - // while history loads to prevent flash of empty chat
2933 - if (chatPersistenceEnabled && !instance.chatHistoryLoaded) {
2934 - if (chatContainer) chatContainer.style.display = 'none';
2935 - showInitLoader(botId);
2936 - loadChatHistory(botId, function() {
2937 - hideInitLoader(botId);
2938 - if (chatContainer) chatContainer.style.display = 'flex';
2939 - scrollToBottom(botId, true);
2940 - });
2941 - } else {
2942 - hideInitLoader(botId);
2943 - if (chatContainer) chatContainer.style.display = 'flex';
2944 - if (typeof loadChatHistory === 'function') {
2945 - loadChatHistory(botId);
2946 - }
1225 +function addSafeEventListener(elementId, eventType, handler) {
1226 + const element = document.getElementById(elementId);
1227 + if (element) {
1228 + element.addEventListener(eventType, handler);
2947 1229 }
2948 1230 }
2949 1231
2950 -// ====================================
2951 -// EMAIL COLLECTION SETUP - MULTI-INSTANCE VERSION
2952 -// ====================================
2953 -// Only run email collection setup if it's enabled
2954 -if (mxchatChat && mxchatChat.email_collection_enabled === 'on') {
2955 1232
2956 - // Track submitting state per bot
2957 - const emailSubmittingState = {};
1233 +// PDF file input change handler
1234 +addSafeEventListener('pdf-upload', 'change', async function(e) {
1235 + const file = e.target.files[0];
2958 1236
2959 - // Add CSS animations for email form (once globally)
2960 - if (!document.getElementById('email-error-styles')) {
2961 - const style = document.createElement('style');
2962 - style.id = 'email-error-styles';
2963 - style.textContent = `
2964 - @keyframes fadeInError {
2965 - from { opacity: 0; transform: translateY(-5px); }
2966 - to { opacity: 1; transform: translateY(0); }
2967 - }
2968 - .email-input-shake {
2969 - animation: shake 0.5s ease-in-out;
2970 - }
2971 - @keyframes shake {
2972 - 0%, 100% { transform: translateX(0); }
2973 - 25% { transform: translateX(-5px); }
2974 - 75% { transform: translateX(5px); }
2975 - }
2976 - @keyframes spin {
2977 - from { transform: rotate(0deg); }
2978 - to { transform: rotate(360deg); }
2979 - }
2980 - .email-spinner {
2981 - display: inline-block;
2982 - vertical-align: middle;
2983 - }
2984 - `;
2985 - document.head.appendChild(style);
1237 + if (!file || file.type !== 'application/pdf') {
1238 + alert('Please select a valid PDF file.');
1239 + return;
2986 1240 }
2987 1241
2988 - function isValidEmailAddress(email) {
2989 - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
2990 - return emailRegex.test(email.trim()) && email.length <= 254;
1242 + if (!sessionId) {
1243 + console.error('No session ID found');
1244 + alert('Error: No session ID found');
1245 + return;
2991 1246 }
2992 1247
2993 - function isValidNameInput(name) {
2994 - return name && name.trim().length >= 2 && name.trim().length <= 100;
1248 + if (!mxchatChat || !mxchatChat.ajax_url || !mxchatChat.nonce) {
1249 + console.error('mxchatChat not properly configured:', mxchatChat);
1250 + alert('Error: Ajax configuration missing');
1251 + return;
2995 1252 }
2996 1253
2997 - /**
2998 - * Replace {visitor_name} placeholder in intro message with actual visitor name
2999 - * @param {string} botId - The bot instance ID
3000 - * @param {string} visitorName - The visitor's name to insert
3001 - */
3002 - function replaceVisitorNamePlaceholder(botId, visitorName) {
3003 - var chatBox = getElementDOM(botId, 'chat-box');
3004 - if (!chatBox) return;
1254 + // Disable buttons and show loading state
1255 + const uploadBtn = document.getElementById('pdf-upload-btn');
1256 + const sendBtn = document.getElementById('send-button');
1257 + const originalBtnContent = uploadBtn.innerHTML;
3005 1258
3006 - // Find the first bot message (intro message)
3007 - var introMessage = chatBox.querySelector('.bot-message');
3008 - if (!introMessage) return;
1259 + try {
1260 + const formData = new FormData();
1261 + formData.append('action', 'mxchat_upload_pdf');
1262 + formData.append('pdf_file', file);
1263 + formData.append('session_id', sessionId);
1264 + formData.append('nonce', mxchatChat.nonce);
3009 1265
3010 - var messageContent = introMessage.querySelector('div[dir="auto"]');
3011 - if (!messageContent) return;
1266 + uploadBtn.disabled = true;
1267 + sendBtn.disabled = true;
1268 + uploadBtn.innerHTML = `<svg class="spinner" viewBox="0 0 50 50">
1269 + <circle cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
1270 + </svg>`;
3012 1271
3013 - var html = messageContent.innerHTML;
1272 + const response = await fetch(mxchatChat.ajax_url, {
1273 + method: 'POST',
1274 + body: formData
1275 + });
3014 1276
3015 - // Replace {visitor_name} placeholder (case-insensitive)
3016 - if (visitorName && visitorName.trim()) {
3017 - // Escape HTML to prevent XSS
3018 - var safeName = $('<div>').text(visitorName.trim()).html();
3019 - html = html.replace(/\{visitor_name\}/gi, safeName);
1277 + const data = await response.json();
1278 +
1279 + if (data.success) {
1280 + // Hide popular questions if they exist
1281 + const popularQuestionsContainer = document.getElementById('mxchat-popular-questions');
1282 + if (popularQuestionsContainer) {
1283 + popularQuestionsContainer.style.display = 'none';
1284 + }
1285 +
1286 + // Show the active PDF name
1287 + showActivePdf(data.data.filename);
1288 +
1289 + appendMessage('bot', data.data.message);
1290 + scrollToBottom();
1291 + activePdfFile = data.data.filename;
3020 1292 } else {
3021 - // Remove placeholder and clean up spacing if no name provided
3022 - html = html.replace(/\{visitor_name\}/gi, '');
3023 - // Clean up any double spaces that might result
3024 - html = html.replace(/\s{2,}/g, ' ').trim();
1293 + console.error('Upload failed:', data.data);
1294 + alert('Failed to upload PDF. Please try again.');
3025 1295 }
3026 -
3027 - messageContent.innerHTML = html;
1296 + } catch (error) {
1297 + console.error('Upload error:', error);
1298 + alert('Error uploading file. Please try again.');
1299 + } finally {
1300 + uploadBtn.disabled = false;
1301 + sendBtn.disabled = false;
1302 + uploadBtn.innerHTML = originalBtnContent;
1303 + this.value = ''; // Reset file input
3028 1304 }
1305 +});
3029 1306
3030 - function setEmailSubmissionState(botId, loading) {
3031 - var submitButton = getElementDOM(botId, 'email-submit-button');
3032 - var emailInput = getElementDOM(botId, 'user-email');
3033 - var nameInput = getElementDOM(botId, 'user-name');
1307 +// Word file input change handler
1308 +addSafeEventListener('word-upload', 'change', async function(e) {
1309 + const file = e.target.files[0];
3034 1310
3035 - if (loading) {
3036 - emailSubmittingState[botId] = true;
3037 - if (submitButton) submitButton.disabled = true;
3038 - if (emailInput) emailInput.disabled = true;
3039 - if (nameInput) nameInput.disabled = true;
1311 + if (!file || file.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
1312 + alert('Please select a valid Word document (.docx).');
1313 + return;
1314 + }
3040 1315
3041 - if (submitButton && !submitButton.getAttribute('data-original-html')) {
3042 - submitButton.setAttribute('data-original-html', submitButton.innerHTML);
3043 - const originalText = submitButton.textContent;
3044 - submitButton.innerHTML = `
3045 - <svg class="email-spinner" style="width: 16px; height: 16px; margin-right: 8px; animation: spin 1s linear infinite;" viewBox="0 0 24 24">
3046 - <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="31.416" stroke-dashoffset="31.416">
3047 - <animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/>
3048 - <animate attributeName="stroke-dashoffset" dur="2s" values="0;-15.708;-31.416" repeatCount="indefinite"/>
3049 - </circle>
3050 - </svg>
3051 - ${originalText}
3052 - `;
3053 - submitButton.style.opacity = '0.8';
3054 - }
3055 - } else {
3056 - emailSubmittingState[botId] = false;
3057 - if (submitButton) submitButton.disabled = false;
3058 - if (emailInput) emailInput.disabled = false;
3059 - if (nameInput) nameInput.disabled = false;
3060 -
3061 - if (submitButton) {
3062 - const originalHtml = submitButton.getAttribute('data-original-html');
3063 - if (originalHtml) {
3064 - submitButton.innerHTML = originalHtml;
3065 - }
3066 - submitButton.style.opacity = '1';
3067 - }
3068 - }
1316 + if (!sessionId) {
1317 + console.error('No session ID found');
1318 + alert('Error: No session ID found');
1319 + return;
3069 1320 }
3070 1321
3071 - function showEmailError(botId, message) {
3072 - clearEmailError(botId);
1322 + // Disable buttons and show loading state
1323 + const uploadBtn = document.getElementById('word-upload-btn');
1324 + const sendBtn = document.getElementById('send-button');
1325 + const originalBtnContent = uploadBtn.innerHTML;
3073 1326
3074 - var emailForm = getElementDOM(botId, 'email-collection-form');
3075 - if (!emailForm) return;
1327 + try {
1328 + const formData = new FormData();
1329 + formData.append('action', 'mxchat_upload_word');
1330 + formData.append('word_file', file);
1331 + formData.append('session_id', sessionId);
1332 + formData.append('nonce', mxchatChat.nonce);
3076 1333
3077 - const errorDiv = document.createElement('div');
3078 - errorDiv.className = 'email-error';
3079 - errorDiv.style.cssText = `
3080 - color: #e74c3c;
3081 - font-size: 12px;
3082 - margin-top: 8px;
3083 - padding: 4px 0;
3084 - animation: fadeInError 0.3s ease;
3085 - `;
3086 - errorDiv.textContent = message;
3087 - emailForm.appendChild(errorDiv);
1334 + uploadBtn.disabled = true;
1335 + sendBtn.disabled = true;
1336 + uploadBtn.innerHTML = `<svg class="spinner" viewBox="0 0 50 50">
1337 + <circle cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
1338 + </svg>`;
3088 1339
3089 - // Add shake animation to inputs
3090 - var emailInput = getElementDOM(botId, 'user-email');
3091 - var nameInput = getElementDOM(botId, 'user-name');
1340 + const response = await fetch(mxchatChat.ajax_url, {
1341 + method: 'POST',
1342 + body: formData
1343 + });
3092 1344
3093 - if (emailInput) {
3094 - emailInput.classList.add('email-input-shake');
3095 - setTimeout(() => emailInput.classList.remove('email-input-shake'), 500);
3096 - }
3097 - if (nameInput) {
3098 - nameInput.classList.add('email-input-shake');
3099 - setTimeout(() => nameInput.classList.remove('email-input-shake'), 500);
3100 - }
3101 - }
1345 + const data = await response.json();
3102 1346
3103 - function clearEmailError(botId) {
3104 - var emailForm = getElementDOM(botId, 'email-collection-form');
3105 - if (emailForm) {
3106 - const existingErrors = emailForm.querySelectorAll('.email-error');
3107 - existingErrors.forEach(error => error.remove());
3108 - }
3109 - }
1347 + if (data.success) {
1348 + // Hide popular questions if they exist
1349 + const popularQuestionsContainer = document.getElementById('mxchat-popular-questions');
1350 + if (popularQuestionsContainer) {
1351 + popularQuestionsContainer.style.display = 'none';
1352 + }
3110 1353
3111 - // Resolve email state using server-side data when available, AJAX fallback otherwise
3112 - function resolveEmailState(botId) {
3113 - if (mxchatChat.skip_email_check && mxchatChat.initial_email_state) {
3114 - if (mxchatChat.initial_email_state.show_email_form) {
3115 - showEmailFormForBot(botId);
3116 - } else {
3117 - showChatContainerForBot(botId);
3118 - }
1354 + // Show the active Word document name
1355 + showActiveWord(data.data.filename);
1356 +
1357 + appendMessage('bot', data.data.message);
1358 + scrollToBottom();
1359 + activeWordFile = data.data.filename;
3119 1360 } else {
3120 - checkSessionAndEmailForBot(botId);
1361 + console.error('Upload failed:', data.data);
1362 + alert('Failed to upload Word document. Please try again.');
3121 1363 }
1364 + } catch (error) {
1365 + console.error('Upload error:', error);
1366 + alert('Error uploading file. Please try again.');
1367 + } finally {
1368 + uploadBtn.disabled = false;
1369 + sendBtn.disabled = false;
1370 + uploadBtn.innerHTML = originalBtnContent;
1371 + this.value = ''; // Reset file input
3122 1372 }
1373 +});
3123 1374
3124 - function checkSessionAndEmailForBot(botId) {
3125 - const sessionId = MxChatInstances.ensureSession(botId);
1375 +// Function to show active PDF name in toolbar
1376 +function showActivePdf(filename) {
1377 + const container = document.getElementById('active-pdf-container');
1378 + const nameElement = document.getElementById('active-pdf-name');
1379 +
1380 + if (!container || !nameElement) {
1381 + console.error('PDF container elements not found');
1382 + return;
1383 + }
3126 1384
3127 - // Hide both panels while we check — show loader instead
3128 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3129 - var chatContainer = getElementDOM(botId, 'chat-container');
3130 - if (emailBlocker) emailBlocker.style.display = 'none';
3131 - if (chatContainer) chatContainer.style.display = 'none';
3132 - showInitLoader(botId);
1385 + nameElement.textContent = filename;
1386 + container.style.display = 'flex';
1387 +}
3133 1388
3134 - fetch(mxchatChat.ajax_url, {
3135 - method: 'POST',
3136 - headers: {
3137 - 'Content-Type': 'application/x-www-form-urlencoded',
3138 - },
3139 - body: new URLSearchParams({
3140 - action: 'mxchat_check_email_provided',
3141 - session_id: sessionId,
3142 - nonce: mxchatChat.nonce,
3143 - })
3144 - })
3145 - .then((response) => {
3146 - if (!response.ok) {
3147 - throw new Error(`HTTP error! status: ${response.status}`);
3148 - }
3149 - return response.json();
3150 - })
3151 - .then((data) => {
3152 - if (data.success) {
3153 - if (data.data.logged_in || data.data.email) {
3154 - showChatContainerForBot(botId);
3155 - } else {
3156 - showEmailFormForBot(botId);
3157 - }
3158 - } else {
3159 - showEmailFormForBot(botId);
3160 - }
3161 - })
3162 - .catch((error) => {
3163 - showEmailFormForBot(botId);
3164 - });
1389 +// Function to show active Word document name in toolbar
1390 +function showActiveWord(filename) {
1391 + const container = document.getElementById('active-word-container');
1392 + const nameElement = document.getElementById('active-word-name');
1393 +
1394 + if (!container || !nameElement) {
1395 + console.error('Word document container elements not found');
1396 + return;
3165 1397 }
3166 1398
3167 - // Event delegation for email form submission
3168 - $(document).on('submit', '.email-collection-form', function(e) {
3169 - e.preventDefault();
3170 - e.stopPropagation();
1399 + nameElement.textContent = filename;
1400 + container.style.display = 'flex';
1401 +}
3171 1402
3172 - var botId = getBotIdFromElement(this);
1403 +// Function to remove active PDF
1404 +function removeActivePdf() {
1405 + const container = document.getElementById('active-pdf-container');
1406 + const nameElement = document.getElementById('active-pdf-name');
1407 +
1408 + if (!container || !nameElement || !activePdfFile) return;
3173 1409
3174 - // Prevent double submission
3175 - if (emailSubmittingState[botId]) {
3176 - return false;
1410 + fetch(mxchatChat.ajax_url, {
1411 + method: 'POST',
1412 + headers: {
1413 + 'Content-Type': 'application/x-www-form-urlencoded',
1414 + },
1415 + body: new URLSearchParams({
1416 + 'action': 'mxchat_remove_pdf',
1417 + 'session_id': sessionId,
1418 + 'nonce': mxchatChat.nonce
1419 + })
1420 + })
1421 + .then(response => response.json())
1422 + .then(data => {
1423 + if (data.success) {
1424 + container.style.display = 'none';
1425 + nameElement.textContent = '';
1426 + activePdfFile = null;
1427 + appendMessage('bot', 'PDF removed.');
3177 1428 }
1429 + })
1430 + .catch(error => {
1431 + console.error('Error removing PDF:', error);
1432 + });
1433 +}
3178 1434
3179 - var emailInput = getElementDOM(botId, 'user-email');
3180 - var nameInput = getElementDOM(botId, 'user-name');
3181 - var userEmail = emailInput ? emailInput.value.trim() : '';
3182 - var userName = nameInput ? nameInput.value.trim() : '';
3183 - var sessionId = MxChatInstances.ensureSession(botId);
1435 +// Function to remove active Word document
1436 +function removeActiveWord() {
1437 + const container = document.getElementById('active-word-container');
1438 + const nameElement = document.getElementById('active-word-name');
1439 +
1440 + if (!container || !nameElement || !activeWordFile) return;
3184 1441
3185 - // Validate email
3186 - if (!userEmail) {
3187 - showEmailError(botId, 'Please enter your email address.');
3188 - return false;
1442 + fetch(mxchatChat.ajax_url, {
1443 + method: 'POST',
1444 + headers: {
1445 + 'Content-Type': 'application/x-www-form-urlencoded',
1446 + },
1447 + body: new URLSearchParams({
1448 + 'action': 'mxchat_remove_word',
1449 + 'session_id': sessionId,
1450 + 'nonce': mxchatChat.nonce
1451 + })
1452 + })
1453 + .then(response => response.json())
1454 + .then(data => {
1455 + if (data.success) {
1456 + container.style.display = 'none';
1457 + nameElement.textContent = '';
1458 + activeWordFile = null;
1459 + appendMessage('bot', 'Word document removed.');
3189 1460 }
1461 + })
1462 + .catch(error => {
1463 + console.error('Error removing Word document:', error);
1464 + });
1465 +}
3190 1466
3191 - if (!isValidEmailAddress(userEmail)) {
3192 - showEmailError(botId, 'Please enter a valid email address.');
3193 - return false;
1467 +// Add remove button click handlers
1468 +document.getElementById('remove-pdf-btn')?.addEventListener('click', function(e) {
1469 + e.preventDefault();
1470 + e.stopPropagation();
1471 + removeActivePdf();
1472 +});
1473 +
1474 +document.getElementById('remove-word-btn')?.addEventListener('click', function(e) {
1475 + e.preventDefault();
1476 + e.stopPropagation();
1477 + removeActiveWord();
1478 +});
1479 +
1480 +// Check initial document status
1481 +function checkInitialDocumentStatus() {
1482 + if (!sessionId) return;
1483 +
1484 + // Check PDF status
1485 + fetch(mxchatChat.ajax_url, {
1486 + method: 'POST',
1487 + headers: {
1488 + 'Content-Type': 'application/x-www-form-urlencoded',
1489 + },
1490 + body: new URLSearchParams({
1491 + 'action': 'mxchat_check_pdf_status',
1492 + 'session_id': sessionId,
1493 + 'nonce': mxchatChat.nonce
1494 + })
1495 + })
1496 + .then(response => response.json())
1497 + .then(data => {
1498 + if (data.success && data.data.filename) {
1499 + showActivePdf(data.data.filename);
1500 + activePdfFile = data.data.filename;
3194 1501 }
1502 + })
1503 + .catch(error => {
1504 + console.error('Error checking PDF status:', error);
1505 + });
3195 1506
3196 - // Validate name if field exists and has content
3197 - if (nameInput && userName && !isValidNameInput(userName)) {
3198 - showEmailError(botId, 'Please enter a valid name (2-100 characters).');
3199 - return false;
1507 + // Check Word document status
1508 + fetch(mxchatChat.ajax_url, {
1509 + method: 'POST',
1510 + headers: {
1511 + 'Content-Type': 'application/x-www-form-urlencoded',
1512 + },
1513 + body: new URLSearchParams({
1514 + 'action': 'mxchat_check_word_status',
1515 + 'session_id': sessionId,
1516 + 'nonce': mxchatChat.nonce
1517 + })
1518 + })
1519 + .then(response => response.json())
1520 + .then(data => {
1521 + if (data.success && data.data.filename) {
1522 + showActiveWord(data.data.filename);
1523 + activeWordFile = data.data.filename;
3200 1524 }
1525 + })
1526 + .catch(error => {
1527 + console.error('Error checking Word document status:', error);
1528 + });
1529 +}
3201 1530
3202 - clearEmailError(botId);
3203 - setEmailSubmissionState(botId, true);
1531 +// Apply toolbar settings
1532 +if (mxchatChat.chat_toolbar_toggle === 'on') {
1533 + $('.chat-toolbar').show();
1534 +} else {
1535 + $('.chat-toolbar').hide();
1536 +}
3204 1537
3205 - // Prepare form data
3206 - const formData = new URLSearchParams({
3207 - action: 'mxchat_handle_save_email_and_response',
3208 - email: userEmail,
3209 - session_id: sessionId,
3210 - nonce: mxchatChat.nonce,
3211 - });
1538 +// Initialize on page load
1539 +document.addEventListener('DOMContentLoaded', function() {
1540 + checkInitialDocumentStatus();
1541 +});
3212 1542
3213 - if (userName) {
3214 - formData.append('name', userName);
3215 - }
1543 +const toolbarElements = [
1544 + '#mxchat-chatbot .toolbar-btn svg',
1545 + '#mxchat-chatbot .active-pdf-name',
1546 + '#mxchat-chatbot .active-word-name',
1547 + '#mxchat-chatbot .remove-pdf-btn svg',
1548 + '#mxchat-chatbot .remove-word-btn svg',
1549 + '#mxchat-chatbot .toolbar-perplexity svg'
1550 +];
3216 1551
1552 +toolbarElements.forEach(selector => {
1553 + $(selector).css({
1554 + 'fill': toolbarIconColor,
1555 + 'stroke': toolbarIconColor,
1556 + 'color': toolbarIconColor
1557 + });
1558 +});
1559 +
1560 +
1561 +// Ensure essential elements are defined
1562 +const emailForm = document.getElementById('email-collection-form');
1563 +const emailBlocker = document.getElementById('email-blocker');
1564 +const chatbotWrapper = document.getElementById('chat-container');
1565 +
1566 +// Only show error if email collection is enabled but elements are missing
1567 +if (emailForm && emailBlocker && chatbotWrapper) {
1568 + // Check if email exists for the current session
1569 + function checkSessionAndEmail() {
1570 + const sessionId = getChatSession();
1571 + //console.log("[DEBUG JS] checkSessionAndEmail -> sessionId:", sessionId);
1572 +
3217 1573 fetch(mxchatChat.ajax_url, {
3218 1574 method: 'POST',
3219 1575 headers: {
3220 1576 'Content-Type': 'application/x-www-form-urlencoded',
3221 1577 },
3222 - body: formData
1578 + body: new URLSearchParams({
1579 + action: 'mxchat_check_email_provided',
1580 + session_id: sessionId,
1581 + nonce: mxchatChat.nonce,
1582 + }),
3223 1583 })
3224 - .then((response) => {
3225 - if (!response.ok) {
3226 - throw new Error(`HTTP error! status: ${response.status}`);
3227 - }
3228 - return response.json();
3229 - })
1584 + .then((response) => response.json())
3230 1585 .then((data) => {
3231 - setEmailSubmissionState(botId, false);
3232 -
1586 + //console.log("[DEBUG JS] mxchat_check_email_provided response:", data);
1587 +
3233 1588 if (data.success) {
3234 - showChatContainerForBot(botId);
3235 -
3236 - // Replace {visitor_name} placeholder in intro message with actual name
3237 - if (userName) {
3238 - replaceVisitorNamePlaceholder(botId, userName);
1589 + if (data.data.logged_in) {
1590 + //console.log("[DEBUG JS] User is logged in. Hiding email form.");
1591 + emailBlocker.style.display = 'none';
1592 + chatbotWrapper.style.display = 'flex';
1593 + } else if (data.data.email) {
1594 + //console.log("[DEBUG JS] Email found for session. Hiding email form.");
1595 + emailBlocker.style.display = 'none';
1596 + chatbotWrapper.style.display = 'flex';
3239 1597 } else {
3240 - // Remove placeholder if no name provided
3241 - replaceVisitorNamePlaceholder(botId, '');
1598 + //console.log("[DEBUG JS] No email provided. Showing email form.");
1599 + emailBlocker.style.display = 'flex';
1600 + chatbotWrapper.style.display = 'none';
3242 1601 }
3243 -
3244 - if (data.message && typeof appendMessage === 'function') {
3245 - setTimeout(() => {
3246 - appendMessage('bot', data.message, '', [], false, botId);
3247 - if (typeof scrollToBottom === 'function') {
3248 - scrollToBottom(botId);
3249 - }
3250 - }, 100);
3251 - }
3252 1602 } else {
3253 - showEmailError(botId, data.message || 'Failed to save email. Please try again.');
1603 + //console.log("[DEBUG JS] Error or no data received. Showing email form.");
1604 + emailBlocker.style.display = 'flex';
1605 + chatbotWrapper.style.display = 'none';
3254 1606 }
3255 1607 })
3256 1608 .catch((error) => {
3257 - setEmailSubmissionState(botId, false);
3258 - showEmailError(botId, 'An error occurred. Please try again.');
1609 + // console.error("[DEBUG JS] Fetch error -> forcing email form visible:", error);
1610 + emailBlocker.style.display = 'flex';
1611 + chatbotWrapper.style.display = 'none';
3259 1612 });
3260 -
3261 - return false;
3262 - });
3263 -
3264 - // Real-time email validation using event delegation
3265 - $(document).on('input', '.mxchat-email-input', function() {
3266 - var botId = getBotIdFromElement(this);
3267 - var $input = $(this);
3268 -
3269 - // Clear previous timeout
3270 - clearTimeout($input.data('validationTimeout'));
3271 -
3272 - // Debounce validation
3273 - var timeout = setTimeout(() => {
3274 - var email = this.value.trim();
3275 - clearEmailError(botId);
3276 -
3277 - if (email && !isValidEmailAddress(email)) {
3278 - showEmailError(botId, 'Please enter a valid email address.');
3279 - }
3280 - }, 500);
3281 -
3282 - $input.data('validationTimeout', timeout);
3283 - });
3284 -
3285 - // Handle Enter key in email input
3286 - $(document).on('keypress', '.mxchat-email-input', function(e) {
3287 - if (e.key === 'Enter') {
3288 - e.preventDefault();
3289 - var botId = getBotIdFromElement(this);
3290 - if (!emailSubmittingState[botId]) {
3291 - $(this).closest('.email-collection-form').submit();
3292 - }
3293 - }
3294 - });
3295 -
3296 - // Handle Enter key in name input
3297 - $(document).on('keypress', '.mxchat-name-input', function(e) {
3298 - if (e.key === 'Enter') {
3299 - e.preventDefault();
3300 - var botId = getBotIdFromElement(this);
3301 - if (!emailSubmittingState[botId]) {
3302 - $(this).closest('.email-collection-form').submit();
3303 - }
3304 - }
3305 - });
3306 -
3307 - // Initialize email check for all bot instances
3308 - // For floating bots: defer until widget is opened (zero passive AJAX)
3309 - // For embedded bots: check immediately since the form is visible
3310 - $('.mxchat-chatbot-wrapper').each(function() {
3311 - var botId = $(this).data('bot-id') || 'default';
3312 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3313 -
3314 - if (emailBlocker) {
3315 - if (isEmbeddedBot(botId)) {
3316 - // Embedded bots are always visible — check now
3317 - resolveEmailState(botId);
3318 - }
3319 - // Floating bots: handled in the widget open handler
3320 - } else if (isEmbeddedBot(botId)) {
3321 - // Embedded bot, no email collection — load history with loader
3322 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
3323 - if (chatPersistenceEnabled) {
3324 - MxChatInstances.ensureSession(botId);
3325 - showChatContainerForBot(botId);
3326 - }
3327 - }
3328 - });
3329 -}
3330 -
3331 - // Open chatbot when pre-chat message is clicked - use class selector for multi-instance
3332 - $(document).on('click', '.pre-chat-message', function() {
3333 - var botId = getBotIdFromElement(this);
3334 - var $chatbot = getElement(botId, 'floating-chatbot');
3335 - if ($chatbot.hasClass('hidden')) {
3336 - $chatbot.removeClass('hidden').addClass('visible');
3337 - getElement(botId, 'floating-chatbot-button').addClass('hidden');
3338 - handlePreChatDismissal(botId);
3339 - disableScroll(); // Disable scroll when chatbot opens
3340 -
3341 - // Load chat history for returning visitors (persistence)
3342 - var chatPersistenceEnabled = typeof mxchatChat !== 'undefined' && mxchatChat.chat_persistence_toggle === 'on';
3343 - if (chatPersistenceEnabled) {
3344 - MxChatInstances.ensureSession(botId);
3345 - }
3346 -
3347 - // Deferred email check — only on first widget open
3348 - var emailBlocker = getElementDOM(botId, 'email-blocker');
3349 - var instance = MxChatInstances.get(botId);
3350 - if (emailBlocker && !instance.emailCheckDone) {
3351 - instance.emailCheckDone = true;
3352 - resolveEmailState(botId);
3353 - } else if (!emailBlocker) {
3354 - showChatContainerForBot(botId);
3355 - }
3356 - }
3357 - });
3358 -
3359 - // Legacy duplicate close handler removed — handled by single event delegation above
3360 -
3361 -
3362 -function hasQuickQuestions(botId) {
3363 - botId = botId || 'default';
3364 - var questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
3365 - if (!questionsContainer) return false;
3366 - const questionButtons = questionsContainer.querySelectorAll('.mxchat-popular-question');
3367 - return questionButtons.length > 0;
3368 -}
3369 -
3370 -/**
3371 - * Check if a bot is embedded (not floating)
3372 - * Embedded bots don't have a .floating-chatbot wrapper
3373 - */
3374 -function isEmbeddedBot(botId) {
3375 - botId = botId || 'default';
3376 - var floatingWrapper = document.getElementById('floating-chatbot-' + botId);
3377 - return !floatingWrapper;
3378 -}
3379 -
3380 -function collapseQuickQuestions(botId) {
3381 - botId = botId || 'default';
3382 - const questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
3383 - if (questionsContainer && hasQuickQuestions(botId)) {
3384 - questionsContainer.classList.add('collapsed');
3385 - questionsContainer.classList.add('has-been-collapsed');
3386 - try {
3387 - sessionStorage.setItem('mxchat_questions_collapsed_' + botId, 'true');
3388 - sessionStorage.setItem('mxchat_questions_has_been_collapsed_' + botId, 'true');
3389 - } catch (e) {
3390 - // Ignore if sessionStorage is not available
3391 - }
3392 1613 }
3393 -}
3394 1614
3395 -function expandQuickQuestions(botId) {
3396 - botId = botId || 'default';
3397 - const questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
3398 - if (questionsContainer && hasQuickQuestions(botId)) {
3399 - questionsContainer.classList.remove('collapsed');
3400 - try {
3401 - sessionStorage.setItem('mxchat_questions_collapsed_' + botId, 'false');
3402 - } catch (e) {
3403 - // Ignore if sessionStorage is not available
3404 - }
3405 - }
3406 -}
1615 + // Handle email form submission
1616 + emailForm.addEventListener('submit', function (event) {
1617 + event.preventDefault();
1618 + const userEmail = document.getElementById('user-email').value;
1619 + const sessionId = getChatSession();
3407 1620
3408 -function checkQuickQuestionsState(botId) {
3409 - botId = botId || 'default';
3410 - if (!hasQuickQuestions(botId)) {
3411 - return; // Don't do anything if no questions exist
3412 - }
1621 + if (userEmail) {
1622 + fetch(mxchatChat.ajax_url, {
1623 + method: 'POST',
1624 + headers: {
1625 + 'Content-Type': 'application/x-www-form-urlencoded',
1626 + },
1627 + body: new URLSearchParams({
1628 + action: 'mxchat_handle_save_email_and_response',
1629 + email: userEmail,
1630 + session_id: sessionId,
1631 + nonce: mxchatChat.nonce,
1632 + }),
1633 + })
1634 + .then((response) => response.json())
1635 + .then((data) => {
1636 + //console.log('Backend response:', data);
1637 + if (data.success) {
1638 + //console.log('Email saved successfully:', userEmail);
1639 + emailBlocker.style.display = 'none';
1640 + chatbotWrapper.style.display = 'flex';
3413 1641
3414 - // Skip restoring collapsed state for embedded bots - they should always start expanded
3415 - if (isEmbeddedBot(botId)) {
3416 - return;
3417 - }
3418 -
3419 - try {
3420 - const isCollapsed = sessionStorage.getItem('mxchat_questions_collapsed_' + botId);
3421 - const hasBeenCollapsed = sessionStorage.getItem('mxchat_questions_has_been_collapsed_' + botId);
3422 -
3423 - const questionsContainer = getElementDOM(botId, 'mxchat-popular-questions');
3424 - if (questionsContainer) {
3425 - if (hasBeenCollapsed === 'true') {
3426 - questionsContainer.classList.add('has-been-collapsed');
3427 - }
3428 - if (isCollapsed === 'true') {
3429 - questionsContainer.classList.add('collapsed');
3430 - }
3431 - }
3432 - } catch (e) {
3433 - // Ignore if sessionStorage is not available
3434 - }
3435 -}
3436 -
3437 -// Global delegation for dynamically added links as fallback
3438 -// Use class selector for multi-instance support
3439 -$(document).on('click', '.chat-box a[href]:not([data-tracked])', function(e) {
3440 - const $link = $(this);
3441 - const messageDiv = $link.closest('.bot-message, .agent-message');
3442 -
3443 - // Only process bot/agent message links
3444 - if (messageDiv.length > 0) {
3445 - const originalHref = $link.attr('href');
3446 -
3447 - if (originalHref && (originalHref.startsWith('http://') || originalHref.startsWith('https://'))) {
3448 - e.preventDefault();
3449 - e.stopPropagation();
3450 -
3451 - // Mark as tracked
3452 - $link.attr('data-tracked', 'true');
3453 -
3454 - // Get bot ID from the chat box context
3455 - var botId = getBotIdFromElement(this);
3456 -
3457 - // Get message context from the message div
3458 - const messageText = messageDiv.text().substring(0, 200);
3459 -
3460 - $.ajax({
3461 - url: mxchatChat.ajax_url,
3462 - type: 'POST',
3463 - data: {
3464 - action: 'mxchat_track_url_click',
3465 - session_id: getChatSession(botId),
3466 - url: originalHref,
3467 - message_context: messageText,
3468 - nonce: mxchatChat.nonce
3469 - },
3470 - complete: function() {
3471 - if ($link.attr('target') === '_blank' || linkTarget === '_blank') {
3472 - window.open(originalHref, '_blank');
3473 - } else {
3474 - window.location.href = originalHref;
1642 + // Optionally handle bot response
1643 + if (data.message) {
1644 + appendMessage('bot', data.message);
1645 + scrollToBottom();
3475 1646 }
1647 + } else {
1648 + console.error('Error saving email:', data.message || 'Unknown error');
3476 1649 }
1650 + })
1651 + .catch((error) => {
1652 + console.error('AJAX error:', error);
3477 1653 });
3478 -
3479 - return false;
3480 1654 }
3481 - }
3482 -});
3483 -
3484 - // ====================================
3485 - // MAIN INITIALIZATION
3486 - // ====================================
3487 -
3488 - // Initialize all chatbot instances on the page
3489 - initializeAllInstances();
3490 -
3491 - // Legacy initialization for single bot compatibility
3492 - $('.floating-chatbot.hidden').each(function() {
3493 - var botId = getBotIdFromElement(this);
3494 - getElement(botId, 'floating-chatbot-button').removeClass('hidden');
3495 1655 });
3496 1656
3497 - // Initialize when document is ready
3498 - setFullHeight();
1657 + // Check session and email status on page load
1658 + checkSessionAndEmail();
1659 +} else if (mxchatChat.email_collection_enabled) {
1660 + // Only show error if email collection is enabled but elements are missing
1661 + console.error('Essential elements for email handling are missing.');
1662 +}
3499 1663
3500 - // Note: trackOriginatingPage() and loadChatHistory() are now deferred
3501 - // until the user's first interaction via MxChatInstances.ensureSession()
3502 1664
3503 - // Initialize chat visibility for all instances
3504 - $('.mxchat-chatbot-wrapper').each(function() {
3505 - var botId = $(this).data('bot-id') || 'default';
3506 - initializeChatVisibility(botId);
3507 - });
1665 +// Initialize when document is ready
1666 +$(document).ready(function() {
1667 + setFullHeight();
1668 + initializeChatVisibility();
1669 + loadChatHistory();
3508 1670
3509 - // Make functions globally available for add-ons
3510 - window.hasQuickQuestions = hasQuickQuestions;
3511 - window.collapseQuickQuestions = collapseQuickQuestions;
3512 - window.appendMessage = appendMessage;
3513 - window.appendThinkingMessage = appendThinkingMessage;
3514 - window.scrollToBottom = scrollToBottom;
3515 - window.scrollElementToTop = scrollElementToTop;
3516 - window.replaceLastMessage = replaceLastMessage;
3517 - window.callMxChat = callMxChat;
3518 - window.callMxChatStream = callMxChatStream;
3519 - window.shouldUseStreaming = shouldUseStreaming;
3520 - window.getChatSession = getChatSession;
3521 - window.getPageContext = getPageContext;
3522 - window.updateStreamingMessage = updateStreamingMessage;
3523 - window.MxChatInstances = MxChatInstances;
3524 - window.getElement = getElement;
3525 - window.getElementDOM = getElementDOM;
3526 - window.getBotIdFromElement = getBotIdFromElement;
1671 +});
3527 1672
3528 -}); // End of jQuery ready
1673 +});
3529 1674
3530 -
3531 -// ====================================
3532 -// GLOBAL EVENT LISTENERS (Outside jQuery)
3533 -// ====================================
3534 -
3535 -// Event listener for copy button (code blocks)
1675 +// Event listener for copy button
3536 1676 document.addEventListener("click", (e) => {
3537 1677 if (e.target.classList.contains("mxchat-copy-button")) {
3538 1678 const copyButton = e.target;
3539 1679 const codeBlock = copyButton
@@ -3553,5 +1693,7 @@
3553 1693 });
3554 1694 }
3555 1695 }
3556 1696 });
1697 +
1698 +
3557 1699