@product7/product7-js 0.5.2 → 0.5.5

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.
Files changed (40) hide show
  1. package/README.md +4 -4
  2. package/dist/README.md +4 -4
  3. package/dist/product7-js.js +7120 -7132
  4. package/dist/product7-js.js.map +1 -1
  5. package/dist/product7-js.min.js +1 -1
  6. package/dist/product7-js.min.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/api/APIService.js +1 -0
  9. package/src/api/services/{MessengerService.js → WebChatService.js} +15 -15
  10. package/src/core/APIService.js +16 -16
  11. package/src/core/Product7.js +4 -4
  12. package/src/core/WebSocketService.js +3 -3
  13. package/src/docs/api.md +9 -9
  14. package/src/docs/example.md +12 -12
  15. package/src/docs/framework-integrations.md +5 -5
  16. package/src/index.js +41 -42
  17. package/src/styles/base.js +9 -9
  18. package/src/styles/design-tokens.js +2 -2
  19. package/src/styles/feedback.js +2 -2
  20. package/src/styles/styles.js +4 -4
  21. package/src/styles/{messenger-components.js → web-chat-components.js} +114 -114
  22. package/src/styles/{messenger-core.js → web-chat-core.js} +32 -32
  23. package/src/styles/{messenger-features.js → web-chat-features.js} +20 -20
  24. package/src/styles/{messenger-views.js → web-chat-views.js} +137 -137
  25. package/src/styles/web-chat.js +17 -0
  26. package/src/styles/{messengerCustomStyles.js → webChatCustomStyles.js} +17 -19
  27. package/src/widgets/{MessengerWidget.js → WebChatWidget.js} +169 -172
  28. package/src/widgets/WidgetFactory.js +3 -3
  29. package/src/widgets/{messenger/MessengerState.js → web-chat/WebChatState.js} +1 -1
  30. package/src/widgets/{messenger → web-chat}/components/NavigationTabs.js +13 -13
  31. package/src/widgets/{messenger/components/MessengerLauncher.js → web-chat/components/WebChatLauncher.js} +15 -17
  32. package/src/widgets/{messenger/components/MessengerPanel.js → web-chat/components/WebChatPanel.js} +11 -11
  33. package/src/widgets/{messenger → web-chat}/views/ChangelogView.js +17 -17
  34. package/src/widgets/{messenger → web-chat}/views/ChatView.js +97 -99
  35. package/src/widgets/{messenger → web-chat}/views/ConversationsView.js +24 -24
  36. package/src/widgets/{messenger → web-chat}/views/HelpView.js +29 -29
  37. package/src/widgets/{messenger → web-chat}/views/HomeView.js +53 -55
  38. package/src/widgets/{messenger → web-chat}/views/PreChatFormView.js +17 -17
  39. package/types/index.d.ts +10 -9
  40. package/src/styles/messenger.js +0 -17
package/src/styles/{messenger-views.js → web-chat-views.js} RENAMED
@@ -1,15 +1,15 @@
1
- export const messengerViewsStyles = `
1
+ export const webChatViewsStyles = `
2
2
  /* ========================================
3
3
  HOME VIEW
4
4
  ======================================== */
5
5
 
6
- .messenger-home-view {
6
+ .web-chat-home-view {
7
7
  background: var(--msg-bg-header-gradient);
8
8
  position: relative;
9
9
  overflow: hidden;
10
10
  }
11
11
 
12
- .messenger-home-view::before {
12
+ .web-chat-home-view::before {
13
13
  content: '';
14
14
  position: absolute;
15
15
  top: 0;
@@ -22,7 +22,7 @@ export const messengerViewsStyles = `
22
22
  z-index: 1;
23
23
  }
24
24
 
25
- .messenger-home-view::after {
25
+ .web-chat-home-view::after {
26
26
  content: '';
27
27
  position: absolute;
28
28
  top: 0;
@@ -35,7 +35,7 @@ export const messengerViewsStyles = `
35
35
  z-index: 1;
36
36
  }
37
37
 
38
- .messenger-home-scroll {
38
+ .web-chat-home-scroll {
39
39
  flex: 1;
40
40
  overflow-y: auto;
41
41
  display: flex;
@@ -43,14 +43,14 @@ export const messengerViewsStyles = `
43
43
  position: relative;
44
44
  }
45
45
 
46
- .messenger-home-header {
46
+ .web-chat-home-header {
47
47
  padding: var(--spacing-6) var(--spacing-5);
48
48
  position: relative;
49
49
  z-index: 2;
50
50
  flex-shrink: 0;
51
51
  }
52
52
 
53
- .messenger-home-header-top {
53
+ .web-chat-home-header-top {
54
54
  display: flex;
55
55
  align-items: center;
56
56
  justify-content: space-between;
@@ -59,7 +59,7 @@ export const messengerViewsStyles = `
59
59
  z-index: 2;
60
60
  }
61
61
 
62
- .messenger-home-logo {
62
+ .web-chat-home-logo {
63
63
  width: 48px;
64
64
  height: 48px;
65
65
  border-radius: var(--radius-lg);
@@ -70,14 +70,14 @@ export const messengerViewsStyles = `
70
70
  justify-content: center;
71
71
  }
72
72
 
73
- .messenger-home-logo img {
73
+ .web-chat-home-logo img {
74
74
  width: 100%;
75
75
  height: 100%;
76
76
  object-fit: contain;
77
77
  border-radius: var(--radius-lg);
78
78
  }
79
79
 
80
- .messenger-home-avatars {
80
+ .web-chat-home-avatars {
81
81
  flex: 1;
82
82
  display: flex;
83
83
  justify-content: flex-end;
@@ -85,11 +85,11 @@ export const messengerViewsStyles = `
85
85
  margin-left: var(--spacing-4);
86
86
  }
87
87
 
88
- .messenger-home-avatars:empty {
88
+ .web-chat-home-avatars:empty {
89
89
  display: none;
90
90
  }
91
91
 
92
- .messenger-home-welcome {
92
+ .web-chat-home-welcome {
93
93
  display: flex;
94
94
  flex-direction: column;
95
95
  text-align: left;
@@ -97,7 +97,7 @@ export const messengerViewsStyles = `
97
97
  z-index: 2;
98
98
  }
99
99
 
100
- .messenger-home-greeting {
100
+ .web-chat-home-greeting {
101
101
  font-size: clamp(22px, 8vw, 34px);
102
102
  font-weight: var(--font-weight-bold);
103
103
  color: var(--msg-text);
@@ -105,7 +105,7 @@ export const messengerViewsStyles = `
105
105
  word-break: break-word;
106
106
  }
107
107
 
108
- .messenger-home-question {
108
+ .web-chat-home-question {
109
109
  font-size: clamp(18px, 6.5vw, 28px);
110
110
  font-weight: var(--font-weight-bold);
111
111
  color: var(--msg-text);
@@ -113,14 +113,14 @@ export const messengerViewsStyles = `
113
113
  word-break: break-word;
114
114
  }
115
115
 
116
- .messenger-home-body {
116
+ .web-chat-home-body {
117
117
  flex: 1;
118
118
  padding: 0 var(--spacing-5) var(--spacing-5);
119
119
  position: relative;
120
120
  z-index: 2;
121
121
  }
122
122
 
123
- .messenger-home-recent-card {
123
+ .web-chat-home-recent-card {
124
124
  background: var(--msg-bg);
125
125
  border: 1px solid var(--msg-border);
126
126
  border-radius: 10px;
@@ -131,24 +131,24 @@ export const messengerViewsStyles = `
131
131
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
132
132
  }
133
133
 
134
- .messenger-home-recent-card:hover {
134
+ .web-chat-home-recent-card:hover {
135
135
  background: var(--msg-bg-hover);
136
136
  }
137
137
 
138
- .messenger-home-recent-card-label {
138
+ .web-chat-home-recent-card-label {
139
139
  font-size: 0.875rem;
140
140
  font-weight: 600;
141
141
  color: var(--msg-text-tertiary);
142
142
  margin-bottom: var(--spacing-2);
143
143
  }
144
144
 
145
- .messenger-home-recent-card-row {
145
+ .web-chat-home-recent-card-row {
146
146
  display: flex;
147
147
  align-items: center;
148
148
  gap: var(--spacing-3);
149
149
  }
150
150
 
151
- .messenger-home-recent-avatar {
151
+ .web-chat-home-recent-avatar {
152
152
  width: 36px;
153
153
  height: 36px;
154
154
  border-radius: var(--radius-full);
@@ -162,28 +162,28 @@ export const messengerViewsStyles = `
162
162
  overflow: hidden;
163
163
  }
164
164
 
165
- .messenger-home-recent-avatar img {
165
+ .web-chat-home-recent-avatar img {
166
166
  width: 100%;
167
167
  height: 100%;
168
168
  object-fit: cover;
169
169
  }
170
170
 
171
- .messenger-home-recent-avatar-logo {
171
+ .web-chat-home-recent-avatar-logo {
172
172
  background: var(--msg-bg-surface);
173
173
  border: 1px solid var(--msg-border);
174
174
  padding: 4px;
175
175
  }
176
176
 
177
- .messenger-home-recent-avatar-logo img {
177
+ .web-chat-home-recent-avatar-logo img {
178
178
  object-fit: contain;
179
179
  }
180
180
 
181
- .messenger-home-recent-card-content {
181
+ .web-chat-home-recent-card-content {
182
182
  flex: 1;
183
183
  min-width: 0;
184
184
  }
185
185
 
186
- .messenger-home-recent-card-header {
186
+ .web-chat-home-recent-card-header {
187
187
  display: flex;
188
188
  align-items: center;
189
189
  justify-content: space-between;
@@ -191,26 +191,26 @@ export const messengerViewsStyles = `
191
191
  margin-bottom: 2px;
192
192
  }
193
193
 
194
- .messenger-home-recent-card-name {
194
+ .web-chat-home-recent-card-name {
195
195
  font-size: var(--font-size-sm);
196
196
  font-weight: var(--font-weight-semibold);
197
197
  color: var(--msg-text);
198
198
  }
199
199
 
200
- .messenger-home-recent-card-time {
200
+ .web-chat-home-recent-card-time {
201
201
  font-size: var(--font-size-xs);
202
202
  color: var(--msg-text-tertiary);
203
203
  flex-shrink: 0;
204
204
  }
205
205
 
206
- .messenger-home-recent-card-preview {
206
+ .web-chat-home-recent-card-preview {
207
207
  display: flex;
208
208
  align-items: center;
209
209
  justify-content: space-between;
210
210
  gap: var(--spacing-2);
211
211
  }
212
212
 
213
- .messenger-home-recent-card-message {
213
+ .web-chat-home-recent-card-message {
214
214
  font-size: var(--font-size-sm);
215
215
  color: var(--msg-text-secondary);
216
216
  white-space: nowrap;
@@ -218,7 +218,7 @@ export const messengerViewsStyles = `
218
218
  text-overflow: ellipsis;
219
219
  }
220
220
 
221
- .messenger-home-recent-unread-dot {
221
+ .web-chat-home-recent-unread-dot {
222
222
  width: 8px;
223
223
  height: 8px;
224
224
  border-radius: var(--radius-full);
@@ -226,7 +226,7 @@ export const messengerViewsStyles = `
226
226
  flex-shrink: 0;
227
227
  }
228
228
 
229
- .messenger-home-message-btn {
229
+ .web-chat-home-message-btn {
230
230
  width: 100%;
231
231
  display: flex;
232
232
  align-items: center;
@@ -245,27 +245,27 @@ export const messengerViewsStyles = `
245
245
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
246
246
  }
247
247
 
248
- .messenger-home-message-btn:hover {
248
+ .web-chat-home-message-btn:hover {
249
249
  background: var(--msg-bg-hover);
250
250
  }
251
251
 
252
- .messenger-home-message-btn:active {
252
+ .web-chat-home-message-btn:active {
253
253
  transform: translateY(1px);
254
254
  transition-duration: 100ms;
255
255
  }
256
256
 
257
- .messenger-home-continue-btn {
257
+ .web-chat-home-continue-btn {
258
258
  flex-direction: row;
259
259
  align-items: center;
260
260
  justify-content: space-between;
261
261
  gap: var(--spacing-3);
262
262
  }
263
263
 
264
- .messenger-home-continue-btn > svg {
264
+ .web-chat-home-continue-btn > svg {
265
265
  flex-shrink: 0;
266
266
  }
267
267
 
268
- .messenger-home-continue-info {
268
+ .web-chat-home-continue-info {
269
269
  display: flex;
270
270
  flex-direction: column;
271
271
  gap: 2px;
@@ -273,25 +273,25 @@ export const messengerViewsStyles = `
273
273
  flex: 1;
274
274
  }
275
275
 
276
- .messenger-home-continue-label {
276
+ .web-chat-home-continue-label {
277
277
  font-size: 0.875rem;
278
278
  font-weight: var(--font-weight-semibold);
279
279
  color: var(--msg-text);
280
280
  }
281
281
 
282
- .messenger-home-message-subtext {
282
+ .web-chat-home-message-subtext {
283
283
  font-size: var(--font-size-xs);
284
284
  font-weight: 400;
285
285
  color: var(--msg-text-secondary);
286
286
  }
287
287
 
288
- .messenger-home-continue-preview {
288
+ .web-chat-home-continue-preview {
289
289
  font-size: var(--font-size-sm);
290
290
  opacity: 0.6;
291
291
  font-weight: var(--font-weight-normal);
292
292
  }
293
293
 
294
- .messenger-home-featured {
294
+ .web-chat-home-featured {
295
295
  background: var(--msg-bg);
296
296
  border-radius: var(--radius-xl);
297
297
  overflow: hidden;
@@ -299,23 +299,23 @@ export const messengerViewsStyles = `
299
299
  box-shadow: var(--msg-shadow-card);
300
300
  }
301
301
 
302
- .messenger-home-featured-image {
302
+ .web-chat-home-featured-image {
303
303
  width: 100%;
304
304
  height: 160px;
305
305
  object-fit: cover;
306
306
  display: block;
307
307
  }
308
308
 
309
- .messenger-home-featured-divider {
309
+ .web-chat-home-featured-divider {
310
310
  height: 1px;
311
311
  background: var(--msg-border);
312
312
  }
313
313
 
314
- .messenger-home-featured-content {
314
+ .web-chat-home-featured-content {
315
315
  padding: var(--spacing-4) var(--spacing-5);
316
316
  }
317
317
 
318
- .messenger-home-featured-content h3 {
318
+ .web-chat-home-featured-content h3 {
319
319
  margin: 0 0 var(--spacing-2);
320
320
  font-size: var(--font-size-xl);
321
321
  font-weight: var(--font-weight-semibold);
@@ -323,25 +323,25 @@ export const messengerViewsStyles = `
323
323
  line-height: var(--line-height-normal);
324
324
  }
325
325
 
326
- .messenger-home-featured-content p {
326
+ .web-chat-home-featured-content p {
327
327
  margin: 0;
328
328
  font-size: var(--font-size-base);
329
329
  color: var(--msg-text-tertiary);
330
330
  line-height: var(--line-height-relaxed);
331
331
  }
332
332
 
333
- .messenger-home-featured-btn {
333
+ .web-chat-home-featured-btn {
334
334
  margin-top: var(--spacing-3);
335
335
  }
336
336
 
337
- .messenger-home-changelog-section {
337
+ .web-chat-home-changelog-section {
338
338
  margin-top: var(--spacing-5);
339
339
  display: flex;
340
340
  flex-direction: column;
341
341
  gap: var(--spacing-4);
342
342
  }
343
343
 
344
- .messenger-home-changelog-card {
344
+ .web-chat-home-changelog-card {
345
345
  background: var(--msg-bg-surface);
346
346
  border-radius: 8px;
347
347
  overflow: hidden;
@@ -351,29 +351,29 @@ export const messengerViewsStyles = `
351
351
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
352
352
  }
353
353
 
354
- .messenger-home-changelog-card:hover {
354
+ .web-chat-home-changelog-card:hover {
355
355
  background: var(--msg-bg-hover);
356
356
  }
357
357
 
358
- .messenger-home-changelog-card:active {
358
+ .web-chat-home-changelog-card:active {
359
359
  transform: translateY(1px);
360
360
  transition-duration: 100ms;
361
361
  }
362
362
 
363
- .messenger-home-changelog-cover {
363
+ .web-chat-home-changelog-cover {
364
364
  width: 100%;
365
365
  height: 140px;
366
366
  overflow: hidden;
367
367
  position: relative;
368
368
  }
369
369
 
370
- .messenger-home-changelog-cover img {
370
+ .web-chat-home-changelog-cover img {
371
371
  width: 100%;
372
372
  height: 100%;
373
373
  object-fit: cover;
374
374
  }
375
375
 
376
- .messenger-home-changelog-cover-text {
376
+ .web-chat-home-changelog-cover-text {
377
377
  position: absolute;
378
378
  bottom: var(--spacing-3);
379
379
  left: var(--spacing-3);
@@ -385,12 +385,12 @@ export const messengerViewsStyles = `
385
385
  line-height: var(--line-height-snug);
386
386
  }
387
387
 
388
- .messenger-home-changelog-card-content {
388
+ .web-chat-home-changelog-card-content {
389
389
  padding: var(--spacing-4);
390
390
  border-top: 1px solid var(--msg-border);
391
391
  }
392
392
 
393
- .messenger-home-changelog-card-title {
393
+ .web-chat-home-changelog-card-title {
394
394
  margin: 0 0 var(--spacing-2);
395
395
  font-size: var(--font-size-md);
396
396
  font-weight: var(--font-weight-semibold);
@@ -398,7 +398,7 @@ export const messengerViewsStyles = `
398
398
  line-height: var(--line-height-snug);
399
399
  }
400
400
 
401
- .messenger-home-changelog-card-desc {
401
+ .web-chat-home-changelog-card-desc {
402
402
  margin: 0;
403
403
  font-size: var(--font-size-sm);
404
404
  font-weight: var(--font-weight-normal);
@@ -410,8 +410,8 @@ export const messengerViewsStyles = `
410
410
  overflow: hidden;
411
411
  }
412
412
 
413
- .messenger-home-availability,
414
- .messenger-chat-availability {
413
+ .web-chat-home-availability,
414
+ .web-chat-chat-availability {
415
415
  display: flex;
416
416
  align-items: center;
417
417
  gap: var(--spacing-2);
@@ -420,7 +420,7 @@ export const messengerViewsStyles = `
420
420
  color: var(--msg-text-secondary);
421
421
  }
422
422
 
423
- .messenger-availability-dot {
423
+ .web-chat-availability-dot {
424
424
  width: 8px;
425
425
  height: 8px;
426
426
  border-radius: var(--radius-full);
@@ -429,16 +429,16 @@ export const messengerViewsStyles = `
429
429
  display: block;
430
430
  }
431
431
 
432
- .messenger-availability-online {
432
+ .web-chat-availability-online {
433
433
  background: var(--color-success);
434
434
  box-shadow: 0 0 0 2px var(--color-success-light);
435
435
  }
436
436
 
437
- .messenger-availability-away {
437
+ .web-chat-availability-away {
438
438
  background: var(--color-neutral-400);
439
439
  }
440
440
 
441
- .messenger-availability-text {
441
+ .web-chat-availability-text {
442
442
  opacity: 0.9;
443
443
  }
444
444
 
@@ -446,7 +446,7 @@ export const messengerViewsStyles = `
446
446
  CONVERSATIONS VIEW
447
447
  ======================================== */
448
448
 
449
- .messenger-conversations-header {
449
+ .web-chat-conversations-header {
450
450
  display: flex;
451
451
  align-items: center;
452
452
  justify-content: space-between;
@@ -457,7 +457,7 @@ export const messengerViewsStyles = `
457
457
  overflow: hidden;
458
458
  }
459
459
 
460
- .messenger-conversations-header h2 {
460
+ .web-chat-conversations-header h2 {
461
461
  margin: 0;
462
462
  font-size: var(--font-size-xl);
463
463
  font-weight: var(--font-weight-semibold);
@@ -466,22 +466,22 @@ export const messengerViewsStyles = `
466
466
  flex: 1;
467
467
  }
468
468
 
469
- .messenger-conversations-body {
469
+ .web-chat-conversations-body {
470
470
  flex: 1;
471
471
  overflow-y: auto;
472
472
  padding: 0;
473
473
  }
474
474
 
475
- .messenger-conversations-list {
475
+ .web-chat-conversations-list {
476
476
  display: flex;
477
477
  flex-direction: column;
478
478
  }
479
479
 
480
- .messenger-conversation-item + .messenger-conversation-item {
480
+ .web-chat-conversation-item + .web-chat-conversation-item {
481
481
  border-top: 1px solid var(--msg-border);
482
482
  }
483
483
 
484
- .messenger-conversation-item {
484
+ .web-chat-conversation-item {
485
485
  display: flex;
486
486
  align-items: center;
487
487
  gap: var(--spacing-3);
@@ -490,23 +490,23 @@ export const messengerViewsStyles = `
490
490
  transition: background var(--transition-base);
491
491
  }
492
492
 
493
- .messenger-conversation-item:hover {
493
+ .web-chat-conversation-item:hover {
494
494
  background: var(--msg-bg-hover);
495
495
  }
496
496
 
497
- .messenger-conversation-item:active {
497
+ .web-chat-conversation-item:active {
498
498
  transform: translateY(1px);
499
499
  transition-duration: 100ms;
500
500
  }
501
501
 
502
- .messenger-conversation-avatars {
502
+ .web-chat-conversation-avatars {
503
503
  flex-shrink: 0;
504
504
  display: flex;
505
505
  align-items: center;
506
506
  align-self: stretch;
507
507
  }
508
508
 
509
- .messenger-conversation-content {
509
+ .web-chat-conversation-content {
510
510
  flex: 1;
511
511
  min-width: 0;
512
512
  display: flex;
@@ -514,7 +514,7 @@ export const messengerViewsStyles = `
514
514
  justify-content: center;
515
515
  }
516
516
 
517
- .messenger-conversation-header {
517
+ .web-chat-conversation-header {
518
518
  display: flex;
519
519
  align-items: center;
520
520
  justify-content: space-between;
@@ -522,7 +522,7 @@ export const messengerViewsStyles = `
522
522
  gap: var(--spacing-3);
523
523
  }
524
524
 
525
- .messenger-conversation-title {
525
+ .web-chat-conversation-title {
526
526
  font-size: var(--font-size-sm);
527
527
  font-weight: var(--font-weight-semibold);
528
528
  color: var(--msg-text);
@@ -532,19 +532,19 @@ export const messengerViewsStyles = `
532
532
  text-overflow: ellipsis;
533
533
  }
534
534
 
535
- .messenger-conversation-time {
535
+ .web-chat-conversation-time {
536
536
  font-size: var(--font-size-sm);
537
537
  color: var(--msg-text-tertiary);
538
538
  flex-shrink: 0;
539
539
  }
540
540
 
541
- .messenger-conversation-preview {
541
+ .web-chat-conversation-preview {
542
542
  display: flex;
543
543
  align-items: center;
544
544
  gap: var(--spacing-2);
545
545
  }
546
546
 
547
- .messenger-conversation-message {
547
+ .web-chat-conversation-message {
548
548
  font-size: var(--font-size-sm);
549
549
  font-weight: 400;
550
550
  color: var(--msg-text-secondary);
@@ -554,12 +554,12 @@ export const messengerViewsStyles = `
554
554
  line-height: 1.4;
555
555
  }
556
556
 
557
- .messenger-conversation-item.unread .messenger-conversation-message {
557
+ .web-chat-conversation-item.unread .web-chat-conversation-message {
558
558
  color: var(--msg-text);
559
559
  font-weight: 500;
560
560
  }
561
561
 
562
- .messenger-unread-dot {
562
+ .web-chat-unread-dot {
563
563
  width: 8px;
564
564
  height: 8px;
565
565
  background: var(--color-primary);
@@ -567,12 +567,12 @@ export const messengerViewsStyles = `
567
567
  flex-shrink: 0;
568
568
  }
569
569
 
570
- .messenger-conversation-item.closed .messenger-conversation-title,
571
- .messenger-conversation-item.closed .messenger-conversation-message {
570
+ .web-chat-conversation-item.closed .web-chat-conversation-title,
571
+ .web-chat-conversation-item.closed .web-chat-conversation-message {
572
572
  color: var(--msg-text-tertiary);
573
573
  }
574
574
 
575
- .messenger-conversation-resolved-badge {
575
+ .web-chat-conversation-resolved-badge {
576
576
  font-size: 0.6875rem;
577
577
  font-weight: 500;
578
578
  color: var(--color-success-dark);
@@ -582,11 +582,11 @@ export const messengerViewsStyles = `
582
582
  flex-shrink: 0;
583
583
  }
584
584
 
585
- .messenger-conversations-footer {
585
+ .web-chat-conversations-footer {
586
586
  border-top: 1px solid var(--msg-border);
587
587
  }
588
588
 
589
- .messenger-new-message-btn {
589
+ .web-chat-new-message-btn {
590
590
  width: 100%;
591
591
  display: flex;
592
592
  align-items: center;
@@ -603,16 +603,16 @@ export const messengerViewsStyles = `
603
603
  text-align: left;
604
604
  }
605
605
 
606
- .messenger-new-message-btn:hover {
606
+ .web-chat-new-message-btn:hover {
607
607
  background: var(--msg-bg-hover);
608
608
  }
609
609
 
610
- .messenger-new-message-btn:active {
610
+ .web-chat-new-message-btn:active {
611
611
  transform: translateX(4px) translateY(1px);
612
612
  transition-duration: 100ms;
613
613
  }
614
614
 
615
- .messenger-new-message-btn span {
615
+ .web-chat-new-message-btn span {
616
616
  flex: 1;
617
617
  text-align: left;
618
618
  }
@@ -621,7 +621,7 @@ export const messengerViewsStyles = `
621
621
  HELP VIEW
622
622
  ======================================== */
623
623
 
624
- .messenger-help-header {
624
+ .web-chat-help-header {
625
625
  display: flex;
626
626
  flex-direction: column;
627
627
  gap: var(--spacing-2);
@@ -633,7 +633,7 @@ export const messengerViewsStyles = `
633
633
  overflow: hidden;
634
634
  }
635
635
 
636
- .messenger-help-header::before {
636
+ .web-chat-help-header::before {
637
637
  content: '';
638
638
  position: absolute;
639
639
  top: -20px;
@@ -645,7 +645,7 @@ export const messengerViewsStyles = `
645
645
  pointer-events: none;
646
646
  }
647
647
 
648
- .messenger-help-header::after {
648
+ .web-chat-help-header::after {
649
649
  content: '';
650
650
  position: absolute;
651
651
  top: -10px;
@@ -657,33 +657,33 @@ export const messengerViewsStyles = `
657
657
  pointer-events: none;
658
658
  }
659
659
 
660
- .messenger-help-header-top {
660
+ .web-chat-help-header-top {
661
661
  display: flex;
662
662
  align-items: center;
663
663
  justify-content: center;
664
664
  position: relative;
665
665
  }
666
666
 
667
- .messenger-help-header-top h2 {
667
+ .web-chat-help-header-top h2 {
668
668
  margin: 0;
669
669
  font-size: var(--font-size-xl);
670
670
  font-weight: var(--font-weight-semibold);
671
671
  color: var(--msg-text);
672
672
  }
673
673
 
674
- .messenger-help-close-btn {
674
+ .web-chat-help-close-btn {
675
675
  position: absolute;
676
676
  right: 0;
677
677
  top: 50%;
678
678
  transform: translateY(-50%);
679
679
  }
680
680
 
681
- .messenger-help-search-wrap {
681
+ .web-chat-help-search-wrap {
682
682
  position: relative;
683
683
  width: 100%;
684
684
  }
685
685
 
686
- .messenger-help-search-icon {
686
+ .web-chat-help-search-icon {
687
687
  position: absolute;
688
688
  left: var(--spacing-3);
689
689
  top: 50%;
@@ -694,7 +694,7 @@ export const messengerViewsStyles = `
694
694
  pointer-events: none;
695
695
  }
696
696
 
697
- .messenger-help-search-input {
697
+ .web-chat-help-search-input {
698
698
  width: 100%;
699
699
  background: var(--msg-bg-input);
700
700
  border: 1px solid var(--msg-border);
@@ -709,30 +709,30 @@ export const messengerViewsStyles = `
709
709
  box-sizing: border-box;
710
710
  }
711
711
 
712
- .messenger-help-search-input:focus {
712
+ .web-chat-help-search-input:focus {
713
713
  border-color: var(--color-primary);
714
714
  background: var(--msg-bg);
715
715
  }
716
716
 
717
- .messenger-help-search-input::placeholder {
717
+ .web-chat-help-search-input::placeholder {
718
718
  color: var(--msg-text-tertiary);
719
719
  }
720
720
 
721
- .messenger-help-body {
721
+ .web-chat-help-body {
722
722
  flex: 1;
723
723
  overflow-y: auto;
724
724
  padding: 0;
725
725
  }
726
726
 
727
- .messenger-help-collections-header {
727
+ .web-chat-help-collections-header {
728
728
  display: none;
729
729
  }
730
730
 
731
- .messenger-help-collections {
731
+ .web-chat-help-collections {
732
732
  padding: 0;
733
733
  }
734
734
 
735
- .messenger-help-collection {
735
+ .web-chat-help-collection {
736
736
  display: flex;
737
737
  align-items: center;
738
738
  gap: var(--spacing-3);
@@ -742,16 +742,16 @@ export const messengerViewsStyles = `
742
742
  border-bottom: 1px solid var(--msg-border);
743
743
  }
744
744
 
745
- .messenger-help-collection:hover {
745
+ .web-chat-help-collection:hover {
746
746
  background: var(--msg-bg-hover);
747
747
  }
748
748
 
749
- .messenger-help-collection:active {
749
+ .web-chat-help-collection:active {
750
750
  transform: translateY(1px);
751
751
  transition-duration: 100ms;
752
752
  }
753
753
 
754
- .messenger-help-collection-icon {
754
+ .web-chat-help-collection-icon {
755
755
  flex-shrink: 0;
756
756
  width: 2.25rem;
757
757
  height: 2.25rem;
@@ -761,14 +761,14 @@ export const messengerViewsStyles = `
761
761
  color: var(--msg-text-secondary);
762
762
  }
763
763
 
764
- .messenger-help-collection-icon svg {
764
+ .web-chat-help-collection-icon svg {
765
765
  width: 1.5rem;
766
766
  height: 1.5rem;
767
767
  display: block;
768
768
  flex-shrink: 0;
769
769
  }
770
770
 
771
- .messenger-help-collection-icon iconify-icon {
771
+ .web-chat-help-collection-icon iconify-icon {
772
772
  font-size: 1.5rem;
773
773
  width: 1em;
774
774
  height: 1em;
@@ -776,12 +776,12 @@ export const messengerViewsStyles = `
776
776
  flex-shrink: 0;
777
777
  }
778
778
 
779
- .messenger-help-collection-content {
779
+ .web-chat-help-collection-content {
780
780
  flex: 1;
781
781
  min-width: 0;
782
782
  }
783
783
 
784
- .messenger-help-collection-title {
784
+ .web-chat-help-collection-title {
785
785
  font-size: var(--font-size-base);
786
786
  font-weight: var(--font-weight-semibold);
787
787
  color: var(--msg-text);
@@ -791,7 +791,7 @@ export const messengerViewsStyles = `
791
791
  text-overflow: ellipsis;
792
792
  }
793
793
 
794
- .messenger-help-collection-desc {
794
+ .web-chat-help-collection-desc {
795
795
  margin: 2px 0 var(--spacing-1);
796
796
  font-size: var(--font-size-sm);
797
797
  color: var(--msg-text-secondary);
@@ -804,35 +804,35 @@ export const messengerViewsStyles = `
804
804
  text-overflow: ellipsis;
805
805
  }
806
806
 
807
- .messenger-help-collection-meta {
807
+ .web-chat-help-collection-meta {
808
808
  display: flex;
809
809
  align-items: center;
810
810
  gap: var(--spacing-2);
811
811
  margin-top: 2px;
812
812
  }
813
813
 
814
- .messenger-help-collection-avatar {
814
+ .web-chat-help-collection-avatar {
815
815
  display: none;
816
816
  }
817
817
 
818
- .messenger-help-collection-avatar--initials {
818
+ .web-chat-help-collection-avatar--initials {
819
819
  display: none;
820
820
  line-height: 1;
821
821
  }
822
822
 
823
- .messenger-help-collection-count {
823
+ .web-chat-help-collection-count {
824
824
  font-size: var(--font-size-xs);
825
825
  font-weight: var(--font-weight-medium);
826
826
  color: var(--msg-text-tertiary);
827
827
  }
828
828
 
829
- .messenger-help-footer {
829
+ .web-chat-help-footer {
830
830
  padding: var(--spacing-4) var(--spacing-5);
831
831
  border-top: 1px solid var(--msg-border);
832
832
  text-align: center;
833
833
  }
834
834
 
835
- .messenger-help-footer-link {
835
+ .web-chat-help-footer-link {
836
836
  display: inline-flex;
837
837
  align-items: center;
838
838
  gap: var(--spacing-2);
@@ -844,7 +844,7 @@ export const messengerViewsStyles = `
844
844
  transition: color var(--transition-base);
845
845
  }
846
846
 
847
- .messenger-help-footer-link:hover {
847
+ .web-chat-help-footer-link:hover {
848
848
  color: var(--color-primary);
849
849
  }
850
850
 
@@ -852,7 +852,7 @@ export const messengerViewsStyles = `
852
852
  CHANGELOG VIEW
853
853
  ======================================== */
854
854
 
855
- .messenger-changelog-header {
855
+ .web-chat-changelog-header {
856
856
  padding: var(--spacing-2) var(--spacing-5);
857
857
  border-bottom: 1px solid var(--msg-border);
858
858
  flex-shrink: 0;
@@ -861,7 +861,7 @@ export const messengerViewsStyles = `
861
861
  overflow: hidden;
862
862
  }
863
863
 
864
- .messenger-changelog-header::before {
864
+ .web-chat-changelog-header::before {
865
865
  content: '';
866
866
  position: absolute;
867
867
  top: -20px;
@@ -873,7 +873,7 @@ export const messengerViewsStyles = `
873
873
  pointer-events: none;
874
874
  }
875
875
 
876
- .messenger-changelog-header::after {
876
+ .web-chat-changelog-header::after {
877
877
  content: '';
878
878
  position: absolute;
879
879
  top: -10px;
@@ -885,40 +885,40 @@ export const messengerViewsStyles = `
885
885
  pointer-events: none;
886
886
  }
887
887
 
888
- .messenger-changelog-header-top {
888
+ .web-chat-changelog-header-top {
889
889
  display: flex;
890
890
  align-items: center;
891
891
  justify-content: center;
892
892
  position: relative;
893
893
  }
894
894
 
895
- .messenger-changelog-header-top h2 {
895
+ .web-chat-changelog-header-top h2 {
896
896
  margin: 0;
897
897
  font-size: var(--font-size-xl);
898
898
  font-weight: var(--font-weight-semibold);
899
899
  color: var(--msg-text);
900
900
  }
901
901
 
902
- .messenger-changelog-close-btn {
902
+ .web-chat-changelog-close-btn {
903
903
  position: absolute;
904
904
  right: 0;
905
905
  top: 50%;
906
906
  transform: translateY(-50%);
907
907
  }
908
908
 
909
- .messenger-changelog-body {
909
+ .web-chat-changelog-body {
910
910
  flex: 1;
911
911
  overflow-y: auto;
912
912
  }
913
913
 
914
- .messenger-changelog-list {
914
+ .web-chat-changelog-list {
915
915
  display: flex;
916
916
  flex-direction: column;
917
917
  gap: var(--spacing-3);
918
918
  padding: var(--spacing-4) var(--spacing-5);
919
919
  }
920
920
 
921
- .messenger-changelog-card {
921
+ .web-chat-changelog-card {
922
922
  display: flex;
923
923
  flex-direction: column;
924
924
  border: 1px solid var(--msg-border);
@@ -928,43 +928,43 @@ export const messengerViewsStyles = `
928
928
  transition: box-shadow var(--transition-base), transform var(--transition-base);
929
929
  }
930
930
 
931
- .messenger-changelog-card:hover {
931
+ .web-chat-changelog-card:hover {
932
932
  box-shadow: var(--shadow-md);
933
933
  transform: translateY(-1px);
934
934
  }
935
935
 
936
- .messenger-changelog-card:active {
936
+ .web-chat-changelog-card:active {
937
937
  transform: translateY(0);
938
938
  transition-duration: 100ms;
939
939
  }
940
940
 
941
- .messenger-changelog-content {
941
+ .web-chat-changelog-content {
942
942
  display: flex;
943
943
  flex-direction: column;
944
944
  gap: var(--spacing-1);
945
945
  padding: var(--spacing-3) var(--spacing-4);
946
946
  }
947
947
 
948
- .messenger-changelog-meta {
948
+ .web-chat-changelog-meta {
949
949
  display: flex;
950
950
  align-items: center;
951
951
  gap: var(--spacing-2);
952
952
  flex-wrap: wrap;
953
953
  }
954
954
 
955
- .messenger-changelog-date {
955
+ .web-chat-changelog-date {
956
956
  font-size: var(--font-size-xs);
957
957
  font-weight: var(--font-weight-medium);
958
958
  color: var(--msg-text-tertiary);
959
959
  }
960
960
 
961
- .messenger-changelog-tags {
961
+ .web-chat-changelog-tags {
962
962
  display: flex;
963
963
  flex-wrap: wrap;
964
964
  gap: var(--spacing-1);
965
965
  }
966
966
 
967
- .messenger-changelog-tag {
967
+ .web-chat-changelog-tag {
968
968
  display: inline-flex;
969
969
  align-items: center;
970
970
  padding: 1px 8px;
@@ -974,7 +974,7 @@ export const messengerViewsStyles = `
974
974
  line-height: 1.5;
975
975
  }
976
976
 
977
- .messenger-changelog-title {
977
+ .web-chat-changelog-title {
978
978
  margin: 0;
979
979
  font-size: var(--font-size-base);
980
980
  font-weight: var(--font-weight-semibold);
@@ -982,7 +982,7 @@ export const messengerViewsStyles = `
982
982
  line-height: var(--line-height-snug);
983
983
  }
984
984
 
985
- .messenger-changelog-description {
985
+ .web-chat-changelog-description {
986
986
  margin: 0;
987
987
  font-size: var(--font-size-sm);
988
988
  color: var(--msg-text-secondary);
@@ -993,13 +993,13 @@ export const messengerViewsStyles = `
993
993
  overflow: hidden;
994
994
  }
995
995
 
996
- .messenger-changelog-thumb {
996
+ .web-chat-changelog-thumb {
997
997
  width: 100%;
998
998
  overflow: hidden;
999
999
  border-bottom: 1px solid var(--msg-border);
1000
1000
  }
1001
1001
 
1002
- .messenger-changelog-thumb img {
1002
+ .web-chat-changelog-thumb img {
1003
1003
  width: 100%;
1004
1004
  height: 180px;
1005
1005
  display: block;