@product7/feedback-sdk 1.3.3 → 1.3.4

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 (37) hide show
  1. package/dist/feedback-sdk.js +2321 -3173
  2. package/dist/feedback-sdk.js.map +1 -1
  3. package/dist/feedback-sdk.min.js +1 -1
  4. package/dist/feedback-sdk.min.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/api/services/MessengerService.js +20 -0
  7. package/src/index.js +2 -3
  8. package/src/styles/base.js +27 -52
  9. package/src/styles/changelog.js +152 -269
  10. package/src/styles/components.js +489 -0
  11. package/src/styles/design-tokens.js +104 -0
  12. package/src/styles/feedback.js +59 -369
  13. package/src/styles/messenger-core.js +390 -0
  14. package/src/styles/messenger-features.js +347 -0
  15. package/src/styles/messenger-help.js +298 -0
  16. package/src/styles/messenger-themes.js +500 -0
  17. package/src/styles/messenger-views.js +618 -0
  18. package/src/styles/messenger.js +558 -0
  19. package/src/styles/styles.js +24 -2
  20. package/src/styles/surveys.js +354 -0
  21. package/src/widgets/BaseWidget.js +25 -58
  22. package/src/widgets/ButtonWidget.js +3 -18
  23. package/src/widgets/ChangelogWidget.js +7 -48
  24. package/src/widgets/InlineWidget.js +16 -13
  25. package/src/widgets/MessengerWidget.js +0 -4
  26. package/src/widgets/SurveyWidget.js +42 -146
  27. package/src/widgets/TabWidget.js +2 -22
  28. package/src/widgets/messenger/components/MessengerLauncher.js +10 -5
  29. package/src/widgets/messenger/components/MessengerPanel.js +5 -27
  30. package/src/widgets/messenger/components/NavigationTabs.js +5 -14
  31. package/src/widgets/messenger/views/ChangelogView.js +13 -14
  32. package/src/widgets/messenger/views/ChatView.js +43 -36
  33. package/src/widgets/messenger/views/ConversationsView.js +16 -21
  34. package/src/widgets/messenger/views/HelpView.js +10 -10
  35. package/src/widgets/messenger/views/HomeView.js +11 -16
  36. package/src/widgets/messenger/views/PreChatFormView.js +18 -30
  37. package/src/styles/messengerStyles.js +0 -2328
@@ -0,0 +1,500 @@
1
+ export const messengerThemesStyles = `
2
+
3
+ /* Panel */
4
+ .theme-light .messenger-panel-content {
5
+ background: #ffffff;
6
+ }
7
+
8
+ /* Close/Back buttons */
9
+ .theme-light .messenger-close-btn,
10
+ .theme-light .messenger-back-btn {
11
+ color: #86868b;
12
+ }
13
+
14
+ .theme-light .messenger-close-btn:hover,
15
+ .theme-light .messenger-back-btn:hover {
16
+ background: #f5f5f7;
17
+ color: #1d1d1f;
18
+ }
19
+
20
+ /* Avatar */
21
+ .theme-light .messenger-avatar {
22
+ border-color: #ffffff;
23
+ }
24
+
25
+ /* Home View */
26
+ .theme-light .messenger-home-view {
27
+ background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 40%);
28
+ }
29
+
30
+ .theme-light .messenger-home-header {
31
+ background: linear-gradient(180deg, rgba(88, 86, 214, 0.1) 0%, transparent 100%);
32
+ }
33
+
34
+ .theme-light .messenger-home-greeting {
35
+ color: #86868b;
36
+ }
37
+
38
+ .theme-light .messenger-home-question {
39
+ color: #1d1d1f;
40
+ }
41
+
42
+ .theme-light .messenger-home-message-btn {
43
+ background: #f5f5f7;
44
+ color: #1d1d1f;
45
+ border: 1px solid #e0e0e0;
46
+ }
47
+
48
+ .theme-light .messenger-home-message-btn:hover {
49
+ background: #e8e8ed;
50
+ }
51
+
52
+ .theme-light .messenger-home-message-btn svg,
53
+ .theme-light .messenger-home-message-btn i {
54
+ color: #86868b;
55
+ }
56
+
57
+ .theme-light .messenger-home-featured {
58
+ background: #f5f5f7;
59
+ }
60
+
61
+ .theme-light .messenger-home-featured-content h3 {
62
+ color: #1d1d1f;
63
+ }
64
+
65
+ .theme-light .messenger-home-featured-content p {
66
+ color: #86868b;
67
+ }
68
+
69
+ .theme-light .messenger-home-changelog-card {
70
+ background: #f5f5f7;
71
+ border: 1px solid #e0e0e0;
72
+ }
73
+
74
+ .theme-light .messenger-home-changelog-card-content {
75
+ border-top-color: #e0e0e0;
76
+ }
77
+
78
+ .theme-light .messenger-home-changelog-card:hover {
79
+ background: #e8e8ed;
80
+ }
81
+
82
+ .theme-light .messenger-home-changelog-card-title {
83
+ color: #1d1d1f;
84
+ }
85
+
86
+ .theme-light .messenger-home-changelog-card-desc {
87
+ color: #6e6e73;
88
+ }
89
+
90
+ /* Conversations View */
91
+ .theme-light .messenger-conversations-view {
92
+ background: #ffffff;
93
+ }
94
+
95
+ .theme-light .messenger-conversations-header,
96
+ .theme-light .messenger-help-header,
97
+ .theme-light .messenger-changelog-header,
98
+ .theme-light .messenger-chat-header {
99
+ background: #ffffff;
100
+ border-bottom-color: #e5e5e7;
101
+ }
102
+
103
+ .theme-light .messenger-conversations-header h2,
104
+ .theme-light .messenger-help-header h2,
105
+ .theme-light .messenger-changelog-header h2 {
106
+ color: #1d1d1f;
107
+ }
108
+
109
+ .theme-light .messenger-conversations-body {
110
+ background: #ffffff;
111
+ }
112
+
113
+ .theme-light .messenger-conversations-footer {
114
+ background: #ffffff;
115
+ border-top-color: #e5e5e7;
116
+ }
117
+
118
+ .theme-light .messenger-conversations-empty-icon,
119
+ .theme-light .messenger-chat-empty-avatars,
120
+ .theme-light .messenger-help-empty-icon,
121
+ .theme-light .messenger-changelog-empty-icon {
122
+ color: #c7c7cc;
123
+ }
124
+
125
+ .theme-light .messenger-conversations-empty h3,
126
+ .theme-light .messenger-chat-empty h3,
127
+ .theme-light .messenger-help-empty h3,
128
+ .theme-light .messenger-changelog-empty h3 {
129
+ color: #1d1d1f;
130
+ }
131
+
132
+ .theme-light .messenger-conversations-empty p,
133
+ .theme-light .messenger-chat-empty p,
134
+ .theme-light .messenger-help-empty p,
135
+ .theme-light .messenger-changelog-empty p {
136
+ color: #86868b;
137
+ }
138
+
139
+ .theme-light .messenger-conversation-item:hover {
140
+ background: rgba(0, 0, 0, 0.03);
141
+ }
142
+
143
+ .theme-light .messenger-conversation-title {
144
+ color: #1d1d1f !important;
145
+ }
146
+
147
+ .theme-light .messenger-conversation-item.unread .messenger-conversation-title {
148
+ color: #1d1d1f !important;
149
+ font-weight: 400;
150
+ }
151
+
152
+ .theme-light .messenger-conversation-time {
153
+ color: #86868b !important;
154
+ }
155
+
156
+ .theme-light .messenger-conversation-message {
157
+ color: #6e6e73 !important;
158
+ }
159
+
160
+ .theme-light .messenger-conversation-item.unread .messenger-conversation-message {
161
+ color: #3a3a3c !important;
162
+ }
163
+
164
+ .theme-light .messenger-new-message-btn {
165
+ background: #f5f5f7;
166
+ color: #1d1d1f;
167
+ }
168
+
169
+ .theme-light .messenger-new-message-btn:hover {
170
+ background: #e8e8ed;
171
+ }
172
+
173
+ .theme-light .messenger-new-message-btn svg,
174
+ .theme-light .messenger-new-message-btn i {
175
+ color: #86868b;
176
+ }
177
+
178
+ /* Chat View */
179
+ .theme-light .messenger-chat-view {
180
+ background: #ffffff;
181
+ }
182
+
183
+ .theme-light .messenger-chat-header {
184
+ background: #ffffff;
185
+ }
186
+
187
+ .theme-light .messenger-chat-title,
188
+ .theme-light .messenger-help-article-title,
189
+ .theme-light .messenger-changelog-title {
190
+ color: #1d1d1f;
191
+ }
192
+
193
+ .theme-light .messenger-help-article-desc,
194
+ .theme-light .messenger-changelog-description {
195
+ color: #86868b;
196
+ }
197
+
198
+ .theme-light .messenger-chat-messages {
199
+ background: #ffffff;
200
+ }
201
+
202
+ .theme-light .messenger-message-sender {
203
+ color: #86868b;
204
+ }
205
+
206
+ .theme-light .messenger-message-received .messenger-message-bubble {
207
+ background: #f5f5f7;
208
+ color: #1d1d1f;
209
+ }
210
+
211
+ .theme-light .messenger-message-own .messenger-message-bubble {
212
+ background: rgb(29, 78, 216);
213
+ color: #ffffff;
214
+ }
215
+
216
+ .theme-light .messenger-message-time {
217
+ color: #86868b;
218
+ }
219
+
220
+ .theme-light .messenger-closed-banner {
221
+ background: rgba(52, 199, 89, 0.1);
222
+ color: #22883a;
223
+ }
224
+
225
+ .theme-light .messenger-chat-compose {
226
+ background: #ffffff;
227
+ border-top-color: #e5e5e7;
228
+ }
229
+
230
+ .theme-light .messenger-compose-input-wrapper {
231
+ background: #f5f5f7;
232
+ }
233
+
234
+ .theme-light .messenger-compose-input {
235
+ color: #1d1d1f;
236
+ }
237
+
238
+ .theme-light .messenger-compose-input::placeholder {
239
+ color: #86868b;
240
+ }
241
+
242
+ .theme-light .messenger-compose-send:disabled {
243
+ background: #e5e5e7;
244
+ color: #c7c7cc;
245
+ }
246
+
247
+ .theme-light .messenger-compose-attach {
248
+ color: #9ca3af;
249
+ }
250
+
251
+ .theme-light .messenger-compose-attach:hover:not(:disabled) {
252
+ color: #374151;
253
+ background: #f3f4f6;
254
+ }
255
+
256
+ /* Help View */
257
+ .theme-light .messenger-help-view {
258
+ background: #ffffff;
259
+ }
260
+
261
+ .theme-light .messenger-help-body {
262
+ background: #ffffff;
263
+ }
264
+
265
+ .theme-light .messenger-help-search {
266
+ background: #ffffff;
267
+ }
268
+
269
+ .theme-light .messenger-help-search-wrapper {
270
+ background: #f5f5f7;
271
+ }
272
+
273
+ .theme-light .messenger-help-search-icon {
274
+ color: #86868b;
275
+ }
276
+
277
+ .theme-light .messenger-help-search-input {
278
+ color: #1d1d1f;
279
+ }
280
+
281
+ .theme-light .messenger-help-search-input::placeholder {
282
+ color: #86868b;
283
+ }
284
+
285
+ .theme-light .messenger-help-collections-header {
286
+ color: #1d1d1f;
287
+ border-top-color: #e5e5e7;
288
+ }
289
+
290
+ .theme-light .messenger-help-collection {
291
+ border-top-color: #e5e5e7;
292
+ }
293
+
294
+ .theme-light .messenger-help-collection:hover {
295
+ background: rgba(0, 0, 0, 0.03);
296
+ }
297
+
298
+ .theme-light .messenger-help-collection-title {
299
+ color: #1d1d1f;
300
+ }
301
+
302
+ .theme-light .messenger-help-collection-desc {
303
+ color: #6e6e73;
304
+ }
305
+
306
+ .theme-light .messenger-help-collection-count {
307
+ color: #86868b;
308
+ }
309
+
310
+ .theme-light .messenger-help-collection-arrow {
311
+ color: #c7c7cc;
312
+ }
313
+
314
+ /* Changelog View */
315
+ .theme-light .messenger-changelog-subheader {
316
+ border-bottom-color: #e5e5e7;
317
+ }
318
+
319
+ .theme-light .messenger-changelog-latest {
320
+ color: #86868b;
321
+ }
322
+
323
+ .theme-light .messenger-changelog-team {
324
+ color: #86868b;
325
+ }
326
+
327
+ .theme-light .messenger-changelog-card {
328
+ background: #f5f5f7;
329
+ }
330
+
331
+ .theme-light .messenger-changelog-card:hover {
332
+ background: #e8e8ed;
333
+ }
334
+
335
+ .theme-light .messenger-changelog-tag {
336
+ background: rgba(0, 122, 255, 0.15);
337
+ color: #007aff;
338
+ }
339
+
340
+ .theme-light .messenger-changelog-date {
341
+ color: #86868b;
342
+ }
343
+
344
+ .theme-light .messenger-changelog-arrow {
345
+ color: #c7c7cc;
346
+ }
347
+
348
+ /* Navigation */
349
+ .theme-light .messenger-panel-nav {
350
+ background: #ffffff;
351
+ border-top-color: #e5e5e7;
352
+ }
353
+
354
+ .theme-light .messenger-nav-icon {
355
+ color: #86868b;
356
+ }
357
+
358
+ .theme-light .messenger-nav-label {
359
+ color: #86868b;
360
+ }
361
+
362
+ .theme-light .messenger-nav-tab:hover {
363
+ background: rgba(0, 0, 0, 0.05);
364
+ }
365
+
366
+ .theme-light .messenger-nav-tab.active .messenger-nav-icon,
367
+ .theme-light .messenger-nav-tab.active .messenger-nav-label {
368
+ color: #007aff;
369
+ }
370
+
371
+ /* Availability */
372
+ .theme-light .messenger-home-availability,
373
+ .theme-light .messenger-chat-availability {
374
+ color: #6b7280;
375
+ }
376
+
377
+ /* Typing Indicator */
378
+ .theme-light .messenger-typing-dots {
379
+ background: #e5e7eb;
380
+ }
381
+
382
+ /* Attachments */
383
+ .theme-light .messenger-compose-attachments-preview {
384
+ background: #ffffff;
385
+ border-top-color: #e5e7eb;
386
+ }
387
+
388
+ .theme-light .messenger-attachment-preview {
389
+ border-color: #e5e7eb;
390
+ }
391
+
392
+ .theme-light .messenger-attachment-file-icon {
393
+ background: #f3f4f6;
394
+ color: #6b7280;
395
+ }
396
+
397
+ .theme-light .messenger-message-file {
398
+ background: #f3f4f6;
399
+ color: #2563eb;
400
+ }
401
+
402
+ .theme-light .messenger-message-file:hover {
403
+ background: #e5e7eb;
404
+ }
405
+
406
+ /* Pre-Chat Form */
407
+ .theme-light .messenger-prechat-overlay {
408
+ background: rgba(255, 255, 255, 0.6);
409
+ }
410
+
411
+ .theme-light .messenger-prechat-card {
412
+ background: #ffffff;
413
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
414
+ }
415
+
416
+ .theme-light .messenger-prechat-card h4 {
417
+ color: #1d1d1f;
418
+ }
419
+
420
+ .theme-light .messenger-prechat-input {
421
+ background: #f5f5f7;
422
+ border-color: #e5e5e7;
423
+ color: #1d1d1f;
424
+ }
425
+
426
+ .theme-light .messenger-prechat-input:focus {
427
+ border-color: #007aff;
428
+ background: #ffffff;
429
+ }
430
+
431
+ .theme-light .messenger-prechat-input::placeholder {
432
+ color: #86868b;
433
+ }
434
+
435
+ .theme-light .messenger-prechat-skip {
436
+ border-color: #e5e5e7;
437
+ color: #6e6e73;
438
+ }
439
+
440
+ .theme-light .messenger-prechat-skip:hover {
441
+ background: #f5f5f7;
442
+ }
443
+
444
+ .theme-light .messenger-prechat-submit:disabled {
445
+ background: #e5e5e7;
446
+ color: #c7c7cc;
447
+ }
448
+
449
+ /* Email Collection */
450
+ .theme-dark .messenger-email-overlay {
451
+ background: rgba(0, 0, 0, 0.3);
452
+ }
453
+
454
+ .theme-dark .messenger-email-card {
455
+ background: #1c1c1e;
456
+ }
457
+
458
+ .theme-dark .messenger-email-card h4 {
459
+ color: white;
460
+ }
461
+
462
+ .theme-dark .messenger-email-card p {
463
+ color: rgba(255, 255, 255, 0.6);
464
+ }
465
+
466
+ .theme-dark .messenger-email-name,
467
+ .theme-dark .messenger-email-input {
468
+ background: #2c2c2e;
469
+ border-color: transparent;
470
+ color: white;
471
+ }
472
+
473
+ .theme-dark .messenger-email-name:focus,
474
+ .theme-dark .messenger-email-input:focus {
475
+ border-color: #007aff;
476
+ box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.25);
477
+ background: #1c1c1e;
478
+ }
479
+
480
+ .theme-dark .messenger-email-name::placeholder,
481
+ .theme-dark .messenger-email-input::placeholder {
482
+ color: rgba(255, 255, 255, 0.4);
483
+ }
484
+
485
+ .theme-dark .messenger-email-submit:disabled {
486
+ background: #3c3c3e;
487
+ color: rgba(255, 255, 255, 0.4);
488
+ }
489
+
490
+ .theme-dark .messenger-email-skip {
491
+ background: transparent;
492
+ border-color: rgba(255, 255, 255, 0.15);
493
+ color: rgba(255, 255, 255, 0.8);
494
+ }
495
+
496
+ .theme-dark .messenger-email-skip:hover {
497
+ background: rgba(255, 255, 255, 0.05);
498
+ border-color: rgba(255, 255, 255, 0.25);
499
+ }
500
+ `;