@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.
@@ -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)