PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 3.2.12
MxChat – AI Chatbot & Content Generation for WordPress v3.2.12
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
mxchat-basic / includes / admin-transcripts-page.php

admin-transcripts-page.php in MxChat – AI Chatbot & Content Generation for WordPress 3.2.12, at includes/admin-transcripts-page.php

980 lines 76.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 /**
3 * MxChat Chat Transcripts Page - Redesigned with Sidebar Navigation
4 *
5 * @package MxChat
6 * @since 2.7.0
7 */
8
9 if (!defined('ABSPATH')) {
10 exit;
11 }
12
13 /**
14 * Render the new sidebar-based Transcripts page
15 */
16 function mxchat_render_transcripts_page($admin_instance, $page_data) {
17 $is_activated = $admin_instance->is_activated();
18 $plugin_url = plugin_dir_url(dirname(__FILE__));
19
20 // Extract page data
21 extract($page_data);
22 ?>
23 <div class="mxch-admin-wrapper">
24 <!-- Mobile Header -->
25 <header class="mxch-mobile-header">
26 <a href="#" class="mxch-mobile-logo">
27 <div class="mxch-mobile-logo-icon">
28 <img src="<?php echo esc_url($plugin_url . 'images/icon-128x128.png'); ?>" alt="MxChat">
29 </div>
30 <span class="mxch-mobile-logo-text">MxChat</span>
31 </a>
32 <button type="button" class="mxch-mobile-menu-btn" aria-label="<?php esc_attr_e('Open menu', 'mxchat'); ?>">
33 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
34 </button>
35 </header>
36
37 <!-- Mobile Menu Overlay -->
38 <div class="mxch-mobile-overlay"></div>
39
40 <!-- Mobile Menu Modal -->
41 <div class="mxch-mobile-menu">
42 <div class="mxch-mobile-menu-header">
43 <span class="mxch-mobile-menu-title"><?php esc_html_e('Transcripts', 'mxchat'); ?></span>
44 <button type="button" class="mxch-mobile-menu-close" aria-label="<?php esc_attr_e('Close menu', 'mxchat'); ?>">
45 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
46 </button>
47 </div>
48 <nav class="mxch-mobile-menu-nav">
49 <!-- Overview Section -->
50 <div class="mxch-mobile-nav-section">
51 <div class="mxch-mobile-nav-section-title"><?php esc_html_e('Overview', 'mxchat'); ?></div>
52 <button class="mxch-mobile-nav-link active" data-target="dashboard">
53 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
54 <span><?php esc_html_e('Dashboard', 'mxchat'); ?></span>
55 </button>
56 </div>
57 <!-- Conversations Section -->
58 <div class="mxch-mobile-nav-section">
59 <div class="mxch-mobile-nav-section-title"><?php esc_html_e('Conversations', 'mxchat'); ?></div>
60 <button class="mxch-mobile-nav-link" data-target="all-chats">
61 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
62 <span><?php esc_html_e('All Chats', 'mxchat'); ?></span>
63 </button>
64 <button class="mxch-mobile-nav-link" data-target="leads">
65 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><polyline points="17 11 19 13 23 9"/></svg>
66 <span><?php esc_html_e('Leads', 'mxchat'); ?></span>
67 </button>
68 </div>
69 <!-- Settings Section -->
70 <div class="mxch-mobile-nav-section">
71 <div class="mxch-mobile-nav-section-title"><?php esc_html_e('Settings', 'mxchat'); ?></div>
72 <button class="mxch-mobile-nav-link" data-target="notifications">
73 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
74 <span><?php esc_html_e('Notifications', 'mxchat'); ?></span>
75 </button>
76 </div>
77 <?php if (!$is_activated): ?>
78 <div class="mxch-mobile-menu-footer">
79 <a href="https://mxchat.ai/" target="_blank" class="mxch-mobile-upgrade-btn">
80 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>
81 <?php esc_html_e('Upgrade to Pro', 'mxchat'); ?>
82 </a>
83 </div>
84 <?php endif; ?>
85 </nav>
86 </div>
87
88 <!-- Sidebar Navigation -->
89 <aside class="mxch-sidebar">
90 <div class="mxch-sidebar-header">
91 <a href="#" class="mxch-sidebar-logo">
92 <div class="mxch-sidebar-logo-icon">
93 <img src="<?php echo esc_url($plugin_url . 'images/icon-128x128.png'); ?>" alt="MxChat">
94 </div>
95 <span class="mxch-sidebar-logo-text">MxChat</span>
96 <span class="mxch-sidebar-version">v<?php echo esc_html(MXCHAT_VERSION ?? '2.7.0'); ?></span>
97 </a>
98 </div>
99
100 <nav class="mxch-sidebar-nav">
101 <!-- Overview Section -->
102 <div class="mxch-nav-section">
103 <div class="mxch-nav-section-title"><?php esc_html_e('Overview', 'mxchat'); ?></div>
104
105 <div class="mxch-nav-item" data-section="dashboard">
106 <button class="mxch-nav-link active" data-target="dashboard">
107 <span class="mxch-nav-link-icon">
108 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
109 </span>
110 <span class="mxch-nav-link-text"><?php esc_html_e('Dashboard', 'mxchat'); ?></span>
111 </button>
112 </div>
113 </div>
114
115 <!-- Conversations Section -->
116 <div class="mxch-nav-section">
117 <div class="mxch-nav-section-title"><?php esc_html_e('Conversations', 'mxchat'); ?></div>
118
119 <div class="mxch-nav-item" data-section="all-chats">
120 <button class="mxch-nav-link" data-target="all-chats">
121 <span class="mxch-nav-link-icon">
122 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
123 </span>
124 <span class="mxch-nav-link-text"><?php esc_html_e('All Chats', 'mxchat'); ?></span>
125 <span class="mxch-nav-link-badge"><?php echo esc_html($total_chats); ?></span>
126 </button>
127 </div>
128
129 <div class="mxch-nav-item" data-section="leads">
130 <button class="mxch-nav-link" data-target="leads">
131 <span class="mxch-nav-link-icon">
132 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><polyline points="17 11 19 13 23 9"/></svg>
133 </span>
134 <span class="mxch-nav-link-text"><?php esc_html_e('Leads', 'mxchat'); ?></span>
135 <span class="mxch-nav-link-badge" id="mxch-leads-nav-badge" style="display:none;">0</span>
136 </button>
137 </div>
138 </div>
139
140 <!-- Settings Section -->
141 <div class="mxch-nav-section">
142 <div class="mxch-nav-section-title"><?php esc_html_e('Settings', 'mxchat'); ?></div>
143
144 <div class="mxch-nav-item" data-section="notifications">
145 <button class="mxch-nav-link" data-target="notifications">
146 <span class="mxch-nav-link-icon">
147 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
148 </span>
149 <span class="mxch-nav-link-text"><?php esc_html_e('Notifications', 'mxchat'); ?></span>
150 </button>
151 </div>
152 </div>
153 </nav>
154
155 <?php if (!$is_activated): ?>
156 <div class="mxch-sidebar-footer">
157 <a href="https://mxchat.ai/" target="_blank" class="mxch-sidebar-upgrade-v2">
158 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
159 <?php esc_html_e('Pro Upgrade', 'mxchat'); ?>
160 </a>
161 </div>
162 <?php endif; ?>
163 </aside>
164
165 <!-- Main Content Area -->
166 <main class="mxch-content">
167 <!-- Dashboard Section -->
168 <div id="dashboard" class="mxch-section active">
169 <div class="mxch-content-header">
170 <h1 class="mxch-content-title"><?php esc_html_e('Transcripts Dashboard', 'mxchat'); ?></h1>
171 <p class="mxch-content-subtitle"><?php esc_html_e('Overview of your chatbot conversations and engagement metrics.', 'mxchat'); ?></p>
172 </div>
173
174 <!-- Stats Grid -->
175 <div class="mxch-stats-grid">
176 <div class="mxch-stat-card">
177 <div class="mxch-stat-icon mxch-stat-icon-primary">
178 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
179 </div>
180 <div class="mxch-stat-content">
181 <span class="mxch-stat-value"><?php echo esc_html($total_chats); ?></span>
182 <span class="mxch-stat-label"><?php esc_html_e('Total Chats', 'mxchat'); ?></span>
183 </div>
184 </div>
185
186 <div class="mxch-stat-card">
187 <div class="mxch-stat-icon mxch-stat-icon-success">
188 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
189 </div>
190 <div class="mxch-stat-content">
191 <span class="mxch-stat-value"><?php echo esc_html($total_messages); ?></span>
192 <span class="mxch-stat-label"><?php esc_html_e('Total Messages', 'mxchat'); ?></span>
193 </div>
194 </div>
195
196 <div class="mxch-stat-card">
197 <div class="mxch-stat-icon mxch-stat-icon-info">
198 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
199 </div>
200 <div class="mxch-stat-content">
201 <span class="mxch-stat-value"><?php echo esc_html($total_users); ?></span>
202 <span class="mxch-stat-label"><?php esc_html_e('Unique Users', 'mxchat'); ?></span>
203 <span class="mxch-stat-sublabel">
204 <?php
205 echo sprintf(
206 esc_html__('%d registered, %d guests', 'mxchat'),
207 $registered_users,
208 $guest_users
209 );
210 ?>
211 </span>
212 </div>
213 </div>
214
215 <div class="mxch-stat-card">
216 <div class="mxch-stat-icon mxch-stat-icon-warning">
217 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
218 </div>
219 <div class="mxch-stat-content">
220 <span class="mxch-stat-value"><?php echo esc_html($avg_messages); ?></span>
221 <span class="mxch-stat-label"><?php esc_html_e('Avg Messages/Chat', 'mxchat'); ?></span>
222 </div>
223 </div>
224 </div>
225
226 <!-- Activity Cards Row -->
227 <div class="mxch-cards-row">
228 <!-- Activity Timeline Card -->
229 <div class="mxch-card mxch-card-flex">
230 <div class="mxch-card-header">
231 <h3 class="mxch-card-title">
232 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
233 <?php esc_html_e('Recent Activity', 'mxchat'); ?>
234 </h3>
235 </div>
236 <div class="mxch-card-body">
237 <div class="mxch-activity-stats">
238 <div class="mxch-activity-item">
239 <div class="mxch-activity-icon mxch-activity-today">
240 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
241 </div>
242 <div class="mxch-activity-content">
243 <span class="mxch-activity-value"><?php echo esc_html($today_chats); ?></span>
244 <span class="mxch-activity-label"><?php esc_html_e('Today', 'mxchat'); ?></span>
245 </div>
246 </div>
247 <div class="mxch-activity-item">
248 <div class="mxch-activity-icon mxch-activity-week">
249 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
250 </div>
251 <div class="mxch-activity-content">
252 <span class="mxch-activity-value"><?php echo esc_html($week_chats); ?></span>
253 <span class="mxch-activity-label"><?php esc_html_e('Last 7 Days', 'mxchat'); ?></span>
254 </div>
255 </div>
256 <div class="mxch-activity-item">
257 <div class="mxch-activity-icon mxch-activity-month">
258 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
259 </div>
260 <div class="mxch-activity-content">
261 <span class="mxch-activity-value"><?php echo esc_html($month_chats); ?></span>
262 <span class="mxch-activity-label"><?php esc_html_e('Last 30 Days', 'mxchat'); ?></span>
263 </div>
264 </div>
265 </div>
266 </div>
267 </div>
268
269 <!-- Insights Card -->
270 <div class="mxch-card mxch-card-flex">
271 <div class="mxch-card-header">
272 <h3 class="mxch-card-title">
273 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
274 <?php esc_html_e('Insights', 'mxchat'); ?>
275 </h3>
276 </div>
277 <div class="mxch-card-body">
278 <div class="mxch-insights-list">
279 <div class="mxch-insight-item">
280 <span class="mxch-insight-label"><?php esc_html_e('Peak Activity', 'mxchat'); ?></span>
281 <span class="mxch-insight-value">
282 <?php
283 if ($busiest_hour) {
284 $hour = $busiest_hour->hour;
285 $formatted_hour = date('g A', strtotime("$hour:00"));
286 echo esc_html($formatted_hour);
287 } else {
288 echo esc_html__('N/A', 'mxchat');
289 }
290 ?>
291 </span>
292 </div>
293 <div class="mxch-insight-item">
294 <span class="mxch-insight-label"><?php esc_html_e('Engagement Rate', 'mxchat'); ?></span>
295 <span class="mxch-insight-value">
296 <?php
297 $engagement_rate = $total_chats > 0 ? round(($total_messages / $total_chats), 1) : 0;
298 echo esc_html($engagement_rate . ' msg/chat');
299 ?>
300 </span>
301 </div>
302 <div class="mxch-insight-item">
303 <span class="mxch-insight-label"><?php esc_html_e('Status', 'mxchat'); ?></span>
304 <span class="mxch-insight-value">
305 <?php
306 if ($today_chats > 0) {
307 echo '<span class="mxch-status-badge mxch-status-active">' . esc_html__('Active', 'mxchat') . '</span>';
308 } else if ($week_chats > 0) {
309 echo '<span class="mxch-status-badge mxch-status-moderate">' . esc_html__('Moderate', 'mxchat') . '</span>';
310 } else {
311 echo '<span class="mxch-status-badge mxch-status-quiet">' . esc_html__('Quiet', 'mxchat') . '</span>';
312 }
313 ?>
314 </span>
315 </div>
316 <div class="mxch-insight-item">
317 <span class="mxch-insight-label"><?php esc_html_e('Agent Tests', 'mxchat'); ?></span>
318 <span class="mxch-insight-value"><?php echo esc_html($agent_tests); ?></span>
319 </div>
320 </div>
321 </div>
322 </div>
323 </div>
324
325 <!-- Satisfaction (last 30 days) plan-a5b006 -->
326 <div class="mxch-card mxch-satisfaction-card">
327 <div class="mxch-card-header">
328 <h3 class="mxch-card-title">
329 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H7"/><path d="M3 10h4"/></svg>
330 <?php esc_html_e('Satisfaction (last 30 days)', 'mxchat'); ?>
331 </h3>
332 </div>
333 <div class="mxch-card-body">
334 <?php
335 $satisfaction_stats = isset($satisfaction_stats) && is_array($satisfaction_stats) ? $satisfaction_stats : array();
336 if (empty($satisfaction_stats)) :
337 ?>
338 <p class="mxch-satisfaction-empty">
339 <?php esc_html_e('No ratings yet. The widget shows the prompt after a conversation has had at least two bot replies and the visitor goes idle for 60 seconds.', 'mxchat'); ?>
340 </p>
341 <?php
342 else :
343 ?>
344 <ul class="mxch-satisfaction-list">
345 <?php foreach ($satisfaction_stats as $row) :
346 $bot_label = $row['bot_id'] === 'default'
347 ? esc_html__('Default bot', 'mxchat')
348 : esc_html($row['bot_id']);
349 ?>
350 <li class="mxch-satisfaction-row">
351 <span class="mxch-satisfaction-bot"><?php echo $bot_label; ?></span>
352 <span class="mxch-satisfaction-meta">
353 <span class="mxch-satisfaction-total"><?php
354 echo esc_html(sprintf(
355 /* translators: %d: number of rated sessions */
356 _n('%d rated session', '%d rated sessions', $row['total'], 'mxchat'),
357 $row['total']
358 ));
359 ?></span>
360 <span class="mxch-satisfaction-bar" aria-hidden="true">
361 <span class="mxch-satisfaction-bar-up" style="width: <?php echo esc_attr($row['positive_pct']); ?>%;"></span>
362 <span class="mxch-satisfaction-bar-down" style="width: <?php echo esc_attr($row['negative_pct']); ?>%;"></span>
363 </span>
364 <span class="mxch-satisfaction-pct mxch-satisfaction-pct-up" title="<?php esc_attr_e('Positive ratings', 'mxchat'); ?>">
365 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H7"/><path d="M3 10h4"/></svg>
366 <?php echo esc_html($row['positive_pct']); ?>%
367 </span>
368 <span class="mxch-satisfaction-pct mxch-satisfaction-pct-down" title="<?php esc_attr_e('Negative ratings', 'mxchat'); ?>">
369 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H17"/><path d="M21 14h-4"/></svg>
370 <?php echo esc_html($row['negative_pct']); ?>%
371 </span>
372 </span>
373 </li>
374 <?php endforeach; ?>
375 </ul>
376 <?php
377 endif;
378 ?>
379 </div>
380 </div>
381
382 <!-- Activity Chart -->
383 <div class="mxch-card mxch-activity-chart-card">
384 <div class="mxch-card-header">
385 <h3 class="mxch-card-title">
386 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
387 <?php esc_html_e('7-Day Activity', 'mxchat'); ?>
388 </h3>
389 <div class="mxch-chart-legend">
390 <span class="mxch-legend-item mxch-legend-chats">
391 <span class="mxch-legend-dot"></span>
392 <?php esc_html_e('Chats', 'mxchat'); ?>
393 </span>
394 <span class="mxch-legend-item mxch-legend-messages">
395 <span class="mxch-legend-dot"></span>
396 <?php esc_html_e('Messages', 'mxchat'); ?>
397 </span>
398 </div>
399 </div>
400 <div class="mxch-card-body">
401 <div class="mxch-chart-container">
402 <canvas id="mxchat-activity-chart"></canvas>
403 </div>
404 </div>
405 </div>
406
407 <!-- Quick Actions -->
408 <div class="mxch-card">
409 <div class="mxch-card-header">
410 <h3 class="mxch-card-title">
411 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
412 <?php esc_html_e('Quick Actions', 'mxchat'); ?>
413 </h3>
414 </div>
415 <div class="mxch-card-body">
416 <div class="mxch-quick-actions">
417 <button type="button" class="mxch-quick-action-btn" data-action="view-chats">
418 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
419 <span><?php esc_html_e('View All Chats', 'mxchat'); ?></span>
420 </button>
421 <button type="button" id="mxch-export-btn" class="mxch-quick-action-btn">
422 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
423 <span><?php esc_html_e('Export All Chats', 'mxchat'); ?></span>
424 </button>
425 <button type="button" class="mxch-quick-action-btn" data-action="settings">
426 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
427 <span><?php esc_html_e('Notification Settings', 'mxchat'); ?></span>
428 </button>
429 </div>
430 </div>
431 </div>
432 </div>
433
434 <!-- All Chats Section - Split Panel Layout -->
435 <div id="all-chats" class="mxch-section">
436 <div class="mxch-split-panel">
437 <!-- Left Panel - Chat List -->
438 <div class="mxch-chat-list-panel">
439 <!-- Bulk Actions Toolbar -->
440 <div class="mxch-bulk-toolbar">
441 <label class="mxch-bulk-select-all">
442 <input type="checkbox" id="mxch-select-all">
443 <span><?php esc_html_e('All', 'mxchat'); ?></span>
444 </label>
445 <span class="mxch-selected-count" id="mxch-selected-count">0</span>
446 <div class="mxch-bulk-actions">
447 <button type="button" class="mxch-bulk-btn" id="mxch-sort-btn" title="<?php esc_attr_e('Sort', 'mxchat'); ?>">
448 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="16" y2="6"/><line x1="4" y1="12" x2="12" y2="12"/><line x1="4" y1="18" x2="8" y2="18"/><polyline points="15 15 18 18 21 15"/></svg>
449 <span><?php esc_html_e('Sort', 'mxchat'); ?></span>
450 </button>
451 <button type="button" class="mxch-bulk-btn mxch-bulk-delete" id="mxch-delete-selected" disabled title="<?php esc_attr_e('Delete Selected', 'mxchat'); ?>">
452 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
453 </button>
454 </div>
455 </div>
456 <div class="mxch-panel-header">
457 <div class="mxch-search-wrapper">
458 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
459 <input type="text" id="mxch-search-transcripts" class="mxch-search-input" placeholder="<?php esc_attr_e('Search chats...', 'mxchat'); ?>">
460 </div>
461 <div class="mxch-panel-title-row">
462 <span class="mxch-panel-count" id="mxch-chat-count">0 / 0 chats</span>
463 <div class="mxch-panel-actions">
464 <button type="button" id="mxch-refresh-list" class="mxch-icon-btn" title="<?php esc_attr_e('Refresh', 'mxchat'); ?>">
465 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>
466 </button>
467 </div>
468 </div>
469 </div>
470 <div class="mxch-chat-list" id="mxch-chat-list">
471 <!-- Chat list items loaded via AJAX -->
472 </div>
473 <div class="mxch-panel-footer">
474 <div class="mxch-pagination-simple" id="mxch-pagination">
475 <!-- Pagination controls -->
476 </div>
477 </div>
478 </div>
479
480 <!-- Right Panel - Conversation View -->
481 <div class="mxch-conversation-panel" id="mxch-conversation-panel">
482 <!-- Empty State -->
483 <div class="mxch-conversation-empty" id="mxch-conversation-empty">
484 <div class="mxch-empty-icon">
485 <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
486 </div>
487 <h3><?php esc_html_e('Select a conversation', 'mxchat'); ?></h3>
488 <p><?php esc_html_e('Choose a chat from the list to view the full conversation.', 'mxchat'); ?></p>
489 </div>
490
491 <!-- Conversation Content (hidden initially) -->
492 <div class="mxch-conversation-content" id="mxch-conversation-content" style="display: none;">
493 <!-- Header -->
494 <div class="mxch-conversation-header">
495 <button type="button" class="mxch-mobile-back-btn" id="mxch-transcript-back-btn" style="display: none;" title="<?php esc_attr_e('Back to list', 'mxchat'); ?>">
496 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
497 </button>
498 <div class="mxch-user-avatar" id="mxch-user-avatar">
499 <span>MX</span>
500 </div>
501 <div class="mxch-user-info">
502 <div class="mxch-user-name" id="mxch-user-name">User Name</div>
503 <div class="mxch-user-meta" id="mxch-user-meta">User ID: 123</div>
504 </div>
505 <button type="button" class="mxch-details-toggle" id="mxch-toggle-details" title="<?php esc_attr_e('Show details', 'mxchat'); ?>">
506 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
507 </button>
508 </div>
509
510 <!-- Details Drawer (collapsible) -->
511 <div class="mxch-details-drawer" id="mxch-details-drawer" style="display: none;">
512 <div class="mxch-details-section">
513 <h4><?php esc_html_e('Chat Details', 'mxchat'); ?></h4>
514 <div class="mxch-detail-row">
515 <span class="mxch-detail-label"><?php esc_html_e('Total Messages', 'mxchat'); ?></span>
516 <span class="mxch-detail-value" id="mxch-detail-messages">0</span>
517 </div>
518 <div class="mxch-detail-row">
519 <span class="mxch-detail-label"><?php esc_html_e('Started', 'mxchat'); ?></span>
520 <span class="mxch-detail-value" id="mxch-detail-started">-</span>
521 </div>
522 <div class="mxch-detail-row">
523 <span class="mxch-detail-label"><?php esc_html_e('Page', 'mxchat'); ?></span>
524 <span class="mxch-detail-value" id="mxch-detail-page">-</span>
525 </div>
526 <div class="mxch-detail-row" id="mxch-detail-ip-row" style="display: none;">
527 <span class="mxch-detail-label"><?php esc_html_e('IP Address', 'mxchat'); ?></span>
528 <span class="mxch-detail-value" id="mxch-detail-ip">-</span>
529 </div>
530 <div class="mxch-detail-row" id="mxch-detail-email-row" style="display: none;">
531 <span class="mxch-detail-label"><?php esc_html_e('Email', 'mxchat'); ?></span>
532 <span class="mxch-detail-value" id="mxch-detail-email">-</span>
533 </div>
534 <div class="mxch-detail-row" id="mxch-detail-feedback-row" style="display: none;">
535 <span class="mxch-detail-label"><?php esc_html_e('Feedback', 'mxchat'); ?></span>
536 <span class="mxch-detail-value mxch-detail-feedback-value" id="mxch-detail-feedback">-</span>
537 </div>
538 </div>
539 <div class="mxch-details-section" id="mxch-clicked-section" style="display: none;">
540 <h4><?php esc_html_e('Clicked Links', 'mxchat'); ?></h4>
541 <div class="mxch-clicked-links" id="mxch-clicked-links">
542 <!-- Links populated via JS -->
543 </div>
544 </div>
545 <div class="mxch-details-actions">
546 <button type="button" id="mxch-delete-current" class="mxch-btn mxch-btn-danger mxch-btn-sm">
547 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
548 <?php esc_html_e('Delete Chat', 'mxchat'); ?>
549 </button>
550 <button type="button" id="mxch-export-current" class="mxch-btn mxch-btn-secondary mxch-btn-sm">
551 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
552 <?php esc_html_e('Export', 'mxchat'); ?>
553 </button>
554 </div>
555 <div class="mxch-translate-section">
556 <div class="mxch-translate-controls">
557 <select id="mxch-translate-lang" class="mxch-translate-select" title="<?php esc_attr_e('Target language', 'mxchat'); ?>">
558 <option value="en">English</option>
559 <option value="es">Español</option>
560 <option value="fr">Français</option>
561 <option value="de">Deutsch</option>
562 <option value="it">Italiano</option>
563 <option value="pt">Português</option>
564 <option value="nl">Nederlands</option>
565 <option value="ru">Русский</option>
566 <option value="zh">中文</option>
567 <option value="ja">日本語</option>
568 <option value="ko">한국어</option>
569 <option value="ar">العربية</option>
570 <option value="hi">हिन्दी</option>
571 <option value="tr">Türkçe</option>
572 <option value="pl">Polski</option>
573 <option value="vi">Tiếng Việt</option>
574 <option value="th">ไทย</option>
575 <option value="id">Bahasa Indonesia</option>
576 <option value="sv">Svenska</option>
577 <option value="da">Dansk</option>
578 </select>
579 <button type="button" id="mxch-translate-btn" class="mxch-btn mxch-btn-primary mxch-btn-sm">
580 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>
581 <span class="mxch-translate-text"><?php esc_html_e('Translate', 'mxchat'); ?></span>
582 </button>
583 <button type="button" id="mxch-show-original-btn" class="mxch-btn mxch-btn-secondary mxch-btn-sm" style="display: none;">
584 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
585 <?php esc_html_e('Original', 'mxchat'); ?>
586 </button>
587 </div>
588 </div>
589 </div>
590
591 <!-- Messages Area -->
592 <div class="mxch-messages-area" id="mxch-messages-area">
593 <!-- Messages loaded via AJAX -->
594 </div>
595 </div>
596 </div>
597 </div>
598
599 <?php wp_nonce_field('mxchat_delete_chat_history', 'mxchat_delete_chat_nonce'); ?>
600
601 <!-- Transcript delete confirm modal (shared by bulk + individual delete) -->
602 <div id="mxch-transcript-confirm" class="mxch-modal-overlay" style="display:none;">
603 <div class="mxch-modal-content mxch-leads-confirm-box">
604 <div class="mxch-modal-header">
605 <h2 id="mxch-transcript-confirm-title"><?php esc_html_e('Delete conversation?', 'mxchat'); ?></h2>
606 <button type="button" class="mxch-modal-close" data-mxch-transcript-close>&times;</button>
607 </div>
608 <div class="mxch-modal-body">
609 <p id="mxch-transcript-confirm-body"></p>
610 <label class="mxch-transcript-confirm-check">
611 <input type="checkbox" id="mxch-transcript-also-delete-lead">
612 <span>
613 <strong><?php esc_html_e('Also remove the lead from the Leads tab', 'mxchat'); ?></strong>
614 <em class="mxch-transcript-confirm-sublabel"><?php esc_html_e('By default, leads are kept and marked "Chat deleted" so your contact list is preserved.', 'mxchat'); ?></em>
615 </span>
616 </label>
617 <p class="mxch-leads-confirm-warning"><?php esc_html_e('This cannot be undone.', 'mxchat'); ?></p>
618 </div>
619 <div class="mxch-leads-confirm-actions">
620 <button type="button" class="mxch-btn mxch-btn-secondary" data-mxch-transcript-close><?php esc_html_e('Cancel', 'mxchat'); ?></button>
621 <button type="button" class="mxch-btn mxch-btn-danger" id="mxch-transcript-confirm-go"><?php esc_html_e('Delete', 'mxchat'); ?></button>
622 </div>
623 </div>
624 </div>
625 </div>
626
627 <!-- Leads Section -->
628 <div id="leads" class="mxch-section">
629 <div class="mxch-content-header">
630 <h1 class="mxch-content-title"><?php esc_html_e('Leads', 'mxchat'); ?></h1>
631 <p class="mxch-content-subtitle"><?php esc_html_e('Captured visitor emails and names from the lead-capture form, grouped by unique lead.', 'mxchat'); ?></p>
632 </div>
633
634 <!-- Stats strip -->
635 <div class="mxch-leads-stats">
636 <div class="mxch-stat-card">
637 <div class="mxch-stat-icon mxch-stat-icon-primary">
638 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
639 </div>
640 <div class="mxch-stat-content">
641 <span class="mxch-stat-value" id="mxch-leads-stat-total">0</span>
642 <span class="mxch-stat-label"><?php esc_html_e('Total Leads', 'mxchat'); ?></span>
643 </div>
644 </div>
645 <div class="mxch-stat-card">
646 <div class="mxch-stat-icon mxch-stat-icon-success">
647 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
648 </div>
649 <div class="mxch-stat-content">
650 <span class="mxch-stat-value" id="mxch-leads-stat-new">0</span>
651 <span class="mxch-stat-label"><?php esc_html_e('New This Week', 'mxchat'); ?></span>
652 </div>
653 </div>
654 <div class="mxch-stat-card">
655 <div class="mxch-stat-icon mxch-stat-icon-info">
656 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
657 </div>
658 <div class="mxch-stat-content">
659 <span class="mxch-stat-value" id="mxch-leads-stat-avg">0</span>
660 <span class="mxch-stat-label"><?php esc_html_e('Avg Convos / Lead', 'mxchat'); ?></span>
661 </div>
662 </div>
663 <div class="mxch-stat-card">
664 <div class="mxch-stat-icon mxch-stat-icon-warning">
665 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
666 </div>
667 <div class="mxch-stat-content">
668 <span class="mxch-stat-value" id="mxch-leads-stat-orphan">0%</span>
669 <span class="mxch-stat-label"><?php esc_html_e('Orphan Leads', 'mxchat'); ?></span>
670 <span class="mxch-stat-sublabel" id="mxch-leads-stat-orphan-sub"><?php esc_html_e('Captured but never chatted', 'mxchat'); ?></span>
671 </div>
672 </div>
673 </div>
674
675 <!-- Top pages card -->
676 <div class="mxch-card mxch-leads-toppages">
677 <div class="mxch-card-header">
678 <h3 class="mxch-card-title">
679 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h18v18H3z"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
680 <?php esc_html_e('Top Pages Capturing Leads', 'mxchat'); ?>
681 </h3>
682 <span class="mxch-leads-toppages-hint"><?php esc_html_e('Click a page to filter the list below', 'mxchat'); ?></span>
683 </div>
684 <div class="mxch-card-body">
685 <div class="mxch-leads-toppages-list" id="mxch-leads-toppages-list">
686 <div class="mxch-leads-empty-mini"><?php esc_html_e('No page data yet.', 'mxchat'); ?></div>
687 </div>
688 </div>
689 </div>
690
691 <!-- Leads toolbar + table -->
692 <div class="mxch-card mxch-leads-card">
693 <div class="mxch-leads-toolbar">
694 <div class="mxch-leads-toolbar-left">
695 <label class="mxch-bulk-select-all">
696 <input type="checkbox" id="mxch-leads-select-all">
697 <span><?php esc_html_e('All', 'mxchat'); ?></span>
698 </label>
699 <span class="mxch-selected-count" id="mxch-leads-selected-count">0</span>
700 <button type="button" class="mxch-bulk-btn mxch-bulk-delete" id="mxch-leads-delete-selected" disabled title="<?php esc_attr_e('Delete Selected', 'mxchat'); ?>">
701 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
702 <span><?php esc_html_e('Delete', 'mxchat'); ?></span>
703 </button>
704 </div>
705 <div class="mxch-leads-toolbar-right">
706 <div class="mxch-leads-export" id="mxch-leads-export-wrap">
707 <button type="button" class="mxch-btn mxch-btn-secondary mxch-btn-sm" id="mxch-leads-export-btn">
708 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
709 <?php esc_html_e('Export', 'mxchat'); ?>
710 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
711 </button>
712 <div class="mxch-leads-export-menu" id="mxch-leads-export-menu">
713 <button type="button" data-fields="email_and_name" data-scope="all"><?php esc_html_e('All leads — email + name', 'mxchat'); ?></button>
714 <button type="button" data-fields="email_only" data-scope="all"><?php esc_html_e('All leads — email only', 'mxchat'); ?></button>
715 <button type="button" data-fields="email_and_name" data-scope="selected" disabled><?php esc_html_e('Selected — email + name', 'mxchat'); ?></button>
716 <button type="button" data-fields="email_only" data-scope="selected" disabled><?php esc_html_e('Selected — email only', 'mxchat'); ?></button>
717 </div>
718 </div>
719 </div>
720 </div>
721
722 <div class="mxch-leads-filters">
723 <div class="mxch-search-wrapper">
724 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
725 <input type="text" id="mxch-leads-search" class="mxch-search-input" placeholder="<?php esc_attr_e('Search by email or name...', 'mxchat'); ?>">
726 </div>
727 <select id="mxch-leads-date-range" class="mxch-select">
728 <option value="all"><?php esc_html_e('All time', 'mxchat'); ?></option>
729 <option value="today"><?php esc_html_e('Last 24 hours', 'mxchat'); ?></option>
730 <option value="7d"><?php esc_html_e('Last 7 days', 'mxchat'); ?></option>
731 <option value="30d"><?php esc_html_e('Last 30 days', 'mxchat'); ?></option>
732 <option value="90d"><?php esc_html_e('Last 90 days', 'mxchat'); ?></option>
733 </select>
734 <select id="mxch-leads-status" class="mxch-select">
735 <option value="all"><?php esc_html_e('All leads', 'mxchat'); ?></option>
736 <option value="with"><?php esc_html_e('With conversation', 'mxchat'); ?></option>
737 <option value="chat_deleted"><?php esc_html_e('Chat deleted', 'mxchat'); ?></option>
738 <option value="orphan"><?php esc_html_e('Orphan (no chat)', 'mxchat'); ?></option>
739 </select>
740 <button type="button" class="mxch-btn mxch-btn-ghost mxch-btn-sm" id="mxch-leads-clear-filters" style="display:none;">
741 <?php esc_html_e('Clear filters', 'mxchat'); ?>
742 </button>
743 <span class="mxch-leads-active-page-filter" id="mxch-leads-active-page-filter" style="display:none;">
744 <span class="mxch-leads-page-chip-label"></span>
745 <button type="button" class="mxch-leads-page-chip-remove" aria-label="<?php esc_attr_e('Remove page filter', 'mxchat'); ?>">&times;</button>
746 </span>
747 </div>
748
749 <div class="mxch-leads-table-wrap">
750 <table class="mxch-leads-table" id="mxch-leads-table">
751 <thead>
752 <tr>
753 <th class="mxch-leads-col-check"></th>
754 <th class="mxch-leads-col-lead"><?php esc_html_e('Lead', 'mxchat'); ?></th>
755 <th class="mxch-leads-col-count"><?php esc_html_e('Conversations', 'mxchat'); ?></th>
756 <th class="mxch-leads-col-last"><?php esc_html_e('Last seen', 'mxchat'); ?></th>
757 <th class="mxch-leads-col-page"><?php esc_html_e('Top page', 'mxchat'); ?></th>
758 <th class="mxch-leads-col-actions"></th>
759 </tr>
760 </thead>
761 <tbody id="mxch-leads-tbody">
762 <tr><td colspan="6" class="mxch-leads-loading"><span class="spinner is-active"></span></td></tr>
763 </tbody>
764 </table>
765 </div>
766
767 <div class="mxch-panel-footer">
768 <span class="mxch-leads-count" id="mxch-leads-count">0 leads</span>
769 <div class="mxch-pagination-simple" id="mxch-leads-pagination"></div>
770 </div>
771 </div>
772
773 <!-- Delete confirm modal -->
774 <div id="mxch-leads-confirm" class="mxch-modal-overlay" style="display:none;">
775 <div class="mxch-modal-content mxch-leads-confirm-box">
776 <div class="mxch-modal-header">
777 <h2><?php esc_html_e('Delete leads', 'mxchat'); ?></h2>
778 <button type="button" class="mxch-modal-close" data-mxch-leads-close>&times;</button>
779 </div>
780 <div class="mxch-modal-body">
781 <p id="mxch-leads-confirm-body"></p>
782 <p class="mxch-leads-confirm-warning"><?php esc_html_e('This cannot be undone.', 'mxchat'); ?></p>
783 </div>
784 <div class="mxch-leads-confirm-actions">
785 <button type="button" class="mxch-btn mxch-btn-secondary" data-mxch-leads-close><?php esc_html_e('Cancel', 'mxchat'); ?></button>
786 <button type="button" class="mxch-btn mxch-btn-danger" id="mxch-leads-confirm-go"><?php esc_html_e('Delete permanently', 'mxchat'); ?></button>
787 </div>
788 </div>
789 </div>
790
791 <?php wp_nonce_field('mxchat_delete_leads', 'mxchat_leads_delete_nonce'); ?>
792 <?php wp_nonce_field('mxchat_export_leads', 'mxchat_leads_export_nonce'); ?>
793 </div>
794
795 <!-- Notifications Section -->
796 <div id="notifications" class="mxch-section">
797 <div class="mxch-content-header">
798 <h1 class="mxch-content-title"><?php esc_html_e('Notification Settings', 'mxchat'); ?></h1>
799 <p class="mxch-content-subtitle"><?php esc_html_e('Configure email notifications and transcript management options.', 'mxchat'); ?></p>
800 </div>
801
802 <div id="mxch-notifications-form" class="mxchat-autosave-section">
803
804 <!-- Email Notifications Card -->
805 <div class="mxch-card">
806 <div class="mxch-card-header">
807 <h3 class="mxch-card-title">
808 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
809 <?php esc_html_e('Email Notifications', 'mxchat'); ?>
810 </h3>
811 </div>
812 <div class="mxch-card-body">
813 <?php
814 $options = get_option('mxchat_transcripts_options', array());
815 $enabled = isset($options['mxchat_enable_notifications']) ? $options['mxchat_enable_notifications'] : 0;
816 $email = isset($options['mxchat_notification_email']) ? $options['mxchat_notification_email'] : get_option('admin_email');
817 ?>
818 <div class="mxch-field">
819 <div class="mxch-toggle-row">
820 <label class="mxchat-toggle-switch">
821 <input type="checkbox"
822 name="mxchat_transcripts_options[mxchat_enable_notifications]"
823 class="mxchat-autosave-field"
824 value="1"
825 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>"
826 <?php checked(1, $enabled); ?>>
827 <span class="mxchat-toggle-slider"></span>
828 </label>
829 <span class="mxch-toggle-label"><?php esc_html_e('Enable Chat Notifications', 'mxchat'); ?></span>
830 </div>
831 <p class="mxch-field-description"><?php esc_html_e('Send email notification when a new chat session starts.', 'mxchat'); ?></p>
832 </div>
833
834 <div class="mxch-field">
835 <label class="mxch-field-label"><?php esc_html_e('Notification Email', 'mxchat'); ?></label>
836 <input type="email"
837 name="mxchat_transcripts_options[mxchat_notification_email]"
838 class="mxch-input mxchat-autosave-field"
839 value="<?php echo esc_attr($email); ?>"
840 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>">
841 <p class="mxch-field-description"><?php esc_html_e('Email address where notifications will be sent.', 'mxchat'); ?></p>
842 </div>
843 </div>
844 </div>
845
846 <!-- Auto-Email Transcript Card -->
847 <div class="mxch-card">
848 <div class="mxch-card-header">
849 <h3 class="mxch-card-title">
850 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>
851 <?php esc_html_e('Auto-Email Transcript', 'mxchat'); ?>
852 </h3>
853 </div>
854 <div class="mxch-card-body">
855 <?php
856 $auto_email_enabled = isset($options['mxchat_auto_email_transcript_enabled']) ? $options['mxchat_auto_email_transcript_enabled'] : 0;
857 $delay = isset($options['mxchat_auto_email_transcript_delay']) ? $options['mxchat_auto_email_transcript_delay'] : '30';
858 $require_contact = isset($options['mxchat_auto_email_transcript_require_contact']) ? $options['mxchat_auto_email_transcript_require_contact'] : 0;
859 ?>
860 <div class="mxch-field">
861 <div class="mxch-toggle-row">
862 <label class="mxchat-toggle-switch">
863 <input type="checkbox"
864 name="mxchat_transcripts_options[mxchat_auto_email_transcript_enabled]"
865 class="mxchat-autosave-field"
866 value="1"
867 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>"
868 <?php checked(1, $auto_email_enabled); ?>>
869 <span class="mxchat-toggle-slider"></span>
870 </label>
871 <span class="mxch-toggle-label"><?php esc_html_e('Auto-Email Full Transcript', 'mxchat'); ?></span>
872 </div>
873 <p class="mxch-field-description"><?php esc_html_e('Automatically send the full conversation transcript after the chat ends.', 'mxchat'); ?></p>
874 </div>
875
876 <div class="mxch-field">
877 <label class="mxch-field-label"><?php esc_html_e('Send Transcript After', 'mxchat'); ?></label>
878 <select name="mxchat_transcripts_options[mxchat_auto_email_transcript_delay]"
879 class="mxch-select mxchat-autosave-field"
880 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>">
881 <option value="15" <?php selected($delay, '15'); ?>><?php esc_html_e('15 minutes', 'mxchat'); ?></option>
882 <option value="30" <?php selected($delay, '30'); ?>><?php esc_html_e('30 minutes', 'mxchat'); ?></option>
883 <option value="60" <?php selected($delay, '60'); ?>><?php esc_html_e('1 hour', 'mxchat'); ?></option>
884 </select>
885 </div>
886
887 <div class="mxch-field">
888 <div class="mxch-toggle-row">
889 <label class="mxchat-toggle-switch">
890 <input type="checkbox"
891 name="mxchat_transcripts_options[mxchat_auto_email_transcript_require_contact]"
892 class="mxchat-autosave-field"
893 value="1"
894 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>"
895 <?php checked(1, $require_contact); ?>>
896 <span class="mxchat-toggle-slider"></span>
897 </label>
898 <span class="mxch-toggle-label"><?php esc_html_e('Only send if user provided contact info', 'mxchat'); ?></span>
899 </div>
900 </div>
901 </div>
902 </div>
903
904 <!-- Transcript Management Card -->
905 <div class="mxch-card">
906 <div class="mxch-card-header">
907 <h3 class="mxch-card-title">
908 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
909 <?php esc_html_e('Transcript Management', 'mxchat'); ?>
910 </h3>
911 </div>
912 <div class="mxch-card-body">
913 <?php
914 $auto_delete = isset($options['mxchat_auto_delete_transcripts']) ? $options['mxchat_auto_delete_transcripts'] : 'never';
915 ?>
916 <div class="mxch-field">
917 <label class="mxch-field-label"><?php esc_html_e('Auto-Delete Old Transcripts', 'mxchat'); ?></label>
918 <select name="mxchat_transcripts_options[mxchat_auto_delete_transcripts]"
919 class="mxch-select mxchat-autosave-field"
920 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>">
921 <option value="never" <?php selected($auto_delete, 'never'); ?>><?php esc_html_e('Never (Keep All)', 'mxchat'); ?></option>
922 <option value="1week" <?php selected($auto_delete, '1week'); ?>><?php esc_html_e('After 1 Week', 'mxchat'); ?></option>
923 <option value="2weeks" <?php selected($auto_delete, '2weeks'); ?>><?php esc_html_e('After 2 Weeks', 'mxchat'); ?></option>
924 <option value="1month" <?php selected($auto_delete, '1month'); ?>><?php esc_html_e('After 1 Month', 'mxchat'); ?></option>
925 </select>
926 <p class="mxch-field-description"><?php esc_html_e('Automatically delete old chat transcripts to manage database size and privacy.', 'mxchat'); ?></p>
927 </div>
928 </div>
929 </div>
930 </div>
931 </div>
932 </main>
933 </div>
934
935 <!-- RAG Context Modal -->
936 <div id="mxch-rag-modal" class="mxch-modal-overlay" style="display: none;">
937 <div class="mxch-modal-content">
938 <div class="mxch-modal-header">
939 <h2><?php esc_html_e('Message Context', 'mxchat'); ?></h2>
940 <button type="button" class="mxch-modal-close">&times;</button>
941 </div>
942 <div class="mxch-modal-body">
943 <!-- Tabs -->
944 <div class="mxch-context-tabs">
945 <button type="button" class="mxch-context-tab active" data-tab="sources">
946 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
947 <?php esc_html_e('Sources', 'mxchat'); ?>
948 <span class="mxch-tab-badge" id="mxch-sources-count" style="display: none;">0</span>
949 </button>
950 <button type="button" class="mxch-context-tab" data-tab="actions">
951 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
952 <?php esc_html_e('Actions', 'mxchat'); ?>
953 <span class="mxch-tab-badge" id="mxch-actions-count" style="display: none;">0</span>
954 </button>
955 </div>
956
957 <div class="mxch-rag-loading" style="display: none;">
958 <span class="spinner is-active"></span>
959 <?php esc_html_e('Loading context...', 'mxchat'); ?>
960 </div>
961
962 <!-- Sources Tab Content -->
963 <div class="mxch-tab-content" id="mxch-tab-sources">
964 <div class="mxch-rag-content">
965 <!-- RAG context will be populated via JavaScript -->
966 </div>
967 </div>
968
969 <!-- Actions Tab Content -->
970 <div class="mxch-tab-content" id="mxch-tab-actions" style="display: none;">
971 <div class="mxch-actions-content">
972 <!-- Action scores will be populated via JavaScript -->
973 </div>
974 </div>
975 </div>
976 </div>
977 </div>
978 <?php
979 }
980