floating-copilot-widget 1.0.1 → 1.1.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.
- package/dist/FloatingCopilot.css +177 -47
- package/dist/FloatingCopilot.js +2 -2
- package/dist/index.esm.js +2 -2
- package/dist/index.js +2 -2
- package/package.json +1 -1
package/dist/FloatingCopilot.css
CHANGED
|
@@ -1,10 +1,18 @@
|
|
|
1
|
-
/* Floating Copilot Widget Styles */
|
|
1
|
+
/* Modern Floating Copilot Widget Styles */
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5
|
+
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6
|
+
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
|
|
7
|
+
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
|
|
8
|
+
--shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.18);
|
|
9
|
+
}
|
|
2
10
|
|
|
3
11
|
.floating-copilot {
|
|
4
12
|
display: flex;
|
|
5
13
|
flex-direction: column;
|
|
6
|
-
border-radius:
|
|
7
|
-
box-shadow:
|
|
14
|
+
border-radius: 16px;
|
|
15
|
+
box-shadow: var(--shadow-xl);
|
|
8
16
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
9
17
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
10
18
|
sans-serif;
|
|
@@ -12,16 +20,23 @@
|
|
|
12
20
|
color: var(--text-color, #1f2937);
|
|
13
21
|
border: 1px solid var(--border-color, #e5e7eb);
|
|
14
22
|
overflow: hidden;
|
|
15
|
-
transition:
|
|
23
|
+
transition: var(--transition-smooth);
|
|
24
|
+
backdrop-filter: blur(10px);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.floating-copilot:hover {
|
|
28
|
+
box-shadow: var(--shadow-xl);
|
|
16
29
|
}
|
|
17
30
|
|
|
18
31
|
.floating-copilot.maximized {
|
|
19
32
|
border-radius: 0;
|
|
33
|
+
box-shadow: none;
|
|
20
34
|
}
|
|
21
35
|
|
|
22
36
|
.floating-copilot.minimized {
|
|
23
37
|
height: auto !important;
|
|
24
38
|
width: auto !important;
|
|
39
|
+
box-shadow: var(--shadow-md);
|
|
25
40
|
}
|
|
26
41
|
|
|
27
42
|
/* Header */
|
|
@@ -29,13 +44,20 @@
|
|
|
29
44
|
display: flex;
|
|
30
45
|
justify-content: space-between;
|
|
31
46
|
align-items: center;
|
|
32
|
-
padding:
|
|
33
|
-
background: linear-gradient(135deg, var(--primary-color, #6366f1) 0%,
|
|
47
|
+
padding: 16px 20px;
|
|
48
|
+
background: linear-gradient(135deg, var(--primary-color, #6366f1) 0%,
|
|
49
|
+
rgba(var(--primary-color, 99, 102, 241), 0.8) 100%);
|
|
34
50
|
color: white;
|
|
35
|
-
border-bottom: 1px solid
|
|
51
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
36
52
|
user-select: none;
|
|
37
53
|
cursor: grab;
|
|
38
|
-
transition:
|
|
54
|
+
transition: var(--transition-smooth);
|
|
55
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.copilot-header:hover {
|
|
59
|
+
background: linear-gradient(135deg, var(--primary-color, #6366f1) 0%,
|
|
60
|
+
rgba(var(--primary-color, 99, 102, 241), 0.9) 100%);
|
|
39
61
|
}
|
|
40
62
|
|
|
41
63
|
.copilot-header:active {
|
|
@@ -47,6 +69,7 @@
|
|
|
47
69
|
font-size: 16px;
|
|
48
70
|
font-weight: 600;
|
|
49
71
|
flex: 1;
|
|
72
|
+
letter-spacing: 0.3px;
|
|
50
73
|
}
|
|
51
74
|
|
|
52
75
|
.copilot-buttons {
|
|
@@ -58,24 +81,29 @@
|
|
|
58
81
|
background: rgba(255, 255, 255, 0.2);
|
|
59
82
|
border: none;
|
|
60
83
|
color: white;
|
|
61
|
-
width:
|
|
62
|
-
height:
|
|
63
|
-
border-radius:
|
|
84
|
+
width: 32px;
|
|
85
|
+
height: 32px;
|
|
86
|
+
border-radius: 8px;
|
|
64
87
|
cursor: pointer;
|
|
65
|
-
font-size:
|
|
88
|
+
font-size: 13px;
|
|
66
89
|
display: flex;
|
|
67
90
|
align-items: center;
|
|
68
91
|
justify-content: center;
|
|
69
|
-
transition:
|
|
92
|
+
transition: var(--transition-smooth);
|
|
93
|
+
backdrop-filter: blur(10px);
|
|
94
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
70
95
|
}
|
|
71
96
|
|
|
72
97
|
.copilot-btn:hover {
|
|
73
98
|
background: rgba(255, 255, 255, 0.3);
|
|
74
|
-
|
|
99
|
+
border-color: rgba(255, 255, 255, 0.3);
|
|
100
|
+
transform: translateY(-2px);
|
|
101
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
75
102
|
}
|
|
76
103
|
|
|
77
104
|
.copilot-btn:active {
|
|
78
|
-
transform:
|
|
105
|
+
transform: translateY(0);
|
|
106
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
79
107
|
}
|
|
80
108
|
|
|
81
109
|
/* Messages Container */
|
|
@@ -86,7 +114,8 @@
|
|
|
86
114
|
display: flex;
|
|
87
115
|
flex-direction: column;
|
|
88
116
|
gap: 12px;
|
|
89
|
-
background: var(--bg-color, #ffffff)
|
|
117
|
+
background: linear-gradient(to bottom, var(--bg-color, #ffffff) 0%,
|
|
118
|
+
rgba(var(--primary-color, 99, 102, 241), 0.02) 100%);
|
|
90
119
|
}
|
|
91
120
|
|
|
92
121
|
.copilot-empty-state {
|
|
@@ -97,6 +126,14 @@
|
|
|
97
126
|
color: #9ca3af;
|
|
98
127
|
text-align: center;
|
|
99
128
|
font-size: 14px;
|
|
129
|
+
flex-direction: column;
|
|
130
|
+
gap: 12px;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.copilot-empty-state::before {
|
|
134
|
+
content: '💬';
|
|
135
|
+
font-size: 32px;
|
|
136
|
+
opacity: 0.5;
|
|
100
137
|
}
|
|
101
138
|
|
|
102
139
|
/* Message Styles */
|
|
@@ -104,17 +141,17 @@
|
|
|
104
141
|
display: flex;
|
|
105
142
|
flex-direction: column;
|
|
106
143
|
gap: 4px;
|
|
107
|
-
animation: slideIn 0.
|
|
144
|
+
animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
108
145
|
}
|
|
109
146
|
|
|
110
147
|
@keyframes slideIn {
|
|
111
148
|
from {
|
|
112
149
|
opacity: 0;
|
|
113
|
-
transform: translateY(
|
|
150
|
+
transform: translateY(12px) scale(0.95);
|
|
114
151
|
}
|
|
115
152
|
to {
|
|
116
153
|
opacity: 1;
|
|
117
|
-
transform: translateY(0);
|
|
154
|
+
transform: translateY(0) scale(1);
|
|
118
155
|
}
|
|
119
156
|
}
|
|
120
157
|
|
|
@@ -127,24 +164,29 @@
|
|
|
127
164
|
}
|
|
128
165
|
|
|
129
166
|
.copilot-message-content {
|
|
130
|
-
padding:
|
|
131
|
-
border-radius:
|
|
167
|
+
padding: 12px 16px;
|
|
168
|
+
border-radius: 12px;
|
|
132
169
|
max-width: 85%;
|
|
133
170
|
word-wrap: break-word;
|
|
134
|
-
line-height: 1.
|
|
171
|
+
line-height: 1.5;
|
|
135
172
|
font-size: 14px;
|
|
173
|
+
font-weight: 500;
|
|
174
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
136
175
|
}
|
|
137
176
|
|
|
138
177
|
.copilot-message-user .copilot-message-content {
|
|
139
|
-
background: var(--primary-color, #6366f1)
|
|
178
|
+
background: linear-gradient(135deg, var(--primary-color, #6366f1) 0%,
|
|
179
|
+
rgba(var(--primary-color, 99, 102, 241), 0.9) 100%);
|
|
140
180
|
color: white;
|
|
141
181
|
border-radius: 16px 4px 16px 16px;
|
|
182
|
+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
|
|
142
183
|
}
|
|
143
184
|
|
|
144
185
|
.copilot-message-bot .copilot-message-content {
|
|
145
186
|
background: #f3f4f6;
|
|
146
187
|
color: var(--text-color, #1f2937);
|
|
147
188
|
border-radius: 4px 16px 16px 16px;
|
|
189
|
+
border: 1px solid #e5e7eb;
|
|
148
190
|
}
|
|
149
191
|
|
|
150
192
|
.copilot-message-time {
|
|
@@ -156,29 +198,33 @@
|
|
|
156
198
|
/* Input Area */
|
|
157
199
|
.copilot-input-area {
|
|
158
200
|
display: flex;
|
|
159
|
-
gap:
|
|
160
|
-
padding:
|
|
201
|
+
gap: 10px;
|
|
202
|
+
padding: 14px 16px;
|
|
161
203
|
border-top: 1px solid var(--border-color, #e5e7eb);
|
|
162
|
-
background: var(--
|
|
204
|
+
background: linear-gradient(to top, rgba(var(--primary-color, 99, 102, 241), 0.02),
|
|
205
|
+
var(--bg-color, #ffffff));
|
|
206
|
+
backdrop-filter: blur(10px);
|
|
163
207
|
}
|
|
164
208
|
|
|
165
209
|
.copilot-input {
|
|
166
210
|
flex: 1;
|
|
167
|
-
padding:
|
|
168
|
-
border:
|
|
169
|
-
border-radius:
|
|
211
|
+
padding: 11px 14px;
|
|
212
|
+
border: 1.5px solid var(--border-color, #e5e7eb);
|
|
213
|
+
border-radius: 10px;
|
|
170
214
|
font-size: 14px;
|
|
171
215
|
font-family: inherit;
|
|
172
216
|
color: var(--text-color, #1f2937);
|
|
173
|
-
background:
|
|
174
|
-
transition:
|
|
217
|
+
background: white;
|
|
218
|
+
transition: var(--transition-smooth);
|
|
219
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
175
220
|
}
|
|
176
221
|
|
|
177
222
|
.copilot-input:focus {
|
|
178
223
|
outline: none;
|
|
179
224
|
border-color: var(--primary-color, #6366f1);
|
|
180
225
|
background: white;
|
|
181
|
-
box-shadow: 0 0 0
|
|
226
|
+
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), 0 4px 12px rgba(99, 102, 241, 0.2);
|
|
227
|
+
transform: translateY(-1px);
|
|
182
228
|
}
|
|
183
229
|
|
|
184
230
|
.copilot-input::placeholder {
|
|
@@ -186,25 +232,37 @@
|
|
|
186
232
|
}
|
|
187
233
|
|
|
188
234
|
.copilot-send-btn {
|
|
189
|
-
padding:
|
|
190
|
-
background: var(--primary-color, #6366f1)
|
|
235
|
+
padding: 11px 20px;
|
|
236
|
+
background: linear-gradient(135deg, var(--primary-color, #6366f1) 0%,
|
|
237
|
+
rgba(var(--primary-color, 99, 102, 241), 0.8) 100%);
|
|
191
238
|
color: white;
|
|
192
239
|
border: none;
|
|
193
|
-
border-radius:
|
|
240
|
+
border-radius: 10px;
|
|
194
241
|
cursor: pointer;
|
|
195
|
-
font-weight:
|
|
196
|
-
font-size:
|
|
197
|
-
transition:
|
|
242
|
+
font-weight: 600;
|
|
243
|
+
font-size: 13px;
|
|
244
|
+
transition: var(--transition-smooth);
|
|
245
|
+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
|
|
246
|
+
letter-spacing: 0.3px;
|
|
247
|
+
min-width: 70px;
|
|
198
248
|
}
|
|
199
249
|
|
|
200
250
|
.copilot-send-btn:hover {
|
|
201
|
-
background: #
|
|
202
|
-
|
|
203
|
-
|
|
251
|
+
background: linear-gradient(135deg, var(--primary-color, #6366f1) 0%,
|
|
252
|
+
rgba(var(--primary-color, 99, 102, 241), 0.7) 100%);
|
|
253
|
+
transform: translateY(-2px);
|
|
254
|
+
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
|
|
204
255
|
}
|
|
205
256
|
|
|
206
257
|
.copilot-send-btn:active {
|
|
207
258
|
transform: translateY(0);
|
|
259
|
+
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.copilot-send-btn:disabled {
|
|
263
|
+
opacity: 0.6;
|
|
264
|
+
cursor: not-allowed;
|
|
265
|
+
transform: none;
|
|
208
266
|
}
|
|
209
267
|
|
|
210
268
|
/* Resize Handle */
|
|
@@ -212,15 +270,19 @@
|
|
|
212
270
|
position: absolute;
|
|
213
271
|
bottom: 0;
|
|
214
272
|
right: 0;
|
|
215
|
-
width:
|
|
216
|
-
height:
|
|
273
|
+
width: 24px;
|
|
274
|
+
height: 24px;
|
|
217
275
|
cursor: nwse-resize;
|
|
218
276
|
background: linear-gradient(135deg, transparent 50%, var(--primary-color, #6366f1) 50%);
|
|
219
|
-
border-radius: 0 0
|
|
277
|
+
border-radius: 0 0 16px 0;
|
|
278
|
+
opacity: 0.6;
|
|
279
|
+
transition: var(--transition-smooth);
|
|
220
280
|
}
|
|
221
281
|
|
|
222
282
|
.copilot-resize-handle:hover {
|
|
283
|
+
opacity: 1;
|
|
223
284
|
background: linear-gradient(135deg, transparent 50%, #4f46e5 50%);
|
|
285
|
+
box-shadow: -2px -2px 8px rgba(0, 0, 0, 0.1);
|
|
224
286
|
}
|
|
225
287
|
|
|
226
288
|
/* Scrollbar Styling */
|
|
@@ -229,17 +291,18 @@
|
|
|
229
291
|
}
|
|
230
292
|
|
|
231
293
|
.copilot-messages::-webkit-scrollbar-track {
|
|
232
|
-
background:
|
|
294
|
+
background: rgba(0, 0, 0, 0.03);
|
|
233
295
|
border-radius: 10px;
|
|
234
296
|
}
|
|
235
297
|
|
|
236
298
|
.copilot-messages::-webkit-scrollbar-thumb {
|
|
237
|
-
background:
|
|
299
|
+
background: rgba(99, 102, 241, 0.3);
|
|
238
300
|
border-radius: 10px;
|
|
301
|
+
transition: var(--transition-smooth);
|
|
239
302
|
}
|
|
240
303
|
|
|
241
304
|
.copilot-messages::-webkit-scrollbar-thumb:hover {
|
|
242
|
-
background:
|
|
305
|
+
background: rgba(99, 102, 241, 0.5);
|
|
243
306
|
}
|
|
244
307
|
|
|
245
308
|
/* Responsive Design */
|
|
@@ -257,9 +320,76 @@
|
|
|
257
320
|
|
|
258
321
|
.copilot-message-content {
|
|
259
322
|
max-width: 90%;
|
|
323
|
+
font-size: 15px;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.copilot-header {
|
|
327
|
+
padding: 14px 16px;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.copilot-input-area {
|
|
331
|
+
padding: 12px 14px;
|
|
260
332
|
}
|
|
261
333
|
|
|
262
334
|
.copilot-resize-handle {
|
|
263
335
|
display: none;
|
|
264
336
|
}
|
|
337
|
+
|
|
338
|
+
.copilot-messages {
|
|
339
|
+
padding: 12px;
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
/* Dark mode support */
|
|
344
|
+
@media (prefers-color-scheme: dark) {
|
|
345
|
+
.floating-copilot {
|
|
346
|
+
background-color: #1f2937;
|
|
347
|
+
border-color: #374151;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.copilot-header {
|
|
351
|
+
border-bottom-color: rgba(0, 0, 0, 0.2);
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.copilot-messages {
|
|
355
|
+
background: linear-gradient(to bottom, #1f2937 0%, rgba(99, 102, 241, 0.05) 100%);
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.copilot-input {
|
|
359
|
+
background: #111827;
|
|
360
|
+
color: #f3f4f6;
|
|
361
|
+
border-color: #374151;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.copilot-input:focus {
|
|
365
|
+
background: #1f2937;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
.copilot-input::placeholder {
|
|
369
|
+
color: #6b7280;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.copilot-message-bot .copilot-message-content {
|
|
373
|
+
background: #374151;
|
|
374
|
+
color: #f3f4f6;
|
|
375
|
+
border-color: #4b5563;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.copilot-empty-state {
|
|
379
|
+
color: #6b7280;
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
/* Loading animation */
|
|
384
|
+
@keyframes pulse {
|
|
385
|
+
0%, 100% {
|
|
386
|
+
opacity: 1;
|
|
387
|
+
}
|
|
388
|
+
50% {
|
|
389
|
+
opacity: 0.5;
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.copilot-loading {
|
|
394
|
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
265
395
|
}
|
package/dist/FloatingCopilot.js
CHANGED
|
@@ -9,8 +9,8 @@ export const FloatingCopilot = ({ config = {} }) => {
|
|
|
9
9
|
const [isMinimized, setIsMinimized] = useState(finalConfig.minimized || false);
|
|
10
10
|
const [isMaximized, setIsMaximized] = useState(finalConfig.maximized || false);
|
|
11
11
|
const [position, setPosition] = useState({
|
|
12
|
-
x: ((_a = finalConfig.position) === null || _a === void 0 ? void 0 : _a.includes('left')) ? 20 :
|
|
13
|
-
y: ((_b = finalConfig.position) === null || _b === void 0 ? void 0 : _b.includes('top')) ? 20 :
|
|
12
|
+
x: ((_a = finalConfig.position) === null || _a === void 0 ? void 0 : _a.includes('left')) ? 20 : 20,
|
|
13
|
+
y: ((_b = finalConfig.position) === null || _b === void 0 ? void 0 : _b.includes('top')) ? 20 : 20,
|
|
14
14
|
});
|
|
15
15
|
const [size, setSize] = useState({
|
|
16
16
|
width: finalConfig.width || 350,
|
package/dist/index.esm.js
CHANGED
|
@@ -31,8 +31,8 @@ const FloatingCopilot = ({ config = {} }) => {
|
|
|
31
31
|
const [isMinimized, setIsMinimized] = useState(finalConfig.minimized || false);
|
|
32
32
|
const [isMaximized, setIsMaximized] = useState(finalConfig.maximized || false);
|
|
33
33
|
const [position, setPosition] = useState({
|
|
34
|
-
x: ((_a = finalConfig.position) === null || _a === void 0 ? void 0 : _a.includes('left')) ? 20 :
|
|
35
|
-
y: ((_b = finalConfig.position) === null || _b === void 0 ? void 0 : _b.includes('top')) ? 20 :
|
|
34
|
+
x: ((_a = finalConfig.position) === null || _a === void 0 ? void 0 : _a.includes('left')) ? 20 : 20,
|
|
35
|
+
y: ((_b = finalConfig.position) === null || _b === void 0 ? void 0 : _b.includes('top')) ? 20 : 20,
|
|
36
36
|
});
|
|
37
37
|
const [size, setSize] = useState({
|
|
38
38
|
width: finalConfig.width || 350,
|
package/dist/index.js
CHANGED
|
@@ -35,8 +35,8 @@ const FloatingCopilot = ({ config = {} }) => {
|
|
|
35
35
|
const [isMinimized, setIsMinimized] = React.useState(finalConfig.minimized || false);
|
|
36
36
|
const [isMaximized, setIsMaximized] = React.useState(finalConfig.maximized || false);
|
|
37
37
|
const [position, setPosition] = React.useState({
|
|
38
|
-
x: ((_a = finalConfig.position) === null || _a === void 0 ? void 0 : _a.includes('left')) ? 20 :
|
|
39
|
-
y: ((_b = finalConfig.position) === null || _b === void 0 ? void 0 : _b.includes('top')) ? 20 :
|
|
38
|
+
x: ((_a = finalConfig.position) === null || _a === void 0 ? void 0 : _a.includes('left')) ? 20 : 20,
|
|
39
|
+
y: ((_b = finalConfig.position) === null || _b === void 0 ? void 0 : _b.includes('top')) ? 20 : 20,
|
|
40
40
|
});
|
|
41
41
|
const [size, setSize] = React.useState({
|
|
42
42
|
width: finalConfig.width || 350,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "floating-copilot-widget",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "A highly configurable floating chat widget plugin for React websites. Draggable, resizable, themeable, and production-ready.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|