PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 3.2.4
MxChat – AI Chatbot & Content Generation for WordPress v3.2.4
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.4, at includes/admin-transcripts-page.php

919 lines 71.0 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 <!-- Activity Chart -->
326 <div class="mxch-card mxch-activity-chart-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"><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>
330 <?php esc_html_e('7-Day Activity', 'mxchat'); ?>
331 </h3>
332 <div class="mxch-chart-legend">
333 <span class="mxch-legend-item mxch-legend-chats">
334 <span class="mxch-legend-dot"></span>
335 <?php esc_html_e('Chats', 'mxchat'); ?>
336 </span>
337 <span class="mxch-legend-item mxch-legend-messages">
338 <span class="mxch-legend-dot"></span>
339 <?php esc_html_e('Messages', 'mxchat'); ?>
340 </span>
341 </div>
342 </div>
343 <div class="mxch-card-body">
344 <div class="mxch-chart-container">
345 <canvas id="mxchat-activity-chart"></canvas>
346 </div>
347 </div>
348 </div>
349
350 <!-- Quick Actions -->
351 <div class="mxch-card">
352 <div class="mxch-card-header">
353 <h3 class="mxch-card-title">
354 <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>
355 <?php esc_html_e('Quick Actions', 'mxchat'); ?>
356 </h3>
357 </div>
358 <div class="mxch-card-body">
359 <div class="mxch-quick-actions">
360 <button type="button" class="mxch-quick-action-btn" data-action="view-chats">
361 <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>
362 <span><?php esc_html_e('View All Chats', 'mxchat'); ?></span>
363 </button>
364 <button type="button" id="mxch-export-btn" class="mxch-quick-action-btn">
365 <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>
366 <span><?php esc_html_e('Export All Chats', 'mxchat'); ?></span>
367 </button>
368 <button type="button" class="mxch-quick-action-btn" data-action="settings">
369 <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>
370 <span><?php esc_html_e('Notification Settings', 'mxchat'); ?></span>
371 </button>
372 </div>
373 </div>
374 </div>
375 </div>
376
377 <!-- All Chats Section - Split Panel Layout -->
378 <div id="all-chats" class="mxch-section">
379 <div class="mxch-split-panel">
380 <!-- Left Panel - Chat List -->
381 <div class="mxch-chat-list-panel">
382 <!-- Bulk Actions Toolbar -->
383 <div class="mxch-bulk-toolbar">
384 <label class="mxch-bulk-select-all">
385 <input type="checkbox" id="mxch-select-all">
386 <span><?php esc_html_e('All', 'mxchat'); ?></span>
387 </label>
388 <span class="mxch-selected-count" id="mxch-selected-count">0</span>
389 <div class="mxch-bulk-actions">
390 <button type="button" class="mxch-bulk-btn" id="mxch-sort-btn" title="<?php esc_attr_e('Sort', 'mxchat'); ?>">
391 <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>
392 <span><?php esc_html_e('Sort', 'mxchat'); ?></span>
393 </button>
394 <button type="button" class="mxch-bulk-btn mxch-bulk-delete" id="mxch-delete-selected" disabled title="<?php esc_attr_e('Delete Selected', 'mxchat'); ?>">
395 <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>
396 </button>
397 </div>
398 </div>
399 <div class="mxch-panel-header">
400 <div class="mxch-search-wrapper">
401 <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>
402 <input type="text" id="mxch-search-transcripts" class="mxch-search-input" placeholder="<?php esc_attr_e('Search chats...', 'mxchat'); ?>">
403 </div>
404 <div class="mxch-panel-title-row">
405 <span class="mxch-panel-count" id="mxch-chat-count">0 / 0 chats</span>
406 <div class="mxch-panel-actions">
407 <button type="button" id="mxch-refresh-list" class="mxch-icon-btn" title="<?php esc_attr_e('Refresh', 'mxchat'); ?>">
408 <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>
409 </button>
410 </div>
411 </div>
412 </div>
413 <div class="mxch-chat-list" id="mxch-chat-list">
414 <!-- Chat list items loaded via AJAX -->
415 </div>
416 <div class="mxch-panel-footer">
417 <div class="mxch-pagination-simple" id="mxch-pagination">
418 <!-- Pagination controls -->
419 </div>
420 </div>
421 </div>
422
423 <!-- Right Panel - Conversation View -->
424 <div class="mxch-conversation-panel" id="mxch-conversation-panel">
425 <!-- Empty State -->
426 <div class="mxch-conversation-empty" id="mxch-conversation-empty">
427 <div class="mxch-empty-icon">
428 <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>
429 </div>
430 <h3><?php esc_html_e('Select a conversation', 'mxchat'); ?></h3>
431 <p><?php esc_html_e('Choose a chat from the list to view the full conversation.', 'mxchat'); ?></p>
432 </div>
433
434 <!-- Conversation Content (hidden initially) -->
435 <div class="mxch-conversation-content" id="mxch-conversation-content" style="display: none;">
436 <!-- Header -->
437 <div class="mxch-conversation-header">
438 <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'); ?>">
439 <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>
440 </button>
441 <div class="mxch-user-avatar" id="mxch-user-avatar">
442 <span>MX</span>
443 </div>
444 <div class="mxch-user-info">
445 <div class="mxch-user-name" id="mxch-user-name">User Name</div>
446 <div class="mxch-user-meta" id="mxch-user-meta">User ID: 123</div>
447 </div>
448 <button type="button" class="mxch-details-toggle" id="mxch-toggle-details" title="<?php esc_attr_e('Show details', 'mxchat'); ?>">
449 <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>
450 </button>
451 </div>
452
453 <!-- Details Drawer (collapsible) -->
454 <div class="mxch-details-drawer" id="mxch-details-drawer" style="display: none;">
455 <div class="mxch-details-section">
456 <h4><?php esc_html_e('Chat Details', 'mxchat'); ?></h4>
457 <div class="mxch-detail-row">
458 <span class="mxch-detail-label"><?php esc_html_e('Total Messages', 'mxchat'); ?></span>
459 <span class="mxch-detail-value" id="mxch-detail-messages">0</span>
460 </div>
461 <div class="mxch-detail-row">
462 <span class="mxch-detail-label"><?php esc_html_e('Started', 'mxchat'); ?></span>
463 <span class="mxch-detail-value" id="mxch-detail-started">-</span>
464 </div>
465 <div class="mxch-detail-row">
466 <span class="mxch-detail-label"><?php esc_html_e('Page', 'mxchat'); ?></span>
467 <span class="mxch-detail-value" id="mxch-detail-page">-</span>
468 </div>
469 <div class="mxch-detail-row" id="mxch-detail-ip-row" style="display: none;">
470 <span class="mxch-detail-label"><?php esc_html_e('IP Address', 'mxchat'); ?></span>
471 <span class="mxch-detail-value" id="mxch-detail-ip">-</span>
472 </div>
473 <div class="mxch-detail-row" id="mxch-detail-email-row" style="display: none;">
474 <span class="mxch-detail-label"><?php esc_html_e('Email', 'mxchat'); ?></span>
475 <span class="mxch-detail-value" id="mxch-detail-email">-</span>
476 </div>
477 </div>
478 <div class="mxch-details-section" id="mxch-clicked-section" style="display: none;">
479 <h4><?php esc_html_e('Clicked Links', 'mxchat'); ?></h4>
480 <div class="mxch-clicked-links" id="mxch-clicked-links">
481 <!-- Links populated via JS -->
482 </div>
483 </div>
484 <div class="mxch-details-actions">
485 <button type="button" id="mxch-delete-current" class="mxch-btn mxch-btn-danger mxch-btn-sm">
486 <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>
487 <?php esc_html_e('Delete Chat', 'mxchat'); ?>
488 </button>
489 <button type="button" id="mxch-export-current" class="mxch-btn mxch-btn-secondary mxch-btn-sm">
490 <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>
491 <?php esc_html_e('Export', 'mxchat'); ?>
492 </button>
493 </div>
494 <div class="mxch-translate-section">
495 <div class="mxch-translate-controls">
496 <select id="mxch-translate-lang" class="mxch-translate-select" title="<?php esc_attr_e('Target language', 'mxchat'); ?>">
497 <option value="en">English</option>
498 <option value="es">Español</option>
499 <option value="fr">Français</option>
500 <option value="de">Deutsch</option>
501 <option value="it">Italiano</option>
502 <option value="pt">Português</option>
503 <option value="nl">Nederlands</option>
504 <option value="ru">Русский</option>
505 <option value="zh">中文</option>
506 <option value="ja">日本語</option>
507 <option value="ko">한국어</option>
508 <option value="ar">العربية</option>
509 <option value="hi">हिन्दी</option>
510 <option value="tr">Türkçe</option>
511 <option value="pl">Polski</option>
512 <option value="vi">Tiếng Việt</option>
513 <option value="th">ไทย</option>
514 <option value="id">Bahasa Indonesia</option>
515 <option value="sv">Svenska</option>
516 <option value="da">Dansk</option>
517 </select>
518 <button type="button" id="mxch-translate-btn" class="mxch-btn mxch-btn-primary mxch-btn-sm">
519 <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>
520 <span class="mxch-translate-text"><?php esc_html_e('Translate', 'mxchat'); ?></span>
521 </button>
522 <button type="button" id="mxch-show-original-btn" class="mxch-btn mxch-btn-secondary mxch-btn-sm" style="display: none;">
523 <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>
524 <?php esc_html_e('Original', 'mxchat'); ?>
525 </button>
526 </div>
527 </div>
528 </div>
529
530 <!-- Messages Area -->
531 <div class="mxch-messages-area" id="mxch-messages-area">
532 <!-- Messages loaded via AJAX -->
533 </div>
534 </div>
535 </div>
536 </div>
537
538 <?php wp_nonce_field('mxchat_delete_chat_history', 'mxchat_delete_chat_nonce'); ?>
539
540 <!-- Transcript delete confirm modal (shared by bulk + individual delete) -->
541 <div id="mxch-transcript-confirm" class="mxch-modal-overlay" style="display:none;">
542 <div class="mxch-modal-content mxch-leads-confirm-box">
543 <div class="mxch-modal-header">
544 <h2 id="mxch-transcript-confirm-title"><?php esc_html_e('Delete conversation?', 'mxchat'); ?></h2>
545 <button type="button" class="mxch-modal-close" data-mxch-transcript-close>&times;</button>
546 </div>
547 <div class="mxch-modal-body">
548 <p id="mxch-transcript-confirm-body"></p>
549 <label class="mxch-transcript-confirm-check">
550 <input type="checkbox" id="mxch-transcript-also-delete-lead">
551 <span>
552 <strong><?php esc_html_e('Also remove the lead from the Leads tab', 'mxchat'); ?></strong>
553 <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>
554 </span>
555 </label>
556 <p class="mxch-leads-confirm-warning"><?php esc_html_e('This cannot be undone.', 'mxchat'); ?></p>
557 </div>
558 <div class="mxch-leads-confirm-actions">
559 <button type="button" class="mxch-btn mxch-btn-secondary" data-mxch-transcript-close><?php esc_html_e('Cancel', 'mxchat'); ?></button>
560 <button type="button" class="mxch-btn mxch-btn-danger" id="mxch-transcript-confirm-go"><?php esc_html_e('Delete', 'mxchat'); ?></button>
561 </div>
562 </div>
563 </div>
564 </div>
565
566 <!-- Leads Section -->
567 <div id="leads" class="mxch-section">
568 <div class="mxch-content-header">
569 <h1 class="mxch-content-title"><?php esc_html_e('Leads', 'mxchat'); ?></h1>
570 <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>
571 </div>
572
573 <!-- Stats strip -->
574 <div class="mxch-leads-stats">
575 <div class="mxch-stat-card">
576 <div class="mxch-stat-icon mxch-stat-icon-primary">
577 <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>
578 </div>
579 <div class="mxch-stat-content">
580 <span class="mxch-stat-value" id="mxch-leads-stat-total">0</span>
581 <span class="mxch-stat-label"><?php esc_html_e('Total Leads', 'mxchat'); ?></span>
582 </div>
583 </div>
584 <div class="mxch-stat-card">
585 <div class="mxch-stat-icon mxch-stat-icon-success">
586 <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>
587 </div>
588 <div class="mxch-stat-content">
589 <span class="mxch-stat-value" id="mxch-leads-stat-new">0</span>
590 <span class="mxch-stat-label"><?php esc_html_e('New This Week', 'mxchat'); ?></span>
591 </div>
592 </div>
593 <div class="mxch-stat-card">
594 <div class="mxch-stat-icon mxch-stat-icon-info">
595 <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>
596 </div>
597 <div class="mxch-stat-content">
598 <span class="mxch-stat-value" id="mxch-leads-stat-avg">0</span>
599 <span class="mxch-stat-label"><?php esc_html_e('Avg Convos / Lead', 'mxchat'); ?></span>
600 </div>
601 </div>
602 <div class="mxch-stat-card">
603 <div class="mxch-stat-icon mxch-stat-icon-warning">
604 <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>
605 </div>
606 <div class="mxch-stat-content">
607 <span class="mxch-stat-value" id="mxch-leads-stat-orphan">0%</span>
608 <span class="mxch-stat-label"><?php esc_html_e('Orphan Leads', 'mxchat'); ?></span>
609 <span class="mxch-stat-sublabel" id="mxch-leads-stat-orphan-sub"><?php esc_html_e('Captured but never chatted', 'mxchat'); ?></span>
610 </div>
611 </div>
612 </div>
613
614 <!-- Top pages card -->
615 <div class="mxch-card mxch-leads-toppages">
616 <div class="mxch-card-header">
617 <h3 class="mxch-card-title">
618 <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>
619 <?php esc_html_e('Top Pages Capturing Leads', 'mxchat'); ?>
620 </h3>
621 <span class="mxch-leads-toppages-hint"><?php esc_html_e('Click a page to filter the list below', 'mxchat'); ?></span>
622 </div>
623 <div class="mxch-card-body">
624 <div class="mxch-leads-toppages-list" id="mxch-leads-toppages-list">
625 <div class="mxch-leads-empty-mini"><?php esc_html_e('No page data yet.', 'mxchat'); ?></div>
626 </div>
627 </div>
628 </div>
629
630 <!-- Leads toolbar + table -->
631 <div class="mxch-card mxch-leads-card">
632 <div class="mxch-leads-toolbar">
633 <div class="mxch-leads-toolbar-left">
634 <label class="mxch-bulk-select-all">
635 <input type="checkbox" id="mxch-leads-select-all">
636 <span><?php esc_html_e('All', 'mxchat'); ?></span>
637 </label>
638 <span class="mxch-selected-count" id="mxch-leads-selected-count">0</span>
639 <button type="button" class="mxch-bulk-btn mxch-bulk-delete" id="mxch-leads-delete-selected" disabled title="<?php esc_attr_e('Delete Selected', 'mxchat'); ?>">
640 <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>
641 <span><?php esc_html_e('Delete', 'mxchat'); ?></span>
642 </button>
643 </div>
644 <div class="mxch-leads-toolbar-right">
645 <div class="mxch-leads-export" id="mxch-leads-export-wrap">
646 <button type="button" class="mxch-btn mxch-btn-secondary mxch-btn-sm" id="mxch-leads-export-btn">
647 <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>
648 <?php esc_html_e('Export', 'mxchat'); ?>
649 <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>
650 </button>
651 <div class="mxch-leads-export-menu" id="mxch-leads-export-menu">
652 <button type="button" data-fields="email_and_name" data-scope="all"><?php esc_html_e('All leads — email + name', 'mxchat'); ?></button>
653 <button type="button" data-fields="email_only" data-scope="all"><?php esc_html_e('All leads — email only', 'mxchat'); ?></button>
654 <button type="button" data-fields="email_and_name" data-scope="selected" disabled><?php esc_html_e('Selected — email + name', 'mxchat'); ?></button>
655 <button type="button" data-fields="email_only" data-scope="selected" disabled><?php esc_html_e('Selected — email only', 'mxchat'); ?></button>
656 </div>
657 </div>
658 </div>
659 </div>
660
661 <div class="mxch-leads-filters">
662 <div class="mxch-search-wrapper">
663 <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>
664 <input type="text" id="mxch-leads-search" class="mxch-search-input" placeholder="<?php esc_attr_e('Search by email or name...', 'mxchat'); ?>">
665 </div>
666 <select id="mxch-leads-date-range" class="mxch-select">
667 <option value="all"><?php esc_html_e('All time', 'mxchat'); ?></option>
668 <option value="today"><?php esc_html_e('Last 24 hours', 'mxchat'); ?></option>
669 <option value="7d"><?php esc_html_e('Last 7 days', 'mxchat'); ?></option>
670 <option value="30d"><?php esc_html_e('Last 30 days', 'mxchat'); ?></option>
671 <option value="90d"><?php esc_html_e('Last 90 days', 'mxchat'); ?></option>
672 </select>
673 <select id="mxch-leads-status" class="mxch-select">
674 <option value="all"><?php esc_html_e('All leads', 'mxchat'); ?></option>
675 <option value="with"><?php esc_html_e('With conversation', 'mxchat'); ?></option>
676 <option value="chat_deleted"><?php esc_html_e('Chat deleted', 'mxchat'); ?></option>
677 <option value="orphan"><?php esc_html_e('Orphan (no chat)', 'mxchat'); ?></option>
678 </select>
679 <button type="button" class="mxch-btn mxch-btn-ghost mxch-btn-sm" id="mxch-leads-clear-filters" style="display:none;">
680 <?php esc_html_e('Clear filters', 'mxchat'); ?>
681 </button>
682 <span class="mxch-leads-active-page-filter" id="mxch-leads-active-page-filter" style="display:none;">
683 <span class="mxch-leads-page-chip-label"></span>
684 <button type="button" class="mxch-leads-page-chip-remove" aria-label="<?php esc_attr_e('Remove page filter', 'mxchat'); ?>">&times;</button>
685 </span>
686 </div>
687
688 <div class="mxch-leads-table-wrap">
689 <table class="mxch-leads-table" id="mxch-leads-table">
690 <thead>
691 <tr>
692 <th class="mxch-leads-col-check"></th>
693 <th class="mxch-leads-col-lead"><?php esc_html_e('Lead', 'mxchat'); ?></th>
694 <th class="mxch-leads-col-count"><?php esc_html_e('Conversations', 'mxchat'); ?></th>
695 <th class="mxch-leads-col-last"><?php esc_html_e('Last seen', 'mxchat'); ?></th>
696 <th class="mxch-leads-col-page"><?php esc_html_e('Top page', 'mxchat'); ?></th>
697 <th class="mxch-leads-col-actions"></th>
698 </tr>
699 </thead>
700 <tbody id="mxch-leads-tbody">
701 <tr><td colspan="6" class="mxch-leads-loading"><span class="spinner is-active"></span></td></tr>
702 </tbody>
703 </table>
704 </div>
705
706 <div class="mxch-panel-footer">
707 <span class="mxch-leads-count" id="mxch-leads-count">0 leads</span>
708 <div class="mxch-pagination-simple" id="mxch-leads-pagination"></div>
709 </div>
710 </div>
711
712 <!-- Delete confirm modal -->
713 <div id="mxch-leads-confirm" class="mxch-modal-overlay" style="display:none;">
714 <div class="mxch-modal-content mxch-leads-confirm-box">
715 <div class="mxch-modal-header">
716 <h2><?php esc_html_e('Delete leads', 'mxchat'); ?></h2>
717 <button type="button" class="mxch-modal-close" data-mxch-leads-close>&times;</button>
718 </div>
719 <div class="mxch-modal-body">
720 <p id="mxch-leads-confirm-body"></p>
721 <p class="mxch-leads-confirm-warning"><?php esc_html_e('This cannot be undone.', 'mxchat'); ?></p>
722 </div>
723 <div class="mxch-leads-confirm-actions">
724 <button type="button" class="mxch-btn mxch-btn-secondary" data-mxch-leads-close><?php esc_html_e('Cancel', 'mxchat'); ?></button>
725 <button type="button" class="mxch-btn mxch-btn-danger" id="mxch-leads-confirm-go"><?php esc_html_e('Delete permanently', 'mxchat'); ?></button>
726 </div>
727 </div>
728 </div>
729
730 <?php wp_nonce_field('mxchat_delete_leads', 'mxchat_leads_delete_nonce'); ?>
731 <?php wp_nonce_field('mxchat_export_leads', 'mxchat_leads_export_nonce'); ?>
732 </div>
733
734 <!-- Notifications Section -->
735 <div id="notifications" class="mxch-section">
736 <div class="mxch-content-header">
737 <h1 class="mxch-content-title"><?php esc_html_e('Notification Settings', 'mxchat'); ?></h1>
738 <p class="mxch-content-subtitle"><?php esc_html_e('Configure email notifications and transcript management options.', 'mxchat'); ?></p>
739 </div>
740
741 <div id="mxch-notifications-form" class="mxchat-autosave-section">
742
743 <!-- Email Notifications Card -->
744 <div class="mxch-card">
745 <div class="mxch-card-header">
746 <h3 class="mxch-card-title">
747 <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>
748 <?php esc_html_e('Email Notifications', 'mxchat'); ?>
749 </h3>
750 </div>
751 <div class="mxch-card-body">
752 <?php
753 $options = get_option('mxchat_transcripts_options', array());
754 $enabled = isset($options['mxchat_enable_notifications']) ? $options['mxchat_enable_notifications'] : 0;
755 $email = isset($options['mxchat_notification_email']) ? $options['mxchat_notification_email'] : get_option('admin_email');
756 ?>
757 <div class="mxch-field">
758 <div class="mxch-toggle-row">
759 <label class="mxchat-toggle-switch">
760 <input type="checkbox"
761 name="mxchat_transcripts_options[mxchat_enable_notifications]"
762 class="mxchat-autosave-field"
763 value="1"
764 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>"
765 <?php checked(1, $enabled); ?>>
766 <span class="mxchat-toggle-slider"></span>
767 </label>
768 <span class="mxch-toggle-label"><?php esc_html_e('Enable Chat Notifications', 'mxchat'); ?></span>
769 </div>
770 <p class="mxch-field-description"><?php esc_html_e('Send email notification when a new chat session starts.', 'mxchat'); ?></p>
771 </div>
772
773 <div class="mxch-field">
774 <label class="mxch-field-label"><?php esc_html_e('Notification Email', 'mxchat'); ?></label>
775 <input type="email"
776 name="mxchat_transcripts_options[mxchat_notification_email]"
777 class="mxch-input mxchat-autosave-field"
778 value="<?php echo esc_attr($email); ?>"
779 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>">
780 <p class="mxch-field-description"><?php esc_html_e('Email address where notifications will be sent.', 'mxchat'); ?></p>
781 </div>
782 </div>
783 </div>
784
785 <!-- Auto-Email Transcript Card -->
786 <div class="mxch-card">
787 <div class="mxch-card-header">
788 <h3 class="mxch-card-title">
789 <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>
790 <?php esc_html_e('Auto-Email Transcript', 'mxchat'); ?>
791 </h3>
792 </div>
793 <div class="mxch-card-body">
794 <?php
795 $auto_email_enabled = isset($options['mxchat_auto_email_transcript_enabled']) ? $options['mxchat_auto_email_transcript_enabled'] : 0;
796 $delay = isset($options['mxchat_auto_email_transcript_delay']) ? $options['mxchat_auto_email_transcript_delay'] : '30';
797 $require_contact = isset($options['mxchat_auto_email_transcript_require_contact']) ? $options['mxchat_auto_email_transcript_require_contact'] : 0;
798 ?>
799 <div class="mxch-field">
800 <div class="mxch-toggle-row">
801 <label class="mxchat-toggle-switch">
802 <input type="checkbox"
803 name="mxchat_transcripts_options[mxchat_auto_email_transcript_enabled]"
804 class="mxchat-autosave-field"
805 value="1"
806 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>"
807 <?php checked(1, $auto_email_enabled); ?>>
808 <span class="mxchat-toggle-slider"></span>
809 </label>
810 <span class="mxch-toggle-label"><?php esc_html_e('Auto-Email Full Transcript', 'mxchat'); ?></span>
811 </div>
812 <p class="mxch-field-description"><?php esc_html_e('Automatically send the full conversation transcript after the chat ends.', 'mxchat'); ?></p>
813 </div>
814
815 <div class="mxch-field">
816 <label class="mxch-field-label"><?php esc_html_e('Send Transcript After', 'mxchat'); ?></label>
817 <select name="mxchat_transcripts_options[mxchat_auto_email_transcript_delay]"
818 class="mxch-select mxchat-autosave-field"
819 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>">
820 <option value="15" <?php selected($delay, '15'); ?>><?php esc_html_e('15 minutes', 'mxchat'); ?></option>
821 <option value="30" <?php selected($delay, '30'); ?>><?php esc_html_e('30 minutes', 'mxchat'); ?></option>
822 <option value="60" <?php selected($delay, '60'); ?>><?php esc_html_e('1 hour', 'mxchat'); ?></option>
823 </select>
824 </div>
825
826 <div class="mxch-field">
827 <div class="mxch-toggle-row">
828 <label class="mxchat-toggle-switch">
829 <input type="checkbox"
830 name="mxchat_transcripts_options[mxchat_auto_email_transcript_require_contact]"
831 class="mxchat-autosave-field"
832 value="1"
833 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>"
834 <?php checked(1, $require_contact); ?>>
835 <span class="mxchat-toggle-slider"></span>
836 </label>
837 <span class="mxch-toggle-label"><?php esc_html_e('Only send if user provided contact info', 'mxchat'); ?></span>
838 </div>
839 </div>
840 </div>
841 </div>
842
843 <!-- Transcript Management Card -->
844 <div class="mxch-card">
845 <div class="mxch-card-header">
846 <h3 class="mxch-card-title">
847 <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>
848 <?php esc_html_e('Transcript Management', 'mxchat'); ?>
849 </h3>
850 </div>
851 <div class="mxch-card-body">
852 <?php
853 $auto_delete = isset($options['mxchat_auto_delete_transcripts']) ? $options['mxchat_auto_delete_transcripts'] : 'never';
854 ?>
855 <div class="mxch-field">
856 <label class="mxch-field-label"><?php esc_html_e('Auto-Delete Old Transcripts', 'mxchat'); ?></label>
857 <select name="mxchat_transcripts_options[mxchat_auto_delete_transcripts]"
858 class="mxch-select mxchat-autosave-field"
859 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>">
860 <option value="never" <?php selected($auto_delete, 'never'); ?>><?php esc_html_e('Never (Keep All)', 'mxchat'); ?></option>
861 <option value="1week" <?php selected($auto_delete, '1week'); ?>><?php esc_html_e('After 1 Week', 'mxchat'); ?></option>
862 <option value="2weeks" <?php selected($auto_delete, '2weeks'); ?>><?php esc_html_e('After 2 Weeks', 'mxchat'); ?></option>
863 <option value="1month" <?php selected($auto_delete, '1month'); ?>><?php esc_html_e('After 1 Month', 'mxchat'); ?></option>
864 </select>
865 <p class="mxch-field-description"><?php esc_html_e('Automatically delete old chat transcripts to manage database size and privacy.', 'mxchat'); ?></p>
866 </div>
867 </div>
868 </div>
869 </div>
870 </div>
871 </main>
872 </div>
873
874 <!-- RAG Context Modal -->
875 <div id="mxch-rag-modal" class="mxch-modal-overlay" style="display: none;">
876 <div class="mxch-modal-content">
877 <div class="mxch-modal-header">
878 <h2><?php esc_html_e('Message Context', 'mxchat'); ?></h2>
879 <button type="button" class="mxch-modal-close">&times;</button>
880 </div>
881 <div class="mxch-modal-body">
882 <!-- Tabs -->
883 <div class="mxch-context-tabs">
884 <button type="button" class="mxch-context-tab active" data-tab="sources">
885 <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>
886 <?php esc_html_e('Sources', 'mxchat'); ?>
887 <span class="mxch-tab-badge" id="mxch-sources-count" style="display: none;">0</span>
888 </button>
889 <button type="button" class="mxch-context-tab" data-tab="actions">
890 <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>
891 <?php esc_html_e('Actions', 'mxchat'); ?>
892 <span class="mxch-tab-badge" id="mxch-actions-count" style="display: none;">0</span>
893 </button>
894 </div>
895
896 <div class="mxch-rag-loading" style="display: none;">
897 <span class="spinner is-active"></span>
898 <?php esc_html_e('Loading context...', 'mxchat'); ?>
899 </div>
900
901 <!-- Sources Tab Content -->
902 <div class="mxch-tab-content" id="mxch-tab-sources">
903 <div class="mxch-rag-content">
904 <!-- RAG context will be populated via JavaScript -->
905 </div>
906 </div>
907
908 <!-- Actions Tab Content -->
909 <div class="mxch-tab-content" id="mxch-tab-actions" style="display: none;">
910 <div class="mxch-actions-content">
911 <!-- Action scores will be populated via JavaScript -->
912 </div>
913 </div>
914 </div>
915 </div>
916 </div>
917 <?php
918 }
919