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