funda-ui 4.5.899 → 4.6.101

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 (4) hide show
  1. package/Chatbox/index.css +77 -77
  2. package/lib/css/Chatbox/index.css +77 -77
  3. package/lib/esm/Chatbox/index.scss +5 -5
  4. package/package.json +1 -1
package/Chatbox/index.css CHANGED
@@ -30,7 +30,7 @@
30
30
  }
31
31
  }
32
32
  /*=================== Chatbox (Core) =================*/
33
- .app-chatbox-circle {
33
+ .custom-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
- .app-chatbox-circle > span {
51
+ .custom-chatbox-circle > span {
52
52
  display: inline-block;
53
53
  margin-top: 25%;
54
54
  }
55
- .app-chatbox-circle:hover {
55
+ .custom-chatbox-circle:hover {
56
56
  transform: scale(1.2);
57
57
  }
58
- .app-chatbox-circle svg {
58
+ .custom-chatbox-circle svg {
59
59
  width: 30px;
60
60
  height: 30px;
61
61
  }
62
- .app-chatbox-circle svg path {
62
+ .custom-chatbox-circle svg path {
63
63
  stroke: #fff;
64
64
  }
65
65
 
66
- .app-chatbox-close {
66
+ .custom-chatbox-close {
67
67
  --custom-chatbox-close-color: #333;
68
68
  padding: 20px;
69
69
  position: fixed;
70
- bottom: calc(100vh - 2.625rem - 55px);
70
+ bottom: calc(100vh - 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
- .app-chatbox-close path {
79
+ .custom-chatbox-close path {
80
80
  fill: var(--custom-chatbox-close-color);
81
81
  }
82
- .app-chatbox-close:hover {
82
+ .custom-chatbox-close:hover {
83
83
  transform: scale(1.2);
84
84
  }
85
- .app-chatbox-close:hover path {
85
+ .custom-chatbox-close:hover path {
86
86
  fill: #f00;
87
87
  }
88
88
 
89
- .app-chatbox-container {
89
+ .custom-chatbox-container {
90
90
  --custom-chatbox-w: 600px;
91
- --custom-chatbox-h: calc(100vh - 2.625rem);
91
+ --custom-chatbox-h: 100vh;
92
92
  --custom-chatbox-bg: #fff;
93
93
  --custom-chatbox-input-bg: #fff;
94
94
  --custom-chatbox-default-txt-color: #333;
@@ -133,65 +133,65 @@
133
133
  /* toolkit buttons */
134
134
  /* toolkit options */
135
135
  }
136
- .app-chatbox-container details {
136
+ .custom-chatbox-container details {
137
137
  font-style: italic;
138
138
  margin: 0;
139
139
  padding: 0;
140
140
  font-size: 0.75rem;
141
141
  margin-bottom: 0.5rem;
142
142
  }
143
- .app-chatbox-container summary {
143
+ .custom-chatbox-container summary {
144
144
  cursor: pointer;
145
145
  font-weight: bold;
146
146
  color: var(--custom-chatbox-primary-color);
147
147
  outline: none;
148
148
  }
149
- .app-chatbox-container details[open] summary {
149
+ .custom-chatbox-container details[open] summary {
150
150
  color: var(--custom-chatbox-primary-text);
151
151
  }
152
- .app-chatbox-container h1 {
152
+ .custom-chatbox-container h1 {
153
153
  font-size: 1.35rem;
154
154
  }
155
- .app-chatbox-container h2 {
155
+ .custom-chatbox-container h2 {
156
156
  font-size: 1.25rem;
157
157
  }
158
- .app-chatbox-container h3 {
158
+ .custom-chatbox-container h3 {
159
159
  font-size: 1.125rem;
160
160
  }
161
- .app-chatbox-container h4 {
161
+ .custom-chatbox-container h4 {
162
162
  font-size: 1rem;
163
163
  }
164
- .app-chatbox-container h5 {
164
+ .custom-chatbox-container h5 {
165
165
  font-size: 0.875rem;
166
166
  }
167
- .app-chatbox-container h6 {
167
+ .custom-chatbox-container h6 {
168
168
  font-size: 0.75rem;
169
169
  }
170
- .app-chatbox-container .messages {
170
+ .custom-chatbox-container .messages {
171
171
  height: calc(100% - 80px);
172
172
  overflow-y: auto;
173
173
  margin-bottom: 10px;
174
174
  font-size: 13px;
175
175
  margin-right: 0;
176
176
  }
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 {
177
+ .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 {
178
178
  display: inline;
179
179
  }
180
- .app-chatbox-container .messages::-webkit-scrollbar {
180
+ .custom-chatbox-container .messages::-webkit-scrollbar {
181
181
  width: 3px;
182
182
  }
183
- .app-chatbox-container .messages::-webkit-scrollbar-thumb {
183
+ .custom-chatbox-container .messages::-webkit-scrollbar-thumb {
184
184
  background: rgba(0, 0, 0, 0.2);
185
185
  }
186
- .app-chatbox-container .messages > div {
186
+ .custom-chatbox-container .messages > div {
187
187
  margin: 5px 0;
188
188
  padding: 3px 5px;
189
189
  border-radius: 0.35rem;
190
190
  }
191
- .app-chatbox-container .messages p {
191
+ .custom-chatbox-container .messages p {
192
192
  margin: 3px 0;
193
193
  }
194
- .app-chatbox-container .messages .qa-timestamp {
194
+ .custom-chatbox-container .messages .qa-timestamp {
195
195
  font-size: 0.75rem;
196
196
  color: var(--custom-chatbox-time-color);
197
197
  font-style: italic;
@@ -199,14 +199,14 @@
199
199
  display: block;
200
200
  text-align: right;
201
201
  }
202
- .app-chatbox-container .messages .qa-name {
202
+ .custom-chatbox-container .messages .qa-name {
203
203
  font-weight: bold;
204
204
  color: var(--custom-chatbox-primary-color);
205
205
  }
206
- .app-chatbox-container .messages .qa-name svg, .app-chatbox-container .messages .qa-name img {
206
+ .custom-chatbox-container .messages .qa-name svg, .custom-chatbox-container .messages .qa-name img {
207
207
  max-height: 15px;
208
208
  }
209
- .app-chatbox-container .messages .qa-content {
209
+ .custom-chatbox-container .messages .qa-content {
210
210
  background: var(--custom-chatbox-msg-bg);
211
211
  padding: 0.5rem;
212
212
  border-radius: 0.35rem;
@@ -214,23 +214,23 @@
214
214
  display: inline-block;
215
215
  text-align: start;
216
216
  }
217
- .app-chatbox-container .messages .request {
217
+ .custom-chatbox-container .messages .request {
218
218
  text-align: end;
219
219
  }
220
- .app-chatbox-container .messages .request .qa-content {
220
+ .custom-chatbox-container .messages .request .qa-content {
221
221
  max-width: var(--custom-chatbox-content-w);
222
222
  background: var(--custom-chatbox-msg-bg2);
223
223
  }
224
- .app-chatbox-container .messages .reply {
224
+ .custom-chatbox-container .messages .reply {
225
225
  text-align: start;
226
226
  }
227
- .app-chatbox-container .messages .reply .qa-name {
227
+ .custom-chatbox-container .messages .reply .qa-name {
228
228
  display: flex;
229
229
  }
230
- .app-chatbox-container .messages .reply .qa-content {
230
+ .custom-chatbox-container .messages .reply .qa-content {
231
231
  width: var(--custom-chatbox-content-w);
232
232
  }
233
- .app-chatbox-container .msg-dotted-loader-container {
233
+ .custom-chatbox-container .msg-dotted-loader-container {
234
234
  font-weight: normal;
235
235
  transform: translateY(-5px);
236
236
  display: flex;
@@ -239,10 +239,10 @@
239
239
  margin-left: 0.3rem;
240
240
  color: var(--custom-chatbox-gray-color);
241
241
  }
242
- .app-chatbox-container .msg-dotted-loader-text {
242
+ .custom-chatbox-container .msg-dotted-loader-text {
243
243
  transform: translateY(-10%);
244
244
  }
245
- .app-chatbox-container .msg-dotted-loader {
245
+ .custom-chatbox-container .msg-dotted-loader {
246
246
  position: relative;
247
247
  text-align: center;
248
248
  display: inline-block;
@@ -250,8 +250,8 @@
250
250
  height: calc(var(--custom-chatbox-msg-dotted-loader-size) * 1.5);
251
251
  margin-right: 0.1rem;
252
252
  }
253
- .app-chatbox-container .msg-dotted-loader::after,
254
- .app-chatbox-container .msg-dotted-loader::before {
253
+ .custom-chatbox-container .msg-dotted-loader::after,
254
+ .custom-chatbox-container .msg-dotted-loader::before {
255
255
  content: "";
256
256
  position: absolute;
257
257
  top: 0;
@@ -263,7 +263,7 @@
263
263
  border-style: dotted solid dotted solid;
264
264
  animation: turn-left 1.5s linear infinite;
265
265
  }
266
- .app-chatbox-container .msg-dotted-loader::before {
266
+ .custom-chatbox-container .msg-dotted-loader::before {
267
267
  left: calc(var(--custom-chatbox-msg-dotted-loader-size) / 2 / 2 * -1);
268
268
  top: calc(var(--custom-chatbox-msg-dotted-loader-size) / 2 / 2 * -1);
269
269
  width: calc(var(--custom-chatbox-msg-dotted-loader-size) + var(--custom-chatbox-msg-dotted-loader-size) / 2);
@@ -287,17 +287,17 @@
287
287
  transform: rotate(-360deg);
288
288
  }
289
289
  }
290
- .app-chatbox-container .msgcontrol {
290
+ .custom-chatbox-container .msgcontrol {
291
291
  display: flex;
292
292
  position: absolute;
293
293
  bottom: 10px;
294
294
  z-index: 1;
295
295
  width: calc(100% - 40px);
296
296
  }
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 {
297
+ .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 {
298
298
  display: inline;
299
299
  }
300
- .app-chatbox-container .msgcontrol .messageInput {
300
+ .custom-chatbox-container .msgcontrol .messageInput {
301
301
  width: 100%;
302
302
  border: 1px solid var(--custom-chatbox-msg-border);
303
303
  border-radius: 4px;
@@ -305,10 +305,10 @@
305
305
  border: none;
306
306
  outline: none;
307
307
  }
308
- .app-chatbox-container .msgcontrol .messageInput:focus, .app-chatbox-container .msgcontrol .messageInput:focus-visible {
308
+ .custom-chatbox-container .msgcontrol .messageInput:focus, .custom-chatbox-container .msgcontrol .messageInput:focus-visible {
309
309
  outline: none;
310
310
  }
311
- .app-chatbox-container .msgcontrol .messageInput .messageInput-control {
311
+ .custom-chatbox-container .msgcontrol .messageInput .messageInput-control {
312
312
  background: var(--custom-chatbox-input-bg);
313
313
  padding: 0.5rem;
314
314
  border-radius: 0.35rem;
@@ -318,17 +318,17 @@
318
318
  max-height: 50vh;
319
319
  border: 1px solid var(--custom-chatbox-gray-color);
320
320
  }
321
- .app-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar {
321
+ .custom-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar {
322
322
  width: 3px;
323
323
  }
324
- .app-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar-thumb {
324
+ .custom-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar-thumb {
325
325
  background: rgba(0, 0, 0, 0.2);
326
326
  }
327
- .app-chatbox-container .msgcontrol .messageInput .messageInput-control:focus, .app-chatbox-container .msgcontrol .messageInput .messageInput-control:focus-visible {
327
+ .custom-chatbox-container .msgcontrol .messageInput .messageInput-control:focus, .custom-chatbox-container .msgcontrol .messageInput .messageInput-control:focus-visible {
328
328
  border-color: transparent;
329
329
  outline: 1px solid var(--custom-chatbox-primary-color);
330
330
  }
331
- .app-chatbox-container .msgcontrol button {
331
+ .custom-chatbox-container .msgcontrol button {
332
332
  padding: 6px;
333
333
  border: none;
334
334
  position: absolute;
@@ -347,20 +347,20 @@
347
347
  height: 40px;
348
348
  padding: 0;
349
349
  }
350
- .app-chatbox-container .msgcontrol button path {
350
+ .custom-chatbox-container .msgcontrol button path {
351
351
  fill: var(--custom-chatbox-default-btn-color);
352
352
  }
353
- .app-chatbox-container .msgcontrol button:hover {
353
+ .custom-chatbox-container .msgcontrol button:hover {
354
354
  transform: scale(1.1);
355
355
  }
356
- .app-chatbox-container .msgcontrol button:disabled {
356
+ .custom-chatbox-container .msgcontrol button:disabled {
357
357
  opacity: 0.7;
358
358
  }
359
- .app-chatbox-container .msgcontrol button.is-suspended {
359
+ .custom-chatbox-container .msgcontrol button.is-suspended {
360
360
  background-color: var(--custom-chatbox-stop-color);
361
361
  border-color: var(--custom-chatbox-stop-color);
362
362
  }
363
- .app-chatbox-container .loading {
363
+ .custom-chatbox-container .loading {
364
364
  margin-top: 0;
365
365
  height: 5px;
366
366
  position: absolute;
@@ -368,10 +368,10 @@
368
368
  width: calc(100% - 40px);
369
369
  z-index: 1;
370
370
  }
371
- .app-chatbox-container .newchat-btn {
371
+ .custom-chatbox-container .newchat-btn {
372
372
  text-align: center;
373
373
  }
374
- .app-chatbox-container .newchat-btn > button {
374
+ .custom-chatbox-container .newchat-btn > button {
375
375
  padding: 3px 6px;
376
376
  background-color: var(--custom-chatbox-newchat-btn-color);
377
377
  border: 1px solid var(--custom-chatbox-newchat-btn-border-color);
@@ -381,13 +381,13 @@
381
381
  font-size: 0.8125rem;
382
382
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
383
383
  }
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 {
384
+ .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 {
385
385
  display: inline;
386
386
  }
387
- .app-chatbox-container .newchat-btn > button:hover {
387
+ .custom-chatbox-container .newchat-btn > button:hover {
388
388
  transform: translateY(-2px);
389
389
  }
390
- .app-chatbox-container .toolkit-btns {
390
+ .custom-chatbox-container .toolkit-btns {
391
391
  display: flex;
392
392
  position: absolute;
393
393
  bottom: 20px;
@@ -397,7 +397,7 @@
397
397
  gap: 8px;
398
398
  justify-content: center;
399
399
  }
400
- .app-chatbox-container .toolkit-btns button {
400
+ .custom-chatbox-container .toolkit-btns button {
401
401
  padding: 3px 6px;
402
402
  background-color: var(--custom-chatbox-toolkit-btn-color);
403
403
  border: 1px solid var(--custom-chatbox-toolkit-btn-border-color);
@@ -406,14 +406,14 @@
406
406
  transition: all 0.3s ease;
407
407
  font-size: 0.75rem;
408
408
  }
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 {
409
+ .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 {
410
410
  display: inline;
411
411
  }
412
- .app-chatbox-container .toolkit-btns button:hover {
412
+ .custom-chatbox-container .toolkit-btns button:hover {
413
413
  background-color: var(--custom-chatbox-toolkit-btn-border-color);
414
414
  transform: translateY(-2px);
415
415
  }
416
- .app-chatbox-container .toolkit-btns button.opt-active, .app-chatbox-container .toolkit-btns button.active {
416
+ .custom-chatbox-container .toolkit-btns button.opt-active, .custom-chatbox-container .toolkit-btns button.active {
417
417
  background-color: var(--custom-chatbox-toolkit-btn-active-color);
418
418
  }
419
419
  @keyframes dropupAnimation {
@@ -426,11 +426,11 @@
426
426
  transform: translateY(0);
427
427
  }
428
428
  }
429
- .app-chatbox-container .toolkit-select-wrapper {
429
+ .custom-chatbox-container .toolkit-select-wrapper {
430
430
  position: relative;
431
431
  display: inline-block;
432
432
  }
433
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-btn {
433
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-btn {
434
434
  display: flex;
435
435
  align-items: center;
436
436
  justify-content: space-between;
@@ -438,21 +438,21 @@
438
438
  border-radius: var(--custom-chatbox-toolkit-btn-radius);
439
439
  cursor: pointer;
440
440
  }
441
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-arrow {
441
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-arrow {
442
442
  margin-left: 8px;
443
443
  font-size: 10px;
444
444
  transition: transform 0.2s ease;
445
445
  }
446
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-arrow.active {
446
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-arrow.active {
447
447
  transform: rotate(180deg);
448
448
  }
449
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-options-container {
449
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options-container {
450
450
  z-index: 1000;
451
451
  width: 100%;
452
452
  min-width: 120px;
453
453
  transform: translateY(-100%);
454
454
  }
455
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-options {
455
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options {
456
456
  background-color: var(--custom-chatbox-toolkit-opt-color);
457
457
  border: 1px solid var(--custom-chatbox-toolkit-opt-border-color);
458
458
  border-radius: 4px;
@@ -468,24 +468,24 @@
468
468
  display: none;
469
469
  z-index: 1000;
470
470
  }
471
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-options.active {
471
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options.active {
472
472
  display: block;
473
473
  }
474
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-options::-webkit-scrollbar {
474
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options::-webkit-scrollbar {
475
475
  width: 3px;
476
476
  }
477
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-options::-webkit-scrollbar-thumb {
477
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options::-webkit-scrollbar-thumb {
478
478
  background: rgba(0, 0, 0, 0.2);
479
479
  }
480
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-option {
480
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option {
481
481
  padding: 3px 6px;
482
482
  cursor: pointer;
483
483
  transition: background-color 0.2s ease;
484
484
  font-size: 0.75rem;
485
485
  }
486
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-option.cancel {
486
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option.cancel {
487
487
  color: var(--custom-chatbox-gray-color);
488
488
  }
489
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-option:hover {
489
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option:hover {
490
490
  background-color: var(--custom-chatbox-toolkit-opt-active-color);
491
491
  }
package/lib/css/Chatbox/index.css CHANGED
@@ -30,7 +30,7 @@
30
30
  }
31
31
  }
32
32
  /*=================== Chatbox (Core) =================*/
33
- .app-chatbox-circle {
33
+ .custom-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
- .app-chatbox-circle > span {
51
+ .custom-chatbox-circle > span {
52
52
  display: inline-block;
53
53
  margin-top: 25%;
54
54
  }
55
- .app-chatbox-circle:hover {
55
+ .custom-chatbox-circle:hover {
56
56
  transform: scale(1.2);
57
57
  }
58
- .app-chatbox-circle svg {
58
+ .custom-chatbox-circle svg {
59
59
  width: 30px;
60
60
  height: 30px;
61
61
  }
62
- .app-chatbox-circle svg path {
62
+ .custom-chatbox-circle svg path {
63
63
  stroke: #fff;
64
64
  }
65
65
 
66
- .app-chatbox-close {
66
+ .custom-chatbox-close {
67
67
  --custom-chatbox-close-color: #333;
68
68
  padding: 20px;
69
69
  position: fixed;
70
- bottom: calc(100vh - 2.625rem - 55px);
70
+ bottom: calc(100vh - 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
- .app-chatbox-close path {
79
+ .custom-chatbox-close path {
80
80
  fill: var(--custom-chatbox-close-color);
81
81
  }
82
- .app-chatbox-close:hover {
82
+ .custom-chatbox-close:hover {
83
83
  transform: scale(1.2);
84
84
  }
85
- .app-chatbox-close:hover path {
85
+ .custom-chatbox-close:hover path {
86
86
  fill: #f00;
87
87
  }
88
88
 
89
- .app-chatbox-container {
89
+ .custom-chatbox-container {
90
90
  --custom-chatbox-w: 600px;
91
- --custom-chatbox-h: calc(100vh - 2.625rem);
91
+ --custom-chatbox-h: 100vh;
92
92
  --custom-chatbox-bg: #fff;
93
93
  --custom-chatbox-input-bg: #fff;
94
94
  --custom-chatbox-default-txt-color: #333;
@@ -133,65 +133,65 @@
133
133
  /* toolkit buttons */
134
134
  /* toolkit options */
135
135
  }
136
- .app-chatbox-container details {
136
+ .custom-chatbox-container details {
137
137
  font-style: italic;
138
138
  margin: 0;
139
139
  padding: 0;
140
140
  font-size: 0.75rem;
141
141
  margin-bottom: 0.5rem;
142
142
  }
143
- .app-chatbox-container summary {
143
+ .custom-chatbox-container summary {
144
144
  cursor: pointer;
145
145
  font-weight: bold;
146
146
  color: var(--custom-chatbox-primary-color);
147
147
  outline: none;
148
148
  }
149
- .app-chatbox-container details[open] summary {
149
+ .custom-chatbox-container details[open] summary {
150
150
  color: var(--custom-chatbox-primary-text);
151
151
  }
152
- .app-chatbox-container h1 {
152
+ .custom-chatbox-container h1 {
153
153
  font-size: 1.35rem;
154
154
  }
155
- .app-chatbox-container h2 {
155
+ .custom-chatbox-container h2 {
156
156
  font-size: 1.25rem;
157
157
  }
158
- .app-chatbox-container h3 {
158
+ .custom-chatbox-container h3 {
159
159
  font-size: 1.125rem;
160
160
  }
161
- .app-chatbox-container h4 {
161
+ .custom-chatbox-container h4 {
162
162
  font-size: 1rem;
163
163
  }
164
- .app-chatbox-container h5 {
164
+ .custom-chatbox-container h5 {
165
165
  font-size: 0.875rem;
166
166
  }
167
- .app-chatbox-container h6 {
167
+ .custom-chatbox-container h6 {
168
168
  font-size: 0.75rem;
169
169
  }
170
- .app-chatbox-container .messages {
170
+ .custom-chatbox-container .messages {
171
171
  height: calc(100% - 80px);
172
172
  overflow-y: auto;
173
173
  margin-bottom: 10px;
174
174
  font-size: 13px;
175
175
  margin-right: 0;
176
176
  }
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 {
177
+ .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 {
178
178
  display: inline;
179
179
  }
180
- .app-chatbox-container .messages::-webkit-scrollbar {
180
+ .custom-chatbox-container .messages::-webkit-scrollbar {
181
181
  width: 3px;
182
182
  }
183
- .app-chatbox-container .messages::-webkit-scrollbar-thumb {
183
+ .custom-chatbox-container .messages::-webkit-scrollbar-thumb {
184
184
  background: rgba(0, 0, 0, 0.2);
185
185
  }
186
- .app-chatbox-container .messages > div {
186
+ .custom-chatbox-container .messages > div {
187
187
  margin: 5px 0;
188
188
  padding: 3px 5px;
189
189
  border-radius: 0.35rem;
190
190
  }
191
- .app-chatbox-container .messages p {
191
+ .custom-chatbox-container .messages p {
192
192
  margin: 3px 0;
193
193
  }
194
- .app-chatbox-container .messages .qa-timestamp {
194
+ .custom-chatbox-container .messages .qa-timestamp {
195
195
  font-size: 0.75rem;
196
196
  color: var(--custom-chatbox-time-color);
197
197
  font-style: italic;
@@ -199,14 +199,14 @@
199
199
  display: block;
200
200
  text-align: right;
201
201
  }
202
- .app-chatbox-container .messages .qa-name {
202
+ .custom-chatbox-container .messages .qa-name {
203
203
  font-weight: bold;
204
204
  color: var(--custom-chatbox-primary-color);
205
205
  }
206
- .app-chatbox-container .messages .qa-name svg, .app-chatbox-container .messages .qa-name img {
206
+ .custom-chatbox-container .messages .qa-name svg, .custom-chatbox-container .messages .qa-name img {
207
207
  max-height: 15px;
208
208
  }
209
- .app-chatbox-container .messages .qa-content {
209
+ .custom-chatbox-container .messages .qa-content {
210
210
  background: var(--custom-chatbox-msg-bg);
211
211
  padding: 0.5rem;
212
212
  border-radius: 0.35rem;
@@ -214,23 +214,23 @@
214
214
  display: inline-block;
215
215
  text-align: start;
216
216
  }
217
- .app-chatbox-container .messages .request {
217
+ .custom-chatbox-container .messages .request {
218
218
  text-align: end;
219
219
  }
220
- .app-chatbox-container .messages .request .qa-content {
220
+ .custom-chatbox-container .messages .request .qa-content {
221
221
  max-width: var(--custom-chatbox-content-w);
222
222
  background: var(--custom-chatbox-msg-bg2);
223
223
  }
224
- .app-chatbox-container .messages .reply {
224
+ .custom-chatbox-container .messages .reply {
225
225
  text-align: start;
226
226
  }
227
- .app-chatbox-container .messages .reply .qa-name {
227
+ .custom-chatbox-container .messages .reply .qa-name {
228
228
  display: flex;
229
229
  }
230
- .app-chatbox-container .messages .reply .qa-content {
230
+ .custom-chatbox-container .messages .reply .qa-content {
231
231
  width: var(--custom-chatbox-content-w);
232
232
  }
233
- .app-chatbox-container .msg-dotted-loader-container {
233
+ .custom-chatbox-container .msg-dotted-loader-container {
234
234
  font-weight: normal;
235
235
  transform: translateY(-5px);
236
236
  display: flex;
@@ -239,10 +239,10 @@
239
239
  margin-left: 0.3rem;
240
240
  color: var(--custom-chatbox-gray-color);
241
241
  }
242
- .app-chatbox-container .msg-dotted-loader-text {
242
+ .custom-chatbox-container .msg-dotted-loader-text {
243
243
  transform: translateY(-10%);
244
244
  }
245
- .app-chatbox-container .msg-dotted-loader {
245
+ .custom-chatbox-container .msg-dotted-loader {
246
246
  position: relative;
247
247
  text-align: center;
248
248
  display: inline-block;
@@ -250,8 +250,8 @@
250
250
  height: calc(var(--custom-chatbox-msg-dotted-loader-size) * 1.5);
251
251
  margin-right: 0.1rem;
252
252
  }
253
- .app-chatbox-container .msg-dotted-loader::after,
254
- .app-chatbox-container .msg-dotted-loader::before {
253
+ .custom-chatbox-container .msg-dotted-loader::after,
254
+ .custom-chatbox-container .msg-dotted-loader::before {
255
255
  content: "";
256
256
  position: absolute;
257
257
  top: 0;
@@ -263,7 +263,7 @@
263
263
  border-style: dotted solid dotted solid;
264
264
  animation: turn-left 1.5s linear infinite;
265
265
  }
266
- .app-chatbox-container .msg-dotted-loader::before {
266
+ .custom-chatbox-container .msg-dotted-loader::before {
267
267
  left: calc(var(--custom-chatbox-msg-dotted-loader-size) / 2 / 2 * -1);
268
268
  top: calc(var(--custom-chatbox-msg-dotted-loader-size) / 2 / 2 * -1);
269
269
  width: calc(var(--custom-chatbox-msg-dotted-loader-size) + var(--custom-chatbox-msg-dotted-loader-size) / 2);
@@ -287,17 +287,17 @@
287
287
  transform: rotate(-360deg);
288
288
  }
289
289
  }
290
- .app-chatbox-container .msgcontrol {
290
+ .custom-chatbox-container .msgcontrol {
291
291
  display: flex;
292
292
  position: absolute;
293
293
  bottom: 10px;
294
294
  z-index: 1;
295
295
  width: calc(100% - 40px);
296
296
  }
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 {
297
+ .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 {
298
298
  display: inline;
299
299
  }
300
- .app-chatbox-container .msgcontrol .messageInput {
300
+ .custom-chatbox-container .msgcontrol .messageInput {
301
301
  width: 100%;
302
302
  border: 1px solid var(--custom-chatbox-msg-border);
303
303
  border-radius: 4px;
@@ -305,10 +305,10 @@
305
305
  border: none;
306
306
  outline: none;
307
307
  }
308
- .app-chatbox-container .msgcontrol .messageInput:focus, .app-chatbox-container .msgcontrol .messageInput:focus-visible {
308
+ .custom-chatbox-container .msgcontrol .messageInput:focus, .custom-chatbox-container .msgcontrol .messageInput:focus-visible {
309
309
  outline: none;
310
310
  }
311
- .app-chatbox-container .msgcontrol .messageInput .messageInput-control {
311
+ .custom-chatbox-container .msgcontrol .messageInput .messageInput-control {
312
312
  background: var(--custom-chatbox-input-bg);
313
313
  padding: 0.5rem;
314
314
  border-radius: 0.35rem;
@@ -318,17 +318,17 @@
318
318
  max-height: 50vh;
319
319
  border: 1px solid var(--custom-chatbox-gray-color);
320
320
  }
321
- .app-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar {
321
+ .custom-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar {
322
322
  width: 3px;
323
323
  }
324
- .app-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar-thumb {
324
+ .custom-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar-thumb {
325
325
  background: rgba(0, 0, 0, 0.2);
326
326
  }
327
- .app-chatbox-container .msgcontrol .messageInput .messageInput-control:focus, .app-chatbox-container .msgcontrol .messageInput .messageInput-control:focus-visible {
327
+ .custom-chatbox-container .msgcontrol .messageInput .messageInput-control:focus, .custom-chatbox-container .msgcontrol .messageInput .messageInput-control:focus-visible {
328
328
  border-color: transparent;
329
329
  outline: 1px solid var(--custom-chatbox-primary-color);
330
330
  }
331
- .app-chatbox-container .msgcontrol button {
331
+ .custom-chatbox-container .msgcontrol button {
332
332
  padding: 6px;
333
333
  border: none;
334
334
  position: absolute;
@@ -347,20 +347,20 @@
347
347
  height: 40px;
348
348
  padding: 0;
349
349
  }
350
- .app-chatbox-container .msgcontrol button path {
350
+ .custom-chatbox-container .msgcontrol button path {
351
351
  fill: var(--custom-chatbox-default-btn-color);
352
352
  }
353
- .app-chatbox-container .msgcontrol button:hover {
353
+ .custom-chatbox-container .msgcontrol button:hover {
354
354
  transform: scale(1.1);
355
355
  }
356
- .app-chatbox-container .msgcontrol button:disabled {
356
+ .custom-chatbox-container .msgcontrol button:disabled {
357
357
  opacity: 0.7;
358
358
  }
359
- .app-chatbox-container .msgcontrol button.is-suspended {
359
+ .custom-chatbox-container .msgcontrol button.is-suspended {
360
360
  background-color: var(--custom-chatbox-stop-color);
361
361
  border-color: var(--custom-chatbox-stop-color);
362
362
  }
363
- .app-chatbox-container .loading {
363
+ .custom-chatbox-container .loading {
364
364
  margin-top: 0;
365
365
  height: 5px;
366
366
  position: absolute;
@@ -368,10 +368,10 @@
368
368
  width: calc(100% - 40px);
369
369
  z-index: 1;
370
370
  }
371
- .app-chatbox-container .newchat-btn {
371
+ .custom-chatbox-container .newchat-btn {
372
372
  text-align: center;
373
373
  }
374
- .app-chatbox-container .newchat-btn > button {
374
+ .custom-chatbox-container .newchat-btn > button {
375
375
  padding: 3px 6px;
376
376
  background-color: var(--custom-chatbox-newchat-btn-color);
377
377
  border: 1px solid var(--custom-chatbox-newchat-btn-border-color);
@@ -381,13 +381,13 @@
381
381
  font-size: 0.8125rem;
382
382
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
383
383
  }
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 {
384
+ .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 {
385
385
  display: inline;
386
386
  }
387
- .app-chatbox-container .newchat-btn > button:hover {
387
+ .custom-chatbox-container .newchat-btn > button:hover {
388
388
  transform: translateY(-2px);
389
389
  }
390
- .app-chatbox-container .toolkit-btns {
390
+ .custom-chatbox-container .toolkit-btns {
391
391
  display: flex;
392
392
  position: absolute;
393
393
  bottom: 20px;
@@ -397,7 +397,7 @@
397
397
  gap: 8px;
398
398
  justify-content: center;
399
399
  }
400
- .app-chatbox-container .toolkit-btns button {
400
+ .custom-chatbox-container .toolkit-btns button {
401
401
  padding: 3px 6px;
402
402
  background-color: var(--custom-chatbox-toolkit-btn-color);
403
403
  border: 1px solid var(--custom-chatbox-toolkit-btn-border-color);
@@ -406,14 +406,14 @@
406
406
  transition: all 0.3s ease;
407
407
  font-size: 0.75rem;
408
408
  }
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 {
409
+ .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 {
410
410
  display: inline;
411
411
  }
412
- .app-chatbox-container .toolkit-btns button:hover {
412
+ .custom-chatbox-container .toolkit-btns button:hover {
413
413
  background-color: var(--custom-chatbox-toolkit-btn-border-color);
414
414
  transform: translateY(-2px);
415
415
  }
416
- .app-chatbox-container .toolkit-btns button.opt-active, .app-chatbox-container .toolkit-btns button.active {
416
+ .custom-chatbox-container .toolkit-btns button.opt-active, .custom-chatbox-container .toolkit-btns button.active {
417
417
  background-color: var(--custom-chatbox-toolkit-btn-active-color);
418
418
  }
419
419
  @keyframes dropupAnimation {
@@ -426,11 +426,11 @@
426
426
  transform: translateY(0);
427
427
  }
428
428
  }
429
- .app-chatbox-container .toolkit-select-wrapper {
429
+ .custom-chatbox-container .toolkit-select-wrapper {
430
430
  position: relative;
431
431
  display: inline-block;
432
432
  }
433
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-btn {
433
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-btn {
434
434
  display: flex;
435
435
  align-items: center;
436
436
  justify-content: space-between;
@@ -438,21 +438,21 @@
438
438
  border-radius: var(--custom-chatbox-toolkit-btn-radius);
439
439
  cursor: pointer;
440
440
  }
441
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-arrow {
441
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-arrow {
442
442
  margin-left: 8px;
443
443
  font-size: 10px;
444
444
  transition: transform 0.2s ease;
445
445
  }
446
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-arrow.active {
446
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-arrow.active {
447
447
  transform: rotate(180deg);
448
448
  }
449
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-options-container {
449
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options-container {
450
450
  z-index: 1000;
451
451
  width: 100%;
452
452
  min-width: 120px;
453
453
  transform: translateY(-100%);
454
454
  }
455
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-options {
455
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options {
456
456
  background-color: var(--custom-chatbox-toolkit-opt-color);
457
457
  border: 1px solid var(--custom-chatbox-toolkit-opt-border-color);
458
458
  border-radius: 4px;
@@ -468,24 +468,24 @@
468
468
  display: none;
469
469
  z-index: 1000;
470
470
  }
471
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-options.active {
471
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options.active {
472
472
  display: block;
473
473
  }
474
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-options::-webkit-scrollbar {
474
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options::-webkit-scrollbar {
475
475
  width: 3px;
476
476
  }
477
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-options::-webkit-scrollbar-thumb {
477
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options::-webkit-scrollbar-thumb {
478
478
  background: rgba(0, 0, 0, 0.2);
479
479
  }
480
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-option {
480
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option {
481
481
  padding: 3px 6px;
482
482
  cursor: pointer;
483
483
  transition: background-color 0.2s ease;
484
484
  font-size: 0.75rem;
485
485
  }
486
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-option.cancel {
486
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option.cancel {
487
487
  color: var(--custom-chatbox-gray-color);
488
488
  }
489
- .app-chatbox-container .toolkit-select-wrapper .toolkit-select-option:hover {
489
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option:hover {
490
490
  background-color: var(--custom-chatbox-toolkit-opt-active-color);
491
491
  }
package/lib/esm/Chatbox/index.scss CHANGED
@@ -47,7 +47,7 @@
47
47
 
48
48
  /*=================== Chatbox (Core) =================*/
49
49
 
50
- .app-chatbox-circle {
50
+ .custom-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
- .app-chatbox-close {
90
+ .custom-chatbox-close {
91
91
  --custom-chatbox-close-color: #333;
92
92
 
93
93
  padding: 20px;
94
94
  position: fixed;
95
- bottom: calc(100vh - 2.625rem - 55px);
95
+ bottom: calc(100vh - 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
- .app-chatbox-container {
118
+ .custom-chatbox-container {
119
119
  --custom-chatbox-w: 600px;
120
- --custom-chatbox-h: calc(100vh - 2.625rem);
120
+ --custom-chatbox-h: 100vh;
121
121
  --custom-chatbox-bg: #fff;
122
122
  --custom-chatbox-input-bg: #fff;
123
123
  --custom-chatbox-default-txt-color: #333;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "author": "UIUX Lab",
3
3
  "email": "uiuxlab@gmail.com",
4
4
  "name": "funda-ui",
5
- "version": "4.5.899",
5
+ "version": "4.6.101",
6
6
  "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
7
7
  "repository": {
8
8
  "type": "git",