@product7/product7-js 0.5.4 → 0.5.6

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/README.md +6 -5
  2. package/dist/README.md +6 -5
  3. package/dist/product7-js.js +821 -816
  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 +37 -37
  16. package/src/styles/base.js +8 -8
  17. package/src/styles/{web-chat-components.js → live-chat-components.js} +114 -114
  18. package/src/styles/{web-chat-core.js → live-chat-core.js} +30 -30
  19. package/src/styles/{web-chat-features.js → live-chat-features.js} +20 -20
  20. package/src/styles/{web-chat-views.js → live-chat-views.js} +137 -137
  21. package/src/styles/live-chat.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/{WebChatWidget.js → LiveChatWidget.js} +166 -166
  25. package/src/widgets/WidgetFactory.js +2 -2
  26. package/src/widgets/{web-chat/WebChatState.js → live-chat/LiveChatState.js} +1 -1
  27. package/src/widgets/{web-chat/components/WebChatLauncher.js → live-chat/components/LiveChatLauncher.js} +15 -15
  28. package/src/widgets/{web-chat/components/WebChatPanel.js → live-chat/components/LiveChatPanel.js} +10 -10
  29. package/src/widgets/{web-chat → live-chat}/components/NavigationTabs.js +12 -12
  30. package/src/widgets/{web-chat → live-chat}/views/ChangelogView.js +16 -16
  31. package/src/widgets/{web-chat → live-chat}/views/ChatView.js +90 -90
  32. package/src/widgets/{web-chat → live-chat}/views/ConversationsView.js +23 -23
  33. package/src/widgets/{web-chat → live-chat}/views/HelpView.js +28 -28
  34. package/src/widgets/{web-chat → live-chat}/views/HomeView.js +52 -52
  35. package/src/widgets/{web-chat → live-chat}/views/PreChatFormView.js +16 -16
  36. package/types/index.d.ts +11 -9
  37. package/src/styles/web-chat.js +0 -17
package/src/styles/{web-chat-core.js → live-chat-core.js} RENAMED
@@ -1,21 +1,21 @@
1
- export const webChatCoreStyles = `
1
+ export const liveChatCoreStyles = `
2
2
 
3
- .web-chat-launcher {
3
+ .live-chat-launcher {
4
4
  position: fixed;
5
5
  z-index: var(--z-modal);
6
6
  }
7
7
 
8
- .web-chat-launcher-right {
8
+ .live-chat-launcher-right {
9
9
  bottom: var(--spacing-5);
10
10
  right: var(--spacing-5);
11
11
  }
12
12
 
13
- .web-chat-launcher-left {
13
+ .live-chat-launcher-left {
14
14
  bottom: var(--spacing-5);
15
15
  left: var(--spacing-5);
16
16
  }
17
17
 
18
- .web-chat-launcher-btn {
18
+ .live-chat-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
+ .live-chat-launcher-btn:hover {
35
35
  box-shadow: var(--shadow-xl);
36
36
  }
37
37
 
38
- .web-chat-launcher-btn:active {
38
+ .live-chat-launcher-btn:active {
39
39
  transform: translateY(1px);
40
40
  transition-duration: 100ms;
41
41
  }
42
42
 
43
- .web-chat-launcher-badge {
43
+ .live-chat-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
+ .live-chat-panel {
65
65
  position: fixed;
66
66
  z-index: var(--z-popover);
67
67
  width: 400px;
@@ -77,7 +77,7 @@
77
77
  visibility 0s linear 180ms;
78
78
  }
79
79
 
80
- .web-chat-panel.open {
80
+ .live-chat-panel.open {
81
81
  opacity: 1;
82
82
  visibility: visible;
83
83
  pointer-events: auto;
@@ -88,19 +88,19 @@
88
88
  visibility 0s linear 0s;
89
89
  }
90
90
 
91
- .web-chat-panel-right {
91
+ .live-chat-panel-right {
92
92
  bottom: 90px;
93
93
  right: var(--spacing-5);
94
94
  transform-origin: bottom right;
95
95
  }
96
96
 
97
- .web-chat-panel-left {
97
+ .live-chat-panel-left {
98
98
  bottom: 90px;
99
99
  left: var(--spacing-5);
100
100
  transform-origin: bottom left;
101
101
  }
102
102
 
103
- .web-chat-panel-content {
103
+ .live-chat-panel-content {
104
104
  background: var(--msg-bg);
105
105
  height: 100%;
106
106
  border-radius: var(--radius-2xl);
@@ -111,22 +111,22 @@
111
111
  border: 1px solid var(--msg-border);
112
112
  }
113
113
 
114
- .web-chat-panel-content *::-webkit-scrollbar {
114
+ .live-chat-panel-content *::-webkit-scrollbar {
115
115
  display: none;
116
116
  }
117
117
 
118
- .web-chat-panel-content * {
118
+ .live-chat-panel-content * {
119
119
  scrollbar-width: none;
120
120
  }
121
121
 
122
- .web-chat-panel-views {
122
+ .live-chat-panel-views {
123
123
  flex: 1;
124
124
  overflow: hidden;
125
125
  display: flex;
126
126
  flex-direction: column;
127
127
  }
128
128
 
129
- .web-chat-view {
129
+ .live-chat-view {
130
130
  height: 100%;
131
131
  display: flex;
132
132
  flex-direction: column;
@@ -134,36 +134,36 @@
134
134
  position: relative;
135
135
  }
136
136
 
137
- .web-chat-avatar-stack {
137
+ .live-chat-avatar-stack {
138
138
  display: flex;
139
139
  align-items: center;
140
140
  }
141
141
 
142
- .web-chat-avatar-stack .sdk-avatar {
142
+ .live-chat-avatar-stack .sdk-avatar {
143
143
  margin-left: -8px;
144
144
  }
145
145
 
146
- .web-chat-avatar-stack .sdk-avatar:first-child {
146
+ .live-chat-avatar-stack .sdk-avatar:first-child {
147
147
  margin-left: 0;
148
148
  }
149
149
 
150
- .web-chat-avatar-stack-tiny .sdk-avatar {
150
+ .live-chat-avatar-stack-tiny .sdk-avatar {
151
151
  margin-left: -6px;
152
152
  }
153
153
 
154
- .web-chat-avatar-stack-tiny .sdk-avatar:first-child {
154
+ .live-chat-avatar-stack-tiny .sdk-avatar:first-child {
155
155
  margin-left: 0;
156
156
  }
157
157
 
158
- .web-chat-mobile-close-btn {
158
+ .live-chat-mobile-close-btn {
159
159
  display: none;
160
160
  }
161
161
 
162
162
  @media (max-width: 480px) {
163
- .web-chat-mobile-close-btn {
163
+ .live-chat-mobile-close-btn {
164
164
  display: flex;
165
165
  }
166
- .web-chat-panel {
166
+ .live-chat-panel {
167
167
  width: 100%;
168
168
  height: 100%;
169
169
  max-height: 100%;
@@ -175,20 +175,20 @@
175
175
  transform: translateY(12px) scale(0.98);
176
176
  }
177
177
 
178
- .web-chat-panel.open {
178
+ .live-chat-panel.open {
179
179
  transform: translateY(0) scale(1);
180
180
  }
181
181
 
182
- .web-chat-panel-content {
182
+ .live-chat-panel-content {
183
183
  border-radius: 0;
184
184
  }
185
185
 
186
- .web-chat-launcher {
186
+ .live-chat-launcher {
187
187
  bottom: var(--spacing-4);
188
188
  right: var(--spacing-4);
189
189
  }
190
190
 
191
- .web-chat-launcher-left {
191
+ .live-chat-launcher-left {
192
192
  left: var(--spacing-4);
193
193
  }
194
194
  }
@@ -197,7 +197,7 @@
197
197
  DARK THEME — token overrides only
198
198
  ======================================== */
199
199
 
200
- .web-chat-widget.theme-dark {
200
+ .live-chat-widget.theme-dark {
201
201
  /* Web Chat semantic tokens */
202
202
  --msg-bg: #0f1317;
203
203
  --msg-bg-surface: #1a1e24;
package/src/styles/{web-chat-features.js → live-chat-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
+ .live-chat-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
+ .live-chat-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
+ .live-chat-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
+ .live-chat-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
+ .live-chat-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
+ .live-chat-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
+ .live-chat-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
+ .live-chat-email-card {
79
79
  width: 100%;
80
- animation: web-chat-slide-up 0.25s ease;
80
+ animation: live-chat-slide-up 0.25s ease;
81
81
  }
82
82
 
83
- .web-chat-email-actions {
83
+ .live-chat-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
+ .live-chat-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
+ .live-chat-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
+ .live-chat-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
+ .live-chat-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 live-chat-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 live-chat-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 live-chat-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
+ .live-chat-prechat-overlay {
163
163
  padding: var(--spacing-4);
164
164
  }
165
- .web-chat-prechat-card {
165
+ .live-chat-prechat-card {
166
166
  max-width: 100%;
167
167
  }
168
168
  }