@product7/product7-js 0.5.5 → 0.5.7

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 +10 -10
  2. package/dist/README.md +10 -10
  3. package/dist/product7-js.js +7261 -7100
  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/services/{WebChatService.js → LiveChatService.js} +14 -14
  9. package/src/core/APIService.js +15 -15
  10. package/src/core/Product7.js +9 -4
  11. package/src/core/WebSocketService.js +1 -1
  12. package/src/docs/api.md +8 -8
  13. package/src/docs/example.md +9 -9
  14. package/src/docs/framework-integrations.md +3 -3
  15. package/src/index.js +38 -37
  16. package/src/styles/base.js +8 -8
  17. package/src/styles/{web-chat-components.js → liveChat-components.js} +114 -114
  18. package/src/styles/{web-chat-core.js → liveChat-core.js} +96 -31
  19. package/src/styles/{web-chat-features.js → liveChat-features.js} +20 -20
  20. package/src/styles/{web-chat-views.js → liveChat-views.js} +137 -137
  21. package/src/styles/liveChat.js +17 -0
  22. package/src/styles/{webChatCustomStyles.js → liveChatCustomStyles.js} +16 -16
  23. package/src/styles/styles.js +3 -3
  24. package/src/widgets/BaseWidget.js +2 -2
  25. package/src/widgets/ChangelogWidget.js +3 -3
  26. package/src/widgets/{WebChatWidget.js → LiveChatWidget.js} +169 -165
  27. package/src/widgets/SurveyWidget.js +7 -7
  28. package/src/widgets/WidgetFactory.js +2 -2
  29. package/src/widgets/{web-chat/WebChatState.js → liveChat/LiveChatState.js} +1 -1
  30. package/src/widgets/{web-chat/components/WebChatLauncher.js → liveChat/components/LiveChatLauncher.js} +16 -16
  31. package/src/widgets/{web-chat/components/WebChatPanel.js → liveChat/components/LiveChatPanel.js} +41 -10
  32. package/src/widgets/{web-chat → liveChat}/components/NavigationTabs.js +16 -16
  33. package/src/widgets/{web-chat → liveChat}/views/ChangelogView.js +17 -17
  34. package/src/widgets/{web-chat → liveChat}/views/ChatView.js +153 -95
  35. package/src/widgets/{web-chat → liveChat}/views/ConversationsView.js +24 -24
  36. package/src/widgets/{web-chat → liveChat}/views/HelpView.js +32 -32
  37. package/src/widgets/{web-chat → liveChat}/views/HomeView.js +52 -52
  38. package/src/widgets/{web-chat → liveChat}/views/PreChatFormView.js +15 -18
  39. package/types/index.d.ts +8 -9
  40. package/src/styles/web-chat.js +0 -17
package/src/styles/{web-chat-core.js → liveChat-core.js} RENAMED
@@ -1,21 +1,21 @@
1
- export const webChatCoreStyles = `
1
+ export const liveChatCoreStyles = `
2
2
 
3
- .web-chat-launcher {
3
+ .liveChat-launcher {
4
4
  position: fixed;
5
5
  z-index: var(--z-modal);
6
6
  }
7
7
 
8
- .web-chat-launcher-right {
8
+ .liveChat-launcher-right {
9
9
  bottom: var(--spacing-5);
10
10
  right: var(--spacing-5);
11
11
  }
12
12
 
13
- .web-chat-launcher-left {
13
+ .liveChat-launcher-left {
14
14
  bottom: var(--spacing-5);
15
15
  left: var(--spacing-5);
16
16
  }
17
17
 
18
- .web-chat-launcher-btn {
18
+ .liveChat-launcher-btn {
19
19
  width: 60px;
20
20
  height: 60px;
21
21
  border-radius: var(--radius-full);
@@ -31,16 +31,16 @@
31
31
  position: relative;
32
32
  }
33
33
 
34
- .web-chat-launcher-btn:hover {
34
+ .liveChat-launcher-btn:hover {
35
35
  box-shadow: var(--shadow-xl);
36
36
  }
37
37
 
38
- .web-chat-launcher-btn:active {
38
+ .liveChat-launcher-btn:active {
39
39
  transform: translateY(1px);
40
40
  transition-duration: 100ms;
41
41
  }
42
42
 
43
- .web-chat-launcher-badge {
43
+ .liveChat-launcher-badge {
44
44
  position: absolute;
45
45
  top: -3px;
46
46
  right: -3px;
@@ -61,7 +61,7 @@
61
61
  line-height: 1;
62
62
  }
63
63
 
64
- .web-chat-panel {
64
+ .liveChat-panel {
65
65
  position: fixed;
66
66
  z-index: var(--z-popover);
67
67
  width: 400px;
@@ -74,10 +74,13 @@
74
74
  transition:
75
75
  opacity 160ms cubic-bezier(0.4, 0, 1, 1),
76
76
  transform 180ms cubic-bezier(0.4, 0, 1, 1),
77
- visibility 0s linear 180ms;
77
+ visibility 0s linear 180ms,
78
+ width 300ms cubic-bezier(0.16, 1, 0.3, 1),
79
+ height 300ms cubic-bezier(0.16, 1, 0.3, 1),
80
+ max-height 300ms cubic-bezier(0.16, 1, 0.3, 1);
78
81
  }
79
82
 
80
- .web-chat-panel.open {
83
+ .liveChat-panel.open {
81
84
  opacity: 1;
82
85
  visibility: visible;
83
86
  pointer-events: auto;
@@ -88,19 +91,19 @@
88
91
  visibility 0s linear 0s;
89
92
  }
90
93
 
91
- .web-chat-panel-right {
94
+ .liveChat-panel-right {
92
95
  bottom: 90px;
93
96
  right: var(--spacing-5);
94
97
  transform-origin: bottom right;
95
98
  }
96
99
 
97
- .web-chat-panel-left {
100
+ .liveChat-panel-left {
98
101
  bottom: 90px;
99
102
  left: var(--spacing-5);
100
103
  transform-origin: bottom left;
101
104
  }
102
105
 
103
- .web-chat-panel-content {
106
+ .liveChat-panel-content {
104
107
  background: var(--msg-bg);
105
108
  height: 100%;
106
109
  border-radius: var(--radius-2xl);
@@ -111,22 +114,22 @@
111
114
  border: 1px solid var(--msg-border);
112
115
  }
113
116
 
114
- .web-chat-panel-content *::-webkit-scrollbar {
117
+ .liveChat-panel-content *::-webkit-scrollbar {
115
118
  display: none;
116
119
  }
117
120
 
118
- .web-chat-panel-content * {
121
+ .liveChat-panel-content * {
119
122
  scrollbar-width: none;
120
123
  }
121
124
 
122
- .web-chat-panel-views {
125
+ .liveChat-panel-views {
123
126
  flex: 1;
124
127
  overflow: hidden;
125
128
  display: flex;
126
129
  flex-direction: column;
127
130
  }
128
131
 
129
- .web-chat-view {
132
+ .liveChat-view {
130
133
  height: 100%;
131
134
  display: flex;
132
135
  flex-direction: column;
@@ -134,36 +137,98 @@
134
137
  position: relative;
135
138
  }
136
139
 
137
- .web-chat-avatar-stack {
140
+ .liveChat-avatar-stack {
138
141
  display: flex;
139
142
  align-items: center;
140
143
  }
141
144
 
142
- .web-chat-avatar-stack .sdk-avatar {
145
+ .liveChat-avatar-stack .sdk-avatar {
143
146
  margin-left: -8px;
144
147
  }
145
148
 
146
- .web-chat-avatar-stack .sdk-avatar:first-child {
149
+ .liveChat-avatar-stack .sdk-avatar:first-child {
147
150
  margin-left: 0;
148
151
  }
149
152
 
150
- .web-chat-avatar-stack-tiny .sdk-avatar {
153
+ .liveChat-avatar-stack-tiny .sdk-avatar {
151
154
  margin-left: -6px;
152
155
  }
153
156
 
154
- .web-chat-avatar-stack-tiny .sdk-avatar:first-child {
157
+ .liveChat-avatar-stack-tiny .sdk-avatar:first-child {
155
158
  margin-left: 0;
156
159
  }
157
160
 
158
- .web-chat-mobile-close-btn {
161
+ .liveChat-mobile-close-btn {
159
162
  display: none;
160
163
  }
161
164
 
165
+ .liveChat-panel.liveChat-panel-expanded {
166
+ width: 720px;
167
+ height: 88vh;
168
+ max-height: 88vh;
169
+ }
170
+
171
+ .liveChat-chat-menu-wrapper {
172
+ position: relative;
173
+ }
174
+
175
+ .liveChat-chat-menu-dropdown {
176
+ position: absolute;
177
+ top: calc(100% + 6px);
178
+ right: 0;
179
+ background: var(--color-white, #ffffff);
180
+ border: 1px solid var(--color-border, #e5e7eb);
181
+ border-radius: var(--radius-lg);
182
+ box-shadow: 0 4px 16px rgba(0,0,0,0.12);
183
+ min-width: 190px;
184
+ z-index: 20;
185
+ overflow: hidden;
186
+ opacity: 0;
187
+ visibility: hidden;
188
+ transform: translateY(-4px);
189
+ transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
190
+ }
191
+
192
+ .liveChat-chat-menu-dropdown.open {
193
+ opacity: 1;
194
+ visibility: visible;
195
+ transform: translateY(0);
196
+ transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 0s;
197
+ }
198
+
199
+ .liveChat-chat-menu-item {
200
+ width: 100%;
201
+ display: flex;
202
+ align-items: center;
203
+ gap: 10px;
204
+ padding: 10px 14px;
205
+ background: none;
206
+ border: none;
207
+ cursor: pointer;
208
+ font-size: 13px;
209
+ font-weight: 500;
210
+ color: var(--color-text-primary, #111827);
211
+ text-align: left;
212
+ transition: background 120ms;
213
+ }
214
+
215
+ .liveChat-chat-menu-item:hover {
216
+ background: var(--color-neutral-50, #f9fafb);
217
+ }
218
+
219
+ .liveChat-chat-menu-item iconify-icon {
220
+ color: var(--color-text-secondary, #6b7280);
221
+ flex-shrink: 0;
222
+ }
223
+
162
224
  @media (max-width: 480px) {
163
- .web-chat-mobile-close-btn {
225
+ .liveChat-mobile-close-btn {
164
226
  display: flex;
165
227
  }
166
- .web-chat-panel {
228
+ .liveChat-chat-menu-wrapper {
229
+ display: none;
230
+ }
231
+ .liveChat-panel {
167
232
  width: 100%;
168
233
  height: 100%;
169
234
  max-height: 100%;
@@ -175,20 +240,20 @@
175
240
  transform: translateY(12px) scale(0.98);
176
241
  }
177
242
 
178
- .web-chat-panel.open {
243
+ .liveChat-panel.open {
179
244
  transform: translateY(0) scale(1);
180
245
  }
181
246
 
182
- .web-chat-panel-content {
247
+ .liveChat-panel-content {
183
248
  border-radius: 0;
184
249
  }
185
250
 
186
- .web-chat-launcher {
251
+ .liveChat-launcher {
187
252
  bottom: var(--spacing-4);
188
253
  right: var(--spacing-4);
189
254
  }
190
255
 
191
- .web-chat-launcher-left {
256
+ .liveChat-launcher-left {
192
257
  left: var(--spacing-4);
193
258
  }
194
259
  }
@@ -197,7 +262,7 @@
197
262
  DARK THEME — token overrides only
198
263
  ======================================== */
199
264
 
200
- .web-chat-widget.theme-dark {
265
+ .liveChat-widget.theme-dark {
201
266
  /* Web Chat semantic tokens */
202
267
  --msg-bg: #0f1317;
203
268
  --msg-bg-surface: #1a1e24;
package/src/styles/{web-chat-features.js → liveChat-features.js} RENAMED
@@ -1,8 +1,8 @@
1
- export const webChatFeaturesStyles = `
1
+ export const liveChatFeaturesStyles = `
2
2
  /* ========================================
3
3
  ATTACHMENTS
4
4
  ======================================== */
5
- .web-chat-compose-attachments-preview {
5
+ .liveChat-compose-attachments-preview {
6
6
  display: none;
7
7
  flex-wrap: wrap;
8
8
  gap: var(--spacing-2);
@@ -11,7 +11,7 @@
11
11
  background: var(--msg-bg);
12
12
  }
13
13
 
14
- .web-chat-attachment-preview {
14
+ .liveChat-attachment-preview {
15
15
  position: relative;
16
16
  width: 56px;
17
17
  height: 56px;
@@ -20,14 +20,14 @@
20
20
  border: 1px solid var(--color-border);
21
21
  }
22
22
 
23
- .web-chat-attachment-thumb {
23
+ .liveChat-attachment-thumb {
24
24
  width: 100%;
25
25
  height: 100%;
26
26
  object-fit: cover;
27
27
  display: block;
28
28
  }
29
29
 
30
- .web-chat-attachment-file-icon {
30
+ .liveChat-attachment-file-icon {
31
31
  display: flex;
32
32
  align-items: center;
33
33
  justify-content: center;
@@ -35,7 +35,7 @@
35
35
  color: var(--color-text-secondary);
36
36
  }
37
37
 
38
- .web-chat-attachment-remove {
38
+ .liveChat-attachment-remove {
39
39
  position: absolute;
40
40
  top: 2px;
41
41
  right: 2px;
@@ -55,14 +55,14 @@
55
55
  transition: background var(--transition-base);
56
56
  }
57
57
 
58
- .web-chat-attachment-remove:hover {
58
+ .liveChat-attachment-remove:hover {
59
59
  background: var(--color-error);
60
60
  }
61
61
 
62
62
  /* ========================================
63
63
  EMAIL OVERLAY
64
64
  ======================================== */
65
- .web-chat-email-overlay {
65
+ .liveChat-email-overlay {
66
66
  position: absolute;
67
67
  bottom: 0;
68
68
  left: 0;
@@ -75,12 +75,12 @@
75
75
  pointer-events: auto;
76
76
  }
77
77
 
78
- .web-chat-email-card {
78
+ .liveChat-email-card {
79
79
  width: 100%;
80
- animation: web-chat-slide-up 0.25s ease;
80
+ animation: liveChat-slide-up 0.25s ease;
81
81
  }
82
82
 
83
- .web-chat-email-actions {
83
+ .liveChat-email-actions {
84
84
  display: flex;
85
85
  gap: var(--spacing-2);
86
86
  margin-top: var(--spacing-1);
@@ -89,7 +89,7 @@
89
89
  /* ========================================
90
90
  EMPTY STATE
91
91
  ======================================== */
92
- .web-chat-empty-state {
92
+ .liveChat-empty-state {
93
93
  flex: 1;
94
94
  display: flex;
95
95
  flex-direction: column;
@@ -99,19 +99,19 @@
99
99
  padding: var(--spacing-10);
100
100
  }
101
101
 
102
- .web-chat-empty-state-icon {
102
+ .liveChat-empty-state-icon {
103
103
  color: var(--msg-text-tertiary);
104
104
  margin-bottom: var(--spacing-4);
105
105
  }
106
106
 
107
- .web-chat-empty-state h3 {
107
+ .liveChat-empty-state h3 {
108
108
  margin: 0 0 var(--spacing-2);
109
109
  font-size: var(--font-size-xl);
110
110
  font-weight: var(--font-weight-semibold);
111
111
  color: var(--color-text-primary);
112
112
  }
113
113
 
114
- .web-chat-empty-state p {
114
+ .liveChat-empty-state p {
115
115
  margin: 0;
116
116
  font-size: var(--font-size-base);
117
117
  color: var(--color-text-secondary);
@@ -126,7 +126,7 @@
126
126
  }
127
127
  }
128
128
 
129
- @keyframes web-chat-typing-bounce {
129
+ @keyframes liveChat-typing-bounce {
130
130
  0%, 80%, 100% {
131
131
  transform: scale(0);
132
132
  }
@@ -135,7 +135,7 @@
135
135
  }
136
136
  }
137
137
 
138
- @keyframes web-chat-slide-up {
138
+ @keyframes liveChat-slide-up {
139
139
  from {
140
140
  transform: translateY(100%);
141
141
  opacity: 0;
@@ -146,7 +146,7 @@
146
146
  }
147
147
  }
148
148
 
149
- @keyframes web-chat-fade-in {
149
+ @keyframes liveChat-fade-in {
150
150
  from {
151
151
  opacity: 0;
152
152
  }
@@ -159,10 +159,10 @@
159
159
  RESPONSIVE
160
160
  ======================================== */
161
161
  @media (max-width: 480px) {
162
- .web-chat-prechat-overlay {
162
+ .liveChat-prechat-overlay {
163
163
  padding: var(--spacing-4);
164
164
  }
165
- .web-chat-prechat-card {
165
+ .liveChat-prechat-card {
166
166
  max-width: 100%;
167
167
  }
168
168
  }