').html(html);
messages.push({
index: index,
content: $temp.text().trim()
});
});
// Send translation request
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'mxchat_translate_messages',
session_id: currentSessionId,
target_lang: targetLang,
messages: JSON.stringify(messages),
security: mxchatAdmin.translate_nonce || ''
},
success: function(response) {
if (response.success && response.translations) {
currentTranslationLang = response.language;
applyTranslations(response.translations);
$btn.find('.mxch-translate-text').text('Translate');
} else {
alert(response.error || 'Translation failed. Please try again.');
$btn.find('.mxch-translate-text').text('Translate');
}
},
error: function() {
alert('Translation request failed. Please try again.');
$btn.find('.mxch-translate-text').text('Translate');
},
complete: function() {
$btn.prop('disabled', false);
$btn.find('svg').removeClass('mxch-translate-spinner');
}
});
});
// Show original button click handler
$('#mxch-show-original-btn').on('click', function() {
if (!originalMessages) return;
// Restore original messages
$('#mxch-messages-area .mxch-message-bubble').each(function(index) {
if (originalMessages[index]) {
$(this).html(originalMessages[index]);
$(this).removeClass('translated');
}
});
isTranslated = false;
$(this).hide();
});
// Reset translation state (called when selecting new chat)
function resetTranslationState() {
originalMessages = null;
isTranslated = false;
currentTranslationLang = null;
$('#mxch-show-original-btn').hide();
}
// Make functions available to selectChat
window.resetTranslationState = resetTranslationState;
window.loadSavedTranslation = loadSavedTranslation;
// ==========================================================================
// RAG Context Modal (Sources & Actions Tabs)
// ==========================================================================
function openRagContextModal(messageId) {
const $modal = $('#mxch-rag-modal');
const $loading = $modal.find('.mxch-rag-loading');
const $sourcesContent = $modal.find('.mxch-rag-content');
const $actionsContent = $modal.find('.mxch-actions-content');
// Reset to Sources tab
$modal.find('.mxch-context-tab').removeClass('active');
$modal.find('.mxch-context-tab[data-tab="sources"]').addClass('active');
$('#mxch-tab-sources').show();
$('#mxch-tab-actions').hide();
// Reset badge counts
$('#mxch-sources-count, #mxch-actions-count').hide().text('0');
$modal.fadeIn(200);
$loading.show();
$sourcesContent.html('');
$actionsContent.html('');
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'mxchat_get_rag_context',
message_id: messageId
},
success: function(response) {
$loading.hide();
if (response.success && response.data) {
// Render sources tab
renderRagContext(response.data, $sourcesContent);
// Render actions tab
renderActionsContext(response.data, $actionsContent);
// Update badge counts
const sourcesCount = response.data.top_matches ? response.data.top_matches.length : 0;
const actionsCount = response.data.action_analysis ? response.data.action_analysis.length : 0;
if (sourcesCount > 0) {
$('#mxch-sources-count').text(sourcesCount).show();
}
if (actionsCount > 0) {
$('#mxch-actions-count').text(actionsCount).show();
}
} else {
$sourcesContent.html('
Unable to load document context.
');
$actionsContent.html('
No action data available.
');
}
},
error: function() {
$loading.hide();
$sourcesContent.html('
Error loading context. Please try again.
');
$actionsContent.html('
Error loading context. Please try again.
');
}
});
}
// Tab switching
$(document).on('click', '.mxch-context-tab', function() {
const $tab = $(this);
const tabName = $tab.data('tab');
// Update active tab
$('.mxch-context-tab').removeClass('active');
$tab.addClass('active');
// Show/hide content
$('.mxch-tab-content').hide();
$('#mxch-tab-' + tabName).show();
});
function renderRagContext(data, $container) {
let html = '';
// Check if we have any source data
if (!data.top_matches || data.top_matches.length === 0) {
html += '
No document matches found for this response.
';
$container.html(html);
return;
}
html += '
';
html += '
Knowledge Base: ' + escapeHtml(data.knowledge_base_type || 'WordPress Database') + '
';
html += '
Similarity Threshold: ' + Math.round((data.similarity_threshold || 0.35) * 100) + '%
';
html += '
Documents Checked: ' + (data.total_documents_checked || 0) + '
';
html += '
';
const groupedByUrl = {};
data.top_matches.forEach(function(match) {
const url = match.source_display || 'Unknown';
if (!groupedByUrl[url]) {
groupedByUrl[url] = {
url: url,
isUrl: url.startsWith('http'),
bestScore: 0,
usedForContext: false,
matchedChunks: []
};
}
if (match.similarity_percentage > groupedByUrl[url].bestScore) {
groupedByUrl[url].bestScore = match.similarity_percentage;
}
if (match.used_for_context) {
groupedByUrl[url].usedForContext = true;
}
groupedByUrl[url].matchedChunks.push({
chunkIndex: match.chunk_index,
score: match.similarity_percentage,
usedForContext: match.used_for_context
});
});
const urlGroups = Object.values(groupedByUrl).sort((a, b) => b.bestScore - a.bestScore);
const usedUrlCount = urlGroups.filter(g => g.usedForContext).length;
html += '
';
html += '
Retrieved Documents
';
html += '
' + usedUrlCount + ' entr' + (usedUrlCount === 1 ? 'y' : 'ies') + ' used for response
';
urlGroups.forEach(function(group) {
const cardClass = group.usedForContext ? 'mxch-rag-match-used' : 'mxch-rag-match-below';
const statusIcon = group.usedForContext ? '✓' : '✗';
const statusLabel = group.usedForContext ? 'Used' : 'Not Used';
html += '
';
html += '';
html += '
';
html += '
';
});
html += '
';
$container.html(html);
}
function renderActionsContext(data, $container) {
let html = '';
// Check if we have action analysis data
if (!data.action_analysis || data.action_analysis.length === 0) {
html += '
No action analysis available for this message.
Actions are only evaluated when enabled in your bot configuration.
';
$container.html(html);
return;
}
const actions = data.action_analysis;
const triggeredAction = actions.find(a => a.triggered);
const actionsAboveThreshold = actions.filter(a => a.above_threshold).length;
// Summary section
html += '
';
html += '
Actions Evaluated: ' + actions.length + '
';
html += '
Above Threshold: ' + actionsAboveThreshold + '
';
if (triggeredAction) {
html += '
Triggered: ' + escapeHtml(triggeredAction.intent_label) + '
';
}
html += '
';
// Actions list
html += '
';
html += '
Action Scores
';
html += '
Showing all evaluated actions sorted by similarity score
';
actions.forEach(function(action) {
let cardClass = 'mxch-rag-match-below';
let statusIcon = '✗';
let statusLabel = 'Below Threshold';
if (action.triggered) {
cardClass = 'mxch-action-triggered';
statusIcon = '⚡';
statusLabel = 'Triggered';
} else if (action.above_threshold) {
cardClass = 'mxch-rag-match-used';
statusIcon = '✓';
statusLabel = 'Above Threshold';
}
html += '
';
html += '';
html += '
';
html += '
' + escapeHtml(action.intent_label) + '
';
html += '
Callback: ' + escapeHtml(action.callback_function) + '
';
html += '
';
// Score bar visualization
const scoreBarWidth = Math.min(action.similarity_percentage, 100);
const thresholdPos = Math.min(action.threshold_percentage, 100);
html += '
';
html += '
';
html += '
';
html += '
';
html += '
';
});
html += '
';
$container.html(html);
}
function escapeHtml(text) {
if (!text) return '';
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// Close RAG modal
$('.mxch-modal-close').on('click', function() {
$(this).closest('.mxch-modal-overlay').fadeOut(200);
});
$('.mxch-modal-overlay').on('click', function(e) {
if ($(e.target).is('.mxch-modal-overlay')) {
$(this).fadeOut(200);
}
});
$(document).on('keydown', function(e) {
if (e.key === 'Escape') {
$('.mxch-modal-overlay').fadeOut(200);
}
});
// ==========================================================================
// Activity Chart
// ==========================================================================
// Simple chart implementation (no external dependencies)
class SimpleChart {
constructor(canvas, config) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.config = config;
this.padding = { top: 20, right: 20, bottom: 40, left: 50 };
this.render();
}
destroy() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
render() {
const dpr = window.devicePixelRatio || 1;
const rect = this.canvas.getBoundingClientRect();
this.canvas.width = rect.width * dpr;
this.canvas.height = rect.height * dpr;
this.ctx.scale(dpr, dpr);
this.canvas.style.width = rect.width + 'px';
this.canvas.style.height = rect.height + 'px';
const width = rect.width - this.padding.left - this.padding.right;
const height = rect.height - this.padding.top - this.padding.bottom;
// Find max value
let maxValue = 0;
this.config.datasets.forEach(dataset => {
const max = Math.max(...dataset.data);
if (max > maxValue) maxValue = max;
});
// Add some padding to max value
maxValue = Math.ceil(maxValue * 1.1);
if (maxValue === 0) maxValue = 10;
// Draw grid lines
this.ctx.strokeStyle = '#e5e7eb';
this.ctx.lineWidth = 1;
const gridLines = 5;
for (let i = 0; i <= gridLines; i++) {
const y = this.padding.top + (height / gridLines) * i;
this.ctx.beginPath();
this.ctx.moveTo(this.padding.left, y);
this.ctx.lineTo(this.padding.left + width, y);
this.ctx.stroke();
// Draw y-axis labels
const value = maxValue - (maxValue / gridLines) * i;
this.ctx.fillStyle = '#6b7280';
this.ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
this.ctx.textAlign = 'right';
this.ctx.fillText(Math.round(value), this.padding.left - 10, y + 4);
}
// Draw datasets
this.config.datasets.forEach(dataset => {
const points = [];
const xStep = width / (this.config.labels.length - 1 || 1);
dataset.data.forEach((value, index) => {
const x = this.padding.left + (xStep * index);
const y = this.padding.top + height - (value / maxValue * height);
points.push({ x, y, value });
});
// Draw filled area
if (dataset.fill && dataset.backgroundColor) {
this.ctx.fillStyle = dataset.backgroundColor;
this.ctx.beginPath();
this.ctx.moveTo(points[0].x, this.padding.top + height);
points.forEach(point => {
this.ctx.lineTo(point.x, point.y);
});
this.ctx.lineTo(points[points.length - 1].x, this.padding.top + height);
this.ctx.closePath();
this.ctx.fill();
}
// Draw line
this.ctx.strokeStyle = dataset.borderColor;
this.ctx.lineWidth = 3;
this.ctx.lineCap = 'round';
this.ctx.lineJoin = 'round';
this.ctx.beginPath();
points.forEach((point, index) => {
if (index === 0) {
this.ctx.moveTo(point.x, point.y);
} else {
this.ctx.lineTo(point.x, point.y);
}
});
this.ctx.stroke();
// Draw points
points.forEach(point => {
this.ctx.fillStyle = '#ffffff';
this.ctx.beginPath();
this.ctx.arc(point.x, point.y, 5, 0, Math.PI * 2);
this.ctx.fill();
this.ctx.strokeStyle = dataset.borderColor;
this.ctx.lineWidth = 2;
this.ctx.stroke();
});
});
// Draw x-axis labels
const xStep = width / (this.config.labels.length - 1 || 1);
this.ctx.fillStyle = '#6b7280';
this.ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
this.ctx.textAlign = 'center';
this.config.labels.forEach((label, index) => {
const x = this.padding.left + (xStep * index);
this.ctx.fillText(label, x, this.padding.top + height + 20);
});
}
}
// Initialize activity chart
function initActivityChart() {
console.log('[MxChat Chart] initActivityChart called');
const canvas = document.getElementById('mxchat-activity-chart');
console.log('[MxChat Chart] Canvas element:', canvas);
if (!canvas) {
console.log('[MxChat Chart] Canvas not found, aborting');
return;
}
console.log('[MxChat Chart] mxchatChartData exists:', typeof mxchatChartData !== 'undefined');
if (typeof mxchatChartData === 'undefined') {
console.log('[MxChat Chart] mxchatChartData is undefined, aborting');
return;
}
console.log('[MxChat Chart] Raw mxchatChartData:', mxchatChartData);
// Check if chart already exists and destroy it
if (canvas.chartInstance) {
canvas.chartInstance.destroy();
}
const ctx = canvas.getContext('2d');
console.log('[MxChat Chart] Canvas context:', ctx);
console.log('[MxChat Chart] Canvas dimensions:', canvas.getBoundingClientRect());
// Create gradient for chats line
const chatsGradient = ctx.createLinearGradient(0, 0, 0, 300);
chatsGradient.addColorStop(0, 'rgba(102, 126, 234, 0.3)');
chatsGradient.addColorStop(1, 'rgba(102, 126, 234, 0.05)');
// Create gradient for messages line
const messagesGradient = ctx.createLinearGradient(0, 0, 0, 300);
messagesGradient.addColorStop(0, 'rgba(118, 75, 162, 0.3)');
messagesGradient.addColorStop(1, 'rgba(118, 75, 162, 0.05)');
// Convert wp_localize_script objects to arrays (WordPress converts indexed arrays to objects)
const labels = Object.values(mxchatChartData.labels);
const chatsData = Object.values(mxchatChartData.chats).map(Number);
const messagesData = Object.values(mxchatChartData.messages).map(Number);
console.log('[MxChat Chart] Processed labels:', labels);
console.log('[MxChat Chart] Processed chatsData:', chatsData);
console.log('[MxChat Chart] Processed messagesData:', messagesData);
// Create chart
try {
canvas.chartInstance = new SimpleChart(canvas, {
labels: labels,
datasets: [
{
label: 'Chats',
data: chatsData,
borderColor: '#667eea',
backgroundColor: chatsGradient,
fill: true
},
{
label: 'Messages',
data: messagesData,
borderColor: '#764ba2',
backgroundColor: messagesGradient,
fill: true
}
]
});
console.log('[MxChat Chart] Chart created successfully');
} catch (error) {
console.error('[MxChat Chart] Error creating chart:', error);
}
}
// Initialize chart on page load (dashboard is shown by default)
setTimeout(function() {
initActivityChart();
}, 100);
// Reinitialize chart on window resize
let resizeTimeout;
$(window).on('resize', function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
initActivityChart();
}, 250);
});
});