@wabbit-dashboard/embed 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -0
- package/dist/wabbit-embed.cjs.js +175 -101
- package/dist/wabbit-embed.cjs.js.map +1 -1
- package/dist/wabbit-embed.d.ts +44 -42
- package/dist/wabbit-embed.esm.js +175 -101
- package/dist/wabbit-embed.esm.js.map +1 -1
- package/dist/wabbit-embed.umd.js +175 -101
- package/dist/wabbit-embed.umd.js.map +1 -1
- package/dist/wabbit-embed.umd.min.js +1 -1
- package/dist/wabbit-embed.umd.min.js.map +1 -1
- package/package.json +1 -1
package/dist/wabbit-embed.esm.js
CHANGED
|
@@ -116,6 +116,143 @@ function mergeConfig(config) {
|
|
|
116
116
|
};
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
+
/**
|
|
120
|
+
* localStorage wrapper with type safety
|
|
121
|
+
*/
|
|
122
|
+
/**
|
|
123
|
+
* Memory storage implementation (clears on page reload)
|
|
124
|
+
*/
|
|
125
|
+
class MemoryStorage {
|
|
126
|
+
constructor() {
|
|
127
|
+
this.store = new Map();
|
|
128
|
+
}
|
|
129
|
+
getItem(key) {
|
|
130
|
+
return this.store.get(key) ?? null;
|
|
131
|
+
}
|
|
132
|
+
setItem(key, value) {
|
|
133
|
+
this.store.set(key, value);
|
|
134
|
+
}
|
|
135
|
+
removeItem(key) {
|
|
136
|
+
this.store.delete(key);
|
|
137
|
+
}
|
|
138
|
+
clear() {
|
|
139
|
+
this.store.clear();
|
|
140
|
+
}
|
|
141
|
+
get length() {
|
|
142
|
+
return this.store.size;
|
|
143
|
+
}
|
|
144
|
+
key(index) {
|
|
145
|
+
const keys = Array.from(this.store.keys());
|
|
146
|
+
return keys[index] ?? null;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
/**
|
|
150
|
+
* Safe storage wrapper
|
|
151
|
+
*/
|
|
152
|
+
class SafeStorage {
|
|
153
|
+
constructor(storage = localStorage, prefix = 'wabbit_') {
|
|
154
|
+
this.storage = storage;
|
|
155
|
+
this.prefix = prefix;
|
|
156
|
+
}
|
|
157
|
+
/**
|
|
158
|
+
* Get item from storage
|
|
159
|
+
*/
|
|
160
|
+
get(key) {
|
|
161
|
+
try {
|
|
162
|
+
const item = this.storage.getItem(this.prefix + key);
|
|
163
|
+
if (item === null) {
|
|
164
|
+
return null;
|
|
165
|
+
}
|
|
166
|
+
return JSON.parse(item);
|
|
167
|
+
}
|
|
168
|
+
catch (error) {
|
|
169
|
+
console.error(`[Wabbit] Failed to get storage item "${key}":`, error);
|
|
170
|
+
return null;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
/**
|
|
174
|
+
* Set item in storage
|
|
175
|
+
*/
|
|
176
|
+
set(key, value) {
|
|
177
|
+
try {
|
|
178
|
+
this.storage.setItem(this.prefix + key, JSON.stringify(value));
|
|
179
|
+
return true;
|
|
180
|
+
}
|
|
181
|
+
catch (error) {
|
|
182
|
+
console.error(`[Wabbit] Failed to set storage item "${key}":`, error);
|
|
183
|
+
return false;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
/**
|
|
187
|
+
* Remove item from storage
|
|
188
|
+
*/
|
|
189
|
+
remove(key) {
|
|
190
|
+
this.storage.removeItem(this.prefix + key);
|
|
191
|
+
}
|
|
192
|
+
/**
|
|
193
|
+
* Clear all items with prefix
|
|
194
|
+
*/
|
|
195
|
+
clear() {
|
|
196
|
+
if (this.storage.length !== undefined && this.storage.key) {
|
|
197
|
+
const keys = [];
|
|
198
|
+
for (let i = 0; i < this.storage.length; i++) {
|
|
199
|
+
const key = this.storage.key(i);
|
|
200
|
+
if (key && key.startsWith(this.prefix)) {
|
|
201
|
+
keys.push(key);
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
keys.forEach((key) => this.storage.removeItem(key));
|
|
205
|
+
}
|
|
206
|
+
else {
|
|
207
|
+
// Fallback: try to clear common keys
|
|
208
|
+
const commonKeys = ['session_id', 'email_capture_dismissed'];
|
|
209
|
+
commonKeys.forEach((key) => this.remove(key));
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
// Export singleton instance (for backward compatibility)
|
|
214
|
+
const storage = new SafeStorage();
|
|
215
|
+
/**
|
|
216
|
+
* Create a storage instance with the specified backend
|
|
217
|
+
*
|
|
218
|
+
* @param persistSession - Whether to persist sessions across browser sessions
|
|
219
|
+
* @returns SafeStorage instance with appropriate backend
|
|
220
|
+
*/
|
|
221
|
+
function createStorage(persistSession = true) {
|
|
222
|
+
let storageBackend;
|
|
223
|
+
if (persistSession) {
|
|
224
|
+
// Use localStorage (persists across browser sessions)
|
|
225
|
+
storageBackend = typeof window !== 'undefined' ? window.localStorage : new MemoryStorage();
|
|
226
|
+
}
|
|
227
|
+
else {
|
|
228
|
+
// Use sessionStorage (clears when browser closes)
|
|
229
|
+
storageBackend = typeof window !== 'undefined' ? window.sessionStorage : new MemoryStorage();
|
|
230
|
+
}
|
|
231
|
+
return new SafeStorage(storageBackend);
|
|
232
|
+
}
|
|
233
|
+
/**
|
|
234
|
+
* Get item from storage (simple string getter)
|
|
235
|
+
*/
|
|
236
|
+
function getStorageItem(key) {
|
|
237
|
+
try {
|
|
238
|
+
return localStorage.getItem('wabbit_' + key);
|
|
239
|
+
}
|
|
240
|
+
catch {
|
|
241
|
+
return null;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
/**
|
|
245
|
+
* Set item in storage (simple string setter)
|
|
246
|
+
*/
|
|
247
|
+
function setStorageItem(key, value) {
|
|
248
|
+
try {
|
|
249
|
+
localStorage.setItem('wabbit_' + key, value);
|
|
250
|
+
}
|
|
251
|
+
catch (error) {
|
|
252
|
+
console.error(`[Wabbit] Failed to set storage item "${key}":`, error);
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
|
|
119
256
|
/**
|
|
120
257
|
* Main Wabbit SDK class
|
|
121
258
|
*
|
|
@@ -132,6 +269,8 @@ class Wabbit {
|
|
|
132
269
|
this.formsWidget = null; // FormWidget | null
|
|
133
270
|
this.emailCaptureWidget = null; // EmailCapture | null
|
|
134
271
|
this.config = config;
|
|
272
|
+
// Create storage instance with appropriate backend based on persistSession
|
|
273
|
+
this.storage = createStorage(config.persistSession ?? true);
|
|
135
274
|
}
|
|
136
275
|
/**
|
|
137
276
|
* Initialize the Wabbit SDK
|
|
@@ -211,7 +350,7 @@ class Wabbit {
|
|
|
211
350
|
}
|
|
212
351
|
}
|
|
213
352
|
};
|
|
214
|
-
const chatWidget = new ChatWidget(chatConfig);
|
|
353
|
+
const chatWidget = new ChatWidget(chatConfig, Wabbit.instance.storage);
|
|
215
354
|
chatWidget.init();
|
|
216
355
|
Wabbit.instance.chatWidget = chatWidget;
|
|
217
356
|
});
|
|
@@ -534,105 +673,13 @@ class Wabbit {
|
|
|
534
673
|
}
|
|
535
674
|
Wabbit.instance = null;
|
|
536
675
|
|
|
537
|
-
/**
|
|
538
|
-
* localStorage wrapper with type safety
|
|
539
|
-
*/
|
|
540
|
-
/**
|
|
541
|
-
* Safe storage wrapper
|
|
542
|
-
*/
|
|
543
|
-
class SafeStorage {
|
|
544
|
-
constructor(storage = localStorage, prefix = 'wabbit_') {
|
|
545
|
-
this.storage = storage;
|
|
546
|
-
this.prefix = prefix;
|
|
547
|
-
}
|
|
548
|
-
/**
|
|
549
|
-
* Get item from storage
|
|
550
|
-
*/
|
|
551
|
-
get(key) {
|
|
552
|
-
try {
|
|
553
|
-
const item = this.storage.getItem(this.prefix + key);
|
|
554
|
-
if (item === null) {
|
|
555
|
-
return null;
|
|
556
|
-
}
|
|
557
|
-
return JSON.parse(item);
|
|
558
|
-
}
|
|
559
|
-
catch (error) {
|
|
560
|
-
console.error(`[Wabbit] Failed to get storage item "${key}":`, error);
|
|
561
|
-
return null;
|
|
562
|
-
}
|
|
563
|
-
}
|
|
564
|
-
/**
|
|
565
|
-
* Set item in storage
|
|
566
|
-
*/
|
|
567
|
-
set(key, value) {
|
|
568
|
-
try {
|
|
569
|
-
this.storage.setItem(this.prefix + key, JSON.stringify(value));
|
|
570
|
-
return true;
|
|
571
|
-
}
|
|
572
|
-
catch (error) {
|
|
573
|
-
console.error(`[Wabbit] Failed to set storage item "${key}":`, error);
|
|
574
|
-
return false;
|
|
575
|
-
}
|
|
576
|
-
}
|
|
577
|
-
/**
|
|
578
|
-
* Remove item from storage
|
|
579
|
-
*/
|
|
580
|
-
remove(key) {
|
|
581
|
-
this.storage.removeItem(this.prefix + key);
|
|
582
|
-
}
|
|
583
|
-
/**
|
|
584
|
-
* Clear all items with prefix
|
|
585
|
-
*/
|
|
586
|
-
clear() {
|
|
587
|
-
if (this.storage.length !== undefined && this.storage.key) {
|
|
588
|
-
const keys = [];
|
|
589
|
-
for (let i = 0; i < this.storage.length; i++) {
|
|
590
|
-
const key = this.storage.key(i);
|
|
591
|
-
if (key && key.startsWith(this.prefix)) {
|
|
592
|
-
keys.push(key);
|
|
593
|
-
}
|
|
594
|
-
}
|
|
595
|
-
keys.forEach((key) => this.storage.removeItem(key));
|
|
596
|
-
}
|
|
597
|
-
else {
|
|
598
|
-
// Fallback: try to clear common keys
|
|
599
|
-
const commonKeys = ['session_id', 'email_capture_dismissed'];
|
|
600
|
-
commonKeys.forEach((key) => this.remove(key));
|
|
601
|
-
}
|
|
602
|
-
}
|
|
603
|
-
}
|
|
604
|
-
// Export singleton instance
|
|
605
|
-
const storage = new SafeStorage();
|
|
606
|
-
/**
|
|
607
|
-
* Get item from storage (simple string getter)
|
|
608
|
-
*/
|
|
609
|
-
function getStorageItem(key) {
|
|
610
|
-
try {
|
|
611
|
-
return localStorage.getItem('wabbit_' + key);
|
|
612
|
-
}
|
|
613
|
-
catch {
|
|
614
|
-
return null;
|
|
615
|
-
}
|
|
616
|
-
}
|
|
617
|
-
/**
|
|
618
|
-
* Set item in storage (simple string setter)
|
|
619
|
-
*/
|
|
620
|
-
function setStorageItem(key, value) {
|
|
621
|
-
try {
|
|
622
|
-
localStorage.setItem('wabbit_' + key, value);
|
|
623
|
-
}
|
|
624
|
-
catch (error) {
|
|
625
|
-
console.error(`[Wabbit] Failed to set storage item "${key}":`, error);
|
|
626
|
-
}
|
|
627
|
-
}
|
|
628
|
-
|
|
629
676
|
/**
|
|
630
677
|
* WebSocket client for chat functionality
|
|
631
678
|
*
|
|
632
679
|
* Based on demo-website/src/lib/websocket.ts but without React dependencies
|
|
633
680
|
*/
|
|
634
681
|
class ChatWebSocketClient {
|
|
635
|
-
constructor(apiKey, wsUrl, sessionId = null) {
|
|
682
|
+
constructor(apiKey, wsUrl, sessionId = null, storage) {
|
|
636
683
|
this.ws = null;
|
|
637
684
|
this.status = 'disconnected';
|
|
638
685
|
this.reconnectAttempts = 0;
|
|
@@ -655,6 +702,7 @@ class ChatWebSocketClient {
|
|
|
655
702
|
this.onMessageEnd = null;
|
|
656
703
|
this.apiKey = apiKey;
|
|
657
704
|
this.wsUrl = wsUrl;
|
|
705
|
+
this.storage = storage;
|
|
658
706
|
this.sessionId = sessionId || this.getStoredSessionId();
|
|
659
707
|
}
|
|
660
708
|
setStatus(status) {
|
|
@@ -723,9 +771,9 @@ class ChatWebSocketClient {
|
|
|
723
771
|
switch (data.type) {
|
|
724
772
|
case 'welcome':
|
|
725
773
|
this.sessionId = data.session_id;
|
|
726
|
-
// Store session ID in localStorage
|
|
774
|
+
// Store session ID in storage (localStorage or sessionStorage)
|
|
727
775
|
if (this.sessionId) {
|
|
728
|
-
storage.set('session_id', this.sessionId);
|
|
776
|
+
this.storage.set('session_id', this.sessionId);
|
|
729
777
|
}
|
|
730
778
|
if (this.onWelcome) {
|
|
731
779
|
this.onWelcome(data.session_id, data.collection_id, data.message || 'Connected');
|
|
@@ -851,7 +899,7 @@ class ChatWebSocketClient {
|
|
|
851
899
|
}
|
|
852
900
|
clearSession() {
|
|
853
901
|
this.sessionId = null;
|
|
854
|
-
storage.remove('session_id');
|
|
902
|
+
this.storage.remove('session_id');
|
|
855
903
|
// Clear message queue only when user explicitly starts new session
|
|
856
904
|
// Queue should persist across reconnection attempts
|
|
857
905
|
this.messageQueue = [];
|
|
@@ -864,7 +912,7 @@ class ChatWebSocketClient {
|
|
|
864
912
|
this.messageQueue = [];
|
|
865
913
|
}
|
|
866
914
|
getStoredSessionId() {
|
|
867
|
-
return storage.get('session_id') || null;
|
|
915
|
+
return this.storage.get('session_id') || null;
|
|
868
916
|
}
|
|
869
917
|
/**
|
|
870
918
|
* Get current message queue size
|
|
@@ -1234,10 +1282,21 @@ class ChatPanel {
|
|
|
1234
1282
|
formatMessage(content) {
|
|
1235
1283
|
// Escape HTML first
|
|
1236
1284
|
let formatted = escapeHtml(content);
|
|
1285
|
+
// Markdown links [text](url) - must come before URL auto-linking
|
|
1286
|
+
formatted = formatted.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
|
|
1237
1287
|
// Simple markdown-like formatting
|
|
1238
1288
|
formatted = formatted.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
|
|
1239
1289
|
formatted = formatted.replace(/\*(.+?)\*/g, '<em>$1</em>');
|
|
1240
1290
|
formatted = formatted.replace(/`(.+?)`/g, '<code style="background: rgba(0,0,0,0.1); padding: 2px 4px; border-radius: 3px;">$1</code>');
|
|
1291
|
+
// Auto-link URLs (not already inside an href attribute)
|
|
1292
|
+
formatted = formatted.replace(/(?<!href=")(https?:\/\/[^\s<]+)/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
|
|
1293
|
+
// Auto-link email addresses
|
|
1294
|
+
formatted = formatted.replace(/(?<!["\/])([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/g, '<a href="mailto:$1">$1</a>');
|
|
1295
|
+
// Auto-link phone numbers (international format with +)
|
|
1296
|
+
formatted = formatted.replace(/(?<!["\/])(\+\d[\d\s-]{7,})/g, (_match, phone) => {
|
|
1297
|
+
const cleanPhone = phone.replace(/[\s-]/g, '');
|
|
1298
|
+
return `<a href="tel:${cleanPhone}">${phone}</a>`;
|
|
1299
|
+
});
|
|
1241
1300
|
formatted = formatted.replace(/\n/g, '<br>');
|
|
1242
1301
|
return formatted;
|
|
1243
1302
|
}
|
|
@@ -1790,6 +1849,20 @@ function injectChatStyles(primaryColor = '#6366f1', theme) {
|
|
|
1790
1849
|
line-height: 1.5;
|
|
1791
1850
|
}
|
|
1792
1851
|
|
|
1852
|
+
.wabbit-chat-message-content a {
|
|
1853
|
+
color: var(--wabbit-primary);
|
|
1854
|
+
text-decoration: underline;
|
|
1855
|
+
text-underline-offset: 2px;
|
|
1856
|
+
}
|
|
1857
|
+
|
|
1858
|
+
.wabbit-chat-message-content a:hover {
|
|
1859
|
+
opacity: 0.8;
|
|
1860
|
+
}
|
|
1861
|
+
|
|
1862
|
+
.wabbit-chat-message-user .wabbit-chat-message-content a {
|
|
1863
|
+
color: inherit;
|
|
1864
|
+
}
|
|
1865
|
+
|
|
1793
1866
|
/* Typing Indicator */
|
|
1794
1867
|
.wabbit-chat-typing {
|
|
1795
1868
|
display: flex;
|
|
@@ -2025,7 +2098,7 @@ function adjustColor(color, amount) {
|
|
|
2025
2098
|
* Chat Widget - Main class that integrates all chat components
|
|
2026
2099
|
*/
|
|
2027
2100
|
class ChatWidget {
|
|
2028
|
-
constructor(config) {
|
|
2101
|
+
constructor(config, storage) {
|
|
2029
2102
|
this.wsClient = null;
|
|
2030
2103
|
this.bubble = null;
|
|
2031
2104
|
this.panel = null;
|
|
@@ -2035,6 +2108,7 @@ class ChatWidget {
|
|
|
2035
2108
|
this.onChatReadyCallback = null;
|
|
2036
2109
|
this.chatReadyFired = false;
|
|
2037
2110
|
this.config = config;
|
|
2111
|
+
this.storage = storage;
|
|
2038
2112
|
this.onChatReadyCallback = config.onChatReady || null;
|
|
2039
2113
|
}
|
|
2040
2114
|
/**
|
|
@@ -2063,8 +2137,8 @@ class ChatWidget {
|
|
|
2063
2137
|
this.setupThemeWatcher();
|
|
2064
2138
|
// Create WebSocket client
|
|
2065
2139
|
const wsUrl = this.getWebSocketUrl();
|
|
2066
|
-
this.wsClient = new ChatWebSocketClient(this.config.apiKey || '', wsUrl, null // Will use stored session if available
|
|
2067
|
-
);
|
|
2140
|
+
this.wsClient = new ChatWebSocketClient(this.config.apiKey || '', wsUrl, null, // Will use stored session if available
|
|
2141
|
+
this.storage);
|
|
2068
2142
|
// Set up event handlers
|
|
2069
2143
|
this.setupWebSocketHandlers();
|
|
2070
2144
|
// Only create bubble for widget mode (not inline)
|