@product7/feedback-sdk 1.3.8 → 1.4.0

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 (39) hide show
  1. package/dist/feedback-sdk.js +3008 -2568
  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 +5 -5
  7. package/src/core/APIService.js +37 -14
  8. package/src/index.js +1 -1
  9. package/src/styles/base.js +1 -1
  10. package/src/styles/changelog.js +58 -40
  11. package/src/styles/components.js +19 -2
  12. package/src/styles/design-tokens.js +4 -4
  13. package/src/styles/feedback.js +3 -8
  14. package/src/styles/messenger-components.js +473 -0
  15. package/src/styles/messenger-core.js +37 -268
  16. package/src/styles/messenger-features.js +89 -267
  17. package/src/styles/messenger-views.js +391 -325
  18. package/src/styles/messenger.js +17 -558
  19. package/src/styles/styles.js +21 -24
  20. package/src/styles/{surveys.js → survey.js} +56 -21
  21. package/src/widgets/BaseWidget.js +1 -1
  22. package/src/widgets/ButtonWidget.js +1 -1
  23. package/src/widgets/ChangelogWidget.js +1 -1
  24. package/src/widgets/InlineWidget.js +1 -1
  25. package/src/widgets/MessengerWidget.js +111 -122
  26. package/src/widgets/SurveyWidget.js +1 -1
  27. package/src/widgets/TabWidget.js +1 -1
  28. package/src/widgets/messenger/MessengerState.js +5 -2
  29. package/src/widgets/messenger/components/MessengerLauncher.js +22 -18
  30. package/src/widgets/messenger/components/MessengerPanel.js +1 -1
  31. package/src/widgets/messenger/components/NavigationTabs.js +36 -15
  32. package/src/widgets/messenger/views/ChangelogView.js +8 -32
  33. package/src/widgets/messenger/views/ChatView.js +96 -60
  34. package/src/widgets/messenger/views/ConversationsView.js +67 -45
  35. package/src/widgets/messenger/views/HelpView.js +22 -32
  36. package/src/widgets/messenger/views/HomeView.js +58 -40
  37. package/src/widgets/messenger/views/PreChatFormView.js +12 -5
  38. package/src/styles/messenger-help.js +0 -298
  39. package/src/styles/messenger-themes.js +0 -500
package/src/styles/messenger-views.js CHANGED
@@ -1,71 +1,118 @@
1
1
  export const messengerViewsStyles = `
2
+
3
+ /* ========================================
4
+ HOME VIEW
5
+ ======================================== */
6
+
2
7
  .messenger-home-view {
3
- background: linear-gradient(180deg, #2c2c2e 0%, #1c1c1e 40%);
8
+ background: linear-gradient(180deg, #f0f4ff 0%, #FFFFFF 50%);
9
+ position: relative;
10
+ overflow: hidden;
11
+ }
12
+
13
+ .messenger-home-view::before {
14
+ content: '';
15
+ position: absolute;
16
+ top: 0;
17
+ left: 0;
18
+ width: 600px;
19
+ height: 600px;
20
+ background: radial-gradient(circle, rgba(21, 94, 239, 0.08) 0%, transparent 70%);
21
+ filter: blur(60px);
22
+ pointer-events: none;
23
+ z-index: 1;
24
+ }
25
+
26
+ .messenger-home-view::after {
27
+ content: '';
28
+ position: absolute;
29
+ top: 0;
30
+ right: 0;
31
+ width: 500px;
32
+ height: 500px;
33
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
34
+ filter: blur(60px);
35
+ pointer-events: none;
36
+ z-index: 1;
37
+ }
38
+
39
+ .messenger-home-scroll {
40
+ flex: 1;
41
+ overflow-y: auto;
42
+ display: flex;
43
+ flex-direction: column;
44
+ position: relative;
4
45
  }
5
46
 
6
47
  .messenger-home-header {
7
- padding: 20px;
8
- background: linear-gradient(180deg, rgba(88, 86, 214, 0.2) 0%, transparent 100%);
48
+ padding: var(--spacing-6) var(--spacing-5);
49
+ position: relative;
50
+ z-index: 2;
51
+ flex-shrink: 0;
9
52
  }
10
53
 
11
54
  .messenger-home-header-top {
12
55
  display: flex;
13
56
  align-items: center;
14
57
  justify-content: space-between;
15
- margin-bottom: 24px;
58
+ margin-bottom: var(--spacing-8);
59
+ position: relative;
60
+ z-index: 2;
16
61
  }
17
62
 
18
63
  .messenger-home-logo {
19
- width: 32px;
20
- height: 32px;
64
+ width: 48px;
65
+ height: 48px;
66
+ border-radius: var(--radius-lg);
67
+ overflow: visible;
68
+ flex-shrink: 0;
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: center;
21
72
  }
22
73
 
23
74
  .messenger-home-logo img {
24
75
  width: 100%;
25
76
  height: 100%;
26
- border-radius: 8px;
27
- object-fit: cover;
28
- }
29
-
30
- .messenger-home-logo-default {
31
- width: 32px;
32
- height: 32px;
33
- background: linear-gradient(135deg, #5856d6, #007aff);
34
- border-radius: 8px;
35
- display: flex;
36
- align-items: center;
37
- justify-content: center;
38
- color: white;
77
+ object-fit: contain;
78
+ border-radius: var(--radius-lg);
39
79
  }
40
80
 
41
81
  .messenger-home-avatars {
42
82
  flex: 1;
43
83
  display: flex;
44
84
  justify-content: flex-end;
45
- margin-right: 12px;
85
+ margin-right: var(--spacing-4);
86
+ margin-left: var(--spacing-4);
46
87
  }
47
88
 
48
89
  .messenger-home-welcome {
49
90
  display: flex;
50
91
  flex-direction: column;
51
- gap: 4px;
92
+ text-align: left;
93
+ position: relative;
94
+ z-index: 2;
52
95
  }
53
96
 
54
97
  .messenger-home-greeting {
55
- font-size: 15px;
56
- color: rgba(255, 255, 255, 0.5);
98
+ font-size: 28px;
99
+ font-weight: var(--font-weight-bold);
100
+ color: var(--color-text-primary);
101
+ line-height: var(--line-height-tight);
57
102
  }
58
103
 
59
104
  .messenger-home-question {
60
- font-size: 18px;
61
- font-weight: 600;
62
- color: white;
105
+ font-size: 28px;
106
+ font-weight: var(--font-weight-bold);
107
+ color: var(--color-text-primary);
108
+ line-height: var(--line-height-tight);
63
109
  }
64
110
 
65
111
  .messenger-home-body {
66
112
  flex: 1;
67
- padding: 20px;
68
- overflow-y: auto;
113
+ padding: 0 var(--spacing-5) var(--spacing-5);
114
+ position: relative;
115
+ z-index: 2;
69
116
  }
70
117
 
71
118
  .messenger-home-message-btn {
@@ -73,64 +120,62 @@ export const messengerViewsStyles = `
73
120
  display: flex;
74
121
  align-items: center;
75
122
  justify-content: space-between;
76
- padding: 16px 20px;
77
- background: #2c2c2e;
123
+ padding: var(--spacing-4) var(--spacing-5);
124
+ background: var(--color-white);
78
125
  border: none;
79
- border-radius: 24px;
80
- color: white;
81
- font-size: 15px;
82
- font-weight: 500;
126
+ border-radius: 8px;
127
+ color: var(--color-text-primary);
128
+ font-size: var(--font-size-md);
129
+ font-weight: var(--font-weight-medium);
83
130
  cursor: pointer;
84
- transition: all 0.2s ease;
85
- margin-bottom: 20px;
131
+ transition: all var(--transition-base);
132
+ margin-bottom: var(--spacing-5);
133
+ font-family: inherit;
134
+ box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
86
135
  }
87
136
 
88
137
  .messenger-home-message-btn:hover {
89
- background: #3c3c3e;
138
+ background: var(--color-neutral-50);
90
139
  transform: translateX(4px);
91
- }
92
-
93
- .messenger-home-message-btn svg {
94
- opacity: 0.6;
140
+ box-shadow: rgba(9, 30, 66, 0.3) 0px 2px 2px, rgba(9, 30, 66, 0.18) 0px 0px 1px 1px;
95
141
  }
96
142
 
97
143
  .messenger-home-continue-btn {
98
- flex-direction: column;
99
- align-items: flex-start;
100
- gap: 2px;
101
- position: relative;
144
+ flex-direction: row;
145
+ align-items: center;
146
+ justify-content: space-between;
147
+ gap: var(--spacing-3);
102
148
  }
103
149
 
104
- .messenger-home-continue-btn > i {
105
- position: absolute;
106
- right: 20px;
107
- top: 50%;
108
- transform: translateY(-50%);
150
+ .messenger-home-continue-btn > svg {
151
+ flex-shrink: 0;
109
152
  }
110
153
 
111
154
  .messenger-home-continue-info {
112
155
  display: flex;
113
156
  flex-direction: column;
114
- gap: 2px;
157
+ gap: var(--spacing-1);
115
158
  text-align: left;
159
+ flex: 1;
116
160
  }
117
161
 
118
162
  .messenger-home-continue-label {
119
- font-size: 14px;
120
- font-weight: 600;
163
+ font-size: var(--font-size-md);
164
+ font-weight: var(--font-weight-semibold);
121
165
  }
122
166
 
123
167
  .messenger-home-continue-preview {
124
- font-size: 12px;
168
+ font-size: var(--font-size-sm);
125
169
  opacity: 0.6;
126
- font-weight: 400;
170
+ font-weight: var(--font-weight-normal);
127
171
  }
128
172
 
129
173
  .messenger-home-featured {
130
- background: #2c2c2e;
131
- border-radius: 12px;
174
+ background: var(--color-neutral-50);
175
+ border-radius: var(--radius-xl);
132
176
  overflow: hidden;
133
- margin-bottom: 20px;
177
+ margin-bottom: var(--spacing-5);
178
+ border: 1px solid var(--color-border);
134
179
  }
135
180
 
136
181
  .messenger-home-featured-image {
@@ -140,40 +185,47 @@ export const messengerViewsStyles = `
140
185
  }
141
186
 
142
187
  .messenger-home-featured-content {
143
- padding: 16px;
188
+ padding: var(--spacing-4);
144
189
  }
145
190
 
146
191
  .messenger-home-featured-content h3 {
147
- margin: 0 0 8px;
148
- font-size: 16px;
149
- font-weight: 600;
150
- color: white;
192
+ margin: 0 0 var(--spacing-2);
193
+ font-size: var(--font-size-lg);
194
+ font-weight: var(--font-weight-semibold);
195
+ color: var(--color-text-primary);
151
196
  }
152
197
 
153
198
  .messenger-home-featured-content p {
154
199
  margin: 0;
155
- font-size: 14px;
156
- color: rgba(255, 255, 255, 0.6);
200
+ font-size: var(--font-size-base);
201
+ color: var(--color-text-secondary);
202
+ }
203
+
204
+ .messenger-home-featured-btn {
205
+ margin-top: var(--spacing-3);
157
206
  }
158
207
 
159
208
  .messenger-home-changelog-section {
160
- margin-top: 20px;
209
+ margin-top: var(--spacing-5);
161
210
  display: flex;
162
211
  flex-direction: column;
163
- gap: 16px;
212
+ gap: var(--spacing-4);
164
213
  }
165
214
 
166
215
  .messenger-home-changelog-card {
167
- background: #2c2c2e;
168
- border-radius: 16px;
216
+ background: var(--color-white);
217
+ border-radius: 8px;
169
218
  overflow: hidden;
170
219
  cursor: pointer;
171
- transition: all 0.2s ease;
220
+ transition: all var(--transition-base);
221
+ border: none;
222
+ box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
172
223
  }
173
224
 
174
225
  .messenger-home-changelog-card:hover {
175
- background: #3c3c3e;
226
+ background: var(--color-neutral-50);
176
227
  transform: translateY(-2px);
228
+ box-shadow: rgba(9, 30, 66, 0.3) 0px 2px 2px, rgba(9, 30, 66, 0.18) 0px 0px 1px 1px;
177
229
  }
178
230
 
179
231
  .messenger-home-changelog-cover {
@@ -181,122 +233,125 @@ export const messengerViewsStyles = `
181
233
  height: 140px;
182
234
  overflow: hidden;
183
235
  position: relative;
184
- border-radius: 12px;
185
- margin: 12px 12px 0 12px;
186
- padding-bottom: 12px;
187
- width: calc(100% - 24px);
188
236
  }
189
237
 
190
238
  .messenger-home-changelog-cover img {
191
239
  width: 100%;
192
240
  height: 100%;
193
241
  object-fit: cover;
194
- border-radius: 12px;
195
242
  }
196
243
 
197
244
  .messenger-home-changelog-cover-text {
198
245
  position: absolute;
199
- bottom: 12px;
200
- left: 12px;
201
- right: 12px;
202
- color: #ffffff;
203
- font-size: 14px;
204
- font-weight: 600;
205
- text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
206
- line-height: 1.3;
246
+ bottom: var(--spacing-3);
247
+ left: var(--spacing-3);
248
+ right: var(--spacing-3);
249
+ color: var(--color-white);
250
+ font-size: var(--font-size-md);
251
+ font-weight: var(--font-weight-semibold);
252
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
253
+ line-height: var(--line-height-snug);
207
254
  }
208
255
 
209
256
  .messenger-home-changelog-card-content {
210
- padding: 16px;
211
- border-top: 1px solid rgba(255, 255, 255, 0.1);
257
+ padding: var(--spacing-4);
258
+ border-top: 1px solid var(--color-border);
212
259
  }
213
260
 
214
261
  .messenger-home-changelog-card-title {
215
- margin: 0 0 8px 0;
216
- font-size: 14px;
217
- font-weight: 600;
218
- color: #ffffff;
219
- line-height: 1.3;
262
+ margin: 0 0 var(--spacing-2);
263
+ font-size: var(--font-size-md);
264
+ font-weight: var(--font-weight-semibold);
265
+ color: var(--color-text-primary);
266
+ line-height: var(--line-height-snug);
220
267
  }
221
268
 
222
269
  .messenger-home-changelog-card-desc {
223
270
  margin: 0;
224
- font-size: 14px;
225
- color: rgba(255, 255, 255, 0.7);
226
- line-height: 1.5;
227
- display: -webkit-box;
228
- -webkit-line-clamp: 3;
229
- -webkit-box-orient: vertical;
230
- overflow: hidden;
271
+ font-size: var(--font-size-base);
272
+ color: var(--color-text-secondary);
273
+ line-height: var(--line-height-relaxed);
274
+ }
275
+
276
+ .messenger-home-availability,
277
+ .messenger-chat-availability {
278
+ display: flex;
279
+ align-items: center;
280
+ gap: var(--spacing-2);
281
+ margin-top: var(--spacing-2);
282
+ font-size: var(--font-size-sm);
283
+ color: var(--color-text-secondary);
284
+ }
285
+
286
+ .messenger-availability-dot {
287
+ width: 8px;
288
+ height: 8px;
289
+ border-radius: var(--radius-full);
290
+ flex-shrink: 0;
291
+ }
292
+
293
+ .messenger-availability-online {
294
+ background: var(--color-success);
295
+ box-shadow: 0 0 0 2px var(--color-success-light);
231
296
  }
232
297
 
298
+ .messenger-availability-away {
299
+ background: var(--color-neutral-400);
300
+ }
301
+
302
+ .messenger-availability-text {
303
+ opacity: 0.9;
304
+ }
305
+
306
+ /* ========================================
307
+ CONVERSATIONS VIEW
308
+ ======================================== */
233
309
 
234
310
  .messenger-conversations-header {
235
311
  display: flex;
236
312
  align-items: center;
237
313
  justify-content: space-between;
238
- padding: 20px;
239
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
314
+ padding: var(--spacing-4) var(--spacing-5);
315
+ border-bottom: 1px solid var(--color-border);
240
316
  }
241
317
 
242
318
  .messenger-conversations-header h2 {
243
319
  margin: 0;
244
- font-size: 20px;
245
- font-weight: 600;
246
- color: white;
320
+ font-size: var(--font-size-xl);
321
+ font-weight: var(--font-weight-semibold);
322
+ color: var(--color-text-primary);
247
323
  }
248
324
 
249
325
  .messenger-conversations-body {
250
326
  flex: 1;
251
327
  overflow-y: auto;
252
- padding: 4px 12px 12px 12px;
328
+ padding: 0;
253
329
  }
254
330
 
255
- .messenger-conversations-empty {
331
+ .messenger-conversations-list {
256
332
  display: flex;
257
333
  flex-direction: column;
258
- align-items: center;
259
- justify-content: center;
260
- height: 100%;
261
- text-align: center;
262
- padding: 40px;
263
- }
264
-
265
- .messenger-conversations-empty-icon {
266
- color: rgba(255, 255, 255, 0.3);
267
- margin-bottom: 16px;
268
- }
269
-
270
- .messenger-conversations-empty h3 {
271
- margin: 0 0 8px;
272
- font-size: 18px;
273
- font-weight: 600;
274
- color: white;
275
334
  }
276
335
 
277
- .messenger-conversations-empty p {
278
- margin: 0;
279
- font-size: 14px;
280
- color: rgba(255, 255, 255, 0.5);
336
+ .messenger-conversation-item + .messenger-conversation-item {
337
+ border-top: 1px solid var(--color-border);
281
338
  }
282
339
 
283
340
  .messenger-conversation-item {
284
341
  display: flex;
285
342
  align-items: flex-start;
286
- gap: 12px;
287
- padding: 10px 16px;
288
- border-radius: 12px;
343
+ gap: var(--spacing-3);
344
+ padding: 10px var(--spacing-4);
289
345
  cursor: pointer;
290
- transition: background 0.2s ease;
346
+ transition: background var(--transition-base);
291
347
  }
292
348
 
293
349
  .messenger-conversation-item:hover {
294
- background: rgba(255, 255, 255, 0.05);
350
+ background: var(--color-neutral-50);
295
351
  }
296
352
 
297
353
  .messenger-conversation-avatars {
298
354
  flex-shrink: 0;
299
- padding-top: 2px;
300
355
  }
301
356
 
302
357
  .messenger-conversation-content {
@@ -308,78 +363,81 @@ export const messengerViewsStyles = `
308
363
  display: flex;
309
364
  align-items: center;
310
365
  justify-content: space-between;
311
- margin-bottom: 4px;
312
- gap: 12px;
366
+ margin-bottom: var(--spacing-1);
367
+ gap: var(--spacing-3);
313
368
  }
314
369
 
315
370
  .messenger-conversation-title {
316
- font-size: 15px;
317
- font-weight: 400;
318
- color: #ffffff;
319
- line-height: 1.3;
371
+ font-size: var(--font-size-md);
372
+ font-weight: var(--font-weight-semibold);
373
+ color: var(--color-text-primary);
374
+ line-height: var(--line-height-snug);
320
375
  }
321
376
 
322
377
  .messenger-conversation-time {
323
- font-size: 13px;
324
- color: rgba(255, 255, 255, 0.5);
378
+ font-size: var(--font-size-sm);
379
+ color: var(--color-text-secondary);
325
380
  flex-shrink: 0;
326
381
  }
327
382
 
328
383
  .messenger-conversation-preview {
329
384
  display: flex;
330
385
  align-items: center;
331
- gap: 8px;
332
- }
333
-
334
- .messenger-unread-dot {
335
- width: 8px;
336
- height: 8px;
337
- background: #ef4444;
338
- border-radius: 50%;
339
- flex-shrink: 0;
386
+ gap: var(--spacing-2);
340
387
  }
341
388
 
342
389
  .messenger-conversation-message {
343
- font-size: 14px;
344
- color: rgba(255, 255, 255, 0.7);
390
+ font-size: var(--font-size-base);
391
+ font-weight: var(--font-weight-normal);
392
+ color: var(--color-text-secondary);
345
393
  white-space: nowrap;
346
394
  overflow: hidden;
347
395
  text-overflow: ellipsis;
348
- line-height: 1.4;
396
+ line-height: var(--line-height-normal);
349
397
  }
350
398
 
351
- .messenger-conversation-item.unread .messenger-conversation-title {
352
- font-weight: 400;
353
- color: #ffffff;
399
+ .messenger-conversation-item.unread .messenger-conversation-message {
400
+ color: var(--color-text-primary);
401
+ font-weight: var(--font-weight-medium);
354
402
  }
355
403
 
356
- .messenger-conversation-item.unread .messenger-conversation-message {
357
- color: rgba(255, 255, 255, 0.9);
404
+ .messenger-unread-dot {
405
+ width: 8px;
406
+ height: 8px;
407
+ background: var(--color-primary);
408
+ border-radius: var(--radius-full);
409
+ flex-shrink: 0;
358
410
  }
359
411
 
360
412
  .messenger-conversations-footer {
361
- padding: 16px;
362
- border-top: 1px solid rgba(255, 255, 255, 0.1);
413
+ padding: var(--spacing-4);
414
+ border-top: none;
363
415
  }
364
416
 
365
417
  .messenger-new-message-btn {
366
- width: 100%;
418
+ max-width: 220px;
419
+ margin: 0 auto;
367
420
  display: flex;
368
421
  align-items: center;
369
- gap: 12px;
370
- padding: 12px 16px;
371
- background: #2c2c2e;
422
+ justify-content: space-between;
423
+ gap: var(--spacing-2);
424
+ padding: var(--spacing-3) var(--spacing-4);
425
+ background: var(--color-white);
372
426
  border: none;
373
- border-radius: 24px;
374
- color: white;
375
- font-size: 14px;
376
- font-weight: 500;
427
+ border-radius: var(--radius-xl);
428
+ color: var(--color-text-primary);
429
+ font-size: var(--font-size-base);
430
+ font-weight: var(--font-weight-medium);
377
431
  cursor: pointer;
378
- transition: all 0.2s ease;
432
+ transition: all var(--transition-base);
433
+ font-family: inherit;
434
+ box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
379
435
  }
380
436
 
381
437
  .messenger-new-message-btn:hover {
382
- background: #3c3c3e;
438
+ background: var(--color-neutral-50);
439
+ transform: translateX(4px);
440
+ box-shadow: rgba(9, 30, 66, 0.3) 0px 2px 2px, rgba(9, 30, 66, 0.18) 0px 0px 1px 1px;
383
441
  }
384
442
 
385
443
  .messenger-new-message-btn span {
@@ -387,232 +445,240 @@ export const messengerViewsStyles = `
387
445
  text-align: left;
388
446
  }
389
447
 
390
- .messenger-new-message-btn svg {
391
- opacity: 0.6;
392
- }
448
+ /* ========================================
449
+ HELP VIEW
450
+ ======================================== */
393
451
 
394
- .messenger-chat-header {
452
+ .messenger-help-header {
395
453
  display: flex;
396
- align-items: center;
397
- gap: 12px;
398
- padding: 16px 20px;
399
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
454
+ flex-direction: column;
455
+ gap: var(--spacing-3);
456
+ padding: var(--spacing-4) var(--spacing-5) var(--spacing-5);
457
+ border-bottom: 1px solid var(--color-border);
458
+ background: var(--color-white);
400
459
  }
401
460
 
402
- .messenger-chat-header-info {
403
- flex: 1;
461
+ .messenger-help-header-top {
404
462
  display: flex;
405
463
  align-items: center;
406
- gap: 10px;
464
+ justify-content: center;
465
+ position: relative;
407
466
  }
408
467
 
409
- .messenger-chat-title {
410
- font-size: 16px;
411
- font-weight: 500;
412
- color: white;
468
+ .messenger-help-header-top h2 {
469
+ margin: 0;
470
+ font-size: var(--font-size-xl);
471
+ font-weight: var(--font-weight-semibold);
472
+ color: var(--color-text-primary);
413
473
  }
414
474
 
415
- .messenger-chat-view {
416
- position: relative;
417
- overflow: visible;
475
+ .messenger-help-header-top .sdk-close-btn {
476
+ position: absolute;
477
+ right: 0;
478
+ top: 50%;
479
+ transform: translateY(-50%);
418
480
  }
419
481
 
420
- .messenger-chat-messages {
421
- flex: 1;
422
- overflow-y: auto;
423
- padding: 16px;
424
- display: flex;
425
- flex-direction: column;
426
- gap: 16px;
482
+ .messenger-help-search-input {
483
+ width: 100%;
484
+ background: var(--color-neutral-50);
485
+ border: 1px solid var(--color-border);
486
+ border-radius: var(--radius-md);
487
+ padding: var(--spacing-2) var(--spacing-3);
488
+ font-size: var(--font-size-base);
489
+ font-weight: var(--font-weight-normal);
490
+ color: var(--color-text-primary);
491
+ font-family: inherit;
492
+ outline: none;
493
+ transition: border-color var(--transition-base);
427
494
  }
428
495
 
429
- .messenger-chat-empty {
430
- flex: 1;
431
- display: flex;
432
- flex-direction: column;
433
- align-items: center;
434
- justify-content: center;
435
- text-align: center;
436
- padding: 40px;
496
+ .messenger-help-search-input:focus {
497
+ border-color: var(--color-primary);
498
+ background: var(--color-white);
437
499
  }
438
500
 
439
- .messenger-chat-empty-avatars {
440
- margin-bottom: 16px;
501
+ .messenger-help-search-input::placeholder {
502
+ color: var(--color-text-tertiary);
441
503
  }
442
504
 
443
- .messenger-chat-empty h3 {
444
- margin: 0 0 8px;
445
- font-size: 18px;
446
- font-weight: 600;
447
- color: white;
505
+ .messenger-help-body {
506
+ flex: 1;
507
+ overflow-y: auto;
508
+ padding: 0;
448
509
  }
449
510
 
450
- .messenger-chat-empty p {
451
- margin: 0;
452
- font-size: 14px;
453
- color: rgba(255, 255, 255, 0.5);
454
- max-width: 240px;
511
+ .messenger-help-collections-header {
512
+ display: none;
455
513
  }
456
514
 
457
- .messenger-message {
458
- display: flex;
459
- gap: 8px;
460
- max-width: 85%;
515
+ .messenger-help-collections {
516
+ padding: 0;
461
517
  }
462
518
 
463
- .messenger-message-own {
464
- align-self: flex-end;
465
- flex-direction: column;
466
- align-items: flex-end;
519
+ .messenger-help-collection {
520
+ display: flex;
521
+ align-items: center;
522
+ padding: var(--spacing-4) var(--spacing-5);
523
+ cursor: pointer;
524
+ transition: background var(--transition-base);
525
+ border-bottom: 1px solid var(--color-border);
467
526
  }
468
527
 
469
- .messenger-message-received {
470
- align-self: flex-start;
528
+ .messenger-help-collection:hover {
529
+ background: var(--color-neutral-50);
471
530
  }
472
531
 
473
- .messenger-message-wrapper {
474
- display: flex;
475
- flex-direction: column;
532
+ .messenger-help-collection-content {
533
+ flex: 1;
534
+ min-width: 0;
476
535
  }
477
536
 
478
- .messenger-message-sender {
479
- font-size: 12px;
480
- font-weight: 500;
481
- color: rgba(255, 255, 255, 0.6);
482
- margin-bottom: 4px;
483
- margin-left: 12px;
537
+ .messenger-help-collection-title {
538
+ margin: 0 0 var(--spacing-1);
539
+ font-size: var(--font-size-md);
540
+ font-weight: var(--font-weight-bold);
541
+ color: var(--color-text-primary);
542
+ line-height: var(--line-height-snug);
484
543
  }
485
544
 
486
- .messenger-message-bubble {
487
- padding: 12px 16px;
488
- border-radius: 18px;
489
- word-wrap: break-word;
545
+ .messenger-help-collection-desc {
546
+ margin: 0 0 var(--spacing-1);
547
+ font-size: var(--font-size-base);
548
+ color: var(--color-text-secondary);
549
+ line-height: var(--line-height-normal);
490
550
  }
491
551
 
492
- .messenger-message-own .messenger-message-bubble {
493
- background: rgb(29, 78, 216);
494
- color: white;
495
- border-bottom-right-radius: 4px;
552
+ .messenger-help-collection-count {
553
+ font-size: var(--font-size-sm);
554
+ color: var(--color-text-tertiary);
496
555
  }
497
556
 
498
- .messenger-message-received .messenger-message-bubble {
499
- background: #2c2c2e;
500
- color: white;
501
- border-bottom-left-radius: 4px;
557
+ .messenger-help-collection-arrow {
558
+ color: var(--color-text-tertiary);
559
+ flex-shrink: 0;
560
+ margin-left: var(--spacing-3);
502
561
  }
503
562
 
504
- .messenger-message-content {
505
- font-size: 15px;
506
- line-height: 1.4;
563
+ .messenger-help-footer {
564
+ padding: var(--spacing-4) var(--spacing-5);
565
+ border-top: 1px solid var(--color-border);
566
+ text-align: center;
507
567
  }
508
568
 
509
- .messenger-message-time {
510
- font-size: 11px;
511
- color: rgba(255, 255, 255, 0.4);
512
- margin-top: 4px;
513
- padding: 0 4px;
569
+ .messenger-help-footer-link {
570
+ display: inline-flex;
571
+ align-items: center;
572
+ gap: var(--spacing-2);
573
+ font-size: var(--font-size-base);
574
+ font-weight: var(--font-weight-semibold);
575
+ color: var(--color-text-primary);
576
+ text-decoration: none;
577
+ cursor: pointer;
578
+ transition: color var(--transition-base);
514
579
  }
515
580
 
516
- .messenger-message-avatar {
517
- flex-shrink: 0;
518
- margin-top: auto;
581
+ .messenger-help-footer-link:hover {
582
+ color: var(--color-primary);
519
583
  }
520
584
 
521
- .messenger-closed-banner {
585
+ /* ========================================
586
+ CHANGELOG VIEW
587
+ ======================================== */
588
+
589
+ .messenger-changelog-header {
522
590
  display: flex;
523
591
  align-items: center;
524
592
  justify-content: center;
525
- gap: 8px;
526
- padding: 12px 16px;
527
- margin: 16px;
528
- background: rgba(52, 199, 89, 0.12);
529
- color: #34c759;
530
- border-radius: 12px;
531
- font-size: 13px;
532
- font-weight: 500;
593
+ padding: var(--spacing-3) var(--spacing-5);
533
594
  }
534
595
 
535
- .messenger-chat-compose {
536
- display: flex;
537
- align-items: center;
538
- gap: 8px;
539
- padding: 12px 16px;
540
- border-top: 1px solid rgba(255, 255, 255, 0.1);
541
- background: #1c1c1e;
596
+ .messenger-changelog-header h2 {
597
+ margin: 0;
598
+ font-size: var(--font-size-lg);
599
+ font-weight: var(--font-weight-semibold);
600
+ color: var(--color-text-primary);
542
601
  }
543
602
 
544
- .messenger-compose-input-wrapper {
603
+ .messenger-changelog-body {
545
604
  flex: 1;
546
- background: #2c2c2e;
547
- border-radius: 10px;
548
- padding: 8px 16px;
605
+ overflow-y: auto;
606
+ padding: 0;
549
607
  }
550
608
 
551
- .messenger-compose-input {
552
- width: 100%;
553
- background: transparent;
609
+ .messenger-changelog-list {
610
+ display: flex;
611
+ flex-direction: column;
612
+ gap: var(--spacing-4);
613
+ padding: var(--spacing-4);
614
+ }
615
+
616
+ .messenger-changelog-card {
617
+ background: var(--color-white);
618
+ border-radius: var(--radius-xl);
619
+ overflow: hidden;
620
+ cursor: pointer;
621
+ transition: all var(--transition-base);
554
622
  border: none;
555
- outline: none;
556
- color: white;
557
- font-size: 15px;
558
- line-height: 1.4;
559
- resize: none;
560
- max-height: 120px;
561
- font-family: inherit;
623
+ box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
562
624
  }
563
625
 
564
- .messenger-compose-input::placeholder {
565
- color: rgba(255, 255, 255, 0.4);
626
+ .messenger-changelog-card:hover {
627
+ transform: translateY(-2px);
628
+ box-shadow: rgba(9, 30, 66, 0.3) 0px 4px 8px -2px, rgba(9, 30, 66, 0.18) 0px 0px 1px 1px;
566
629
  }
567
630
 
568
- .messenger-compose-send {
569
- width: 40px;
570
- height: 40px;
571
- background: #007aff;
572
- border: none;
573
- border-radius: 50%;
574
- color: white;
575
- cursor: pointer;
631
+ .messenger-changelog-cover {
632
+ width: 100%;
633
+ height: 160px;
634
+ overflow: hidden;
635
+ }
636
+
637
+ .messenger-changelog-cover img {
638
+ width: 100%;
639
+ height: 100%;
640
+ object-fit: cover;
641
+ }
642
+
643
+ .messenger-changelog-content {
644
+ padding: var(--spacing-4);
645
+ }
646
+
647
+ .messenger-changelog-tags {
576
648
  display: flex;
577
- align-items: center;
578
- justify-content: center;
579
- transition: all 0.2s ease;
580
- flex-shrink: 0;
649
+ flex-wrap: wrap;
650
+ gap: var(--spacing-2);
651
+ margin-bottom: var(--spacing-2);
581
652
  }
582
653
 
583
- .messenger-compose-send:hover:not(:disabled) {
584
- background: #0066d6;
585
- transform: scale(1.05);
654
+ .messenger-changelog-title {
655
+ margin: 0 0 var(--spacing-2);
656
+ font-size: var(--font-size-lg);
657
+ font-weight: var(--font-weight-bold);
658
+ color: var(--color-text-primary);
659
+ line-height: var(--line-height-snug);
586
660
  }
587
661
 
588
- .messenger-compose-send:disabled {
589
- background: #3c3c3e;
590
- color: rgba(255, 255, 255, 0.3);
591
- cursor: not-allowed;
662
+ .messenger-changelog-description {
663
+ margin: 0;
664
+ font-size: var(--font-size-base);
665
+ color: var(--color-text-secondary);
666
+ line-height: var(--line-height-relaxed);
592
667
  }
593
668
 
594
- .messenger-compose-attach {
595
- width: 40px;
596
- height: 40px;
597
- background: transparent;
598
- border: none;
599
- border-radius: 50%;
600
- color: rgba(255, 255, 255, 0.5);
601
- cursor: pointer;
669
+ .messenger-changelog-meta {
602
670
  display: flex;
603
671
  align-items: center;
604
- justify-content: center;
605
- transition: all 0.2s ease;
606
- flex-shrink: 0;
672
+ justify-content: space-between;
673
+ margin-top: var(--spacing-3);
607
674
  }
608
675
 
609
- .messenger-compose-attach:hover:not(:disabled) {
610
- color: rgba(255, 255, 255, 0.85);
611
- background: rgba(255, 255, 255, 0.08);
676
+ .messenger-changelog-date {
677
+ font-size: var(--font-size-sm);
678
+ color: var(--color-text-tertiary);
612
679
  }
613
680
 
614
- .messenger-compose-attach:disabled {
615
- opacity: 0.3;
616
- cursor: not-allowed;
681
+ .messenger-changelog-arrow {
682
+ color: var(--color-text-tertiary);
617
683
  }
618
- `;
684
+ `;