@crestapps/ai-chat-ui 1.0.0-preview.7 → 1.0.0-preview.8
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/ai-chat.css +362 -0
- package/dist/ai-chat.css.map +1 -0
- package/dist/ai-chat.js +101 -20
- package/dist/ai-chat.js.map +1 -1
- package/dist/ai-chat.min.css +1 -0
- package/dist/ai-chat.min.js +1 -1
- package/dist/ai-chat.min.js.map +1 -1
- package/dist/chat-widget.css +104 -3
- package/dist/chat-widget.css.map +1 -1
- package/dist/chat-widget.min.css +1 -1
- package/package.json +4 -1
package/dist/ai-chat.css
ADDED
|
@@ -0,0 +1,362 @@
|
|
|
1
|
+
.ai-chat-msg-role {
|
|
2
|
+
font-size: 1.25rem;
|
|
3
|
+
font-weight: 600;
|
|
4
|
+
text-transform: uppercase;
|
|
5
|
+
letter-spacing: 0.03em;
|
|
6
|
+
margin-bottom: 0.35rem;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.ai-chat-msg-role-user {
|
|
10
|
+
color: var(--bs-primary, #0d6efd);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.ai-chat-msg-role-assistant {
|
|
14
|
+
color: var(--ai-chat-primary, #198754);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.ai-chat-messages .ai-chat-message-item {
|
|
18
|
+
position: relative;
|
|
19
|
+
padding: 0.25rem 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.ai-chat-messages .ai-chat-message-item + .ai-chat-message-item::before {
|
|
23
|
+
content: '';
|
|
24
|
+
display: block;
|
|
25
|
+
width: 100%;
|
|
26
|
+
margin: 0.5rem auto 0.75rem;
|
|
27
|
+
border-top: 1px solid var(--bs-border-color, #dee2e6);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.ai-chat-messages .ai-chat-message-item p:last-child {
|
|
31
|
+
margin-bottom: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.ai-chat-messages .ai-chat-message-body {
|
|
35
|
+
position: relative;
|
|
36
|
+
padding: 0;
|
|
37
|
+
overflow-wrap: break-word;
|
|
38
|
+
word-break: break-word;
|
|
39
|
+
min-width: 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.ai-partial-transcript {
|
|
43
|
+
font-style: italic;
|
|
44
|
+
opacity: 0.7;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.ai-chat-messages .message-buttons-container {
|
|
48
|
+
position: absolute;
|
|
49
|
+
right: 0.1rem;
|
|
50
|
+
bottom: 0;
|
|
51
|
+
display: inline-flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
gap: 0.35rem;
|
|
54
|
+
width: auto;
|
|
55
|
+
max-width: max-content;
|
|
56
|
+
opacity: 0;
|
|
57
|
+
pointer-events: none;
|
|
58
|
+
transition: opacity 0.15s ease-in-out;
|
|
59
|
+
background: rgba(255, 255, 255, 0.96);
|
|
60
|
+
padding: 0.2rem 0.35rem;
|
|
61
|
+
border-radius: 999px;
|
|
62
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
63
|
+
margin-bottom: 1rem;
|
|
64
|
+
transform: translateY(50%);
|
|
65
|
+
z-index: 1;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.ai-chat-messages .ai-chat-message-item:hover .message-buttons-container,
|
|
69
|
+
.ai-chat-messages .ai-chat-message-item:focus-within .message-buttons-container {
|
|
70
|
+
opacity: 1;
|
|
71
|
+
pointer-events: auto;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.ai-chat-messages .message-buttons-container:has(.tts-playing) {
|
|
75
|
+
opacity: 1;
|
|
76
|
+
pointer-events: auto;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.ai-chat-messages .message-buttons-container > .button-message-toolbox {
|
|
80
|
+
display: inline-flex;
|
|
81
|
+
align-items: center;
|
|
82
|
+
justify-content: center;
|
|
83
|
+
flex: 0 0 auto;
|
|
84
|
+
width: 1.75rem;
|
|
85
|
+
height: 1.75rem;
|
|
86
|
+
margin: 0 !important;
|
|
87
|
+
padding: 0 !important;
|
|
88
|
+
border-radius: 50%;
|
|
89
|
+
color: var(--bs-secondary-color, #6c757d) !important;
|
|
90
|
+
text-decoration: none;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.ai-chat-messages .message-buttons-container .ai-chat-message-assistant-feedback {
|
|
94
|
+
display: inline-flex;
|
|
95
|
+
align-items: center;
|
|
96
|
+
gap: 0.35rem;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.ai-chat-messages .message-buttons-container > .button-message-toolbox:hover,
|
|
100
|
+
.ai-chat-messages .message-buttons-container > .button-message-toolbox:focus {
|
|
101
|
+
color: var(--bs-body-color, #212529) !important;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.ai-chat-messages .message-buttons-container .tts-playing {
|
|
105
|
+
color: var(--ai-chat-primary, #198754);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@keyframes spark-burst {
|
|
109
|
+
0% {
|
|
110
|
+
transform: scale(1);
|
|
111
|
+
opacity: 1;
|
|
112
|
+
}
|
|
113
|
+
20% {
|
|
114
|
+
transform: scale(1.8);
|
|
115
|
+
opacity: 0.7;
|
|
116
|
+
}
|
|
117
|
+
40% {
|
|
118
|
+
transform: scale(0.9);
|
|
119
|
+
opacity: 1;
|
|
120
|
+
}
|
|
121
|
+
60% {
|
|
122
|
+
transform: scale(1.3);
|
|
123
|
+
}
|
|
124
|
+
100% {
|
|
125
|
+
transform: scale(1);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.spark-effect i,
|
|
130
|
+
.spark-effect svg {
|
|
131
|
+
display: inline-block;
|
|
132
|
+
animation: spark-burst 0.5s ease-out;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.ai-chat-messages .ai-bot-icon {
|
|
136
|
+
color: currentColor;
|
|
137
|
+
display: inline-block;
|
|
138
|
+
animation: none;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@keyframes ai-chat-streaming-effect {
|
|
142
|
+
0% { opacity: 1; transform: rotate(0deg); }
|
|
143
|
+
10% { opacity: 0.3; transform: rotate(0deg); }
|
|
144
|
+
20% { opacity: 1; transform: rotate(0deg); }
|
|
145
|
+
30% { opacity: 0.3; transform: rotate(0deg); }
|
|
146
|
+
40% { opacity: 1; transform: rotate(0deg); }
|
|
147
|
+
50% { opacity: 0.3; transform: rotate(0deg); }
|
|
148
|
+
60% { opacity: 1; transform: rotate(0deg); }
|
|
149
|
+
80% { opacity: 1; transform: rotate(360deg); }
|
|
150
|
+
100% { opacity: 1; transform: rotate(360deg); }
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.ai-chat-messages .ai-streaming-icon {
|
|
154
|
+
color: currentColor;
|
|
155
|
+
display: inline-block;
|
|
156
|
+
animation: ai-chat-streaming-effect 4s ease-in-out infinite;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.ai-chat-messages pre {
|
|
160
|
+
position: relative;
|
|
161
|
+
margin: 0;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.ai-chat-messages .ai-code-block {
|
|
165
|
+
border: 1px solid var(--bs-border-color, #dee2e6);
|
|
166
|
+
border-radius: 0.5rem;
|
|
167
|
+
overflow: hidden;
|
|
168
|
+
margin: 0.75rem 0;
|
|
169
|
+
background: var(--bs-body-bg, #fff);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.ai-chat-messages .ai-code-header {
|
|
173
|
+
display: flex;
|
|
174
|
+
align-items: center;
|
|
175
|
+
justify-content: space-between;
|
|
176
|
+
padding: 0.5rem 1rem;
|
|
177
|
+
font-size: 0.8rem;
|
|
178
|
+
min-height: 2rem;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.ai-chat-messages .ai-code-lang {
|
|
182
|
+
font-weight: 600;
|
|
183
|
+
color: var(--bs-body-color, #212529);
|
|
184
|
+
text-transform: capitalize;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.ai-chat-messages .ai-code-lang i {
|
|
188
|
+
color: var(--bs-secondary-color, #6c757d);
|
|
189
|
+
margin-right: 0.25rem;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.ai-chat-messages .ai-code-copy-btn {
|
|
193
|
+
display: inline-flex;
|
|
194
|
+
align-items: center;
|
|
195
|
+
gap: 0.3rem;
|
|
196
|
+
padding: 0.2rem;
|
|
197
|
+
font-size: 0.8rem;
|
|
198
|
+
background: transparent;
|
|
199
|
+
border: none;
|
|
200
|
+
cursor: pointer;
|
|
201
|
+
color: var(--bs-secondary-color, #6c757d);
|
|
202
|
+
transition: color 0.15s;
|
|
203
|
+
white-space: nowrap;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.ai-chat-messages .ai-code-copy-btn:hover {
|
|
207
|
+
color: var(--bs-body-color, #212529);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.ai-chat-messages .ai-code-block pre {
|
|
211
|
+
margin: 0;
|
|
212
|
+
background: transparent !important;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.ai-chat-messages .ai-code-block pre code.hljs {
|
|
216
|
+
background: transparent !important;
|
|
217
|
+
padding: 0.75rem 1rem 1rem;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.ai-chat-messages pre code.hljs {
|
|
221
|
+
white-space: pre-wrap;
|
|
222
|
+
word-wrap: break-word;
|
|
223
|
+
overflow-wrap: break-word;
|
|
224
|
+
border-radius: 0.375rem;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.ai-chat-doc-bar {
|
|
228
|
+
border-bottom: 1px solid var(--bs-border-color, #dee2e6);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.ai-chat-drag-over {
|
|
232
|
+
outline: 2px dashed var(--bs-primary, #0d6efd) !important;
|
|
233
|
+
outline-offset: -2px;
|
|
234
|
+
background-color: rgba(13, 110, 253, 0.05) !important;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.ai-chat-notification {
|
|
238
|
+
margin: 0.75rem 0 0.25rem;
|
|
239
|
+
padding: 0.625rem 0.875rem;
|
|
240
|
+
border-radius: 0.5rem;
|
|
241
|
+
border: 1px solid var(--bs-border-color, #dee2e6);
|
|
242
|
+
background-color: var(--bs-light, #f8f9fa);
|
|
243
|
+
font-size: 0.875rem;
|
|
244
|
+
line-height: 1.4;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.ai-chat-notification-content {
|
|
248
|
+
display: flex;
|
|
249
|
+
align-items: center;
|
|
250
|
+
gap: 0.5rem;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.ai-chat-notification-icon {
|
|
254
|
+
flex-shrink: 0;
|
|
255
|
+
font-size: 1rem;
|
|
256
|
+
opacity: 0.8;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.ai-chat-notification-text {
|
|
260
|
+
flex: 1;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.ai-chat-notification-dismiss {
|
|
264
|
+
flex-shrink: 0;
|
|
265
|
+
opacity: 0.5;
|
|
266
|
+
transition: opacity 0.15s;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.ai-chat-notification-dismiss:hover {
|
|
270
|
+
opacity: 1;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.ai-chat-notification-actions {
|
|
274
|
+
display: flex;
|
|
275
|
+
gap: 0.375rem;
|
|
276
|
+
margin-top: 0.5rem;
|
|
277
|
+
padding-top: 0.5rem;
|
|
278
|
+
border-top: 1px solid var(--bs-border-color, #dee2e6);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.ai-chat-notification-actions .btn {
|
|
282
|
+
font-size: 0.8125rem;
|
|
283
|
+
padding: 0.1875rem 0.625rem;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.ai-chat-notification-typing {
|
|
287
|
+
border-color: var(--ai-chat-primary, #198754);
|
|
288
|
+
background-color: rgba(25, 135, 84, 0.05);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.ai-chat-notification-typing .ai-chat-notification-icon {
|
|
292
|
+
color: var(--ai-chat-primary, #198754);
|
|
293
|
+
animation: ai-chat-typing-pulse 1.5s ease-in-out infinite;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
@keyframes ai-chat-typing-pulse {
|
|
297
|
+
0%, 100% { opacity: 0.4; }
|
|
298
|
+
50% { opacity: 1; }
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.ai-chat-notification-transfer {
|
|
302
|
+
border-color: var(--bs-warning, #ffc107);
|
|
303
|
+
background-color: rgba(255, 193, 7, 0.06);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.ai-chat-notification-transfer .ai-chat-notification-icon {
|
|
307
|
+
color: var(--bs-warning, #ffc107);
|
|
308
|
+
animation: ai-chat-transfer-pulse 2s ease-in-out infinite;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
@keyframes ai-chat-transfer-pulse {
|
|
312
|
+
0%, 100% { transform: scale(1); opacity: 0.7; }
|
|
313
|
+
50% { transform: scale(1.1); opacity: 1; }
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.ai-chat-notification-ended,
|
|
317
|
+
.ai-chat-notification-session-ended,
|
|
318
|
+
.ai-chat-notification-conversation-ended {
|
|
319
|
+
border-color: var(--bs-secondary, #6c757d);
|
|
320
|
+
background-color: rgba(108, 117, 125, 0.05);
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.ai-chat-notification-ended .ai-chat-notification-icon,
|
|
324
|
+
.ai-chat-notification-session-ended .ai-chat-notification-icon,
|
|
325
|
+
.ai-chat-notification-conversation-ended .ai-chat-notification-icon {
|
|
326
|
+
color: var(--bs-secondary, #6c757d);
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.ai-chat-notification-info,
|
|
330
|
+
.ai-chat-notification-agent-connected {
|
|
331
|
+
border-color: var(--bs-info, #0dcaf0);
|
|
332
|
+
background-color: rgba(13, 202, 240, 0.05);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.ai-chat-notification-info .ai-chat-notification-icon,
|
|
336
|
+
.ai-chat-notification-agent-connected .ai-chat-notification-icon {
|
|
337
|
+
color: var(--bs-info, #0dcaf0);
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.ai-chat-notification-warning,
|
|
341
|
+
.ai-chat-notification-agent-reconnecting {
|
|
342
|
+
border-color: var(--bs-warning, #ffc107);
|
|
343
|
+
background-color: rgba(255, 193, 7, 0.06);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.ai-chat-notification-warning .ai-chat-notification-icon,
|
|
347
|
+
.ai-chat-notification-agent-reconnecting .ai-chat-notification-icon {
|
|
348
|
+
color: var(--bs-warning, #ffc107);
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.ai-chat-notification-error,
|
|
352
|
+
.ai-chat-notification-connection-lost {
|
|
353
|
+
border-color: var(--bs-danger, #dc3545);
|
|
354
|
+
background-color: rgba(220, 53, 69, 0.05);
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.ai-chat-notification-error .ai-chat-notification-icon,
|
|
358
|
+
.ai-chat-notification-connection-lost .ai-chat-notification-icon {
|
|
359
|
+
color: var(--bs-danger, #dc3545);
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
/*# sourceMappingURL=ai-chat.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["ai-chat.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"ai-chat.css","sourcesContent":[".ai-chat-msg-role {\n font-size: 1.25rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n margin-bottom: 0.35rem;\n}\n\n.ai-chat-msg-role-user {\n color: var(--bs-primary, #0d6efd);\n}\n\n.ai-chat-msg-role-assistant {\n color: var(--ai-chat-primary, #198754);\n}\n\n.ai-chat-messages .ai-chat-message-item {\n position: relative;\n padding: 0.25rem 0;\n}\n\n.ai-chat-messages .ai-chat-message-item + .ai-chat-message-item::before {\n content: '';\n display: block;\n width: 100%;\n margin: 0.5rem auto 0.75rem;\n border-top: 1px solid var(--bs-border-color, #dee2e6);\n}\n\n.ai-chat-messages .ai-chat-message-item p:last-child {\n margin-bottom: 0;\n}\n\n.ai-chat-messages .ai-chat-message-body {\n position: relative;\n padding: 0;\n overflow-wrap: break-word;\n word-break: break-word;\n min-width: 0;\n}\n\n.ai-partial-transcript {\n font-style: italic;\n opacity: 0.7;\n}\n\n.ai-chat-messages .message-buttons-container {\n position: absolute;\n right: 0.1rem;\n bottom: 0;\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n width: auto;\n max-width: max-content;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.15s ease-in-out;\n background: rgba(255, 255, 255, 0.96);\n padding: 0.2rem 0.35rem;\n border-radius: 999px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n margin-bottom: 1rem;\n transform: translateY(50%);\n z-index: 1;\n}\n\n.ai-chat-messages .ai-chat-message-item:hover .message-buttons-container,\n.ai-chat-messages .ai-chat-message-item:focus-within .message-buttons-container {\n opacity: 1;\n pointer-events: auto;\n}\n\n.ai-chat-messages .message-buttons-container:has(.tts-playing) {\n opacity: 1;\n pointer-events: auto;\n}\n\n.ai-chat-messages .message-buttons-container > .button-message-toolbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 1.75rem;\n height: 1.75rem;\n margin: 0 !important;\n padding: 0 !important;\n border-radius: 50%;\n color: var(--bs-secondary-color, #6c757d) !important;\n text-decoration: none;\n}\n\n.ai-chat-messages .message-buttons-container .ai-chat-message-assistant-feedback {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n}\n\n.ai-chat-messages .message-buttons-container > .button-message-toolbox:hover,\n.ai-chat-messages .message-buttons-container > .button-message-toolbox:focus {\n color: var(--bs-body-color, #212529) !important;\n}\n\n.ai-chat-messages .message-buttons-container .tts-playing {\n color: var(--ai-chat-primary, #198754);\n}\n\n@keyframes spark-burst {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 20% {\n transform: scale(1.8);\n opacity: 0.7;\n }\n 40% {\n transform: scale(0.9);\n opacity: 1;\n }\n 60% {\n transform: scale(1.3);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n.spark-effect i,\n.spark-effect svg {\n display: inline-block;\n animation: spark-burst 0.5s ease-out;\n}\n\n.ai-chat-messages .ai-bot-icon {\n color: currentColor;\n display: inline-block;\n animation: none;\n}\n\n@keyframes ai-chat-streaming-effect {\n 0% { opacity: 1; transform: rotate(0deg); }\n 10% { opacity: 0.3; transform: rotate(0deg); }\n 20% { opacity: 1; transform: rotate(0deg); }\n 30% { opacity: 0.3; transform: rotate(0deg); }\n 40% { opacity: 1; transform: rotate(0deg); }\n 50% { opacity: 0.3; transform: rotate(0deg); }\n 60% { opacity: 1; transform: rotate(0deg); }\n 80% { opacity: 1; transform: rotate(360deg); }\n 100% { opacity: 1; transform: rotate(360deg); }\n}\n\n.ai-chat-messages .ai-streaming-icon {\n color: currentColor;\n display: inline-block;\n animation: ai-chat-streaming-effect 4s ease-in-out infinite;\n}\n\n.ai-chat-messages pre {\n position: relative;\n margin: 0;\n}\n\n.ai-chat-messages .ai-code-block {\n border: 1px solid var(--bs-border-color, #dee2e6);\n border-radius: 0.5rem;\n overflow: hidden;\n margin: 0.75rem 0;\n background: var(--bs-body-bg, #fff);\n}\n\n.ai-chat-messages .ai-code-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.5rem 1rem;\n font-size: 0.8rem;\n min-height: 2rem;\n}\n\n.ai-chat-messages .ai-code-lang {\n font-weight: 600;\n color: var(--bs-body-color, #212529);\n text-transform: capitalize;\n}\n\n.ai-chat-messages .ai-code-lang i {\n color: var(--bs-secondary-color, #6c757d);\n margin-right: 0.25rem;\n}\n\n.ai-chat-messages .ai-code-copy-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.3rem;\n padding: 0.2rem;\n font-size: 0.8rem;\n background: transparent;\n border: none;\n cursor: pointer;\n color: var(--bs-secondary-color, #6c757d);\n transition: color 0.15s;\n white-space: nowrap;\n}\n\n.ai-chat-messages .ai-code-copy-btn:hover {\n color: var(--bs-body-color, #212529);\n}\n\n.ai-chat-messages .ai-code-block pre {\n margin: 0;\n background: transparent !important;\n}\n\n.ai-chat-messages .ai-code-block pre code.hljs {\n background: transparent !important;\n padding: 0.75rem 1rem 1rem;\n}\n\n.ai-chat-messages pre code.hljs {\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: break-word;\n border-radius: 0.375rem;\n}\n\n.ai-chat-doc-bar {\n border-bottom: 1px solid var(--bs-border-color, #dee2e6);\n}\n\n.ai-chat-drag-over {\n outline: 2px dashed var(--bs-primary, #0d6efd) !important;\n outline-offset: -2px;\n background-color: rgba(13, 110, 253, 0.05) !important;\n}\n\n.ai-chat-notification {\n margin: 0.75rem 0 0.25rem;\n padding: 0.625rem 0.875rem;\n border-radius: 0.5rem;\n border: 1px solid var(--bs-border-color, #dee2e6);\n background-color: var(--bs-light, #f8f9fa);\n font-size: 0.875rem;\n line-height: 1.4;\n}\n\n.ai-chat-notification-content {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.ai-chat-notification-icon {\n flex-shrink: 0;\n font-size: 1rem;\n opacity: 0.8;\n}\n\n.ai-chat-notification-text {\n flex: 1;\n}\n\n.ai-chat-notification-dismiss {\n flex-shrink: 0;\n opacity: 0.5;\n transition: opacity 0.15s;\n}\n\n.ai-chat-notification-dismiss:hover {\n opacity: 1;\n}\n\n.ai-chat-notification-actions {\n display: flex;\n gap: 0.375rem;\n margin-top: 0.5rem;\n padding-top: 0.5rem;\n border-top: 1px solid var(--bs-border-color, #dee2e6);\n}\n\n.ai-chat-notification-actions .btn {\n font-size: 0.8125rem;\n padding: 0.1875rem 0.625rem;\n}\n\n.ai-chat-notification-typing {\n border-color: var(--ai-chat-primary, #198754);\n background-color: rgba(25, 135, 84, 0.05);\n}\n\n.ai-chat-notification-typing .ai-chat-notification-icon {\n color: var(--ai-chat-primary, #198754);\n animation: ai-chat-typing-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes ai-chat-typing-pulse {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n\n.ai-chat-notification-transfer {\n border-color: var(--bs-warning, #ffc107);\n background-color: rgba(255, 193, 7, 0.06);\n}\n\n.ai-chat-notification-transfer .ai-chat-notification-icon {\n color: var(--bs-warning, #ffc107);\n animation: ai-chat-transfer-pulse 2s ease-in-out infinite;\n}\n\n@keyframes ai-chat-transfer-pulse {\n 0%, 100% { transform: scale(1); opacity: 0.7; }\n 50% { transform: scale(1.1); opacity: 1; }\n}\n\n.ai-chat-notification-ended,\n.ai-chat-notification-session-ended,\n.ai-chat-notification-conversation-ended {\n border-color: var(--bs-secondary, #6c757d);\n background-color: rgba(108, 117, 125, 0.05);\n}\n\n.ai-chat-notification-ended .ai-chat-notification-icon,\n.ai-chat-notification-session-ended .ai-chat-notification-icon,\n.ai-chat-notification-conversation-ended .ai-chat-notification-icon {\n color: var(--bs-secondary, #6c757d);\n}\n\n.ai-chat-notification-info,\n.ai-chat-notification-agent-connected {\n border-color: var(--bs-info, #0dcaf0);\n background-color: rgba(13, 202, 240, 0.05);\n}\n\n.ai-chat-notification-info .ai-chat-notification-icon,\n.ai-chat-notification-agent-connected .ai-chat-notification-icon {\n color: var(--bs-info, #0dcaf0);\n}\n\n.ai-chat-notification-warning,\n.ai-chat-notification-agent-reconnecting {\n border-color: var(--bs-warning, #ffc107);\n background-color: rgba(255, 193, 7, 0.06);\n}\n\n.ai-chat-notification-warning .ai-chat-notification-icon,\n.ai-chat-notification-agent-reconnecting .ai-chat-notification-icon {\n color: var(--bs-warning, #ffc107);\n}\n\n.ai-chat-notification-error,\n.ai-chat-notification-connection-lost {\n border-color: var(--bs-danger, #dc3545);\n background-color: rgba(220, 53, 69, 0.05);\n}\n\n.ai-chat-notification-error .ai-chat-notification-icon,\n.ai-chat-notification-connection-lost .ai-chat-notification-icon {\n color: var(--bs-danger, #dc3545);\n}\n"]}
|
package/dist/ai-chat.js
CHANGED
|
@@ -482,8 +482,8 @@ window.openAIChatManager = function () {
|
|
|
482
482
|
if (partialLayout.panel !== undefined) {
|
|
483
483
|
nextLayout.panel = Object.assign({}, currentLayout.panel || {}, partialLayout.panel || {});
|
|
484
484
|
}
|
|
485
|
-
if (partialLayout.
|
|
486
|
-
nextLayout.
|
|
485
|
+
if (partialLayout.position !== undefined) {
|
|
486
|
+
nextLayout.position = Object.assign({}, currentLayout.position || {}, partialLayout.position || {});
|
|
487
487
|
}
|
|
488
488
|
localStorage.setItem(this.chatWidgetLayoutKey, JSON.stringify(nextLayout));
|
|
489
489
|
},
|
|
@@ -501,6 +501,25 @@ window.openAIChatManager = function () {
|
|
|
501
501
|
height: Math.round(rect.height || parsePixelValue(computed.height) || fallbackHeight || 0)
|
|
502
502
|
};
|
|
503
503
|
},
|
|
504
|
+
getElementPosition: function getElementPosition(element) {
|
|
505
|
+
if (!element) {
|
|
506
|
+
return {
|
|
507
|
+
left: 0,
|
|
508
|
+
top: 0
|
|
509
|
+
};
|
|
510
|
+
}
|
|
511
|
+
var rect = element.getBoundingClientRect();
|
|
512
|
+
var computed = window.getComputedStyle(element);
|
|
513
|
+
var inlineLeft = parsePixelValue(element.style.left);
|
|
514
|
+
var inlineTop = parsePixelValue(element.style.top);
|
|
515
|
+
var computedLeft = parsePixelValue(computed.left);
|
|
516
|
+
var computedTop = parsePixelValue(computed.top);
|
|
517
|
+
var isHidden = computed.display === 'none';
|
|
518
|
+
return {
|
|
519
|
+
left: Math.round(isHidden && Number.isFinite(inlineLeft) ? inlineLeft : rect.left || inlineLeft || computedLeft || 0),
|
|
520
|
+
top: Math.round(isHidden && Number.isFinite(inlineTop) ? inlineTop : rect.top || inlineTop || computedTop || 0)
|
|
521
|
+
};
|
|
522
|
+
},
|
|
504
523
|
clampWidgetPosition: function clampWidgetPosition(left, top, width, height) {
|
|
505
524
|
var viewportPadding = 8;
|
|
506
525
|
var maxLeft = Math.max(viewportPadding, window.innerWidth - width - viewportPadding);
|
|
@@ -525,15 +544,29 @@ window.openAIChatManager = function () {
|
|
|
525
544
|
height: this.widgetDefaultHeight || parsePixelValue(config.widget.defaultHeight) || 520
|
|
526
545
|
};
|
|
527
546
|
},
|
|
547
|
+
getWidgetToggleGap: function getWidgetToggleGap() {
|
|
548
|
+
return 8;
|
|
549
|
+
},
|
|
550
|
+
isWidgetPanelVisible: function isWidgetPanelVisible() {
|
|
551
|
+
if (!this.widgetContainerElement) {
|
|
552
|
+
return false;
|
|
553
|
+
}
|
|
554
|
+
var computed = window.getComputedStyle(this.widgetContainerElement);
|
|
555
|
+
return this.widgetContainerElement.classList.contains('open') && computed.display !== 'none';
|
|
556
|
+
},
|
|
528
557
|
persistWidgetPanelPosition: function persistWidgetPanelPosition() {
|
|
529
558
|
if (!this.widgetContainerElement || !config.widget.persistLayout) {
|
|
530
559
|
return;
|
|
531
560
|
}
|
|
532
|
-
var
|
|
561
|
+
var panelDefaultSize = this.getWidgetDefaultSize();
|
|
562
|
+
var panelPosition = this.getElementPosition(this.widgetContainerElement);
|
|
563
|
+
var panelSize = this.getElementSize(this.widgetContainerElement, panelDefaultSize.width, panelDefaultSize.height);
|
|
564
|
+
var toggleSize = this.getElementSize(this.widgetToggleButtonElement, 52, 52);
|
|
565
|
+
var linkedPosition = this.clampWidgetPosition(panelPosition.left + panelSize.width - toggleSize.width, panelPosition.top + panelSize.height + this.getWidgetToggleGap(), toggleSize.width, toggleSize.height);
|
|
533
566
|
this.saveStoredWidgetLayout({
|
|
534
|
-
|
|
535
|
-
left:
|
|
536
|
-
top:
|
|
567
|
+
position: {
|
|
568
|
+
left: linkedPosition.left,
|
|
569
|
+
top: linkedPosition.top
|
|
537
570
|
}
|
|
538
571
|
});
|
|
539
572
|
},
|
|
@@ -543,9 +576,9 @@ window.openAIChatManager = function () {
|
|
|
543
576
|
}
|
|
544
577
|
var toggleRect = this.widgetToggleButtonElement.getBoundingClientRect();
|
|
545
578
|
this.saveStoredWidgetLayout({
|
|
546
|
-
|
|
547
|
-
left:
|
|
548
|
-
top:
|
|
579
|
+
position: {
|
|
580
|
+
left: this.getElementPosition(this.widgetToggleButtonElement).left,
|
|
581
|
+
top: this.getElementPosition(this.widgetToggleButtonElement).top
|
|
549
582
|
}
|
|
550
583
|
});
|
|
551
584
|
},
|
|
@@ -562,6 +595,36 @@ window.openAIChatManager = function () {
|
|
|
562
595
|
}
|
|
563
596
|
});
|
|
564
597
|
},
|
|
598
|
+
syncTogglePositionToPanel: function syncTogglePositionToPanel() {
|
|
599
|
+
var persistLayout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
|
600
|
+
if (!this.widgetContainerElement || !this.widgetToggleButtonElement) {
|
|
601
|
+
return;
|
|
602
|
+
}
|
|
603
|
+
var panelDefaultSize = this.getWidgetDefaultSize();
|
|
604
|
+
var panelSize = this.getElementSize(this.widgetContainerElement, panelDefaultSize.width, panelDefaultSize.height);
|
|
605
|
+
var toggleSize = this.getElementSize(this.widgetToggleButtonElement, 52, 52);
|
|
606
|
+
var panelPosition = this.getElementPosition(this.widgetContainerElement);
|
|
607
|
+
var linkedPosition = this.clampWidgetPosition(panelPosition.left + panelSize.width - toggleSize.width, panelPosition.top + panelSize.height + this.getWidgetToggleGap(), toggleSize.width, toggleSize.height);
|
|
608
|
+
this.applyAbsolutePosition(this.widgetToggleButtonElement, linkedPosition.left, linkedPosition.top);
|
|
609
|
+
if (persistLayout && config.widget.persistLayout) {
|
|
610
|
+
this.persistWidgetTogglePosition();
|
|
611
|
+
}
|
|
612
|
+
},
|
|
613
|
+
syncPanelPositionToToggle: function syncPanelPositionToToggle() {
|
|
614
|
+
var persistLayout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
|
615
|
+
if (!this.widgetContainerElement || !this.widgetToggleButtonElement) {
|
|
616
|
+
return;
|
|
617
|
+
}
|
|
618
|
+
var panelDefaultSize = this.getWidgetDefaultSize();
|
|
619
|
+
var panelSize = this.getElementSize(this.widgetContainerElement, panelDefaultSize.width, panelDefaultSize.height);
|
|
620
|
+
var toggleSize = this.getElementSize(this.widgetToggleButtonElement, 52, 52);
|
|
621
|
+
var togglePosition = this.getElementPosition(this.widgetToggleButtonElement);
|
|
622
|
+
var linkedPosition = this.clampWidgetPosition(togglePosition.left + toggleSize.width - panelSize.width, togglePosition.top - panelSize.height - this.getWidgetToggleGap(), panelSize.width, panelSize.height);
|
|
623
|
+
this.applyAbsolutePosition(this.widgetContainerElement, linkedPosition.left, linkedPosition.top);
|
|
624
|
+
if (persistLayout && config.widget.persistLayout) {
|
|
625
|
+
this.persistWidgetPanelPosition();
|
|
626
|
+
}
|
|
627
|
+
},
|
|
565
628
|
updateWidgetResetSizeButtonVisibility: function updateWidgetResetSizeButtonVisibility() {
|
|
566
629
|
if (!this.widgetResetSizeButtonElement) {
|
|
567
630
|
return;
|
|
@@ -599,11 +662,15 @@ window.openAIChatManager = function () {
|
|
|
599
662
|
this.widgetContainerElement.style.removeProperty('height');
|
|
600
663
|
}
|
|
601
664
|
}
|
|
602
|
-
if (this.
|
|
603
|
-
this.applyAbsolutePosition(this.
|
|
604
|
-
|
|
605
|
-
if (this.widgetToggleButtonElement && config.widget.enableDragging && Number.isFinite(storedLayout.toggle && storedLayout.toggle.left) && Number.isFinite(storedLayout.toggle && storedLayout.toggle.top)) {
|
|
665
|
+
if (this.widgetToggleButtonElement && config.widget.enableDragging && Number.isFinite(storedLayout.position && storedLayout.position.left) && Number.isFinite(storedLayout.position && storedLayout.position.top)) {
|
|
666
|
+
this.applyAbsolutePosition(this.widgetToggleButtonElement, storedLayout.position.left, storedLayout.position.top);
|
|
667
|
+
this.syncPanelPositionToToggle(false);
|
|
668
|
+
} else if (this.widgetToggleButtonElement && config.widget.enableDragging && Number.isFinite(storedLayout.toggle && storedLayout.toggle.left) && Number.isFinite(storedLayout.toggle && storedLayout.toggle.top)) {
|
|
606
669
|
this.applyAbsolutePosition(this.widgetToggleButtonElement, storedLayout.toggle.left, storedLayout.toggle.top);
|
|
670
|
+
this.syncPanelPositionToToggle(false);
|
|
671
|
+
} else if (this.widgetContainerElement && config.widget.enableDragging && Number.isFinite(storedLayout.panel && storedLayout.panel.left) && Number.isFinite(storedLayout.panel && storedLayout.panel.top)) {
|
|
672
|
+
this.applyAbsolutePosition(this.widgetContainerElement, storedLayout.panel.left, storedLayout.panel.top);
|
|
673
|
+
this.syncTogglePositionToPanel(false);
|
|
607
674
|
}
|
|
608
675
|
this.constrainWidgetElementsToViewport();
|
|
609
676
|
this.updateWidgetResetSizeButtonVisibility();
|
|
@@ -637,8 +704,14 @@ window.openAIChatManager = function () {
|
|
|
637
704
|
return;
|
|
638
705
|
}
|
|
639
706
|
if (layoutKey === 'panel') {
|
|
707
|
+
_this.syncTogglePositionToPanel(false);
|
|
640
708
|
_this.persistWidgetPanelPosition();
|
|
641
709
|
} else if (layoutKey === 'toggle') {
|
|
710
|
+
_this.syncPanelPositionToToggle(false);
|
|
711
|
+
_this.persistWidgetTogglePosition();
|
|
712
|
+
}
|
|
713
|
+
if (config.widget.persistLayout) {
|
|
714
|
+
_this.persistWidgetPanelPosition();
|
|
642
715
|
_this.persistWidgetTogglePosition();
|
|
643
716
|
}
|
|
644
717
|
if (suppressClickOnDrag) {
|
|
@@ -664,6 +737,11 @@ window.openAIChatManager = function () {
|
|
|
664
737
|
var currentSize = _this.getElementSize(element, layoutKey === 'panel' ? defaultSize.width : 52, layoutKey === 'panel' ? defaultSize.height : 52);
|
|
665
738
|
var nextPosition = _this.clampWidgetPosition(startLeft + deltaX, startTop + deltaY, currentSize.width, currentSize.height);
|
|
666
739
|
_this.applyAbsolutePosition(element, nextPosition.left, nextPosition.top);
|
|
740
|
+
if (layoutKey === 'panel') {
|
|
741
|
+
_this.syncTogglePositionToPanel(false);
|
|
742
|
+
} else if (layoutKey === 'toggle') {
|
|
743
|
+
_this.syncPanelPositionToToggle(false);
|
|
744
|
+
}
|
|
667
745
|
};
|
|
668
746
|
handle.addEventListener('pointerdown', function (event) {
|
|
669
747
|
if (event.button !== 0) {
|
|
@@ -690,23 +768,26 @@ window.openAIChatManager = function () {
|
|
|
690
768
|
});
|
|
691
769
|
},
|
|
692
770
|
constrainWidgetElementsToViewport: function constrainWidgetElementsToViewport() {
|
|
693
|
-
if (this.widgetContainerElement && this.widgetContainerElement.style.left) {
|
|
771
|
+
if (this.widgetContainerElement && this.widgetContainerElement.style.left && this.isWidgetPanelVisible()) {
|
|
694
772
|
var panelDefaultSize = this.getWidgetDefaultSize();
|
|
695
773
|
var panelSize = this.getElementSize(this.widgetContainerElement, panelDefaultSize.width, panelDefaultSize.height);
|
|
696
|
-
var
|
|
697
|
-
var clampedPanel = this.clampWidgetPosition(
|
|
774
|
+
var panelPosition = this.getElementPosition(this.widgetContainerElement);
|
|
775
|
+
var clampedPanel = this.clampWidgetPosition(panelPosition.left, panelPosition.top, panelSize.width, panelSize.height);
|
|
698
776
|
this.applyAbsolutePosition(this.widgetContainerElement, clampedPanel.left, clampedPanel.top);
|
|
777
|
+
this.syncTogglePositionToPanel(false);
|
|
699
778
|
if (config.widget.persistLayout) {
|
|
700
779
|
this.persistWidgetPanelPosition();
|
|
780
|
+
this.persistWidgetTogglePosition();
|
|
701
781
|
}
|
|
702
|
-
}
|
|
703
|
-
if (this.widgetToggleButtonElement && this.widgetToggleButtonElement.style.left) {
|
|
782
|
+
} else if (this.widgetToggleButtonElement && this.widgetToggleButtonElement.style.left) {
|
|
704
783
|
var toggleSize = this.getElementSize(this.widgetToggleButtonElement, 52, 52);
|
|
705
|
-
var
|
|
706
|
-
var clampedToggle = this.clampWidgetPosition(
|
|
784
|
+
var togglePosition = this.getElementPosition(this.widgetToggleButtonElement);
|
|
785
|
+
var clampedToggle = this.clampWidgetPosition(togglePosition.left, togglePosition.top, toggleSize.width, toggleSize.height);
|
|
707
786
|
this.applyAbsolutePosition(this.widgetToggleButtonElement, clampedToggle.left, clampedToggle.top);
|
|
787
|
+
this.syncPanelPositionToToggle(false);
|
|
708
788
|
if (config.widget.persistLayout) {
|
|
709
789
|
this.persistWidgetTogglePosition();
|
|
790
|
+
this.persistWidgetPanelPosition();
|
|
710
791
|
}
|
|
711
792
|
}
|
|
712
793
|
},
|