funda-ui 4.6.358 → 4.6.388

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 (9) hide show
  1. package/Chatbox/index.css +170 -3
  2. package/Chatbox/index.d.ts +2 -0
  3. package/Chatbox/index.js +7 -1
  4. package/lib/cjs/Chatbox/index.d.ts +2 -0
  5. package/lib/cjs/Chatbox/index.js +7 -1
  6. package/lib/css/Chatbox/index.css +170 -3
  7. package/lib/esm/Chatbox/index.scss +209 -4
  8. package/lib/esm/Chatbox/index.tsx +8 -2
  9. package/package.json +1 -1
package/Chatbox/index.css CHANGED
@@ -135,6 +135,11 @@
135
135
  --custom-chatbox-questions-hover-bg: #e9e9e9;
136
136
  --custom-chatbox-content-html-elem-border-color: #ddd;
137
137
  --custom-chatbox-content-html-elem-bg: rgba(0,0,0,.05);
138
+ --custom-balloon-border-radius: 0.35rem;
139
+ --custom-balloon-color: rgba(16, 16, 16, 0.95);
140
+ --custom-balloon-text-color: #fff;
141
+ --custom-balloon-font-size: 12px;
142
+ --custom-balloon-move: 4px;
138
143
  min-width: var(--custom-chatbox-w);
139
144
  max-width: var(--custom-chatbox-w);
140
145
  margin: auto;
@@ -155,6 +160,7 @@
155
160
  /* toolkit buttons */
156
161
  /* toolkit options */
157
162
  /* default questions */
163
+ /* Tooltip */
158
164
  }
159
165
  .custom-chatbox-container details {
160
166
  font-style: italic;
@@ -193,7 +199,7 @@
193
199
  font-size: 0.75rem;
194
200
  }
195
201
  .custom-chatbox-container .messages {
196
- height: calc(100% - 110px);
202
+ height: calc(100% - 125px);
197
203
  overflow-y: auto;
198
204
  margin-bottom: 10px;
199
205
  font-size: 13px;
@@ -372,7 +378,7 @@
372
378
  display: inline;
373
379
  }
374
380
  .custom-chatbox-container .msgcontrol.focus {
375
- border-color: var(--app-chatbox-primary-color);
381
+ border-color: var(--custom-chatbox-primary-color);
376
382
  }
377
383
  .custom-chatbox-container .msgcontrol .messageInput {
378
384
  width: 100%;
@@ -450,7 +456,7 @@
450
456
  .custom-chatbox-container .newchat-btn {
451
457
  text-align: center;
452
458
  position: absolute;
453
- bottom: 95px;
459
+ bottom: 115px;
454
460
  left: 50%;
455
461
  transform: translateX(-50%);
456
462
  z-index: 1;
@@ -595,3 +601,164 @@
595
601
  .custom-chatbox-container .default-question-item:last-child {
596
602
  margin-bottom: 0;
597
603
  }
604
+ .custom-chatbox-container button[aria-label][data-balloon-pos] {
605
+ overflow: visible;
606
+ }
607
+ .custom-chatbox-container [aria-label][data-balloon-pos] {
608
+ cursor: pointer;
609
+ }
610
+ .custom-chatbox-container [aria-label][data-balloon-pos]:after {
611
+ opacity: 0;
612
+ pointer-events: none;
613
+ transition: all 0.18s ease-out 0.18s;
614
+ text-indent: 0;
615
+ font-weight: normal;
616
+ font-style: normal;
617
+ text-shadow: none;
618
+ font-size: var(--custom-balloon-font-size);
619
+ background: var(--custom-balloon-color);
620
+ border-radius: 2px;
621
+ color: var(--custom-balloon-text-color);
622
+ border-radius: var(--custom-balloon-border-radius);
623
+ content: attr(aria-label);
624
+ padding: 0.5em 1em;
625
+ position: absolute;
626
+ white-space: nowrap;
627
+ z-index: 10;
628
+ }
629
+ .custom-chatbox-container [aria-label][data-balloon-pos]:before {
630
+ width: 0;
631
+ height: 0;
632
+ border: 5px solid transparent;
633
+ border-top-color: var(--custom-balloon-color);
634
+ opacity: 0;
635
+ pointer-events: none;
636
+ transition: all 0.18s ease-out 0.18s;
637
+ content: "";
638
+ position: absolute;
639
+ z-index: 10;
640
+ }
641
+ .custom-chatbox-container [aria-label][data-balloon-pos]:hover:before, .custom-chatbox-container [aria-label][data-balloon-pos]:hover:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-visible]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-visible]:after, .custom-chatbox-container [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, .custom-chatbox-container [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after {
642
+ opacity: 1;
643
+ pointer-events: none;
644
+ }
645
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-break]:after {
646
+ white-space: pre;
647
+ }
648
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
649
+ white-space: pre-line;
650
+ word-break: break-word;
651
+ }
652
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-blunt]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-blunt]:after {
653
+ transition: none;
654
+ }
655
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=up]:hover:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=up][data-balloon-visible]:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=down]:hover:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=down][data-balloon-visible]:after {
656
+ transform: translate(-50%, 0);
657
+ }
658
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=up]:hover:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=up][data-balloon-visible]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=down]:hover:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=down][data-balloon-visible]:before {
659
+ transform: translate(-50%, 0);
660
+ }
661
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-left]:after {
662
+ left: 0;
663
+ }
664
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-left]:before {
665
+ left: 5px;
666
+ }
667
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right]:after {
668
+ right: 0;
669
+ }
670
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right]:before {
671
+ right: 5px;
672
+ }
673
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-po*=-left]:hover:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-po*=-left][data-balloon-visible]:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right]:hover:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right][data-balloon-visible]:after {
674
+ transform: translate(0, 0);
675
+ }
676
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-po*=-left]:hover:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-po*=-left][data-balloon-visible]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right]:hover:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right][data-balloon-visible]:before {
677
+ transform: translate(0, 0);
678
+ }
679
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=up]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=up]:after {
680
+ bottom: 100%;
681
+ transform-origin: top;
682
+ transform: translate(0, var(--custom-balloon-move));
683
+ }
684
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=up]:after {
685
+ margin-bottom: 10px;
686
+ }
687
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=up]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=up]:after {
688
+ left: 50%;
689
+ transform: translate(-50%, var(--custom-balloon-move));
690
+ }
691
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=down]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=down]:after {
692
+ top: 100%;
693
+ transform: translate(0, calc(var(--custom-balloon-move) * -1));
694
+ }
695
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=down]:after {
696
+ margin-top: 10px;
697
+ }
698
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=down]:before {
699
+ width: 0;
700
+ height: 0;
701
+ border: 5px solid transparent;
702
+ border-bottom-color: var(--custom-balloon-color);
703
+ }
704
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=down]:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=down]:before {
705
+ left: 50%;
706
+ transform: translate(-50%, calc(var(--custom-balloon-move) * -1));
707
+ }
708
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:hover:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left][data-balloon-visible]:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:hover:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right][data-balloon-visible]:after {
709
+ transform: translate(0, -50%);
710
+ }
711
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:hover:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left][data-balloon-visible]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:hover:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right][data-balloon-visible]:before {
712
+ transform: translate(0, -50%);
713
+ }
714
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:before {
715
+ right: 100%;
716
+ top: 50%;
717
+ transform: translate(var(--custom-balloon-move), -50%);
718
+ }
719
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:after {
720
+ margin-right: 10px;
721
+ }
722
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:before {
723
+ width: 0;
724
+ height: 0;
725
+ border: 5px solid transparent;
726
+ border-left-color: var(--custom-balloon-color);
727
+ }
728
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:before {
729
+ left: 100%;
730
+ top: 50%;
731
+ transform: translate(calc(var(--custom-balloon-move) * -1), -50%);
732
+ }
733
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:after {
734
+ margin-left: 10px;
735
+ }
736
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:before {
737
+ width: 0;
738
+ height: 0;
739
+ border: 5px solid transparent;
740
+ border-right-color: var(--custom-balloon-color);
741
+ }
742
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length]:after {
743
+ white-space: normal;
744
+ }
745
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=small]:after {
746
+ width: 80px;
747
+ }
748
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=medium]:after {
749
+ width: 150px;
750
+ }
751
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=large]:after {
752
+ width: 260px;
753
+ }
754
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=xlarge]:after {
755
+ width: 380px;
756
+ }
757
+ @media screen and (max-width: 768px) {
758
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=xlarge]:after {
759
+ width: 90vw;
760
+ }
761
+ }
762
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=fit]:after {
763
+ width: 100%;
764
+ }
package/Chatbox/index.d.ts CHANGED
@@ -62,6 +62,8 @@ export declare type ChatboxProps = {
62
62
  sendLabel?: string;
63
63
  sendLoading?: boolean;
64
64
  sendLoadingLabel?: string;
65
+ copyLabel?: string;
66
+ closeLabel?: string;
65
67
  placeholder?: string;
66
68
  noDataPlaceholder?: string;
67
69
  requestConfig: RequestConfig;
package/Chatbox/index.js CHANGED
@@ -4410,6 +4410,8 @@ var Chatbox = function Chatbox(props) {
4410
4410
  sendLabel = currentProps.sendLabel,
4411
4411
  sendLoading = currentProps.sendLoading,
4412
4412
  sendLoadingLabel = currentProps.sendLoadingLabel,
4413
+ copyLabel = currentProps.copyLabel,
4414
+ closeLabel = currentProps.closeLabel,
4413
4415
  placeholder = currentProps.placeholder,
4414
4416
  noDataPlaceholder = currentProps.noDataPlaceholder,
4415
4417
  requestConfig = currentProps.requestConfig,
@@ -4481,6 +4483,8 @@ var Chatbox = function Chatbox(props) {
4481
4483
  sendLabel: sendLabel,
4482
4484
  sendLoading: sendLoading,
4483
4485
  sendLoadingLabel: sendLoadingLabel,
4486
+ copyLabel: copyLabel,
4487
+ closeLabel: closeLabel,
4484
4488
  placeholder: placeholder,
4485
4489
  noDataPlaceholder: noDataPlaceholder,
4486
4490
  requestConfig: requestConfig,
@@ -5474,6 +5478,8 @@ var Chatbox = function Chatbox(props) {
5474
5478
  display: show ? 'block' : 'none'
5475
5479
  },
5476
5480
  className: "".concat(args().prefix || 'custom-', "chatbox-close"),
5481
+ "aria-label": "".concat(args().closeLabel || 'Close'),
5482
+ "data-balloon-pos": "left",
5477
5483
  tabIndex: -1,
5478
5484
  onClick: handleClose
5479
5485
  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
@@ -5550,7 +5556,7 @@ var Chatbox = function Chatbox(props) {
5550
5556
 
5551
5557
  // Mark the message as animated;
5552
5558
  animatedMessagesRef.current.add(index);
5553
- var timeShow = "<span class=\"qa-timestamp\">".concat(msg.timestamp, "</span>").concat(args().showCopyBtn && ((_msg$tag = msg.tag) === null || _msg$tag === void 0 ? void 0 : _msg$tag.indexOf('[reply]')) >= 0 ? "<button class=\"copy-btn\" onclick=\"window.chatboxCopyToClipboard(document.querySelector('#".concat(copyTargetId, " .qa-content-inner').innerHTML)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.242a2 2 0 0 0-.602-1.43L16.083 2.57A2 2 0 0 0 14.685 2H10a2 2 0 0 0-2 2z\"/><path d=\"M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2\"/></svg></button>") : '');
5559
+ var timeShow = "<span class=\"qa-timestamp\">".concat(msg.timestamp, "</span>").concat(args().showCopyBtn && ((_msg$tag = msg.tag) === null || _msg$tag === void 0 ? void 0 : _msg$tag.indexOf('[reply]')) >= 0 ? "<button class=\"copy-btn\" aria-label=\"".concat(args().copyLabel || 'Copy', "\" data-balloon-pos=\"up\" onclick=\"window.chatboxCopyToClipboard(document.querySelector('#").concat(copyTargetId, " .qa-content-inner').innerHTML)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.242a2 2 0 0 0-.602-1.43L16.083 2.57A2 2 0 0 0 14.685 2H10a2 2 0 0 0-2 2z\"/><path d=\"M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2\"/></svg></button>") : '');
5554
5560
  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
5555
5561
  key: index,
5556
5562
  className: ((_msg$tag2 = msg.tag) === null || _msg$tag2 === void 0 ? void 0 : _msg$tag2.indexOf('[reply]')) < 0 ? 'request' : 'reply',
package/lib/cjs/Chatbox/index.d.ts CHANGED
@@ -62,6 +62,8 @@ export declare type ChatboxProps = {
62
62
  sendLabel?: string;
63
63
  sendLoading?: boolean;
64
64
  sendLoadingLabel?: string;
65
+ copyLabel?: string;
66
+ closeLabel?: string;
65
67
  placeholder?: string;
66
68
  noDataPlaceholder?: string;
67
69
  requestConfig: RequestConfig;
package/lib/cjs/Chatbox/index.js CHANGED
@@ -4410,6 +4410,8 @@ var Chatbox = function Chatbox(props) {
4410
4410
  sendLabel = currentProps.sendLabel,
4411
4411
  sendLoading = currentProps.sendLoading,
4412
4412
  sendLoadingLabel = currentProps.sendLoadingLabel,
4413
+ copyLabel = currentProps.copyLabel,
4414
+ closeLabel = currentProps.closeLabel,
4413
4415
  placeholder = currentProps.placeholder,
4414
4416
  noDataPlaceholder = currentProps.noDataPlaceholder,
4415
4417
  requestConfig = currentProps.requestConfig,
@@ -4481,6 +4483,8 @@ var Chatbox = function Chatbox(props) {
4481
4483
  sendLabel: sendLabel,
4482
4484
  sendLoading: sendLoading,
4483
4485
  sendLoadingLabel: sendLoadingLabel,
4486
+ copyLabel: copyLabel,
4487
+ closeLabel: closeLabel,
4484
4488
  placeholder: placeholder,
4485
4489
  noDataPlaceholder: noDataPlaceholder,
4486
4490
  requestConfig: requestConfig,
@@ -5474,6 +5478,8 @@ var Chatbox = function Chatbox(props) {
5474
5478
  display: show ? 'block' : 'none'
5475
5479
  },
5476
5480
  className: "".concat(args().prefix || 'custom-', "chatbox-close"),
5481
+ "aria-label": "".concat(args().closeLabel || 'Close'),
5482
+ "data-balloon-pos": "left",
5477
5483
  tabIndex: -1,
5478
5484
  onClick: handleClose
5479
5485
  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
@@ -5550,7 +5556,7 @@ var Chatbox = function Chatbox(props) {
5550
5556
 
5551
5557
  // Mark the message as animated;
5552
5558
  animatedMessagesRef.current.add(index);
5553
- var timeShow = "<span class=\"qa-timestamp\">".concat(msg.timestamp, "</span>").concat(args().showCopyBtn && ((_msg$tag = msg.tag) === null || _msg$tag === void 0 ? void 0 : _msg$tag.indexOf('[reply]')) >= 0 ? "<button class=\"copy-btn\" onclick=\"window.chatboxCopyToClipboard(document.querySelector('#".concat(copyTargetId, " .qa-content-inner').innerHTML)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.242a2 2 0 0 0-.602-1.43L16.083 2.57A2 2 0 0 0 14.685 2H10a2 2 0 0 0-2 2z\"/><path d=\"M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2\"/></svg></button>") : '');
5559
+ var timeShow = "<span class=\"qa-timestamp\">".concat(msg.timestamp, "</span>").concat(args().showCopyBtn && ((_msg$tag = msg.tag) === null || _msg$tag === void 0 ? void 0 : _msg$tag.indexOf('[reply]')) >= 0 ? "<button class=\"copy-btn\" aria-label=\"".concat(args().copyLabel || 'Copy', "\" data-balloon-pos=\"up\" onclick=\"window.chatboxCopyToClipboard(document.querySelector('#").concat(copyTargetId, " .qa-content-inner').innerHTML)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.242a2 2 0 0 0-.602-1.43L16.083 2.57A2 2 0 0 0 14.685 2H10a2 2 0 0 0-2 2z\"/><path d=\"M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2\"/></svg></button>") : '');
5554
5560
  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
5555
5561
  key: index,
5556
5562
  className: ((_msg$tag2 = msg.tag) === null || _msg$tag2 === void 0 ? void 0 : _msg$tag2.indexOf('[reply]')) < 0 ? 'request' : 'reply',
package/lib/css/Chatbox/index.css CHANGED
@@ -135,6 +135,11 @@
135
135
  --custom-chatbox-questions-hover-bg: #e9e9e9;
136
136
  --custom-chatbox-content-html-elem-border-color: #ddd;
137
137
  --custom-chatbox-content-html-elem-bg: rgba(0,0,0,.05);
138
+ --custom-balloon-border-radius: 0.35rem;
139
+ --custom-balloon-color: rgba(16, 16, 16, 0.95);
140
+ --custom-balloon-text-color: #fff;
141
+ --custom-balloon-font-size: 12px;
142
+ --custom-balloon-move: 4px;
138
143
  min-width: var(--custom-chatbox-w);
139
144
  max-width: var(--custom-chatbox-w);
140
145
  margin: auto;
@@ -155,6 +160,7 @@
155
160
  /* toolkit buttons */
156
161
  /* toolkit options */
157
162
  /* default questions */
163
+ /* Tooltip */
158
164
  }
159
165
  .custom-chatbox-container details {
160
166
  font-style: italic;
@@ -193,7 +199,7 @@
193
199
  font-size: 0.75rem;
194
200
  }
195
201
  .custom-chatbox-container .messages {
196
- height: calc(100% - 110px);
202
+ height: calc(100% - 125px);
197
203
  overflow-y: auto;
198
204
  margin-bottom: 10px;
199
205
  font-size: 13px;
@@ -372,7 +378,7 @@
372
378
  display: inline;
373
379
  }
374
380
  .custom-chatbox-container .msgcontrol.focus {
375
- border-color: var(--app-chatbox-primary-color);
381
+ border-color: var(--custom-chatbox-primary-color);
376
382
  }
377
383
  .custom-chatbox-container .msgcontrol .messageInput {
378
384
  width: 100%;
@@ -450,7 +456,7 @@
450
456
  .custom-chatbox-container .newchat-btn {
451
457
  text-align: center;
452
458
  position: absolute;
453
- bottom: 95px;
459
+ bottom: 115px;
454
460
  left: 50%;
455
461
  transform: translateX(-50%);
456
462
  z-index: 1;
@@ -595,3 +601,164 @@
595
601
  .custom-chatbox-container .default-question-item:last-child {
596
602
  margin-bottom: 0;
597
603
  }
604
+ .custom-chatbox-container button[aria-label][data-balloon-pos] {
605
+ overflow: visible;
606
+ }
607
+ .custom-chatbox-container [aria-label][data-balloon-pos] {
608
+ cursor: pointer;
609
+ }
610
+ .custom-chatbox-container [aria-label][data-balloon-pos]:after {
611
+ opacity: 0;
612
+ pointer-events: none;
613
+ transition: all 0.18s ease-out 0.18s;
614
+ text-indent: 0;
615
+ font-weight: normal;
616
+ font-style: normal;
617
+ text-shadow: none;
618
+ font-size: var(--custom-balloon-font-size);
619
+ background: var(--custom-balloon-color);
620
+ border-radius: 2px;
621
+ color: var(--custom-balloon-text-color);
622
+ border-radius: var(--custom-balloon-border-radius);
623
+ content: attr(aria-label);
624
+ padding: 0.5em 1em;
625
+ position: absolute;
626
+ white-space: nowrap;
627
+ z-index: 10;
628
+ }
629
+ .custom-chatbox-container [aria-label][data-balloon-pos]:before {
630
+ width: 0;
631
+ height: 0;
632
+ border: 5px solid transparent;
633
+ border-top-color: var(--custom-balloon-color);
634
+ opacity: 0;
635
+ pointer-events: none;
636
+ transition: all 0.18s ease-out 0.18s;
637
+ content: "";
638
+ position: absolute;
639
+ z-index: 10;
640
+ }
641
+ .custom-chatbox-container [aria-label][data-balloon-pos]:hover:before, .custom-chatbox-container [aria-label][data-balloon-pos]:hover:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-visible]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-visible]:after, .custom-chatbox-container [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, .custom-chatbox-container [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after {
642
+ opacity: 1;
643
+ pointer-events: none;
644
+ }
645
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-break]:after {
646
+ white-space: pre;
647
+ }
648
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
649
+ white-space: pre-line;
650
+ word-break: break-word;
651
+ }
652
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-blunt]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-blunt]:after {
653
+ transition: none;
654
+ }
655
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=up]:hover:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=up][data-balloon-visible]:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=down]:hover:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=down][data-balloon-visible]:after {
656
+ transform: translate(-50%, 0);
657
+ }
658
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=up]:hover:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=up][data-balloon-visible]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=down]:hover:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=down][data-balloon-visible]:before {
659
+ transform: translate(-50%, 0);
660
+ }
661
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-left]:after {
662
+ left: 0;
663
+ }
664
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-left]:before {
665
+ left: 5px;
666
+ }
667
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right]:after {
668
+ right: 0;
669
+ }
670
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right]:before {
671
+ right: 5px;
672
+ }
673
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-po*=-left]:hover:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-po*=-left][data-balloon-visible]:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right]:hover:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right][data-balloon-visible]:after {
674
+ transform: translate(0, 0);
675
+ }
676
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-po*=-left]:hover:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-po*=-left][data-balloon-visible]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right]:hover:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right][data-balloon-visible]:before {
677
+ transform: translate(0, 0);
678
+ }
679
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=up]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=up]:after {
680
+ bottom: 100%;
681
+ transform-origin: top;
682
+ transform: translate(0, var(--custom-balloon-move));
683
+ }
684
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=up]:after {
685
+ margin-bottom: 10px;
686
+ }
687
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=up]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=up]:after {
688
+ left: 50%;
689
+ transform: translate(-50%, var(--custom-balloon-move));
690
+ }
691
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=down]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=down]:after {
692
+ top: 100%;
693
+ transform: translate(0, calc(var(--custom-balloon-move) * -1));
694
+ }
695
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=down]:after {
696
+ margin-top: 10px;
697
+ }
698
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=down]:before {
699
+ width: 0;
700
+ height: 0;
701
+ border: 5px solid transparent;
702
+ border-bottom-color: var(--custom-balloon-color);
703
+ }
704
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=down]:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=down]:before {
705
+ left: 50%;
706
+ transform: translate(-50%, calc(var(--custom-balloon-move) * -1));
707
+ }
708
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:hover:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left][data-balloon-visible]:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:hover:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right][data-balloon-visible]:after {
709
+ transform: translate(0, -50%);
710
+ }
711
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:hover:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left][data-balloon-visible]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:hover:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right][data-balloon-visible]:before {
712
+ transform: translate(0, -50%);
713
+ }
714
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:before {
715
+ right: 100%;
716
+ top: 50%;
717
+ transform: translate(var(--custom-balloon-move), -50%);
718
+ }
719
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:after {
720
+ margin-right: 10px;
721
+ }
722
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:before {
723
+ width: 0;
724
+ height: 0;
725
+ border: 5px solid transparent;
726
+ border-left-color: var(--custom-balloon-color);
727
+ }
728
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:after, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:before {
729
+ left: 100%;
730
+ top: 50%;
731
+ transform: translate(calc(var(--custom-balloon-move) * -1), -50%);
732
+ }
733
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:after {
734
+ margin-left: 10px;
735
+ }
736
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:before {
737
+ width: 0;
738
+ height: 0;
739
+ border: 5px solid transparent;
740
+ border-right-color: var(--custom-balloon-color);
741
+ }
742
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length]:after {
743
+ white-space: normal;
744
+ }
745
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=small]:after {
746
+ width: 80px;
747
+ }
748
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=medium]:after {
749
+ width: 150px;
750
+ }
751
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=large]:after {
752
+ width: 260px;
753
+ }
754
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=xlarge]:after {
755
+ width: 380px;
756
+ }
757
+ @media screen and (max-width: 768px) {
758
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=xlarge]:after {
759
+ width: 90vw;
760
+ }
761
+ }
762
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=fit]:after {
763
+ width: 100%;
764
+ }
package/lib/esm/Chatbox/index.scss CHANGED
@@ -166,7 +166,11 @@
166
166
  --custom-chatbox-questions-hover-bg: #e9e9e9;
167
167
  --custom-chatbox-content-html-elem-border-color: #ddd;
168
168
  --custom-chatbox-content-html-elem-bg: rgba(0,0,0,.05);
169
-
169
+ --custom-balloon-border-radius: 0.35rem;
170
+ --custom-balloon-color: rgba(16, 16, 16, 0.95);
171
+ --custom-balloon-text-color: #fff;
172
+ --custom-balloon-font-size: 12px;
173
+ --custom-balloon-move: 4px;
170
174
 
171
175
 
172
176
  min-width: var(--custom-chatbox-w);
@@ -226,7 +230,7 @@
226
230
 
227
231
  /* message list */
228
232
  .messages {
229
- height: calc(100% - 110px);
233
+ height: calc(100% - 125px);
230
234
  overflow-y: auto;
231
235
  margin-bottom: 10px;
232
236
  font-size: 13px;
@@ -448,7 +452,7 @@
448
452
  }
449
453
 
450
454
  &.focus {
451
- border-color: var(--app-chatbox-primary-color);
455
+ border-color: var(--custom-chatbox-primary-color);
452
456
  }
453
457
 
454
458
 
@@ -553,7 +557,7 @@
553
557
  .newchat-btn {
554
558
  text-align: center;
555
559
  position: absolute;
556
- bottom: 95px;
560
+ bottom: 115px;
557
561
  left: 50%;
558
562
  transform: translateX(-50%);
559
563
  z-index: 1;
@@ -746,4 +750,205 @@
746
750
  }
747
751
 
748
752
 
753
+ /* Tooltip */
754
+ button[aria-label][data-balloon-pos] {
755
+ overflow: visible;
756
+ }
757
+
758
+ [aria-label][data-balloon-pos] {
759
+ cursor: pointer;
760
+ }
761
+
762
+ [aria-label][data-balloon-pos]:after {
763
+ opacity: 0;
764
+ pointer-events: none;
765
+ transition: all 0.18s ease-out 0.18s;
766
+ text-indent: 0;
767
+ font-weight: normal;
768
+ font-style: normal;
769
+ text-shadow: none;
770
+ font-size: var(--custom-balloon-font-size);
771
+ background: var(--custom-balloon-color);
772
+ border-radius: 2px;
773
+ color: var(--custom-balloon-text-color);
774
+ border-radius: var(--custom-balloon-border-radius);
775
+ content: attr(aria-label);
776
+ padding: .5em 1em;
777
+ position: absolute;
778
+ white-space: nowrap;
779
+ z-index: 10;
780
+ }
781
+
782
+ [aria-label][data-balloon-pos]:before {
783
+ width: 0;
784
+ height: 0;
785
+ border: 5px solid transparent;
786
+ border-top-color: var(--custom-balloon-color);
787
+ opacity: 0;
788
+ pointer-events: none;
789
+ transition: all 0.18s ease-out 0.18s;
790
+ content: "";
791
+ position: absolute;
792
+ z-index: 10;
793
+ }
794
+
795
+ [aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after {
796
+ opacity: 1;
797
+ pointer-events: none;
798
+ }
799
+
800
+ [aria-label][data-balloon-pos][data-balloon-break]:after {
801
+ white-space: pre;
802
+ }
803
+
804
+ [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
805
+ white-space: pre-line;
806
+ word-break: break-word;
807
+ }
808
+
809
+ [aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after {
810
+ transition: none;
811
+ }
812
+
813
+ [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after {
814
+ transform: translate(-50%, 0);
815
+ }
816
+
817
+ [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before {
818
+ transform: translate(-50%, 0);
819
+ }
820
+
821
+ [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after {
822
+ left: 0;
823
+ }
824
+
825
+ [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before {
826
+ left: 5px;
827
+ }
828
+
829
+ [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after {
830
+ right: 0;
831
+ }
832
+
833
+ [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before {
834
+ right: 5px;
835
+ }
836
+
837
+ [aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after {
838
+ transform: translate(0, 0);
839
+ }
840
+
841
+ [aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before {
842
+ transform: translate(0, 0);
843
+ }
844
+
845
+ [aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
846
+ bottom: 100%;
847
+ transform-origin: top;
848
+ transform: translate(0, var(--custom-balloon-move));
849
+ }
850
+
851
+ [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
852
+ margin-bottom: 10px;
853
+ }
854
+
855
+ [aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after {
856
+ left: 50%;
857
+ transform: translate(-50%, var(--custom-balloon-move));
858
+ }
859
+
860
+ [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
861
+ top: 100%;
862
+ transform: translate(0, calc(var(--custom-balloon-move) * -1));
863
+ }
864
+
865
+ [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
866
+ margin-top: 10px;
867
+ }
868
+
869
+ [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before {
870
+ width: 0;
871
+ height: 0;
872
+ border: 5px solid transparent;
873
+ border-bottom-color: var(--custom-balloon-color);
874
+ }
875
+
876
+ [aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before {
877
+ left: 50%;
878
+ transform: translate(-50%, calc(var(--custom-balloon-move) * -1));
879
+ }
880
+
881
+ [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after {
882
+ transform: translate(0, -50%);
883
+ }
884
+
885
+ [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before {
886
+ transform: translate(0, -50%);
887
+ }
888
+
889
+ [aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
890
+ right: 100%;
891
+ top: 50%;
892
+ transform: translate(var(--custom-balloon-move), -50%);
893
+ }
894
+
895
+ [aria-label][data-balloon-pos][data-balloon-pos="left"]:after {
896
+ margin-right: 10px;
897
+ }
898
+
899
+ [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
900
+ width: 0;
901
+ height: 0;
902
+ border: 5px solid transparent;
903
+ border-left-color: var(--custom-balloon-color);
904
+ }
905
+
906
+ [aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
907
+ left: 100%;
908
+ top: 50%;
909
+ transform: translate(calc(var(--custom-balloon-move) * -1), -50%);
910
+ }
911
+
912
+ [aria-label][data-balloon-pos][data-balloon-pos="right"]:after {
913
+ margin-left: 10px;
914
+ }
915
+
916
+ [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
917
+ width: 0;
918
+ height: 0;
919
+ border: 5px solid transparent;
920
+ border-right-color: var(--custom-balloon-color);
921
+ }
922
+
923
+ [aria-label][data-balloon-pos][data-balloon-length]:after {
924
+ white-space: normal;
925
+ }
926
+
927
+ [aria-label][data-balloon-pos][data-balloon-length="small"]:after {
928
+ width: 80px;
929
+ }
930
+
931
+ [aria-label][data-balloon-pos][data-balloon-length="medium"]:after {
932
+ width: 150px;
933
+ }
934
+
935
+ [aria-label][data-balloon-pos][data-balloon-length="large"]:after {
936
+ width: 260px;
937
+ }
938
+
939
+ [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
940
+ width: 380px;
941
+ }
942
+
943
+ @media screen and (max-width: 768px) {
944
+ [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
945
+ width: 90vw;
946
+ }
947
+ }
948
+
949
+ [aria-label][data-balloon-pos][data-balloon-length="fit"]:after {
950
+ width: 100%;
951
+ }
952
+
953
+
749
954
  }
package/lib/esm/Chatbox/index.tsx CHANGED
@@ -105,6 +105,8 @@ export type ChatboxProps = {
105
105
  sendLabel?: string;
106
106
  sendLoading?: boolean;
107
107
  sendLoadingLabel?: string;
108
+ copyLabel?: string;
109
+ closeLabel?: string;
108
110
  placeholder?: string;
109
111
  noDataPlaceholder?: string;
110
112
  requestConfig: RequestConfig;
@@ -293,6 +295,8 @@ const Chatbox = (props: ChatboxProps) => {
293
295
  sendLabel,
294
296
  sendLoading,
295
297
  sendLoadingLabel,
298
+ copyLabel,
299
+ closeLabel,
296
300
  placeholder,
297
301
  noDataPlaceholder,
298
302
  requestConfig,
@@ -372,6 +376,8 @@ const Chatbox = (props: ChatboxProps) => {
372
376
  sendLabel,
373
377
  sendLoading,
374
378
  sendLoadingLabel,
379
+ copyLabel,
380
+ closeLabel,
375
381
  placeholder,
376
382
  noDataPlaceholder,
377
383
  requestConfig,
@@ -1249,7 +1255,7 @@ const Chatbox = (props: ChatboxProps) => {
1249
1255
  {/**------------- BUBBLE -------------*/}
1250
1256
 
1251
1257
  {/**------------- CLOSE BUTTON -------------*/}
1252
- <button style={{ display: show ? 'block' : 'none' }} className={`${args().prefix || 'custom-'}chatbox-close`} tabIndex={-1} onClick={handleClose}>
1258
+ <button style={{ display: show ? 'block' : 'none' }} className={`${args().prefix || 'custom-'}chatbox-close`} aria-label={`${args().closeLabel || 'Close'}`} data-balloon-pos="left" tabIndex={-1} onClick={handleClose}>
1253
1259
  <svg width="30px" height="30px" viewBox="0 0 1024 1024" fill="#000000"><path d="M707.872 329.392L348.096 689.16l-31.68-31.68 359.776-359.768z" fill="#000" /><path d="M328 340.8l32-31.2 348 348-32 32z" fill="#000" /></svg>
1254
1260
 
1255
1261
  </button>
@@ -1307,7 +1313,7 @@ const Chatbox = (props: ChatboxProps) => {
1307
1313
  // Mark the message as animated;
1308
1314
  animatedMessagesRef.current.add(index);
1309
1315
 
1310
- const timeShow = `<span class="qa-timestamp">${msg.timestamp}</span>${args().showCopyBtn && msg.tag?.indexOf('[reply]') >= 0 ?(`<button class="copy-btn" onclick="window.chatboxCopyToClipboard(document.querySelector('#${copyTargetId} .qa-content-inner').innerHTML)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.242a2 2 0 0 0-.602-1.43L16.083 2.57A2 2 0 0 0 14.685 2H10a2 2 0 0 0-2 2z"/><path d="M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2"/></svg></button>`) : ''}`;
1316
+ const timeShow = `<span class="qa-timestamp">${msg.timestamp}</span>${args().showCopyBtn && msg.tag?.indexOf('[reply]') >= 0 ?(`<button class="copy-btn" aria-label="${args().copyLabel || 'Copy'}" data-balloon-pos="up" onclick="window.chatboxCopyToClipboard(document.querySelector('#${copyTargetId} .qa-content-inner').innerHTML)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.242a2 2 0 0 0-.602-1.43L16.083 2.57A2 2 0 0 0 14.685 2H10a2 2 0 0 0-2 2z"/><path d="M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2"/></svg></button>`) : ''}`;
1311
1317
 
1312
1318
  return <div key={index} className={msg.tag?.indexOf('[reply]') < 0 ? 'request' : 'reply'} style={{ display: isAnimProgress ? 'none' : '' }}>
1313
1319
  <div className="qa-name" dangerouslySetInnerHTML={{ __html: `${msg.sender}` }}></div>
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.6.358",
5
+ "version": "4.6.388",
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",