funda-ui 4.5.888 → 4.5.899

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/Chatbox/index.css +145 -67
  2. package/Chatbox/index.d.ts +16 -3
  3. package/Chatbox/index.js +521 -61
  4. package/Textarea/index.js +9 -5
  5. package/Utils/useAutosizeTextArea.js +9 -5
  6. package/Utils/useGlobalUrlListener.d.ts +2 -0
  7. package/Utils/useGlobalUrlListener.js +157 -0
  8. package/Utils/useSessionStorageListener.d.ts +2 -0
  9. package/Utils/useSessionStorageListener.js +157 -0
  10. package/lib/cjs/Chatbox/index.d.ts +16 -3
  11. package/lib/cjs/Chatbox/index.js +521 -61
  12. package/lib/cjs/Textarea/index.js +9 -5
  13. package/lib/cjs/Utils/useAutosizeTextArea.js +9 -5
  14. package/lib/cjs/Utils/useGlobalUrlListener.d.ts +2 -0
  15. package/lib/cjs/Utils/useGlobalUrlListener.js +157 -0
  16. package/lib/cjs/Utils/useSessionStorageListener.d.ts +2 -0
  17. package/lib/cjs/Utils/useSessionStorageListener.js +157 -0
  18. package/lib/css/Chatbox/index.css +145 -67
  19. package/lib/esm/Chatbox/index.scss +111 -10
  20. package/lib/esm/Chatbox/index.tsx +199 -17
  21. package/lib/esm/Chatbox/utils/func.ts +62 -4
  22. package/lib/esm/Textarea/index.tsx +0 -1
  23. package/lib/esm/Utils/hooks/useAutosizeTextArea.tsx +13 -5
  24. package/lib/esm/Utils/hooks/useGlobalUrlListener.tsx +46 -0
  25. package/lib/esm/Utils/hooks/useSessionStorageListener.tsx +45 -0
  26. package/package.json +1 -1
package/lib/css/Chatbox/index.css CHANGED
@@ -29,8 +29,8 @@
29
29
  background-position: 250% 0, 250% 0;
30
30
  }
31
31
  }
32
- /*=================== Chatbox (Core) =================*/
33
- .custom-chatbox-circle {
32
+ /*=================== Chatbox (Core) =================*/
33
+ .app-chatbox-circle {
34
34
  --custom-chatbox-circle-color: #5A5EB9;
35
35
  --custom-chatbox-circle-text: #fff;
36
36
  position: fixed;
@@ -48,26 +48,26 @@
48
48
  vertical-align: middle;
49
49
  transition: 0.1s ease-in-out;
50
50
  }
51
- .custom-chatbox-circle > span {
51
+ .app-chatbox-circle > span {
52
52
  display: inline-block;
53
53
  margin-top: 25%;
54
54
  }
55
- .custom-chatbox-circle:hover {
55
+ .app-chatbox-circle:hover {
56
56
  transform: scale(1.2);
57
57
  }
58
- .custom-chatbox-circle svg {
58
+ .app-chatbox-circle svg {
59
59
  width: 30px;
60
60
  height: 30px;
61
61
  }
62
- .custom-chatbox-circle svg path {
62
+ .app-chatbox-circle svg path {
63
63
  stroke: #fff;
64
64
  }
65
65
 
66
- .custom-chatbox-close {
66
+ .app-chatbox-close {
67
67
  --custom-chatbox-close-color: #333;
68
68
  padding: 20px;
69
69
  position: fixed;
70
- bottom: calc(100vh - 55px);
70
+ bottom: calc(100vh - 2.625rem - 55px);
71
71
  z-index: 1032;
72
72
  right: -15px;
73
73
  cursor: pointer;
@@ -76,19 +76,19 @@
76
76
  background: none;
77
77
  transition-delay: 0.05s; /* Prevent real-time update of store displacement */
78
78
  }
79
- .custom-chatbox-close path {
79
+ .app-chatbox-close path {
80
80
  fill: var(--custom-chatbox-close-color);
81
81
  }
82
- .custom-chatbox-close:hover {
82
+ .app-chatbox-close:hover {
83
83
  transform: scale(1.2);
84
84
  }
85
- .custom-chatbox-close:hover path {
85
+ .app-chatbox-close:hover path {
86
86
  fill: #f00;
87
87
  }
88
88
 
89
- .custom-chatbox-container {
89
+ .app-chatbox-container {
90
90
  --custom-chatbox-w: 600px;
91
- --custom-chatbox-h: 100vh;
91
+ --custom-chatbox-h: calc(100vh - 2.625rem);
92
92
  --custom-chatbox-bg: #fff;
93
93
  --custom-chatbox-input-bg: #fff;
94
94
  --custom-chatbox-default-txt-color: #333;
@@ -109,6 +109,10 @@
109
109
  --custom-chatbox-toolkit-btn-active-color: #c2dfff;
110
110
  --custom-chatbox-newchat-btn-color: #f8f9fa;
111
111
  --custom-chatbox-newchat-btn-border-color: #e9ecef;
112
+ --custom-chatbox-toolkit-opt-color: #f8f9fa;
113
+ --custom-chatbox-toolkit-opt-border-color: #e9ecef;
114
+ --custom-chatbox-toolkit-opt-active-color: #c2dfff;
115
+ --custom-chatbox-toolkit-btn-radius: 20px;
112
116
  min-width: var(--custom-chatbox-w);
113
117
  max-width: var(--custom-chatbox-w);
114
118
  margin: auto;
@@ -127,66 +131,67 @@
127
131
  /* loading */
128
132
  /* new chat button */
129
133
  /* toolkit buttons */
134
+ /* toolkit options */
130
135
  }
131
- .custom-chatbox-container details {
136
+ .app-chatbox-container details {
132
137
  font-style: italic;
133
138
  margin: 0;
134
139
  padding: 0;
135
140
  font-size: 0.75rem;
136
141
  margin-bottom: 0.5rem;
137
142
  }
138
- .custom-chatbox-container summary {
143
+ .app-chatbox-container summary {
139
144
  cursor: pointer;
140
145
  font-weight: bold;
141
146
  color: var(--custom-chatbox-primary-color);
142
147
  outline: none;
143
148
  }
144
- .custom-chatbox-container details[open] summary {
149
+ .app-chatbox-container details[open] summary {
145
150
  color: var(--custom-chatbox-primary-text);
146
151
  }
147
- .custom-chatbox-container h1 {
152
+ .app-chatbox-container h1 {
148
153
  font-size: 1.35rem;
149
154
  }
150
- .custom-chatbox-container h2 {
155
+ .app-chatbox-container h2 {
151
156
  font-size: 1.25rem;
152
157
  }
153
- .custom-chatbox-container h3 {
158
+ .app-chatbox-container h3 {
154
159
  font-size: 1.125rem;
155
160
  }
156
- .custom-chatbox-container h4 {
161
+ .app-chatbox-container h4 {
157
162
  font-size: 1rem;
158
163
  }
159
- .custom-chatbox-container h5 {
164
+ .app-chatbox-container h5 {
160
165
  font-size: 0.875rem;
161
166
  }
162
- .custom-chatbox-container h6 {
167
+ .app-chatbox-container h6 {
163
168
  font-size: 0.75rem;
164
169
  }
165
- .custom-chatbox-container .messages {
170
+ .app-chatbox-container .messages {
166
171
  height: calc(100% - 80px);
167
172
  overflow-y: auto;
168
173
  margin-bottom: 10px;
169
174
  font-size: 13px;
170
175
  margin-right: 0;
171
176
  }
172
- .custom-chatbox-container .messages img, .custom-chatbox-container .messages svg, .custom-chatbox-container .messages video, .custom-chatbox-container .messages canvas, .custom-chatbox-container .messages audio, .custom-chatbox-container .messages iframe, .custom-chatbox-container .messages embed, .custom-chatbox-container .messages object {
177
+ .app-chatbox-container .messages img, .app-chatbox-container .messages svg, .app-chatbox-container .messages video, .app-chatbox-container .messages canvas, .app-chatbox-container .messages audio, .app-chatbox-container .messages iframe, .app-chatbox-container .messages embed, .app-chatbox-container .messages object {
173
178
  display: inline;
174
179
  }
175
- .custom-chatbox-container .messages::-webkit-scrollbar {
180
+ .app-chatbox-container .messages::-webkit-scrollbar {
176
181
  width: 3px;
177
182
  }
178
- .custom-chatbox-container .messages::-webkit-scrollbar-thumb {
183
+ .app-chatbox-container .messages::-webkit-scrollbar-thumb {
179
184
  background: rgba(0, 0, 0, 0.2);
180
185
  }
181
- .custom-chatbox-container .messages > div {
186
+ .app-chatbox-container .messages > div {
182
187
  margin: 5px 0;
183
188
  padding: 3px 5px;
184
189
  border-radius: 0.35rem;
185
190
  }
186
- .custom-chatbox-container .messages p {
191
+ .app-chatbox-container .messages p {
187
192
  margin: 3px 0;
188
193
  }
189
- .custom-chatbox-container .messages .qa-timestamp {
194
+ .app-chatbox-container .messages .qa-timestamp {
190
195
  font-size: 0.75rem;
191
196
  color: var(--custom-chatbox-time-color);
192
197
  font-style: italic;
@@ -194,14 +199,14 @@
194
199
  display: block;
195
200
  text-align: right;
196
201
  }
197
- .custom-chatbox-container .messages .qa-name {
202
+ .app-chatbox-container .messages .qa-name {
198
203
  font-weight: bold;
199
204
  color: var(--custom-chatbox-primary-color);
200
205
  }
201
- .custom-chatbox-container .messages .qa-name svg, .custom-chatbox-container .messages .qa-name img {
206
+ .app-chatbox-container .messages .qa-name svg, .app-chatbox-container .messages .qa-name img {
202
207
  max-height: 15px;
203
208
  }
204
- .custom-chatbox-container .messages .qa-content {
209
+ .app-chatbox-container .messages .qa-content {
205
210
  background: var(--custom-chatbox-msg-bg);
206
211
  padding: 0.5rem;
207
212
  border-radius: 0.35rem;
@@ -209,23 +214,23 @@
209
214
  display: inline-block;
210
215
  text-align: start;
211
216
  }
212
- .custom-chatbox-container .messages .request {
217
+ .app-chatbox-container .messages .request {
213
218
  text-align: end;
214
219
  }
215
- .custom-chatbox-container .messages .request .qa-content {
220
+ .app-chatbox-container .messages .request .qa-content {
216
221
  max-width: var(--custom-chatbox-content-w);
217
222
  background: var(--custom-chatbox-msg-bg2);
218
223
  }
219
- .custom-chatbox-container .messages .reply {
224
+ .app-chatbox-container .messages .reply {
220
225
  text-align: start;
221
226
  }
222
- .custom-chatbox-container .messages .reply .qa-name {
227
+ .app-chatbox-container .messages .reply .qa-name {
223
228
  display: flex;
224
229
  }
225
- .custom-chatbox-container .messages .reply .qa-content {
230
+ .app-chatbox-container .messages .reply .qa-content {
226
231
  width: var(--custom-chatbox-content-w);
227
232
  }
228
- .custom-chatbox-container .msg-dotted-loader-container {
233
+ .app-chatbox-container .msg-dotted-loader-container {
229
234
  font-weight: normal;
230
235
  transform: translateY(-5px);
231
236
  display: flex;
@@ -234,10 +239,10 @@
234
239
  margin-left: 0.3rem;
235
240
  color: var(--custom-chatbox-gray-color);
236
241
  }
237
- .custom-chatbox-container .msg-dotted-loader-text {
242
+ .app-chatbox-container .msg-dotted-loader-text {
238
243
  transform: translateY(-10%);
239
244
  }
240
- .custom-chatbox-container .msg-dotted-loader {
245
+ .app-chatbox-container .msg-dotted-loader {
241
246
  position: relative;
242
247
  text-align: center;
243
248
  display: inline-block;
@@ -245,8 +250,8 @@
245
250
  height: calc(var(--custom-chatbox-msg-dotted-loader-size) * 1.5);
246
251
  margin-right: 0.1rem;
247
252
  }
248
- .custom-chatbox-container .msg-dotted-loader::after,
249
- .custom-chatbox-container .msg-dotted-loader::before {
253
+ .app-chatbox-container .msg-dotted-loader::after,
254
+ .app-chatbox-container .msg-dotted-loader::before {
250
255
  content: "";
251
256
  position: absolute;
252
257
  top: 0;
@@ -258,7 +263,7 @@
258
263
  border-style: dotted solid dotted solid;
259
264
  animation: turn-left 1.5s linear infinite;
260
265
  }
261
- .custom-chatbox-container .msg-dotted-loader::before {
266
+ .app-chatbox-container .msg-dotted-loader::before {
262
267
  left: calc(var(--custom-chatbox-msg-dotted-loader-size) / 2 / 2 * -1);
263
268
  top: calc(var(--custom-chatbox-msg-dotted-loader-size) / 2 / 2 * -1);
264
269
  width: calc(var(--custom-chatbox-msg-dotted-loader-size) + var(--custom-chatbox-msg-dotted-loader-size) / 2);
@@ -282,17 +287,17 @@
282
287
  transform: rotate(-360deg);
283
288
  }
284
289
  }
285
- .custom-chatbox-container .msgcontrol {
290
+ .app-chatbox-container .msgcontrol {
286
291
  display: flex;
287
292
  position: absolute;
288
293
  bottom: 10px;
289
294
  z-index: 1;
290
295
  width: calc(100% - 40px);
291
296
  }
292
- .custom-chatbox-container .msgcontrol img, .custom-chatbox-container .msgcontrol svg, .custom-chatbox-container .msgcontrol video, .custom-chatbox-container .msgcontrol canvas, .custom-chatbox-container .msgcontrol audio, .custom-chatbox-container .msgcontrol iframe, .custom-chatbox-container .msgcontrol embed, .custom-chatbox-container .msgcontrol object {
297
+ .app-chatbox-container .msgcontrol img, .app-chatbox-container .msgcontrol svg, .app-chatbox-container .msgcontrol video, .app-chatbox-container .msgcontrol canvas, .app-chatbox-container .msgcontrol audio, .app-chatbox-container .msgcontrol iframe, .app-chatbox-container .msgcontrol embed, .app-chatbox-container .msgcontrol object {
293
298
  display: inline;
294
299
  }
295
- .custom-chatbox-container .msgcontrol .messageInput {
300
+ .app-chatbox-container .msgcontrol .messageInput {
296
301
  width: 100%;
297
302
  border: 1px solid var(--custom-chatbox-msg-border);
298
303
  border-radius: 4px;
@@ -300,10 +305,10 @@
300
305
  border: none;
301
306
  outline: none;
302
307
  }
303
- .custom-chatbox-container .msgcontrol .messageInput:focus, .custom-chatbox-container .msgcontrol .messageInput:focus-visible {
308
+ .app-chatbox-container .msgcontrol .messageInput:focus, .app-chatbox-container .msgcontrol .messageInput:focus-visible {
304
309
  outline: none;
305
310
  }
306
- .custom-chatbox-container .msgcontrol .messageInput .messageInput-control {
311
+ .app-chatbox-container .msgcontrol .messageInput .messageInput-control {
307
312
  background: var(--custom-chatbox-input-bg);
308
313
  padding: 0.5rem;
309
314
  border-radius: 0.35rem;
@@ -313,17 +318,17 @@
313
318
  max-height: 50vh;
314
319
  border: 1px solid var(--custom-chatbox-gray-color);
315
320
  }
316
- .custom-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar {
321
+ .app-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar {
317
322
  width: 3px;
318
323
  }
319
- .custom-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar-thumb {
324
+ .app-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar-thumb {
320
325
  background: rgba(0, 0, 0, 0.2);
321
326
  }
322
- .custom-chatbox-container .msgcontrol .messageInput .messageInput-control:focus, .custom-chatbox-container .msgcontrol .messageInput .messageInput-control:focus-visible {
327
+ .app-chatbox-container .msgcontrol .messageInput .messageInput-control:focus, .app-chatbox-container .msgcontrol .messageInput .messageInput-control:focus-visible {
323
328
  border-color: transparent;
324
329
  outline: 1px solid var(--custom-chatbox-primary-color);
325
330
  }
326
- .custom-chatbox-container .msgcontrol button {
331
+ .app-chatbox-container .msgcontrol button {
327
332
  padding: 6px;
328
333
  border: none;
329
334
  position: absolute;
@@ -342,20 +347,20 @@
342
347
  height: 40px;
343
348
  padding: 0;
344
349
  }
345
- .custom-chatbox-container .msgcontrol button path {
350
+ .app-chatbox-container .msgcontrol button path {
346
351
  fill: var(--custom-chatbox-default-btn-color);
347
352
  }
348
- .custom-chatbox-container .msgcontrol button:hover {
353
+ .app-chatbox-container .msgcontrol button:hover {
349
354
  transform: scale(1.1);
350
355
  }
351
- .custom-chatbox-container .msgcontrol button:disabled {
356
+ .app-chatbox-container .msgcontrol button:disabled {
352
357
  opacity: 0.7;
353
358
  }
354
- .custom-chatbox-container .msgcontrol button.is-suspended {
359
+ .app-chatbox-container .msgcontrol button.is-suspended {
355
360
  background-color: var(--custom-chatbox-stop-color);
356
361
  border-color: var(--custom-chatbox-stop-color);
357
362
  }
358
- .custom-chatbox-container .loading {
363
+ .app-chatbox-container .loading {
359
364
  margin-top: 0;
360
365
  height: 5px;
361
366
  position: absolute;
@@ -363,10 +368,10 @@
363
368
  width: calc(100% - 40px);
364
369
  z-index: 1;
365
370
  }
366
- .custom-chatbox-container .newchat-btn {
371
+ .app-chatbox-container .newchat-btn {
367
372
  text-align: center;
368
373
  }
369
- .custom-chatbox-container .newchat-btn > button {
374
+ .app-chatbox-container .newchat-btn > button {
370
375
  padding: 3px 6px;
371
376
  background-color: var(--custom-chatbox-newchat-btn-color);
372
377
  border: 1px solid var(--custom-chatbox-newchat-btn-border-color);
@@ -376,13 +381,13 @@
376
381
  font-size: 0.8125rem;
377
382
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
378
383
  }
379
- .custom-chatbox-container .newchat-btn > button img, .custom-chatbox-container .newchat-btn > button svg, .custom-chatbox-container .newchat-btn > button video, .custom-chatbox-container .newchat-btn > button canvas, .custom-chatbox-container .newchat-btn > button audio, .custom-chatbox-container .newchat-btn > button iframe, .custom-chatbox-container .newchat-btn > button embed, .custom-chatbox-container .newchat-btn > button object {
384
+ .app-chatbox-container .newchat-btn > button img, .app-chatbox-container .newchat-btn > button svg, .app-chatbox-container .newchat-btn > button video, .app-chatbox-container .newchat-btn > button canvas, .app-chatbox-container .newchat-btn > button audio, .app-chatbox-container .newchat-btn > button iframe, .app-chatbox-container .newchat-btn > button embed, .app-chatbox-container .newchat-btn > button object {
380
385
  display: inline;
381
386
  }
382
- .custom-chatbox-container .newchat-btn > button:hover {
387
+ .app-chatbox-container .newchat-btn > button:hover {
383
388
  transform: translateY(-2px);
384
389
  }
385
- .custom-chatbox-container .toolkit-btns {
390
+ .app-chatbox-container .toolkit-btns {
386
391
  display: flex;
387
392
  position: absolute;
388
393
  bottom: 20px;
@@ -392,22 +397,95 @@
392
397
  gap: 8px;
393
398
  justify-content: center;
394
399
  }
395
- .custom-chatbox-container .toolkit-btns > button {
400
+ .app-chatbox-container .toolkit-btns button {
396
401
  padding: 3px 6px;
397
402
  background-color: var(--custom-chatbox-toolkit-btn-color);
398
403
  border: 1px solid var(--custom-chatbox-toolkit-btn-border-color);
399
- border-radius: 20px;
404
+ border-radius: var(--custom-chatbox-toolkit-btn-radius);
400
405
  cursor: pointer;
401
406
  transition: all 0.3s ease;
402
407
  font-size: 0.75rem;
403
408
  }
404
- .custom-chatbox-container .toolkit-btns > button img, .custom-chatbox-container .toolkit-btns > button svg, .custom-chatbox-container .toolkit-btns > button video, .custom-chatbox-container .toolkit-btns > button canvas, .custom-chatbox-container .toolkit-btns > button audio, .custom-chatbox-container .toolkit-btns > button iframe, .custom-chatbox-container .toolkit-btns > button embed, .custom-chatbox-container .toolkit-btns > button object {
409
+ .app-chatbox-container .toolkit-btns button img, .app-chatbox-container .toolkit-btns button svg, .app-chatbox-container .toolkit-btns button video, .app-chatbox-container .toolkit-btns button canvas, .app-chatbox-container .toolkit-btns button audio, .app-chatbox-container .toolkit-btns button iframe, .app-chatbox-container .toolkit-btns button embed, .app-chatbox-container .toolkit-btns button object {
405
410
  display: inline;
406
411
  }
407
- .custom-chatbox-container .toolkit-btns > button:hover {
412
+ .app-chatbox-container .toolkit-btns button:hover {
408
413
  background-color: var(--custom-chatbox-toolkit-btn-border-color);
409
414
  transform: translateY(-2px);
410
415
  }
411
- .custom-chatbox-container .toolkit-btns > button.active {
416
+ .app-chatbox-container .toolkit-btns button.opt-active, .app-chatbox-container .toolkit-btns button.active {
412
417
  background-color: var(--custom-chatbox-toolkit-btn-active-color);
413
418
  }
419
+ @keyframes dropupAnimation {
420
+ from {
421
+ opacity: 0;
422
+ transform: translateY(10px);
423
+ }
424
+ to {
425
+ opacity: 1;
426
+ transform: translateY(0);
427
+ }
428
+ }
429
+ .app-chatbox-container .toolkit-select-wrapper {
430
+ position: relative;
431
+ display: inline-block;
432
+ }
433
+ .app-chatbox-container .toolkit-select-wrapper .toolkit-select-btn {
434
+ display: flex;
435
+ align-items: center;
436
+ justify-content: space-between;
437
+ border: 1px solid #ddd;
438
+ border-radius: var(--custom-chatbox-toolkit-btn-radius);
439
+ cursor: pointer;
440
+ }
441
+ .app-chatbox-container .toolkit-select-wrapper .toolkit-select-arrow {
442
+ margin-left: 8px;
443
+ font-size: 10px;
444
+ transition: transform 0.2s ease;
445
+ }
446
+ .app-chatbox-container .toolkit-select-wrapper .toolkit-select-arrow.active {
447
+ transform: rotate(180deg);
448
+ }
449
+ .app-chatbox-container .toolkit-select-wrapper .toolkit-select-options-container {
450
+ z-index: 1000;
451
+ width: 100%;
452
+ min-width: 120px;
453
+ transform: translateY(-100%);
454
+ }
455
+ .app-chatbox-container .toolkit-select-wrapper .toolkit-select-options {
456
+ background-color: var(--custom-chatbox-toolkit-opt-color);
457
+ border: 1px solid var(--custom-chatbox-toolkit-opt-border-color);
458
+ border-radius: 4px;
459
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
460
+ margin-bottom: 10px;
461
+ max-height: 300px;
462
+ overflow-y: auto;
463
+ animation: dropupAnimation 0.2s ease;
464
+ position: absolute;
465
+ bottom: 1rem;
466
+ left: 0;
467
+ right: 0;
468
+ display: none;
469
+ z-index: 1000;
470
+ }
471
+ .app-chatbox-container .toolkit-select-wrapper .toolkit-select-options.active {
472
+ display: block;
473
+ }
474
+ .app-chatbox-container .toolkit-select-wrapper .toolkit-select-options::-webkit-scrollbar {
475
+ width: 3px;
476
+ }
477
+ .app-chatbox-container .toolkit-select-wrapper .toolkit-select-options::-webkit-scrollbar-thumb {
478
+ background: rgba(0, 0, 0, 0.2);
479
+ }
480
+ .app-chatbox-container .toolkit-select-wrapper .toolkit-select-option {
481
+ padding: 3px 6px;
482
+ cursor: pointer;
483
+ transition: background-color 0.2s ease;
484
+ font-size: 0.75rem;
485
+ }
486
+ .app-chatbox-container .toolkit-select-wrapper .toolkit-select-option.cancel {
487
+ color: var(--custom-chatbox-gray-color);
488
+ }
489
+ .app-chatbox-container .toolkit-select-wrapper .toolkit-select-option:hover {
490
+ background-color: var(--custom-chatbox-toolkit-opt-active-color);
491
+ }
package/lib/esm/Chatbox/index.scss CHANGED
@@ -45,9 +45,9 @@
45
45
 
46
46
 
47
47
 
48
- /*=================== Chatbox (Core) =================*/
48
+ /*=================== Chatbox (Core) =================*/
49
49
 
50
- .custom-chatbox-circle {
50
+ .app-chatbox-circle {
51
51
  --custom-chatbox-circle-color: #5A5EB9;
52
52
  --custom-chatbox-circle-text: #fff;
53
53
 
@@ -87,12 +87,12 @@
87
87
  }
88
88
 
89
89
 
90
- .custom-chatbox-close {
90
+ .app-chatbox-close {
91
91
  --custom-chatbox-close-color: #333;
92
92
 
93
93
  padding: 20px;
94
94
  position: fixed;
95
- bottom: calc(100vh - 55px);
95
+ bottom: calc(100vh - 2.625rem - 55px);
96
96
  z-index: 1032;
97
97
  right: -15px;
98
98
  cursor: pointer;
@@ -115,9 +115,9 @@
115
115
  }
116
116
 
117
117
 
118
- .custom-chatbox-container {
118
+ .app-chatbox-container {
119
119
  --custom-chatbox-w: 600px;
120
- --custom-chatbox-h: 100vh;
120
+ --custom-chatbox-h: calc(100vh - 2.625rem);
121
121
  --custom-chatbox-bg: #fff;
122
122
  --custom-chatbox-input-bg: #fff;
123
123
  --custom-chatbox-default-txt-color: #333;
@@ -138,8 +138,13 @@
138
138
  --custom-chatbox-toolkit-btn-active-color: #c2dfff;
139
139
  --custom-chatbox-newchat-btn-color: #f8f9fa;
140
140
  --custom-chatbox-newchat-btn-border-color: #e9ecef;
141
+ --custom-chatbox-toolkit-opt-color: #f8f9fa;
142
+ --custom-chatbox-toolkit-opt-border-color: #e9ecef;
143
+ --custom-chatbox-toolkit-opt-active-color: #c2dfff;
144
+ --custom-chatbox-toolkit-btn-radius: 20px;
141
145
 
142
146
 
147
+
143
148
  min-width: var(--custom-chatbox-w);
144
149
  max-width: var(--custom-chatbox-w);
145
150
  margin: auto;
@@ -204,7 +209,7 @@
204
209
  img, svg, video, canvas, audio, iframe, embed, object {
205
210
  display: inline;
206
211
  }
207
-
212
+
208
213
  &::-webkit-scrollbar {
209
214
  width: 3px;
210
215
  }
@@ -351,6 +356,7 @@
351
356
  display: inline;
352
357
  }
353
358
 
359
+
354
360
  .messageInput {
355
361
  width: 100%;
356
362
  border: 1px solid var(--custom-chatbox-msg-border);
@@ -485,25 +491,27 @@
485
491
  justify-content: center;
486
492
 
487
493
 
488
- > button {
494
+ button {
489
495
  padding: 3px 6px;
490
496
  background-color: var(--custom-chatbox-toolkit-btn-color);
491
497
  border: 1px solid var(--custom-chatbox-toolkit-btn-border-color);
492
- border-radius: 20px;
498
+ border-radius: var(--custom-chatbox-toolkit-btn-radius);
493
499
  cursor: pointer;
494
500
  transition: all 0.3s ease;
495
501
  font-size: 0.75rem;
496
502
 
497
-
503
+
498
504
  img, svg, video, canvas, audio, iframe, embed, object {
499
505
  display: inline;
500
506
  }
501
507
 
508
+
502
509
  &:hover {
503
510
  background-color: var(--custom-chatbox-toolkit-btn-border-color);
504
511
  transform: translateY(-2px);
505
512
  }
506
513
 
514
+ &.opt-active,
507
515
  &.active {
508
516
  background-color: var(--custom-chatbox-toolkit-btn-active-color);
509
517
  }
@@ -513,6 +521,99 @@
513
521
 
514
522
  }
515
523
 
524
+ /* toolkit options */
525
+ @keyframes dropupAnimation {
526
+ from {
527
+ opacity: 0;
528
+ transform: translateY(10px);
529
+ }
530
+
531
+ to {
532
+ opacity: 1;
533
+ transform: translateY(0);
534
+ }
535
+ }
536
+
537
+ .toolkit-select-wrapper {
538
+ position: relative;
539
+ display: inline-block;
540
+
541
+ .toolkit-select-btn {
542
+ display: flex;
543
+ align-items: center;
544
+ justify-content: space-between;
545
+ border: 1px solid #ddd;
546
+ border-radius: var(--custom-chatbox-toolkit-btn-radius);
547
+ cursor: pointer;
548
+ }
549
+
550
+ .toolkit-select-arrow {
551
+ margin-left: 8px;
552
+ font-size: 10px;
553
+ transition: transform 0.2s ease;
554
+ }
555
+
556
+ .toolkit-select-arrow.active {
557
+ transform: rotate(180deg);
558
+ }
559
+
560
+ .toolkit-select-options-container {
561
+ z-index: 1000;
562
+ width: 100%;
563
+ min-width: 120px;
564
+ transform: translateY(-100%);
565
+ }
566
+
567
+ .toolkit-select-options {
568
+ background-color: var(--custom-chatbox-toolkit-opt-color);
569
+ border: 1px solid var(--custom-chatbox-toolkit-opt-border-color);
570
+ border-radius: 4px;
571
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
572
+ margin-bottom: 10px;
573
+ max-height: 300px;
574
+ overflow-y: auto;
575
+ animation: dropupAnimation 0.2s ease;
576
+
577
+ position: absolute;
578
+ bottom: 1rem;
579
+ left: 0;
580
+ right: 0;
581
+ display: none;
582
+ z-index: 1000;
583
+
584
+ &.active {
585
+ display: block;
586
+ }
587
+
588
+
589
+ &::-webkit-scrollbar {
590
+ width: 3px;
591
+ }
592
+
593
+ &::-webkit-scrollbar-thumb {
594
+ background: rgba(0, 0, 0, 0.2);
595
+ }
596
+ }
597
+
598
+ .toolkit-select-option {
599
+ padding: 3px 6px;
600
+ cursor: pointer;
601
+ transition: background-color 0.2s ease;
602
+ font-size: 0.75rem;
603
+
604
+ &.cancel {
605
+ color: var(--custom-chatbox-gray-color);
606
+ }
607
+
608
+ &:hover {
609
+ background-color: var(--custom-chatbox-toolkit-opt-active-color);
610
+ }
611
+ }
612
+
613
+ }
614
+
615
+
616
+
516
617
 
517
618
 
518
619
  }