@aktarulrahul/floater-chatbot 1.0.8 → 1.1.1
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.
- package/dist/components/ChatWidget.css +227 -203
- package/dist/components/ChatWidget.d.ts +2 -12
- package/dist/components/ChatWidget.d.ts.map +1 -1
- package/dist/components/SupportChatWidget.css +146 -197
- package/dist/index.css +373 -400
- package/dist/index.d.ts +24 -18
- package/dist/index.esm.js +45 -16
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +45 -16
- package/dist/index.js.map +1 -1
- package/dist/types/index.d.ts +13 -6
- package/dist/types/index.d.ts.map +1 -1
- package/dist/utils/api.d.ts +9 -0
- package/dist/utils/api.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -1,169 +1,242 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* NDC Platform Design Tokens - Matching UMS/TP */
|
|
3
|
+
--cw-primary: hsl(221.2, 83.2%, 53.3%);
|
|
4
|
+
--cw-primary-hover: hsl(221.2, 83.2%, 48%);
|
|
5
|
+
--cw-bg: hsl(210, 40%, 98%);
|
|
6
|
+
--cw-bg-secondary: hsl(210, 40%, 96.1%);
|
|
7
|
+
--cw-text: hsl(222.2, 84%, 4.9%);
|
|
8
|
+
--cw-text-secondary: hsl(215.4, 16.3%, 46.9%);
|
|
9
|
+
--cw-border: hsl(214.3, 31.8%, 91.4%);
|
|
10
|
+
--cw-shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
11
|
+
--cw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
12
|
+
--cw-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
13
|
+
--cw-radius-lg: 0.75rem;
|
|
14
|
+
--cw-radius-md: 0.625rem;
|
|
15
|
+
--cw-radius-sm: 0.5rem;
|
|
16
|
+
--cw-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
17
|
+
--cw-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
18
|
+
}
|
|
19
|
+
|
|
1
20
|
.chat-widget-container {
|
|
2
21
|
position: fixed;
|
|
3
22
|
z-index: 9999;
|
|
4
|
-
font-family: -
|
|
5
|
-
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
|
6
|
-
sans-serif;
|
|
23
|
+
font-family: var(--cw-font-family);
|
|
7
24
|
font-size: 14px;
|
|
25
|
+
line-height: 1.5;
|
|
8
26
|
}
|
|
9
27
|
|
|
10
28
|
/* Position variants */
|
|
11
|
-
.chat-widget-bottom-right {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.chat-widget-bottom-left {
|
|
17
|
-
bottom: 20px;
|
|
18
|
-
left: 20px;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.chat-widget-top-right {
|
|
22
|
-
top: 20px;
|
|
23
|
-
right: 20px;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.chat-widget-top-left {
|
|
27
|
-
top: 20px;
|
|
28
|
-
left: 20px;
|
|
29
|
-
}
|
|
29
|
+
.chat-widget-bottom-right { bottom: 24px; right: 24px; }
|
|
30
|
+
.chat-widget-bottom-left { bottom: 24px; left: 24px; }
|
|
31
|
+
.chat-widget-top-right { top: 24px; right: 24px; }
|
|
32
|
+
.chat-widget-top-left { top: 24px; left: 24px; }
|
|
30
33
|
|
|
31
34
|
/* Chat Button */
|
|
32
35
|
.chat-widget-button {
|
|
33
|
-
width:
|
|
34
|
-
height:
|
|
36
|
+
width: 64px;
|
|
37
|
+
height: 64px;
|
|
35
38
|
border-radius: 50%;
|
|
36
39
|
border: none;
|
|
37
40
|
color: white;
|
|
38
41
|
cursor: pointer;
|
|
39
|
-
box-shadow:
|
|
42
|
+
box-shadow: var(--cw-shadow-md);
|
|
40
43
|
display: flex;
|
|
41
44
|
align-items: center;
|
|
42
45
|
justify-content: center;
|
|
43
|
-
transition:
|
|
46
|
+
transition: var(--cw-transition);
|
|
47
|
+
background: var(--cw-primary);
|
|
48
|
+
position: relative;
|
|
49
|
+
overflow: hidden;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.chat-widget-button::after {
|
|
53
|
+
content: '';
|
|
54
|
+
position: absolute;
|
|
55
|
+
top: 0;
|
|
56
|
+
left: 0;
|
|
57
|
+
right: 0;
|
|
58
|
+
bottom: 0;
|
|
59
|
+
background: linear-gradient(rgba(255,255,255,0.2), transparent);
|
|
60
|
+
opacity: 0;
|
|
61
|
+
transition: opacity 0.2s;
|
|
44
62
|
}
|
|
45
63
|
|
|
46
64
|
.chat-widget-button:hover {
|
|
47
|
-
transform: scale(1.05);
|
|
48
|
-
box-shadow:
|
|
65
|
+
transform: translateY(-4px) scale(1.05);
|
|
66
|
+
box-shadow: var(--cw-shadow-lg);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.chat-widget-button:hover::after {
|
|
70
|
+
opacity: 1;
|
|
49
71
|
}
|
|
50
72
|
|
|
51
73
|
.chat-widget-button:active {
|
|
52
|
-
transform: scale(0.95);
|
|
74
|
+
transform: translateY(0) scale(0.95);
|
|
53
75
|
}
|
|
54
76
|
|
|
55
77
|
/* Chat Window */
|
|
56
78
|
.chat-widget-window {
|
|
57
79
|
width: 380px;
|
|
58
|
-
height:
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
80
|
+
height: 650px;
|
|
81
|
+
max-height: calc(100vh - 100px);
|
|
82
|
+
background: rgba(255, 255, 255, 0.95);
|
|
83
|
+
backdrop-filter: blur(16px);
|
|
84
|
+
-webkit-backdrop-filter: blur(16px);
|
|
85
|
+
border-radius: var(--cw-radius-lg);
|
|
86
|
+
box-shadow: var(--cw-shadow-lg);
|
|
62
87
|
display: flex;
|
|
63
88
|
flex-direction: column;
|
|
64
89
|
overflow: hidden;
|
|
65
|
-
|
|
90
|
+
border: 1px solid var(--cw-border);
|
|
91
|
+
animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
92
|
+
transform-origin: bottom right;
|
|
66
93
|
}
|
|
67
94
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
transform: translateY(0);
|
|
76
|
-
}
|
|
95
|
+
.chat-widget-bottom-left .chat-widget-window { transform-origin: bottom left; }
|
|
96
|
+
.chat-widget-top-right .chat-widget-window { transform-origin: top right; }
|
|
97
|
+
.chat-widget-top-left .chat-widget-window { transform-origin: top left; }
|
|
98
|
+
|
|
99
|
+
@keyframes slideIn {
|
|
100
|
+
from { opacity: 0; transform: scale(0.9) translateY(20px); }
|
|
101
|
+
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
77
102
|
}
|
|
78
103
|
|
|
79
104
|
/* Header */
|
|
80
105
|
.chat-widget-header {
|
|
81
|
-
padding:
|
|
106
|
+
padding: 20px;
|
|
107
|
+
background: var(--cw-primary);
|
|
82
108
|
color: white;
|
|
83
109
|
display: flex;
|
|
84
110
|
align-items: center;
|
|
85
111
|
justify-content: space-between;
|
|
86
112
|
flex-shrink: 0;
|
|
113
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
87
114
|
}
|
|
88
115
|
|
|
89
116
|
.chat-widget-header-content {
|
|
90
117
|
display: flex;
|
|
91
118
|
align-items: center;
|
|
92
|
-
gap:
|
|
119
|
+
gap: 16px;
|
|
93
120
|
flex: 1;
|
|
94
121
|
}
|
|
95
122
|
|
|
123
|
+
.chat-widget-avatar-container {
|
|
124
|
+
position: relative;
|
|
125
|
+
}
|
|
126
|
+
|
|
96
127
|
.chat-widget-avatar {
|
|
97
|
-
width:
|
|
98
|
-
height:
|
|
128
|
+
width: 44px;
|
|
129
|
+
height: 44px;
|
|
99
130
|
border-radius: 50%;
|
|
100
131
|
object-fit: cover;
|
|
132
|
+
border: 2px solid rgba(255, 255, 255, 0.8);
|
|
133
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.chat-widget-status-dot {
|
|
137
|
+
position: absolute;
|
|
138
|
+
bottom: 2px;
|
|
139
|
+
right: 2px;
|
|
140
|
+
width: 10px;
|
|
141
|
+
height: 10px;
|
|
142
|
+
background: #10b981;
|
|
143
|
+
border: 2px solid white;
|
|
144
|
+
border-radius: 50%;
|
|
101
145
|
}
|
|
102
146
|
|
|
103
147
|
.chat-widget-header-text {
|
|
104
148
|
flex: 1;
|
|
149
|
+
display: flex;
|
|
150
|
+
flex-direction: column;
|
|
151
|
+
gap: 2px;
|
|
105
152
|
}
|
|
106
153
|
|
|
107
154
|
.chat-widget-title {
|
|
108
155
|
font-weight: 600;
|
|
109
156
|
font-size: 16px;
|
|
110
|
-
|
|
157
|
+
letter-spacing: -0.01em;
|
|
111
158
|
}
|
|
112
159
|
|
|
113
160
|
.chat-widget-subtitle {
|
|
114
|
-
font-size:
|
|
161
|
+
font-size: 13px;
|
|
115
162
|
opacity: 0.9;
|
|
163
|
+
font-weight: 400;
|
|
116
164
|
}
|
|
117
165
|
|
|
118
166
|
.chat-widget-close {
|
|
119
|
-
background: rgba(255, 255, 255, 0.
|
|
167
|
+
background: rgba(255, 255, 255, 0.15);
|
|
120
168
|
border: none;
|
|
121
169
|
color: white;
|
|
122
|
-
width:
|
|
123
|
-
height:
|
|
170
|
+
width: 36px;
|
|
171
|
+
height: 36px;
|
|
124
172
|
border-radius: 50%;
|
|
125
173
|
cursor: pointer;
|
|
126
174
|
display: flex;
|
|
127
175
|
align-items: center;
|
|
128
176
|
justify-content: center;
|
|
129
|
-
transition:
|
|
177
|
+
transition: all 0.2s;
|
|
178
|
+
backdrop-filter: blur(4px);
|
|
130
179
|
}
|
|
131
180
|
|
|
132
181
|
.chat-widget-close:hover {
|
|
133
182
|
background: rgba(255, 255, 255, 0.3);
|
|
183
|
+
transform: rotate(90deg);
|
|
134
184
|
}
|
|
135
185
|
|
|
136
186
|
/* Messages */
|
|
137
187
|
.chat-widget-messages {
|
|
138
188
|
flex: 1;
|
|
139
189
|
overflow-y: auto;
|
|
140
|
-
padding:
|
|
190
|
+
padding: 24px;
|
|
141
191
|
display: flex;
|
|
142
192
|
flex-direction: column;
|
|
143
|
-
gap:
|
|
144
|
-
background:
|
|
193
|
+
gap: 16px;
|
|
194
|
+
background: var(--cw-bg-secondary);
|
|
195
|
+
scroll-behavior: smooth;
|
|
145
196
|
}
|
|
146
197
|
|
|
147
198
|
.chat-widget-empty {
|
|
148
199
|
display: flex;
|
|
200
|
+
flex-direction: column;
|
|
149
201
|
align-items: center;
|
|
150
202
|
justify-content: center;
|
|
151
203
|
height: 100%;
|
|
152
|
-
color:
|
|
204
|
+
color: var(--cw-text-secondary);
|
|
153
205
|
text-align: center;
|
|
206
|
+
gap: 16px;
|
|
207
|
+
opacity: 0;
|
|
208
|
+
animation: fadeIn 0.5s ease-out 0.2s forwards;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.chat-widget-empty-icon {
|
|
212
|
+
width: 64px;
|
|
213
|
+
height: 64px;
|
|
214
|
+
background: hsl(221.2 83.2% 53.3% / 0.1);
|
|
215
|
+
border-radius: 50%;
|
|
216
|
+
display: flex;
|
|
217
|
+
align-items: center;
|
|
218
|
+
justify-content: center;
|
|
219
|
+
color: var(--cw-primary);
|
|
220
|
+
margin-bottom: 8px;
|
|
154
221
|
}
|
|
155
222
|
|
|
156
223
|
.chat-widget-message {
|
|
157
224
|
display: flex;
|
|
158
|
-
gap:
|
|
159
|
-
align-items: flex-
|
|
160
|
-
max-width:
|
|
225
|
+
gap: 12px;
|
|
226
|
+
align-items: flex-end;
|
|
227
|
+
max-width: 85%;
|
|
228
|
+
opacity: 0;
|
|
229
|
+
animation: messageSlideIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
@keyframes messageSlideIn {
|
|
233
|
+
from { opacity: 0; transform: translateY(10px); }
|
|
234
|
+
to { opacity: 1; transform: translateY(0); }
|
|
161
235
|
}
|
|
162
236
|
|
|
163
237
|
.chat-widget-message-user {
|
|
164
238
|
align-self: flex-end;
|
|
165
239
|
flex-direction: row-reverse;
|
|
166
|
-
margin-left: auto;
|
|
167
240
|
}
|
|
168
241
|
|
|
169
242
|
.chat-widget-message-bot {
|
|
@@ -176,6 +249,8 @@
|
|
|
176
249
|
border-radius: 50%;
|
|
177
250
|
object-fit: cover;
|
|
178
251
|
flex-shrink: 0;
|
|
252
|
+
box-shadow: var(--cw-shadow-sm);
|
|
253
|
+
border: 2px solid white;
|
|
179
254
|
}
|
|
180
255
|
|
|
181
256
|
.chat-widget-message-content {
|
|
@@ -188,185 +263,116 @@
|
|
|
188
263
|
align-items: flex-end;
|
|
189
264
|
}
|
|
190
265
|
|
|
191
|
-
.chat-widget-message-bot .chat-widget-message-content {
|
|
192
|
-
align-items: flex-start;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
266
|
.chat-widget-message-text {
|
|
196
|
-
padding:
|
|
267
|
+
padding: 12px 18px;
|
|
197
268
|
border-radius: 18px;
|
|
269
|
+
font-size: 14px;
|
|
270
|
+
line-height: 1.5;
|
|
271
|
+
position: relative;
|
|
272
|
+
box-shadow: var(--cw-shadow-sm);
|
|
198
273
|
word-wrap: break-word;
|
|
199
|
-
line-height: 1.4;
|
|
200
|
-
white-space: pre-wrap;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
.chat-widget-message-text strong {
|
|
204
|
-
font-weight: 600;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
.chat-widget-message-text em {
|
|
208
|
-
font-style: italic;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
.chat-widget-message-text code {
|
|
212
|
-
background: rgba(0, 0, 0, 0.05);
|
|
213
|
-
padding: 2px 6px;
|
|
214
|
-
border-radius: 4px;
|
|
215
|
-
font-family: "Courier New", monospace;
|
|
216
|
-
font-size: 0.9em;
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.chat-widget-message-bot .chat-widget-message-text code {
|
|
220
|
-
background: rgba(0, 0, 0, 0.08);
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.chat-widget-message-user .chat-widget-message-text code {
|
|
224
|
-
background: rgba(255, 255, 255, 0.2);
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
.chat-widget-list-item {
|
|
228
|
-
margin: 4px 0;
|
|
229
|
-
padding-left: 8px;
|
|
230
274
|
}
|
|
231
275
|
|
|
232
276
|
.chat-widget-message-user .chat-widget-message-text {
|
|
233
|
-
background:
|
|
277
|
+
background: var(--cw-primary);
|
|
234
278
|
color: white;
|
|
235
279
|
border-bottom-right-radius: 4px;
|
|
236
280
|
}
|
|
237
281
|
|
|
238
282
|
.chat-widget-message-bot .chat-widget-message-text {
|
|
239
283
|
background: white;
|
|
240
|
-
color:
|
|
284
|
+
color: var(--cw-text);
|
|
241
285
|
border-bottom-left-radius: 4px;
|
|
242
|
-
|
|
286
|
+
border: 1px solid var(--cw-border);
|
|
243
287
|
}
|
|
244
288
|
|
|
245
289
|
.chat-widget-message-time {
|
|
246
290
|
font-size: 11px;
|
|
247
|
-
color:
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
/* References */
|
|
252
|
-
.chat-widget-references {
|
|
253
|
-
margin-top: 8px;
|
|
254
|
-
padding: 8px 12px;
|
|
255
|
-
background: #f8f9fa;
|
|
256
|
-
border-radius: 8px;
|
|
257
|
-
border-left: 3px solid #007bff;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
.chat-widget-references-title {
|
|
261
|
-
font-size: 11px;
|
|
262
|
-
font-weight: 600;
|
|
263
|
-
color: #6c757d;
|
|
264
|
-
margin-bottom: 6px;
|
|
265
|
-
text-transform: uppercase;
|
|
266
|
-
letter-spacing: 0.5px;
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
.chat-widget-references-list {
|
|
270
|
-
display: flex;
|
|
271
|
-
flex-direction: column;
|
|
272
|
-
gap: 4px;
|
|
291
|
+
color: var(--cw-text-secondary);
|
|
292
|
+
margin: 0 4px;
|
|
293
|
+
opacity: 0.8;
|
|
273
294
|
}
|
|
274
295
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
font-
|
|
280
|
-
|
|
281
|
-
padding:
|
|
296
|
+
/* Typography in messages */
|
|
297
|
+
.chat-widget-message-text strong { font-weight: 600; }
|
|
298
|
+
.chat-widget-message-text em { font-style: italic; }
|
|
299
|
+
.chat-widget-message-text code {
|
|
300
|
+
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
301
|
+
font-size: 0.9em;
|
|
302
|
+
padding: 2px 6px;
|
|
303
|
+
border-radius: 4px;
|
|
282
304
|
}
|
|
283
305
|
|
|
284
|
-
.chat-widget-
|
|
285
|
-
|
|
286
|
-
color: #
|
|
287
|
-
flex: 1;
|
|
288
|
-
overflow: hidden;
|
|
289
|
-
text-overflow: ellipsis;
|
|
290
|
-
white-space: nowrap;
|
|
291
|
-
margin-right: 8px;
|
|
306
|
+
.chat-widget-message-bot .chat-widget-message-text code {
|
|
307
|
+
background: hsl(214.3, 31.8%, 91.4%);
|
|
308
|
+
color: #dc2626;
|
|
292
309
|
}
|
|
293
310
|
|
|
294
|
-
.chat-widget-
|
|
295
|
-
|
|
296
|
-
color:
|
|
297
|
-
white-space: nowrap;
|
|
311
|
+
.chat-widget-message-user .chat-widget-message-text code {
|
|
312
|
+
background: rgba(255,255,255,0.2);
|
|
313
|
+
color: white;
|
|
298
314
|
}
|
|
299
315
|
|
|
316
|
+
/* Typing Indicator */
|
|
300
317
|
.chat-widget-typing {
|
|
301
318
|
display: flex;
|
|
302
|
-
gap:
|
|
303
|
-
padding:
|
|
319
|
+
gap: 6px;
|
|
320
|
+
padding: 16px 20px;
|
|
304
321
|
background: white;
|
|
305
322
|
border-radius: 18px;
|
|
306
323
|
border-bottom-left-radius: 4px;
|
|
324
|
+
box-shadow: var(--cw-shadow-sm);
|
|
325
|
+
border: 1px solid var(--cw-border);
|
|
326
|
+
width: fit-content;
|
|
307
327
|
}
|
|
308
328
|
|
|
309
329
|
.chat-widget-typing span {
|
|
310
330
|
width: 8px;
|
|
311
331
|
height: 8px;
|
|
312
332
|
border-radius: 50%;
|
|
313
|
-
background: #
|
|
314
|
-
animation:
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
.chat-widget-typing span:nth-child(2) {
|
|
318
|
-
animation-delay: 0.2s;
|
|
333
|
+
background: #94a3b8;
|
|
334
|
+
animation: typingBounce 1.4s infinite ease-in-out both;
|
|
319
335
|
}
|
|
320
336
|
|
|
321
|
-
.chat-widget-typing span:nth-child(
|
|
322
|
-
|
|
323
|
-
}
|
|
337
|
+
.chat-widget-typing span:nth-child(1) { animation-delay: -0.32s; }
|
|
338
|
+
.chat-widget-typing span:nth-child(2) { animation-delay: -0.16s; }
|
|
324
339
|
|
|
325
|
-
@keyframes
|
|
326
|
-
0%,
|
|
327
|
-
|
|
328
|
-
100% {
|
|
329
|
-
transform: translateY(0);
|
|
330
|
-
opacity: 0.7;
|
|
331
|
-
}
|
|
332
|
-
30% {
|
|
333
|
-
transform: translateY(-10px);
|
|
334
|
-
opacity: 1;
|
|
335
|
-
}
|
|
340
|
+
@keyframes typingBounce {
|
|
341
|
+
0%, 80%, 100% { transform: scale(0); }
|
|
342
|
+
40% { transform: scale(1); }
|
|
336
343
|
}
|
|
337
344
|
|
|
338
|
-
/* Input */
|
|
345
|
+
/* Input Area */
|
|
339
346
|
.chat-widget-input-container {
|
|
340
|
-
padding: 16px;
|
|
347
|
+
padding: 16px 20px;
|
|
341
348
|
background: white;
|
|
342
|
-
border-top: 1px solid
|
|
349
|
+
border-top: 1px solid var(--cw-border);
|
|
343
350
|
display: flex;
|
|
344
|
-
gap:
|
|
351
|
+
gap: 12px;
|
|
352
|
+
align-items: center;
|
|
345
353
|
flex-shrink: 0;
|
|
346
354
|
}
|
|
347
355
|
|
|
348
356
|
.chat-widget-input {
|
|
349
357
|
flex: 1;
|
|
350
|
-
padding:
|
|
351
|
-
border:
|
|
352
|
-
border-radius:
|
|
358
|
+
padding: 12px 16px;
|
|
359
|
+
border: 2px solid var(--cw-border);
|
|
360
|
+
border-radius: 24px;
|
|
353
361
|
outline: none;
|
|
354
362
|
font-size: 14px;
|
|
355
|
-
transition:
|
|
363
|
+
transition: all 0.2s;
|
|
364
|
+
background: var(--cw-bg-secondary);
|
|
356
365
|
}
|
|
357
366
|
|
|
358
367
|
.chat-widget-input:focus {
|
|
359
|
-
border-color:
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
.chat-widget-input:disabled {
|
|
363
|
-
background: #f8f9fa;
|
|
364
|
-
cursor: not-allowed;
|
|
368
|
+
border-color: var(--cw-primary);
|
|
369
|
+
background: white;
|
|
370
|
+
box-shadow: 0 0 0 4px hsl(221.2 83.2% 53.3% / 0.1);
|
|
365
371
|
}
|
|
366
372
|
|
|
367
373
|
.chat-widget-send {
|
|
368
|
-
width:
|
|
369
|
-
height:
|
|
374
|
+
width: 48px;
|
|
375
|
+
height: 48px;
|
|
370
376
|
border-radius: 50%;
|
|
371
377
|
border: none;
|
|
372
378
|
color: white;
|
|
@@ -374,42 +380,60 @@
|
|
|
374
380
|
display: flex;
|
|
375
381
|
align-items: center;
|
|
376
382
|
justify-content: center;
|
|
377
|
-
transition:
|
|
383
|
+
transition: all 0.2s;
|
|
384
|
+
background: var(--cw-primary);
|
|
385
|
+
box-shadow: var(--cw-shadow-sm);
|
|
378
386
|
flex-shrink: 0;
|
|
379
387
|
}
|
|
380
388
|
|
|
381
389
|
.chat-widget-send:hover:not(:disabled) {
|
|
382
|
-
transform: scale(1.
|
|
390
|
+
transform: scale(1.1);
|
|
391
|
+
background: var(--cw-primary-hover);
|
|
392
|
+
box-shadow: var(--cw-shadow-md);
|
|
383
393
|
}
|
|
384
394
|
|
|
385
395
|
.chat-widget-send:disabled {
|
|
386
|
-
|
|
396
|
+
background: #e2e8f0;
|
|
397
|
+
color: #94a3b8;
|
|
387
398
|
cursor: not-allowed;
|
|
399
|
+
box-shadow: none;
|
|
388
400
|
}
|
|
389
401
|
|
|
390
402
|
/* Scrollbar */
|
|
391
|
-
.chat-widget-messages::-webkit-scrollbar {
|
|
392
|
-
|
|
393
|
-
}
|
|
394
|
-
|
|
395
|
-
.chat-widget-messages::-webkit-scrollbar-track {
|
|
396
|
-
background: transparent;
|
|
397
|
-
}
|
|
398
|
-
|
|
403
|
+
.chat-widget-messages::-webkit-scrollbar { width: 6px; }
|
|
404
|
+
.chat-widget-messages::-webkit-scrollbar-track { background: transparent; }
|
|
399
405
|
.chat-widget-messages::-webkit-scrollbar-thumb {
|
|
400
|
-
background:
|
|
406
|
+
background: hsl(214.3, 31.8%, 91.4%);
|
|
401
407
|
border-radius: 3px;
|
|
402
408
|
}
|
|
409
|
+
.chat-widget-messages::-webkit-scrollbar-thumb:hover { background: hsl(214.3, 31.8%, 80%); }
|
|
403
410
|
|
|
404
|
-
|
|
405
|
-
background: #adb5bd;
|
|
406
|
-
}
|
|
407
|
-
|
|
408
|
-
/* Responsive */
|
|
411
|
+
/* Mobile Responsive */
|
|
409
412
|
@media (max-width: 480px) {
|
|
410
413
|
.chat-widget-window {
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
+
position: fixed;
|
|
415
|
+
top: 0;
|
|
416
|
+
left: 0;
|
|
417
|
+
right: 0;
|
|
418
|
+
bottom: 0;
|
|
419
|
+
width: 100%;
|
|
420
|
+
height: 100%;
|
|
421
|
+
max-height: 100vh;
|
|
422
|
+
border-radius: 0;
|
|
423
|
+
transform: none !important;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.chat-widget-bottom-right, .chat-widget-bottom-left,
|
|
427
|
+
.chat-widget-top-right, .chat-widget-top-left {
|
|
428
|
+
bottom: 0;
|
|
429
|
+
right: 0;
|
|
430
|
+
left: 0;
|
|
431
|
+
top: 0;
|
|
432
|
+
z-index: 10000;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
.chat-widget-close {
|
|
436
|
+
width: 40px;
|
|
437
|
+
height: 40px;
|
|
414
438
|
}
|
|
415
439
|
}
|
|
@@ -2,18 +2,8 @@ import React from "react";
|
|
|
2
2
|
import { ChatWidgetConfig } from "../types";
|
|
3
3
|
import "./ChatWidget.css";
|
|
4
4
|
interface ChatWidgetProps {
|
|
5
|
-
/**
|
|
6
|
-
|
|
7
|
-
/** Session ID for maintaining conversation context */
|
|
8
|
-
sessionId: string;
|
|
9
|
-
/** User access token for authentication (optional) */
|
|
10
|
-
accessToken?: string;
|
|
11
|
-
/** Workspace ID */
|
|
12
|
-
workspaceId: string;
|
|
13
|
-
/** n8n webhook endpoint URL */
|
|
14
|
-
webhookUrl: string;
|
|
15
|
-
/** Optional configuration object (for backward compatibility) */
|
|
16
|
-
config?: Partial<Omit<ChatWidgetConfig, "apiKey" | "sessionId" | "accessToken" | "workspaceId" | "webhookUrl">>;
|
|
5
|
+
/** Chat widget configuration - only webhookUrl and apiKey are required */
|
|
6
|
+
config: ChatWidgetConfig;
|
|
17
7
|
}
|
|
18
8
|
export declare const ChatWidget: React.FC<ChatWidgetProps>;
|
|
19
9
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../../src/components/ChatWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAe,MAAM,UAAU,CAAC;AAEzD,OAAO,kBAAkB,CAAC;AAE1B,UAAU,eAAe;IACvB,
|
|
1
|
+
{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../../src/components/ChatWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAe,MAAM,UAAU,CAAC;AAEzD,OAAO,kBAAkB,CAAC;AAE1B,UAAU,eAAe;IACvB,0EAA0E;IAC1E,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4ShD,CAAC"}
|