funda-ui 4.6.377 → 4.6.399

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 (10) hide show
  1. package/Chatbox/index.css +174 -5
  2. package/Chatbox/index.d.ts +3 -1
  3. package/Chatbox/index.js +8 -2
  4. package/lib/cjs/Chatbox/index.d.ts +3 -1
  5. package/lib/cjs/Chatbox/index.js +8 -2
  6. package/lib/css/Chatbox/index.css +174 -5
  7. package/lib/esm/Chatbox/index.scss +215 -7
  8. package/lib/esm/Chatbox/index.tsx +22 -8
  9. package/lib/esm/Textarea/index.tsx +1 -0
  10. package/package.json +1 -1
package/Chatbox/index.css CHANGED
@@ -135,6 +135,13 @@
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;
143
+ --custom-toolkit-select-options-container-min-w: 135px;
144
+ --custom-toolkit-select-options-container-max-h: 300px;
138
145
  min-width: var(--custom-chatbox-w);
139
146
  max-width: var(--custom-chatbox-w);
140
147
  margin: auto;
@@ -155,6 +162,7 @@
155
162
  /* toolkit buttons */
156
163
  /* toolkit options */
157
164
  /* default questions */
165
+ /* Tooltip */
158
166
  }
159
167
  .custom-chatbox-container details {
160
168
  font-style: italic;
@@ -193,7 +201,7 @@
193
201
  font-size: 0.75rem;
194
202
  }
195
203
  .custom-chatbox-container .messages {
196
- height: calc(100% - 110px);
204
+ height: calc(100% - 125px);
197
205
  overflow-y: auto;
198
206
  margin-bottom: 10px;
199
207
  font-size: 13px;
@@ -450,7 +458,7 @@
450
458
  .custom-chatbox-container .newchat-btn {
451
459
  text-align: center;
452
460
  position: absolute;
453
- bottom: 95px;
461
+ bottom: 115px;
454
462
  left: 50%;
455
463
  transform: translateX(-50%);
456
464
  z-index: 1;
@@ -533,7 +541,7 @@
533
541
  .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options-container {
534
542
  z-index: 1000;
535
543
  width: 100%;
536
- min-width: 120px;
544
+ min-width: var(--custom-toolkit-select-options-container-min-w);
537
545
  transform: translateY(-100%);
538
546
  }
539
547
  .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options {
@@ -542,8 +550,8 @@
542
550
  border-radius: 4px;
543
551
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
544
552
  margin-bottom: 10px;
545
- max-height: 300px;
546
- min-width: 120px;
553
+ max-height: var(--custom-toolkit-select-options-container-max-h);
554
+ min-width: var(--custom-toolkit-select-options-container-min-w);
547
555
  overflow-y: auto;
548
556
  animation: dropupAnimation 0.2s ease;
549
557
  position: absolute;
@@ -595,3 +603,164 @@
595
603
  .custom-chatbox-container .default-question-item:last-child {
596
604
  margin-bottom: 0;
597
605
  }
606
+ .custom-chatbox-container button[aria-label][data-balloon-pos] {
607
+ overflow: visible;
608
+ }
609
+ .custom-chatbox-container [aria-label][data-balloon-pos] {
610
+ cursor: pointer;
611
+ }
612
+ .custom-chatbox-container [aria-label][data-balloon-pos]:after {
613
+ opacity: 0;
614
+ pointer-events: none;
615
+ transition: all 0.18s ease-out 0.18s;
616
+ text-indent: 0;
617
+ font-weight: normal;
618
+ font-style: normal;
619
+ text-shadow: none;
620
+ font-size: var(--custom-balloon-font-size);
621
+ background: var(--custom-balloon-color);
622
+ border-radius: 2px;
623
+ color: var(--custom-balloon-text-color);
624
+ border-radius: var(--custom-balloon-border-radius);
625
+ content: attr(aria-label);
626
+ padding: 0.5em 1em;
627
+ position: absolute;
628
+ white-space: nowrap;
629
+ z-index: 10;
630
+ }
631
+ .custom-chatbox-container [aria-label][data-balloon-pos]:before {
632
+ width: 0;
633
+ height: 0;
634
+ border: 5px solid transparent;
635
+ border-top-color: var(--custom-balloon-color);
636
+ opacity: 0;
637
+ pointer-events: none;
638
+ transition: all 0.18s ease-out 0.18s;
639
+ content: "";
640
+ position: absolute;
641
+ z-index: 10;
642
+ }
643
+ .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 {
644
+ opacity: 1;
645
+ pointer-events: none;
646
+ }
647
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-break]:after {
648
+ white-space: pre;
649
+ }
650
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
651
+ white-space: pre-line;
652
+ word-break: break-word;
653
+ }
654
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-blunt]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-blunt]:after {
655
+ transition: none;
656
+ }
657
+ .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 {
658
+ transform: translate(-50%, 0);
659
+ }
660
+ .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 {
661
+ transform: translate(-50%, 0);
662
+ }
663
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-left]:after {
664
+ left: 0;
665
+ }
666
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-left]:before {
667
+ left: 5px;
668
+ }
669
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right]:after {
670
+ right: 0;
671
+ }
672
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right]:before {
673
+ right: 5px;
674
+ }
675
+ .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 {
676
+ transform: translate(0, 0);
677
+ }
678
+ .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 {
679
+ transform: translate(0, 0);
680
+ }
681
+ .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 {
682
+ bottom: 100%;
683
+ transform-origin: top;
684
+ transform: translate(0, var(--custom-balloon-move));
685
+ }
686
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=up]:after {
687
+ margin-bottom: 10px;
688
+ }
689
+ .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 {
690
+ left: 50%;
691
+ transform: translate(-50%, var(--custom-balloon-move));
692
+ }
693
+ .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 {
694
+ top: 100%;
695
+ transform: translate(0, calc(var(--custom-balloon-move) * -1));
696
+ }
697
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=down]:after {
698
+ margin-top: 10px;
699
+ }
700
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=down]:before {
701
+ width: 0;
702
+ height: 0;
703
+ border: 5px solid transparent;
704
+ border-bottom-color: var(--custom-balloon-color);
705
+ }
706
+ .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 {
707
+ left: 50%;
708
+ transform: translate(-50%, calc(var(--custom-balloon-move) * -1));
709
+ }
710
+ .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 {
711
+ transform: translate(0, -50%);
712
+ }
713
+ .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 {
714
+ transform: translate(0, -50%);
715
+ }
716
+ .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 {
717
+ right: 100%;
718
+ top: 50%;
719
+ transform: translate(var(--custom-balloon-move), -50%);
720
+ }
721
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:after {
722
+ margin-right: 10px;
723
+ }
724
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:before {
725
+ width: 0;
726
+ height: 0;
727
+ border: 5px solid transparent;
728
+ border-left-color: var(--custom-balloon-color);
729
+ }
730
+ .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 {
731
+ left: 100%;
732
+ top: 50%;
733
+ transform: translate(calc(var(--custom-balloon-move) * -1), -50%);
734
+ }
735
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:after {
736
+ margin-left: 10px;
737
+ }
738
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:before {
739
+ width: 0;
740
+ height: 0;
741
+ border: 5px solid transparent;
742
+ border-right-color: var(--custom-balloon-color);
743
+ }
744
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length]:after {
745
+ white-space: normal;
746
+ }
747
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=small]:after {
748
+ width: 80px;
749
+ }
750
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=medium]:after {
751
+ width: 150px;
752
+ }
753
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=large]:after {
754
+ width: 260px;
755
+ }
756
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=xlarge]:after {
757
+ width: 380px;
758
+ }
759
+ @media screen and (max-width: 768px) {
760
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=xlarge]:after {
761
+ width: 90vw;
762
+ }
763
+ }
764
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=fit]:after {
765
+ width: 100%;
766
+ }
package/Chatbox/index.d.ts CHANGED
@@ -40,7 +40,7 @@ export declare type CustomRequestResponse = {
40
40
  content: string | Response | null;
41
41
  isStream: boolean;
42
42
  };
43
- export declare type CustomRequestFunction = (message: string, config: CustomRequestConfig) => Promise<CustomRequestResponse>;
43
+ export declare type CustomRequestFunction = (message: string, config: CustomRequestConfig, customMethods: CustomMethod[], conversationHistory: MessageDetail[]) => Promise<CustomRequestResponse>;
44
44
  export declare type ChatboxProps = {
45
45
  debug?: boolean;
46
46
  defaultRows?: number;
@@ -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,
@@ -5273,7 +5277,7 @@ var Chatbox = function Chatbox(props) {
5273
5277
  requestBody: requestBodyRes,
5274
5278
  apiUrl: args().requestApiUrl || '',
5275
5279
  headers: args().headerConfigRes
5276
- });
5280
+ }, customMethodsRef.current, conversationHistory.current);
5277
5281
  case 13:
5278
5282
  customResponse = _context7.sent;
5279
5283
  content = customResponse.content, isStream = customResponse.isStream;
@@ -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
@@ -40,7 +40,7 @@ export declare type CustomRequestResponse = {
40
40
  content: string | Response | null;
41
41
  isStream: boolean;
42
42
  };
43
- export declare type CustomRequestFunction = (message: string, config: CustomRequestConfig) => Promise<CustomRequestResponse>;
43
+ export declare type CustomRequestFunction = (message: string, config: CustomRequestConfig, customMethods: CustomMethod[], conversationHistory: MessageDetail[]) => Promise<CustomRequestResponse>;
44
44
  export declare type ChatboxProps = {
45
45
  debug?: boolean;
46
46
  defaultRows?: number;
@@ -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,
@@ -5273,7 +5277,7 @@ var Chatbox = function Chatbox(props) {
5273
5277
  requestBody: requestBodyRes,
5274
5278
  apiUrl: args().requestApiUrl || '',
5275
5279
  headers: args().headerConfigRes
5276
- });
5280
+ }, customMethodsRef.current, conversationHistory.current);
5277
5281
  case 13:
5278
5282
  customResponse = _context7.sent;
5279
5283
  content = customResponse.content, isStream = customResponse.isStream;
@@ -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,13 @@
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;
143
+ --custom-toolkit-select-options-container-min-w: 135px;
144
+ --custom-toolkit-select-options-container-max-h: 300px;
138
145
  min-width: var(--custom-chatbox-w);
139
146
  max-width: var(--custom-chatbox-w);
140
147
  margin: auto;
@@ -155,6 +162,7 @@
155
162
  /* toolkit buttons */
156
163
  /* toolkit options */
157
164
  /* default questions */
165
+ /* Tooltip */
158
166
  }
159
167
  .custom-chatbox-container details {
160
168
  font-style: italic;
@@ -193,7 +201,7 @@
193
201
  font-size: 0.75rem;
194
202
  }
195
203
  .custom-chatbox-container .messages {
196
- height: calc(100% - 110px);
204
+ height: calc(100% - 125px);
197
205
  overflow-y: auto;
198
206
  margin-bottom: 10px;
199
207
  font-size: 13px;
@@ -450,7 +458,7 @@
450
458
  .custom-chatbox-container .newchat-btn {
451
459
  text-align: center;
452
460
  position: absolute;
453
- bottom: 95px;
461
+ bottom: 115px;
454
462
  left: 50%;
455
463
  transform: translateX(-50%);
456
464
  z-index: 1;
@@ -533,7 +541,7 @@
533
541
  .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options-container {
534
542
  z-index: 1000;
535
543
  width: 100%;
536
- min-width: 120px;
544
+ min-width: var(--custom-toolkit-select-options-container-min-w);
537
545
  transform: translateY(-100%);
538
546
  }
539
547
  .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options {
@@ -542,8 +550,8 @@
542
550
  border-radius: 4px;
543
551
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
544
552
  margin-bottom: 10px;
545
- max-height: 300px;
546
- min-width: 120px;
553
+ max-height: var(--custom-toolkit-select-options-container-max-h);
554
+ min-width: var(--custom-toolkit-select-options-container-min-w);
547
555
  overflow-y: auto;
548
556
  animation: dropupAnimation 0.2s ease;
549
557
  position: absolute;
@@ -595,3 +603,164 @@
595
603
  .custom-chatbox-container .default-question-item:last-child {
596
604
  margin-bottom: 0;
597
605
  }
606
+ .custom-chatbox-container button[aria-label][data-balloon-pos] {
607
+ overflow: visible;
608
+ }
609
+ .custom-chatbox-container [aria-label][data-balloon-pos] {
610
+ cursor: pointer;
611
+ }
612
+ .custom-chatbox-container [aria-label][data-balloon-pos]:after {
613
+ opacity: 0;
614
+ pointer-events: none;
615
+ transition: all 0.18s ease-out 0.18s;
616
+ text-indent: 0;
617
+ font-weight: normal;
618
+ font-style: normal;
619
+ text-shadow: none;
620
+ font-size: var(--custom-balloon-font-size);
621
+ background: var(--custom-balloon-color);
622
+ border-radius: 2px;
623
+ color: var(--custom-balloon-text-color);
624
+ border-radius: var(--custom-balloon-border-radius);
625
+ content: attr(aria-label);
626
+ padding: 0.5em 1em;
627
+ position: absolute;
628
+ white-space: nowrap;
629
+ z-index: 10;
630
+ }
631
+ .custom-chatbox-container [aria-label][data-balloon-pos]:before {
632
+ width: 0;
633
+ height: 0;
634
+ border: 5px solid transparent;
635
+ border-top-color: var(--custom-balloon-color);
636
+ opacity: 0;
637
+ pointer-events: none;
638
+ transition: all 0.18s ease-out 0.18s;
639
+ content: "";
640
+ position: absolute;
641
+ z-index: 10;
642
+ }
643
+ .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 {
644
+ opacity: 1;
645
+ pointer-events: none;
646
+ }
647
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-break]:after {
648
+ white-space: pre;
649
+ }
650
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
651
+ white-space: pre-line;
652
+ word-break: break-word;
653
+ }
654
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-blunt]:before, .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-blunt]:after {
655
+ transition: none;
656
+ }
657
+ .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 {
658
+ transform: translate(-50%, 0);
659
+ }
660
+ .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 {
661
+ transform: translate(-50%, 0);
662
+ }
663
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-left]:after {
664
+ left: 0;
665
+ }
666
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-left]:before {
667
+ left: 5px;
668
+ }
669
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right]:after {
670
+ right: 0;
671
+ }
672
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos*=-right]:before {
673
+ right: 5px;
674
+ }
675
+ .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 {
676
+ transform: translate(0, 0);
677
+ }
678
+ .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 {
679
+ transform: translate(0, 0);
680
+ }
681
+ .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 {
682
+ bottom: 100%;
683
+ transform-origin: top;
684
+ transform: translate(0, var(--custom-balloon-move));
685
+ }
686
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=up]:after {
687
+ margin-bottom: 10px;
688
+ }
689
+ .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 {
690
+ left: 50%;
691
+ transform: translate(-50%, var(--custom-balloon-move));
692
+ }
693
+ .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 {
694
+ top: 100%;
695
+ transform: translate(0, calc(var(--custom-balloon-move) * -1));
696
+ }
697
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=down]:after {
698
+ margin-top: 10px;
699
+ }
700
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos^=down]:before {
701
+ width: 0;
702
+ height: 0;
703
+ border: 5px solid transparent;
704
+ border-bottom-color: var(--custom-balloon-color);
705
+ }
706
+ .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 {
707
+ left: 50%;
708
+ transform: translate(-50%, calc(var(--custom-balloon-move) * -1));
709
+ }
710
+ .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 {
711
+ transform: translate(0, -50%);
712
+ }
713
+ .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 {
714
+ transform: translate(0, -50%);
715
+ }
716
+ .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 {
717
+ right: 100%;
718
+ top: 50%;
719
+ transform: translate(var(--custom-balloon-move), -50%);
720
+ }
721
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:after {
722
+ margin-right: 10px;
723
+ }
724
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=left]:before {
725
+ width: 0;
726
+ height: 0;
727
+ border: 5px solid transparent;
728
+ border-left-color: var(--custom-balloon-color);
729
+ }
730
+ .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 {
731
+ left: 100%;
732
+ top: 50%;
733
+ transform: translate(calc(var(--custom-balloon-move) * -1), -50%);
734
+ }
735
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:after {
736
+ margin-left: 10px;
737
+ }
738
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-pos=right]:before {
739
+ width: 0;
740
+ height: 0;
741
+ border: 5px solid transparent;
742
+ border-right-color: var(--custom-balloon-color);
743
+ }
744
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length]:after {
745
+ white-space: normal;
746
+ }
747
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=small]:after {
748
+ width: 80px;
749
+ }
750
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=medium]:after {
751
+ width: 150px;
752
+ }
753
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=large]:after {
754
+ width: 260px;
755
+ }
756
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=xlarge]:after {
757
+ width: 380px;
758
+ }
759
+ @media screen and (max-width: 768px) {
760
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=xlarge]:after {
761
+ width: 90vw;
762
+ }
763
+ }
764
+ .custom-chatbox-container [aria-label][data-balloon-pos][data-balloon-length=fit]:after {
765
+ width: 100%;
766
+ }
package/lib/esm/Chatbox/index.scss CHANGED
@@ -166,6 +166,13 @@
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
+ --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;
174
+ --custom-toolkit-select-options-container-min-w: 135px;
175
+ --custom-toolkit-select-options-container-max-h: 300px;
169
176
 
170
177
 
171
178
 
@@ -226,7 +233,7 @@
226
233
 
227
234
  /* message list */
228
235
  .messages {
229
- height: calc(100% - 110px);
236
+ height: calc(100% - 125px);
230
237
  overflow-y: auto;
231
238
  margin-bottom: 10px;
232
239
  font-size: 13px;
@@ -553,7 +560,7 @@
553
560
  .newchat-btn {
554
561
  text-align: center;
555
562
  position: absolute;
556
- bottom: 95px;
563
+ bottom: 115px;
557
564
  left: 50%;
558
565
  transform: translateX(-50%);
559
566
  z-index: 1;
@@ -658,22 +665,22 @@
658
665
  .toolkit-select-arrow.active {
659
666
  transform: rotate(180deg);
660
667
  }
661
-
668
+
662
669
  .toolkit-select-options-container {
663
670
  z-index: 1000;
664
671
  width: 100%;
665
- min-width: 120px;
672
+ min-width: var(--custom-toolkit-select-options-container-min-w);
666
673
  transform: translateY(-100%);
667
674
  }
668
-
675
+
669
676
  .toolkit-select-options {
670
677
  background-color: var(--custom-chatbox-toolkit-opt-color);
671
678
  border: 1px solid var(--custom-chatbox-toolkit-opt-border-color);
672
679
  border-radius: 4px;
673
680
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
674
681
  margin-bottom: 10px;
675
- max-height: 300px;
676
- min-width: 120px;
682
+ max-height: var(--custom-toolkit-select-options-container-max-h);
683
+ min-width: var(--custom-toolkit-select-options-container-min-w);
677
684
  overflow-y: auto;
678
685
  animation: dropupAnimation 0.2s ease;
679
686
 
@@ -746,4 +753,205 @@
746
753
  }
747
754
 
748
755
 
756
+ /* Tooltip */
757
+ button[aria-label][data-balloon-pos] {
758
+ overflow: visible;
759
+ }
760
+
761
+ [aria-label][data-balloon-pos] {
762
+ cursor: pointer;
763
+ }
764
+
765
+ [aria-label][data-balloon-pos]:after {
766
+ opacity: 0;
767
+ pointer-events: none;
768
+ transition: all 0.18s ease-out 0.18s;
769
+ text-indent: 0;
770
+ font-weight: normal;
771
+ font-style: normal;
772
+ text-shadow: none;
773
+ font-size: var(--custom-balloon-font-size);
774
+ background: var(--custom-balloon-color);
775
+ border-radius: 2px;
776
+ color: var(--custom-balloon-text-color);
777
+ border-radius: var(--custom-balloon-border-radius);
778
+ content: attr(aria-label);
779
+ padding: .5em 1em;
780
+ position: absolute;
781
+ white-space: nowrap;
782
+ z-index: 10;
783
+ }
784
+
785
+ [aria-label][data-balloon-pos]:before {
786
+ width: 0;
787
+ height: 0;
788
+ border: 5px solid transparent;
789
+ border-top-color: var(--custom-balloon-color);
790
+ opacity: 0;
791
+ pointer-events: none;
792
+ transition: all 0.18s ease-out 0.18s;
793
+ content: "";
794
+ position: absolute;
795
+ z-index: 10;
796
+ }
797
+
798
+ [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 {
799
+ opacity: 1;
800
+ pointer-events: none;
801
+ }
802
+
803
+ [aria-label][data-balloon-pos][data-balloon-break]:after {
804
+ white-space: pre;
805
+ }
806
+
807
+ [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
808
+ white-space: pre-line;
809
+ word-break: break-word;
810
+ }
811
+
812
+ [aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after {
813
+ transition: none;
814
+ }
815
+
816
+ [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 {
817
+ transform: translate(-50%, 0);
818
+ }
819
+
820
+ [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 {
821
+ transform: translate(-50%, 0);
822
+ }
823
+
824
+ [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after {
825
+ left: 0;
826
+ }
827
+
828
+ [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before {
829
+ left: 5px;
830
+ }
831
+
832
+ [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after {
833
+ right: 0;
834
+ }
835
+
836
+ [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before {
837
+ right: 5px;
838
+ }
839
+
840
+ [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 {
841
+ transform: translate(0, 0);
842
+ }
843
+
844
+ [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 {
845
+ transform: translate(0, 0);
846
+ }
847
+
848
+ [aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
849
+ bottom: 100%;
850
+ transform-origin: top;
851
+ transform: translate(0, var(--custom-balloon-move));
852
+ }
853
+
854
+ [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
855
+ margin-bottom: 10px;
856
+ }
857
+
858
+ [aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after {
859
+ left: 50%;
860
+ transform: translate(-50%, var(--custom-balloon-move));
861
+ }
862
+
863
+ [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
864
+ top: 100%;
865
+ transform: translate(0, calc(var(--custom-balloon-move) * -1));
866
+ }
867
+
868
+ [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
869
+ margin-top: 10px;
870
+ }
871
+
872
+ [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before {
873
+ width: 0;
874
+ height: 0;
875
+ border: 5px solid transparent;
876
+ border-bottom-color: var(--custom-balloon-color);
877
+ }
878
+
879
+ [aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before {
880
+ left: 50%;
881
+ transform: translate(-50%, calc(var(--custom-balloon-move) * -1));
882
+ }
883
+
884
+ [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 {
885
+ transform: translate(0, -50%);
886
+ }
887
+
888
+ [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 {
889
+ transform: translate(0, -50%);
890
+ }
891
+
892
+ [aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
893
+ right: 100%;
894
+ top: 50%;
895
+ transform: translate(var(--custom-balloon-move), -50%);
896
+ }
897
+
898
+ [aria-label][data-balloon-pos][data-balloon-pos="left"]:after {
899
+ margin-right: 10px;
900
+ }
901
+
902
+ [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
903
+ width: 0;
904
+ height: 0;
905
+ border: 5px solid transparent;
906
+ border-left-color: var(--custom-balloon-color);
907
+ }
908
+
909
+ [aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
910
+ left: 100%;
911
+ top: 50%;
912
+ transform: translate(calc(var(--custom-balloon-move) * -1), -50%);
913
+ }
914
+
915
+ [aria-label][data-balloon-pos][data-balloon-pos="right"]:after {
916
+ margin-left: 10px;
917
+ }
918
+
919
+ [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
920
+ width: 0;
921
+ height: 0;
922
+ border: 5px solid transparent;
923
+ border-right-color: var(--custom-balloon-color);
924
+ }
925
+
926
+ [aria-label][data-balloon-pos][data-balloon-length]:after {
927
+ white-space: normal;
928
+ }
929
+
930
+ [aria-label][data-balloon-pos][data-balloon-length="small"]:after {
931
+ width: 80px;
932
+ }
933
+
934
+ [aria-label][data-balloon-pos][data-balloon-length="medium"]:after {
935
+ width: 150px;
936
+ }
937
+
938
+ [aria-label][data-balloon-pos][data-balloon-length="large"]:after {
939
+ width: 260px;
940
+ }
941
+
942
+ [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
943
+ width: 380px;
944
+ }
945
+
946
+ @media screen and (max-width: 768px) {
947
+ [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
948
+ width: 90vw;
949
+ }
950
+ }
951
+
952
+ [aria-label][data-balloon-pos][data-balloon-length="fit"]:after {
953
+ width: 100%;
954
+ }
955
+
956
+
749
957
  }
package/lib/esm/Chatbox/index.tsx CHANGED
@@ -13,6 +13,7 @@ import { htmlEncode } from 'funda-utils/dist/cjs/sanitize';
13
13
 
14
14
 
15
15
 
16
+
16
17
  // loader
17
18
  import PureLoader from './PureLoader';
18
19
  import TypingEffect from "./TypingEffect";
@@ -80,7 +81,9 @@ export type CustomRequestResponse = {
80
81
 
81
82
  export type CustomRequestFunction = (
82
83
  message: string,
83
- config: CustomRequestConfig
84
+ config: CustomRequestConfig,
85
+ customMethods: CustomMethod[],
86
+ conversationHistory: MessageDetail[],
84
87
  ) => Promise<CustomRequestResponse>;
85
88
 
86
89
 
@@ -105,6 +108,8 @@ export type ChatboxProps = {
105
108
  sendLabel?: string;
106
109
  sendLoading?: boolean;
107
110
  sendLoadingLabel?: string;
111
+ copyLabel?: string;
112
+ closeLabel?: string;
108
113
  placeholder?: string;
109
114
  noDataPlaceholder?: string;
110
115
  requestConfig: RequestConfig;
@@ -293,6 +298,8 @@ const Chatbox = (props: ChatboxProps) => {
293
298
  sendLabel,
294
299
  sendLoading,
295
300
  sendLoadingLabel,
301
+ copyLabel,
302
+ closeLabel,
296
303
  placeholder,
297
304
  noDataPlaceholder,
298
305
  requestConfig,
@@ -372,6 +379,8 @@ const Chatbox = (props: ChatboxProps) => {
372
379
  sendLabel,
373
380
  sendLoading,
374
381
  sendLoadingLabel,
382
+ copyLabel,
383
+ closeLabel,
375
384
  placeholder,
376
385
  noDataPlaceholder,
377
386
  requestConfig,
@@ -1035,11 +1044,16 @@ const Chatbox = (props: ChatboxProps) => {
1035
1044
  // Update stream mode
1036
1045
  setEnableStreamMode(false);
1037
1046
 
1038
- let customResponse: any = await args().customRequest(msg, {
1039
- requestBody: requestBodyRes,
1040
- apiUrl: args().requestApiUrl || '',
1041
- headers: args().headerConfigRes
1042
- });
1047
+ let customResponse: any = await args().customRequest(
1048
+ msg,
1049
+ {
1050
+ requestBody: requestBodyRes,
1051
+ apiUrl: args().requestApiUrl || '',
1052
+ headers: args().headerConfigRes
1053
+ },
1054
+ customMethodsRef.current,
1055
+ conversationHistory.current
1056
+ );
1043
1057
 
1044
1058
  const { content, isStream } = customResponse;
1045
1059
  let contentRes: any = content;
@@ -1249,7 +1263,7 @@ const Chatbox = (props: ChatboxProps) => {
1249
1263
  {/**------------- BUBBLE -------------*/}
1250
1264
 
1251
1265
  {/**------------- CLOSE BUTTON -------------*/}
1252
- <button style={{ display: show ? 'block' : 'none' }} className={`${args().prefix || 'custom-'}chatbox-close`} tabIndex={-1} onClick={handleClose}>
1266
+ <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
1267
  <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
1268
 
1255
1269
  </button>
@@ -1307,7 +1321,7 @@ const Chatbox = (props: ChatboxProps) => {
1307
1321
  // Mark the message as animated;
1308
1322
  animatedMessagesRef.current.add(index);
1309
1323
 
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>`) : ''}`;
1324
+ 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
1325
 
1312
1326
  return <div key={index} className={msg.tag?.indexOf('[reply]') < 0 ? 'request' : 'reply'} style={{ display: isAnimProgress ? 'none' : '' }}>
1313
1327
  <div className="qa-name" dangerouslySetInnerHTML={{ __html: `${msg.sender}` }}></div>
package/lib/esm/Textarea/index.tsx CHANGED
@@ -7,6 +7,7 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
7
7
  import { actualPropertyValue, getTextTop } from 'funda-utils/dist/cjs/inputsCalculation';
8
8
  import useDebounce from 'funda-utils/dist/cjs/useDebounce';
9
9
 
10
+
10
11
  export type TextareaProps = {
11
12
  contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
12
13
  wrapperClassName?: string;
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.377",
5
+ "version": "4.6.399",
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",