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

653 lines 49.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 </div>
65 <!-- Settings Section -->
66 <div class="mxch-mobile-nav-section">
67 <div class="mxch-mobile-nav-section-title"><?php esc_html_e('Settings', 'mxchat'); ?></div>
68 <button class="mxch-mobile-nav-link" data-target="notifications">
69 <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>
70 <span><?php esc_html_e('Notifications', 'mxchat'); ?></span>
71 </button>
72 </div>
73 <?php if (!$is_activated): ?>
74 <div class="mxch-mobile-menu-footer">
75 <a href="https://mxchat.ai/" target="_blank" class="mxch-mobile-upgrade-btn">
76 <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>
77 <?php esc_html_e('Upgrade to Pro', 'mxchat'); ?>
78 </a>
79 </div>
80 <?php endif; ?>
81 </nav>
82 </div>
83
84 <!-- Sidebar Navigation -->
85 <aside class="mxch-sidebar">
86 <div class="mxch-sidebar-header">
87 <a href="#" class="mxch-sidebar-logo">
88 <div class="mxch-sidebar-logo-icon">
89 <img src="<?php echo esc_url($plugin_url . 'images/icon-128x128.png'); ?>" alt="MxChat">
90 </div>
91 <span class="mxch-sidebar-logo-text">MxChat</span>
92 <span class="mxch-sidebar-version">v<?php echo esc_html(MXCHAT_VERSION ?? '2.7.0'); ?></span>
93 </a>
94 </div>
95
96 <nav class="mxch-sidebar-nav">
97 <!-- Overview Section -->
98 <div class="mxch-nav-section">
99 <div class="mxch-nav-section-title"><?php esc_html_e('Overview', 'mxchat'); ?></div>
100
101 <div class="mxch-nav-item" data-section="dashboard">
102 <button class="mxch-nav-link active" data-target="dashboard">
103 <span class="mxch-nav-link-icon">
104 <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>
105 </span>
106 <span class="mxch-nav-link-text"><?php esc_html_e('Dashboard', 'mxchat'); ?></span>
107 </button>
108 </div>
109 </div>
110
111 <!-- Conversations Section -->
112 <div class="mxch-nav-section">
113 <div class="mxch-nav-section-title"><?php esc_html_e('Conversations', 'mxchat'); ?></div>
114
115 <div class="mxch-nav-item" data-section="all-chats">
116 <button class="mxch-nav-link" data-target="all-chats">
117 <span class="mxch-nav-link-icon">
118 <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>
119 </span>
120 <span class="mxch-nav-link-text"><?php esc_html_e('All Chats', 'mxchat'); ?></span>
121 <span class="mxch-nav-link-badge"><?php echo esc_html($total_chats); ?></span>
122 </button>
123 </div>
124 </div>
125
126 <!-- Settings Section -->
127 <div class="mxch-nav-section">
128 <div class="mxch-nav-section-title"><?php esc_html_e('Settings', 'mxchat'); ?></div>
129
130 <div class="mxch-nav-item" data-section="notifications">
131 <button class="mxch-nav-link" data-target="notifications">
132 <span class="mxch-nav-link-icon">
133 <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>
134 </span>
135 <span class="mxch-nav-link-text"><?php esc_html_e('Notifications', 'mxchat'); ?></span>
136 </button>
137 </div>
138 </div>
139 </nav>
140
141 <?php if (!$is_activated): ?>
142 <div class="mxch-sidebar-footer">
143 <a href="https://mxchat.ai/" target="_blank" class="mxch-sidebar-upgrade-v2">
144 <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>
145 <?php esc_html_e('Pro Upgrade', 'mxchat'); ?>
146 </a>
147 </div>
148 <?php endif; ?>
149 </aside>
150
151 <!-- Main Content Area -->
152 <main class="mxch-content">
153 <!-- Dashboard Section -->
154 <div id="dashboard" class="mxch-section active">
155 <div class="mxch-content-header">
156 <h1 class="mxch-content-title"><?php esc_html_e('Transcripts Dashboard', 'mxchat'); ?></h1>
157 <p class="mxch-content-subtitle"><?php esc_html_e('Overview of your chatbot conversations and engagement metrics.', 'mxchat'); ?></p>
158 </div>
159
160 <!-- Stats Grid -->
161 <div class="mxch-stats-grid">
162 <div class="mxch-stat-card">
163 <div class="mxch-stat-icon mxch-stat-icon-primary">
164 <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>
165 </div>
166 <div class="mxch-stat-content">
167 <span class="mxch-stat-value"><?php echo esc_html($total_chats); ?></span>
168 <span class="mxch-stat-label"><?php esc_html_e('Total Chats', 'mxchat'); ?></span>
169 </div>
170 </div>
171
172 <div class="mxch-stat-card">
173 <div class="mxch-stat-icon mxch-stat-icon-success">
174 <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>
175 </div>
176 <div class="mxch-stat-content">
177 <span class="mxch-stat-value"><?php echo esc_html($total_messages); ?></span>
178 <span class="mxch-stat-label"><?php esc_html_e('Total Messages', 'mxchat'); ?></span>
179 </div>
180 </div>
181
182 <div class="mxch-stat-card">
183 <div class="mxch-stat-icon mxch-stat-icon-info">
184 <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>
185 </div>
186 <div class="mxch-stat-content">
187 <span class="mxch-stat-value"><?php echo esc_html($total_users); ?></span>
188 <span class="mxch-stat-label"><?php esc_html_e('Unique Users', 'mxchat'); ?></span>
189 <span class="mxch-stat-sublabel">
190 <?php
191 echo sprintf(
192 esc_html__('%d registered, %d guests', 'mxchat'),
193 $registered_users,
194 $guest_users
195 );
196 ?>
197 </span>
198 </div>
199 </div>
200
201 <div class="mxch-stat-card">
202 <div class="mxch-stat-icon mxch-stat-icon-warning">
203 <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>
204 </div>
205 <div class="mxch-stat-content">
206 <span class="mxch-stat-value"><?php echo esc_html($avg_messages); ?></span>
207 <span class="mxch-stat-label"><?php esc_html_e('Avg Messages/Chat', 'mxchat'); ?></span>
208 </div>
209 </div>
210 </div>
211
212 <!-- Activity Cards Row -->
213 <div class="mxch-cards-row">
214 <!-- Activity Timeline Card -->
215 <div class="mxch-card mxch-card-flex">
216 <div class="mxch-card-header">
217 <h3 class="mxch-card-title">
218 <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>
219 <?php esc_html_e('Recent Activity', 'mxchat'); ?>
220 </h3>
221 </div>
222 <div class="mxch-card-body">
223 <div class="mxch-activity-stats">
224 <div class="mxch-activity-item">
225 <div class="mxch-activity-icon mxch-activity-today">
226 <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>
227 </div>
228 <div class="mxch-activity-content">
229 <span class="mxch-activity-value"><?php echo esc_html($today_chats); ?></span>
230 <span class="mxch-activity-label"><?php esc_html_e('Today', 'mxchat'); ?></span>
231 </div>
232 </div>
233 <div class="mxch-activity-item">
234 <div class="mxch-activity-icon mxch-activity-week">
235 <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>
236 </div>
237 <div class="mxch-activity-content">
238 <span class="mxch-activity-value"><?php echo esc_html($week_chats); ?></span>
239 <span class="mxch-activity-label"><?php esc_html_e('Last 7 Days', 'mxchat'); ?></span>
240 </div>
241 </div>
242 <div class="mxch-activity-item">
243 <div class="mxch-activity-icon mxch-activity-month">
244 <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>
245 </div>
246 <div class="mxch-activity-content">
247 <span class="mxch-activity-value"><?php echo esc_html($month_chats); ?></span>
248 <span class="mxch-activity-label"><?php esc_html_e('Last 30 Days', 'mxchat'); ?></span>
249 </div>
250 </div>
251 </div>
252 </div>
253 </div>
254
255 <!-- Insights Card -->
256 <div class="mxch-card mxch-card-flex">
257 <div class="mxch-card-header">
258 <h3 class="mxch-card-title">
259 <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>
260 <?php esc_html_e('Insights', 'mxchat'); ?>
261 </h3>
262 </div>
263 <div class="mxch-card-body">
264 <div class="mxch-insights-list">
265 <div class="mxch-insight-item">
266 <span class="mxch-insight-label"><?php esc_html_e('Peak Activity', 'mxchat'); ?></span>
267 <span class="mxch-insight-value">
268 <?php
269 if ($busiest_hour) {
270 $hour = $busiest_hour->hour;
271 $formatted_hour = date('g A', strtotime("$hour:00"));
272 echo esc_html($formatted_hour);
273 } else {
274 echo esc_html__('N/A', 'mxchat');
275 }
276 ?>
277 </span>
278 </div>
279 <div class="mxch-insight-item">
280 <span class="mxch-insight-label"><?php esc_html_e('Engagement Rate', 'mxchat'); ?></span>
281 <span class="mxch-insight-value">
282 <?php
283 $engagement_rate = $total_chats > 0 ? round(($total_messages / $total_chats), 1) : 0;
284 echo esc_html($engagement_rate . ' msg/chat');
285 ?>
286 </span>
287 </div>
288 <div class="mxch-insight-item">
289 <span class="mxch-insight-label"><?php esc_html_e('Status', 'mxchat'); ?></span>
290 <span class="mxch-insight-value">
291 <?php
292 if ($today_chats > 0) {
293 echo '<span class="mxch-status-badge mxch-status-active">' . esc_html__('Active', 'mxchat') . '</span>';
294 } else if ($week_chats > 0) {
295 echo '<span class="mxch-status-badge mxch-status-moderate">' . esc_html__('Moderate', 'mxchat') . '</span>';
296 } else {
297 echo '<span class="mxch-status-badge mxch-status-quiet">' . esc_html__('Quiet', 'mxchat') . '</span>';
298 }
299 ?>
300 </span>
301 </div>
302 <div class="mxch-insight-item">
303 <span class="mxch-insight-label"><?php esc_html_e('Agent Tests', 'mxchat'); ?></span>
304 <span class="mxch-insight-value"><?php echo esc_html($agent_tests); ?></span>
305 </div>
306 </div>
307 </div>
308 </div>
309 </div>
310
311 <!-- Activity Chart -->
312 <div class="mxch-card mxch-activity-chart-card">
313 <div class="mxch-card-header">
314 <h3 class="mxch-card-title">
315 <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>
316 <?php esc_html_e('7-Day Activity', 'mxchat'); ?>
317 </h3>
318 <div class="mxch-chart-legend">
319 <span class="mxch-legend-item mxch-legend-chats">
320 <span class="mxch-legend-dot"></span>
321 <?php esc_html_e('Chats', 'mxchat'); ?>
322 </span>
323 <span class="mxch-legend-item mxch-legend-messages">
324 <span class="mxch-legend-dot"></span>
325 <?php esc_html_e('Messages', 'mxchat'); ?>
326 </span>
327 </div>
328 </div>
329 <div class="mxch-card-body">
330 <div class="mxch-chart-container">
331 <canvas id="mxchat-activity-chart"></canvas>
332 </div>
333 </div>
334 </div>
335
336 <!-- Quick Actions -->
337 <div class="mxch-card">
338 <div class="mxch-card-header">
339 <h3 class="mxch-card-title">
340 <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>
341 <?php esc_html_e('Quick Actions', 'mxchat'); ?>
342 </h3>
343 </div>
344 <div class="mxch-card-body">
345 <div class="mxch-quick-actions">
346 <button type="button" class="mxch-quick-action-btn" data-action="view-chats">
347 <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>
348 <span><?php esc_html_e('View All Chats', 'mxchat'); ?></span>
349 </button>
350 <button type="button" id="mxch-export-btn" class="mxch-quick-action-btn">
351 <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>
352 <span><?php esc_html_e('Export All Chats', 'mxchat'); ?></span>
353 </button>
354 <button type="button" class="mxch-quick-action-btn" data-action="settings">
355 <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>
356 <span><?php esc_html_e('Notification Settings', 'mxchat'); ?></span>
357 </button>
358 </div>
359 </div>
360 </div>
361 </div>
362
363 <!-- All Chats Section - Split Panel Layout -->
364 <div id="all-chats" class="mxch-section">
365 <div class="mxch-split-panel">
366 <!-- Left Panel - Chat List -->
367 <div class="mxch-chat-list-panel">
368 <!-- Bulk Actions Toolbar -->
369 <div class="mxch-bulk-toolbar">
370 <label class="mxch-bulk-select-all">
371 <input type="checkbox" id="mxch-select-all">
372 <span><?php esc_html_e('All', 'mxchat'); ?></span>
373 </label>
374 <span class="mxch-selected-count" id="mxch-selected-count">0</span>
375 <div class="mxch-bulk-actions">
376 <button type="button" class="mxch-bulk-btn" id="mxch-sort-btn" title="<?php esc_attr_e('Sort', 'mxchat'); ?>">
377 <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>
378 <span><?php esc_html_e('Sort', 'mxchat'); ?></span>
379 </button>
380 <button type="button" class="mxch-bulk-btn mxch-bulk-delete" id="mxch-delete-selected" disabled title="<?php esc_attr_e('Delete Selected', 'mxchat'); ?>">
381 <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>
382 </button>
383 </div>
384 </div>
385 <div class="mxch-panel-header">
386 <div class="mxch-search-wrapper">
387 <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>
388 <input type="text" id="mxch-search-transcripts" class="mxch-search-input" placeholder="<?php esc_attr_e('Search chats...', 'mxchat'); ?>">
389 </div>
390 <div class="mxch-panel-title-row">
391 <span class="mxch-panel-count" id="mxch-chat-count">0 / 0 chats</span>
392 <div class="mxch-panel-actions">
393 <button type="button" id="mxch-refresh-list" class="mxch-icon-btn" title="<?php esc_attr_e('Refresh', 'mxchat'); ?>">
394 <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>
395 </button>
396 </div>
397 </div>
398 </div>
399 <div class="mxch-chat-list" id="mxch-chat-list">
400 <!-- Chat list items loaded via AJAX -->
401 </div>
402 <div class="mxch-panel-footer">
403 <div class="mxch-pagination-simple" id="mxch-pagination">
404 <!-- Pagination controls -->
405 </div>
406 </div>
407 </div>
408
409 <!-- Right Panel - Conversation View -->
410 <div class="mxch-conversation-panel" id="mxch-conversation-panel">
411 <!-- Empty State -->
412 <div class="mxch-conversation-empty" id="mxch-conversation-empty">
413 <div class="mxch-empty-icon">
414 <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>
415 </div>
416 <h3><?php esc_html_e('Select a conversation', 'mxchat'); ?></h3>
417 <p><?php esc_html_e('Choose a chat from the list to view the full conversation.', 'mxchat'); ?></p>
418 </div>
419
420 <!-- Conversation Content (hidden initially) -->
421 <div class="mxch-conversation-content" id="mxch-conversation-content" style="display: none;">
422 <!-- Header -->
423 <div class="mxch-conversation-header">
424 <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'); ?>">
425 <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>
426 </button>
427 <div class="mxch-user-avatar" id="mxch-user-avatar">
428 <span>MX</span>
429 </div>
430 <div class="mxch-user-info">
431 <div class="mxch-user-name" id="mxch-user-name">User Name</div>
432 <div class="mxch-user-meta" id="mxch-user-meta">User ID: 123</div>
433 </div>
434 <button type="button" class="mxch-details-toggle" id="mxch-toggle-details" title="<?php esc_attr_e('Show details', 'mxchat'); ?>">
435 <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>
436 </button>
437 </div>
438
439 <!-- Details Drawer (collapsible) -->
440 <div class="mxch-details-drawer" id="mxch-details-drawer" style="display: none;">
441 <div class="mxch-details-section">
442 <h4><?php esc_html_e('Chat Details', 'mxchat'); ?></h4>
443 <div class="mxch-detail-row">
444 <span class="mxch-detail-label"><?php esc_html_e('Total Messages', 'mxchat'); ?></span>
445 <span class="mxch-detail-value" id="mxch-detail-messages">0</span>
446 </div>
447 <div class="mxch-detail-row">
448 <span class="mxch-detail-label"><?php esc_html_e('Started', 'mxchat'); ?></span>
449 <span class="mxch-detail-value" id="mxch-detail-started">-</span>
450 </div>
451 <div class="mxch-detail-row">
452 <span class="mxch-detail-label"><?php esc_html_e('Page', 'mxchat'); ?></span>
453 <span class="mxch-detail-value" id="mxch-detail-page">-</span>
454 </div>
455 <div class="mxch-detail-row" id="mxch-detail-ip-row" style="display: none;">
456 <span class="mxch-detail-label"><?php esc_html_e('IP Address', 'mxchat'); ?></span>
457 <span class="mxch-detail-value" id="mxch-detail-ip">-</span>
458 </div>
459 <div class="mxch-detail-row" id="mxch-detail-email-row" style="display: none;">
460 <span class="mxch-detail-label"><?php esc_html_e('Email', 'mxchat'); ?></span>
461 <span class="mxch-detail-value" id="mxch-detail-email">-</span>
462 </div>
463 </div>
464 <div class="mxch-details-section" id="mxch-clicked-section" style="display: none;">
465 <h4><?php esc_html_e('Clicked Links', 'mxchat'); ?></h4>
466 <div class="mxch-clicked-links" id="mxch-clicked-links">
467 <!-- Links populated via JS -->
468 </div>
469 </div>
470 <div class="mxch-details-actions">
471 <button type="button" id="mxch-delete-current" class="mxch-btn mxch-btn-danger mxch-btn-sm">
472 <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>
473 <?php esc_html_e('Delete Chat', 'mxchat'); ?>
474 </button>
475 <button type="button" id="mxch-export-current" class="mxch-btn mxch-btn-secondary mxch-btn-sm">
476 <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>
477 <?php esc_html_e('Export', 'mxchat'); ?>
478 </button>
479 </div>
480 </div>
481
482 <!-- Messages Area -->
483 <div class="mxch-messages-area" id="mxch-messages-area">
484 <!-- Messages loaded via AJAX -->
485 </div>
486 </div>
487 </div>
488 </div>
489
490 <?php wp_nonce_field('mxchat_delete_chat_history', 'mxchat_delete_chat_nonce'); ?>
491 </div>
492
493 <!-- Notifications Section -->
494 <div id="notifications" class="mxch-section">
495 <div class="mxch-content-header">
496 <h1 class="mxch-content-title"><?php esc_html_e('Notification Settings', 'mxchat'); ?></h1>
497 <p class="mxch-content-subtitle"><?php esc_html_e('Configure email notifications and transcript management options.', 'mxchat'); ?></p>
498 </div>
499
500 <div id="mxch-notifications-form" class="mxchat-autosave-section">
501
502 <!-- Email Notifications Card -->
503 <div class="mxch-card">
504 <div class="mxch-card-header">
505 <h3 class="mxch-card-title">
506 <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>
507 <?php esc_html_e('Email Notifications', 'mxchat'); ?>
508 </h3>
509 </div>
510 <div class="mxch-card-body">
511 <?php
512 $options = get_option('mxchat_transcripts_options', array());
513 $enabled = isset($options['mxchat_enable_notifications']) ? $options['mxchat_enable_notifications'] : 0;
514 $email = isset($options['mxchat_notification_email']) ? $options['mxchat_notification_email'] : get_option('admin_email');
515 ?>
516 <div class="mxch-field">
517 <div class="mxch-toggle-row">
518 <label class="mxchat-toggle-switch">
519 <input type="checkbox"
520 name="mxchat_transcripts_options[mxchat_enable_notifications]"
521 class="mxchat-autosave-field"
522 value="1"
523 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>"
524 <?php checked(1, $enabled); ?>>
525 <span class="mxchat-toggle-slider"></span>
526 </label>
527 <span class="mxch-toggle-label"><?php esc_html_e('Enable Chat Notifications', 'mxchat'); ?></span>
528 </div>
529 <p class="mxch-field-description"><?php esc_html_e('Send email notification when a new chat session starts.', 'mxchat'); ?></p>
530 </div>
531
532 <div class="mxch-field">
533 <label class="mxch-field-label"><?php esc_html_e('Notification Email', 'mxchat'); ?></label>
534 <input type="email"
535 name="mxchat_transcripts_options[mxchat_notification_email]"
536 class="mxch-input mxchat-autosave-field"
537 value="<?php echo esc_attr($email); ?>"
538 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>">
539 <p class="mxch-field-description"><?php esc_html_e('Email address where notifications will be sent.', 'mxchat'); ?></p>
540 </div>
541 </div>
542 </div>
543
544 <!-- Auto-Email Transcript Card -->
545 <div class="mxch-card">
546 <div class="mxch-card-header">
547 <h3 class="mxch-card-title">
548 <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>
549 <?php esc_html_e('Auto-Email Transcript', 'mxchat'); ?>
550 </h3>
551 </div>
552 <div class="mxch-card-body">
553 <?php
554 $auto_email_enabled = isset($options['mxchat_auto_email_transcript_enabled']) ? $options['mxchat_auto_email_transcript_enabled'] : 0;
555 $delay = isset($options['mxchat_auto_email_transcript_delay']) ? $options['mxchat_auto_email_transcript_delay'] : '30';
556 $require_contact = isset($options['mxchat_auto_email_transcript_require_contact']) ? $options['mxchat_auto_email_transcript_require_contact'] : 0;
557 ?>
558 <div class="mxch-field">
559 <div class="mxch-toggle-row">
560 <label class="mxchat-toggle-switch">
561 <input type="checkbox"
562 name="mxchat_transcripts_options[mxchat_auto_email_transcript_enabled]"
563 class="mxchat-autosave-field"
564 value="1"
565 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>"
566 <?php checked(1, $auto_email_enabled); ?>>
567 <span class="mxchat-toggle-slider"></span>
568 </label>
569 <span class="mxch-toggle-label"><?php esc_html_e('Auto-Email Full Transcript', 'mxchat'); ?></span>
570 </div>
571 <p class="mxch-field-description"><?php esc_html_e('Automatically send the full conversation transcript after the chat ends.', 'mxchat'); ?></p>
572 </div>
573
574 <div class="mxch-field">
575 <label class="mxch-field-label"><?php esc_html_e('Send Transcript After', 'mxchat'); ?></label>
576 <select name="mxchat_transcripts_options[mxchat_auto_email_transcript_delay]"
577 class="mxch-select mxchat-autosave-field"
578 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>">
579 <option value="15" <?php selected($delay, '15'); ?>><?php esc_html_e('15 minutes', 'mxchat'); ?></option>
580 <option value="30" <?php selected($delay, '30'); ?>><?php esc_html_e('30 minutes', 'mxchat'); ?></option>
581 <option value="60" <?php selected($delay, '60'); ?>><?php esc_html_e('1 hour', 'mxchat'); ?></option>
582 </select>
583 </div>
584
585 <div class="mxch-field">
586 <div class="mxch-toggle-row">
587 <label class="mxchat-toggle-switch">
588 <input type="checkbox"
589 name="mxchat_transcripts_options[mxchat_auto_email_transcript_require_contact]"
590 class="mxchat-autosave-field"
591 value="1"
592 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>"
593 <?php checked(1, $require_contact); ?>>
594 <span class="mxchat-toggle-slider"></span>
595 </label>
596 <span class="mxch-toggle-label"><?php esc_html_e('Only send if user provided contact info', 'mxchat'); ?></span>
597 </div>
598 </div>
599 </div>
600 </div>
601
602 <!-- Transcript Management Card -->
603 <div class="mxch-card">
604 <div class="mxch-card-header">
605 <h3 class="mxch-card-title">
606 <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>
607 <?php esc_html_e('Transcript Management', 'mxchat'); ?>
608 </h3>
609 </div>
610 <div class="mxch-card-body">
611 <?php
612 $auto_delete = isset($options['mxchat_auto_delete_transcripts']) ? $options['mxchat_auto_delete_transcripts'] : 'never';
613 ?>
614 <div class="mxch-field">
615 <label class="mxch-field-label"><?php esc_html_e('Auto-Delete Old Transcripts', 'mxchat'); ?></label>
616 <select name="mxchat_transcripts_options[mxchat_auto_delete_transcripts]"
617 class="mxch-select mxchat-autosave-field"
618 data-nonce="<?php echo wp_create_nonce('mxchat_autosave_nonce'); ?>">
619 <option value="never" <?php selected($auto_delete, 'never'); ?>><?php esc_html_e('Never (Keep All)', 'mxchat'); ?></option>
620 <option value="1week" <?php selected($auto_delete, '1week'); ?>><?php esc_html_e('After 1 Week', 'mxchat'); ?></option>
621 <option value="2weeks" <?php selected($auto_delete, '2weeks'); ?>><?php esc_html_e('After 2 Weeks', 'mxchat'); ?></option>
622 <option value="1month" <?php selected($auto_delete, '1month'); ?>><?php esc_html_e('After 1 Month', 'mxchat'); ?></option>
623 </select>
624 <p class="mxch-field-description"><?php esc_html_e('Automatically delete old chat transcripts to manage database size and privacy.', 'mxchat'); ?></p>
625 </div>
626 </div>
627 </div>
628 </div>
629 </div>
630 </main>
631 </div>
632
633 <!-- RAG Context Modal -->
634 <div id="mxch-rag-modal" class="mxch-modal-overlay" style="display: none;">
635 <div class="mxch-modal-content">
636 <div class="mxch-modal-header">
637 <h2><?php esc_html_e('Retrieved Documents', 'mxchat'); ?></h2>
638 <button type="button" class="mxch-modal-close">&times;</button>
639 </div>
640 <div class="mxch-modal-body">
641 <div class="mxch-rag-loading" style="display: none;">
642 <span class="spinner is-active"></span>
643 <?php esc_html_e('Loading document context...', 'mxchat'); ?>
644 </div>
645 <div class="mxch-rag-content">
646 <!-- RAG context will be populated via JavaScript -->
647 </div>
648 </div>
649 </div>
650 </div>
651 <?php
652 }
653