funda-ui 4.5.888 → 4.6.101

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/Chatbox/index.css +84 -6
  2. package/Chatbox/index.d.ts +16 -3
  3. package/Chatbox/index.js +521 -61
  4. package/Textarea/index.js +9 -5
  5. package/Utils/useAutosizeTextArea.js +9 -5
  6. package/Utils/useGlobalUrlListener.d.ts +2 -0
  7. package/Utils/useGlobalUrlListener.js +157 -0
  8. package/Utils/useSessionStorageListener.d.ts +2 -0
  9. package/Utils/useSessionStorageListener.js +157 -0
  10. package/lib/cjs/Chatbox/index.d.ts +16 -3
  11. package/lib/cjs/Chatbox/index.js +521 -61
  12. package/lib/cjs/Textarea/index.js +9 -5
  13. package/lib/cjs/Utils/useAutosizeTextArea.js +9 -5
  14. package/lib/cjs/Utils/useGlobalUrlListener.d.ts +2 -0
  15. package/lib/cjs/Utils/useGlobalUrlListener.js +157 -0
  16. package/lib/cjs/Utils/useSessionStorageListener.d.ts +2 -0
  17. package/lib/cjs/Utils/useSessionStorageListener.js +157 -0
  18. package/lib/css/Chatbox/index.css +84 -6
  19. package/lib/esm/Chatbox/index.scss +106 -5
  20. package/lib/esm/Chatbox/index.tsx +199 -17
  21. package/lib/esm/Chatbox/utils/func.ts +62 -4
  22. package/lib/esm/Textarea/index.tsx +0 -1
  23. package/lib/esm/Utils/hooks/useAutosizeTextArea.tsx +13 -5
  24. package/lib/esm/Utils/hooks/useGlobalUrlListener.tsx +46 -0
  25. package/lib/esm/Utils/hooks/useSessionStorageListener.tsx +45 -0
  26. package/package.json +1 -1
package/lib/cjs/Textarea/index.js CHANGED
@@ -740,7 +740,11 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
740
740
 
741
741
  // initialize default row height
742
742
  if (el.scrollHeight > 0 && !defaultRowHeightInit) {
743
- setDefaultRowHeight(el.scrollHeight + parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth));
743
+ var _defaultRowHeight = el.scrollHeight + parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth);
744
+ if (maxHeight != 0 && _defaultRowHeight >= maxHeight) {
745
+ _defaultRowHeight = maxHeight;
746
+ }
747
+ setDefaultRowHeight(_defaultRowHeight);
744
748
  setDefaultRowHeightInit(true);
745
749
  }
746
750
 
@@ -757,11 +761,11 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
757
761
 
758
762
  // !!! Compare initial height and changed height
759
763
  if (scrollHeight > defaultRowHeight && defaultRowHeight > 0) {
760
- if (maxHeight != 0 && scrollHeight >= maxHeight) {
761
- el.style.height = maxHeight + "px";
762
- } else {
763
- el.style.height = scrollHeight + "px";
764
+ var _scrollHeight = scrollHeight;
765
+ if (maxHeight != 0 && _scrollHeight >= maxHeight) {
766
+ _scrollHeight = maxHeight;
764
767
  }
768
+ el.style.height = _scrollHeight + "px";
765
769
  }
766
770
  cb === null || cb === void 0 ? void 0 : cb([_controlWidth, scrollHeight]);
767
771
  }
package/lib/cjs/Utils/useAutosizeTextArea.js CHANGED
@@ -188,7 +188,11 @@ var useAutosizeTextArea = function useAutosizeTextArea(_ref) {
188
188
 
189
189
  // initialize default row height
190
190
  if (el.scrollHeight > 0 && !defaultRowHeightInit) {
191
- setDefaultRowHeight(el.scrollHeight + parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth));
191
+ var _defaultRowHeight = el.scrollHeight + parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth);
192
+ if (maxHeight != 0 && _defaultRowHeight >= maxHeight) {
193
+ _defaultRowHeight = maxHeight;
194
+ }
195
+ setDefaultRowHeight(_defaultRowHeight);
192
196
  setDefaultRowHeightInit(true);
193
197
  }
194
198
 
@@ -205,11 +209,11 @@ var useAutosizeTextArea = function useAutosizeTextArea(_ref) {
205
209
 
206
210
  // !!! Compare initial height and changed height
207
211
  if (scrollHeight > defaultRowHeight && defaultRowHeight > 0) {
208
- if (maxHeight != 0 && scrollHeight >= maxHeight) {
209
- el.style.height = maxHeight + "px";
210
- } else {
211
- el.style.height = scrollHeight + "px";
212
+ var _scrollHeight = scrollHeight;
213
+ if (maxHeight != 0 && _scrollHeight >= maxHeight) {
214
+ _scrollHeight = maxHeight;
212
215
  }
216
+ el.style.height = _scrollHeight + "px";
213
217
  }
214
218
  cb === null || cb === void 0 ? void 0 : cb([_controlWidth, scrollHeight]);
215
219
  }
package/lib/cjs/Utils/useGlobalUrlListener.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const useGlobalUrlListener: () => string;
2
+ export default useGlobalUrlListener;
package/lib/cjs/Utils/useGlobalUrlListener.js ADDED
@@ -0,0 +1,157 @@
1
+ (function webpackUniversalModuleDefinition(root, factory) {
2
+ if(typeof exports === 'object' && typeof module === 'object')
3
+ module.exports = factory(require("react"));
4
+ else if(typeof define === 'function' && define.amd)
5
+ define(["react"], factory);
6
+ else if(typeof exports === 'object')
7
+ exports["RPB"] = factory(require("react"));
8
+ else
9
+ root["RPB"] = factory(root["React"]);
10
+ })(this, (__WEBPACK_EXTERNAL_MODULE__787__) => {
11
+ return /******/ (() => { // webpackBootstrap
12
+ /******/ "use strict";
13
+ /******/ var __webpack_modules__ = ({
14
+
15
+ /***/ 787:
16
+ /***/ ((module) => {
17
+
18
+ module.exports = __WEBPACK_EXTERNAL_MODULE__787__;
19
+
20
+ /***/ })
21
+
22
+ /******/ });
23
+ /************************************************************************/
24
+ /******/ // The module cache
25
+ /******/ var __webpack_module_cache__ = {};
26
+ /******/
27
+ /******/ // The require function
28
+ /******/ function __webpack_require__(moduleId) {
29
+ /******/ // Check if module is in cache
30
+ /******/ var cachedModule = __webpack_module_cache__[moduleId];
31
+ /******/ if (cachedModule !== undefined) {
32
+ /******/ return cachedModule.exports;
33
+ /******/ }
34
+ /******/ // Create a new module (and put it into the cache)
35
+ /******/ var module = __webpack_module_cache__[moduleId] = {
36
+ /******/ // no module.id needed
37
+ /******/ // no module.loaded needed
38
+ /******/ exports: {}
39
+ /******/ };
40
+ /******/
41
+ /******/ // Execute the module function
42
+ /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
43
+ /******/
44
+ /******/ // Return the exports of the module
45
+ /******/ return module.exports;
46
+ /******/ }
47
+ /******/
48
+ /************************************************************************/
49
+ /******/ /* webpack/runtime/compat get default export */
50
+ /******/ (() => {
51
+ /******/ // getDefaultExport function for compatibility with non-harmony modules
52
+ /******/ __webpack_require__.n = (module) => {
53
+ /******/ var getter = module && module.__esModule ?
54
+ /******/ () => (module['default']) :
55
+ /******/ () => (module);
56
+ /******/ __webpack_require__.d(getter, { a: getter });
57
+ /******/ return getter;
58
+ /******/ };
59
+ /******/ })();
60
+ /******/
61
+ /******/ /* webpack/runtime/define property getters */
62
+ /******/ (() => {
63
+ /******/ // define getter functions for harmony exports
64
+ /******/ __webpack_require__.d = (exports, definition) => {
65
+ /******/ for(var key in definition) {
66
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
67
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
68
+ /******/ }
69
+ /******/ }
70
+ /******/ };
71
+ /******/ })();
72
+ /******/
73
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
74
+ /******/ (() => {
75
+ /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
76
+ /******/ })();
77
+ /******/
78
+ /******/ /* webpack/runtime/make namespace object */
79
+ /******/ (() => {
80
+ /******/ // define __esModule on exports
81
+ /******/ __webpack_require__.r = (exports) => {
82
+ /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
83
+ /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
84
+ /******/ }
85
+ /******/ Object.defineProperty(exports, '__esModule', { value: true });
86
+ /******/ };
87
+ /******/ })();
88
+ /******/
89
+ /************************************************************************/
90
+ var __webpack_exports__ = {};
91
+ // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
92
+ (() => {
93
+ __webpack_require__.r(__webpack_exports__);
94
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
95
+ /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
96
+ /* harmony export */ });
97
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(787);
98
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
99
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
100
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
101
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
102
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
103
+ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
104
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
105
+ /**
106
+ * Global Url Listener (including micro frontends, frameworks, hashes, etc., applicable to multiple react app)
107
+ *
108
+ * @usage:
109
+
110
+ const App = () => {
111
+ const url = useGlobalUrlListener();
112
+
113
+ useEffect(() => {
114
+ console.log("URL changed:", url);
115
+ }, [url]);
116
+ };
117
+
118
+ */
119
+
120
+ var useGlobalUrlListener = function useGlobalUrlListener() {
121
+ // Initialize state with empty string to avoid SSR issues
122
+ var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(''),
123
+ _useState2 = _slicedToArray(_useState, 2),
124
+ url = _useState2[0],
125
+ setUrl = _useState2[1];
126
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
127
+ // Type guard for SSR
128
+ if (typeof window === 'undefined') return;
129
+
130
+ // Initialize the URL on the client side
131
+ setUrl(window.location.href);
132
+
133
+ // Create MutationObserver instance
134
+ var observer = new MutationObserver(function () {
135
+ setUrl(window.location.href);
136
+ });
137
+
138
+ // Start observing
139
+ observer.observe(document, {
140
+ subtree: true,
141
+ childList: true
142
+ });
143
+
144
+ // Cleanup function
145
+ return function () {
146
+ return observer.disconnect();
147
+ };
148
+ }, []);
149
+ return url;
150
+ };
151
+ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useGlobalUrlListener);
152
+ })();
153
+
154
+ /******/ return __webpack_exports__;
155
+ /******/ })()
156
+ ;
157
+ });
package/lib/cjs/Utils/useSessionStorageListener.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const useSessionStorageListener: (key: string) => string;
2
+ export default useSessionStorageListener;
package/lib/cjs/Utils/useSessionStorageListener.js ADDED
@@ -0,0 +1,157 @@
1
+ (function webpackUniversalModuleDefinition(root, factory) {
2
+ if(typeof exports === 'object' && typeof module === 'object')
3
+ module.exports = factory(require("react"));
4
+ else if(typeof define === 'function' && define.amd)
5
+ define(["react"], factory);
6
+ else if(typeof exports === 'object')
7
+ exports["RPB"] = factory(require("react"));
8
+ else
9
+ root["RPB"] = factory(root["React"]);
10
+ })(this, (__WEBPACK_EXTERNAL_MODULE__787__) => {
11
+ return /******/ (() => { // webpackBootstrap
12
+ /******/ "use strict";
13
+ /******/ var __webpack_modules__ = ({
14
+
15
+ /***/ 787:
16
+ /***/ ((module) => {
17
+
18
+ module.exports = __WEBPACK_EXTERNAL_MODULE__787__;
19
+
20
+ /***/ })
21
+
22
+ /******/ });
23
+ /************************************************************************/
24
+ /******/ // The module cache
25
+ /******/ var __webpack_module_cache__ = {};
26
+ /******/
27
+ /******/ // The require function
28
+ /******/ function __webpack_require__(moduleId) {
29
+ /******/ // Check if module is in cache
30
+ /******/ var cachedModule = __webpack_module_cache__[moduleId];
31
+ /******/ if (cachedModule !== undefined) {
32
+ /******/ return cachedModule.exports;
33
+ /******/ }
34
+ /******/ // Create a new module (and put it into the cache)
35
+ /******/ var module = __webpack_module_cache__[moduleId] = {
36
+ /******/ // no module.id needed
37
+ /******/ // no module.loaded needed
38
+ /******/ exports: {}
39
+ /******/ };
40
+ /******/
41
+ /******/ // Execute the module function
42
+ /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
43
+ /******/
44
+ /******/ // Return the exports of the module
45
+ /******/ return module.exports;
46
+ /******/ }
47
+ /******/
48
+ /************************************************************************/
49
+ /******/ /* webpack/runtime/compat get default export */
50
+ /******/ (() => {
51
+ /******/ // getDefaultExport function for compatibility with non-harmony modules
52
+ /******/ __webpack_require__.n = (module) => {
53
+ /******/ var getter = module && module.__esModule ?
54
+ /******/ () => (module['default']) :
55
+ /******/ () => (module);
56
+ /******/ __webpack_require__.d(getter, { a: getter });
57
+ /******/ return getter;
58
+ /******/ };
59
+ /******/ })();
60
+ /******/
61
+ /******/ /* webpack/runtime/define property getters */
62
+ /******/ (() => {
63
+ /******/ // define getter functions for harmony exports
64
+ /******/ __webpack_require__.d = (exports, definition) => {
65
+ /******/ for(var key in definition) {
66
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
67
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
68
+ /******/ }
69
+ /******/ }
70
+ /******/ };
71
+ /******/ })();
72
+ /******/
73
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
74
+ /******/ (() => {
75
+ /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
76
+ /******/ })();
77
+ /******/
78
+ /******/ /* webpack/runtime/make namespace object */
79
+ /******/ (() => {
80
+ /******/ // define __esModule on exports
81
+ /******/ __webpack_require__.r = (exports) => {
82
+ /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
83
+ /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
84
+ /******/ }
85
+ /******/ Object.defineProperty(exports, '__esModule', { value: true });
86
+ /******/ };
87
+ /******/ })();
88
+ /******/
89
+ /************************************************************************/
90
+ var __webpack_exports__ = {};
91
+ // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
92
+ (() => {
93
+ __webpack_require__.r(__webpack_exports__);
94
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
95
+ /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
96
+ /* harmony export */ });
97
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(787);
98
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
99
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
100
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
101
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
102
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
103
+ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
104
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
105
+ /**
106
+ * Session Storage Listener
107
+ *
108
+ * @usage:
109
+
110
+ const App = () => {
111
+ const myValue = useSessionStorageListener("myKey");
112
+
113
+ useEffect(() => {
114
+ console.log("sessionStorage change:", myValue);
115
+ }, [myValue]);
116
+ };
117
+
118
+ */
119
+
120
+ var useSessionStorageListener = function useSessionStorageListener(key) {
121
+ var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(sessionStorage.getItem(key) || ""),
122
+ _useState2 = _slicedToArray(_useState, 2),
123
+ value = _useState2[0],
124
+ setValue = _useState2[1];
125
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
126
+ var handleStorageChange = function handleStorageChange(event) {
127
+ if (event instanceof CustomEvent && event.detail.key === key) {
128
+ setValue(event.detail.value);
129
+ }
130
+ };
131
+ window.addEventListener("sessionStorageChange", handleStorageChange);
132
+ return function () {
133
+ return window.removeEventListener("sessionStorageChange", handleStorageChange);
134
+ };
135
+ }, [key]);
136
+ return value;
137
+ };
138
+
139
+ // interception sessionStorage.setItem
140
+ var originalSetItem = sessionStorage.setItem;
141
+ sessionStorage.setItem = function (key, value) {
142
+ var event = new CustomEvent("sessionStorageChange", {
143
+ detail: {
144
+ key: key,
145
+ value: value
146
+ }
147
+ });
148
+ window.dispatchEvent(event);
149
+ originalSetItem.apply(this, [key, value]);
150
+ };
151
+ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSessionStorageListener);
152
+ })();
153
+
154
+ /******/ return __webpack_exports__;
155
+ /******/ })()
156
+ ;
157
+ });
package/lib/css/Chatbox/index.css CHANGED
@@ -29,7 +29,7 @@
29
29
  background-position: 250% 0, 250% 0;
30
30
  }
31
31
  }
32
- /*=================== Chatbox (Core) =================*/
32
+ /*=================== Chatbox (Core) =================*/
33
33
  .custom-chatbox-circle {
34
34
  --custom-chatbox-circle-color: #5A5EB9;
35
35
  --custom-chatbox-circle-text: #fff;
@@ -109,6 +109,10 @@
109
109
  --custom-chatbox-toolkit-btn-active-color: #c2dfff;
110
110
  --custom-chatbox-newchat-btn-color: #f8f9fa;
111
111
  --custom-chatbox-newchat-btn-border-color: #e9ecef;
112
+ --custom-chatbox-toolkit-opt-color: #f8f9fa;
113
+ --custom-chatbox-toolkit-opt-border-color: #e9ecef;
114
+ --custom-chatbox-toolkit-opt-active-color: #c2dfff;
115
+ --custom-chatbox-toolkit-btn-radius: 20px;
112
116
  min-width: var(--custom-chatbox-w);
113
117
  max-width: var(--custom-chatbox-w);
114
118
  margin: auto;
@@ -127,6 +131,7 @@
127
131
  /* loading */
128
132
  /* new chat button */
129
133
  /* toolkit buttons */
134
+ /* toolkit options */
130
135
  }
131
136
  .custom-chatbox-container details {
132
137
  font-style: italic;
@@ -392,22 +397,95 @@
392
397
  gap: 8px;
393
398
  justify-content: center;
394
399
  }
395
- .custom-chatbox-container .toolkit-btns > button {
400
+ .custom-chatbox-container .toolkit-btns button {
396
401
  padding: 3px 6px;
397
402
  background-color: var(--custom-chatbox-toolkit-btn-color);
398
403
  border: 1px solid var(--custom-chatbox-toolkit-btn-border-color);
399
- border-radius: 20px;
404
+ border-radius: var(--custom-chatbox-toolkit-btn-radius);
400
405
  cursor: pointer;
401
406
  transition: all 0.3s ease;
402
407
  font-size: 0.75rem;
403
408
  }
404
- .custom-chatbox-container .toolkit-btns > button img, .custom-chatbox-container .toolkit-btns > button svg, .custom-chatbox-container .toolkit-btns > button video, .custom-chatbox-container .toolkit-btns > button canvas, .custom-chatbox-container .toolkit-btns > button audio, .custom-chatbox-container .toolkit-btns > button iframe, .custom-chatbox-container .toolkit-btns > button embed, .custom-chatbox-container .toolkit-btns > button object {
409
+ .custom-chatbox-container .toolkit-btns button img, .custom-chatbox-container .toolkit-btns button svg, .custom-chatbox-container .toolkit-btns button video, .custom-chatbox-container .toolkit-btns button canvas, .custom-chatbox-container .toolkit-btns button audio, .custom-chatbox-container .toolkit-btns button iframe, .custom-chatbox-container .toolkit-btns button embed, .custom-chatbox-container .toolkit-btns button object {
405
410
  display: inline;
406
411
  }
407
- .custom-chatbox-container .toolkit-btns > button:hover {
412
+ .custom-chatbox-container .toolkit-btns button:hover {
408
413
  background-color: var(--custom-chatbox-toolkit-btn-border-color);
409
414
  transform: translateY(-2px);
410
415
  }
411
- .custom-chatbox-container .toolkit-btns > button.active {
416
+ .custom-chatbox-container .toolkit-btns button.opt-active, .custom-chatbox-container .toolkit-btns button.active {
412
417
  background-color: var(--custom-chatbox-toolkit-btn-active-color);
413
418
  }
419
+ @keyframes dropupAnimation {
420
+ from {
421
+ opacity: 0;
422
+ transform: translateY(10px);
423
+ }
424
+ to {
425
+ opacity: 1;
426
+ transform: translateY(0);
427
+ }
428
+ }
429
+ .custom-chatbox-container .toolkit-select-wrapper {
430
+ position: relative;
431
+ display: inline-block;
432
+ }
433
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-btn {
434
+ display: flex;
435
+ align-items: center;
436
+ justify-content: space-between;
437
+ border: 1px solid #ddd;
438
+ border-radius: var(--custom-chatbox-toolkit-btn-radius);
439
+ cursor: pointer;
440
+ }
441
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-arrow {
442
+ margin-left: 8px;
443
+ font-size: 10px;
444
+ transition: transform 0.2s ease;
445
+ }
446
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-arrow.active {
447
+ transform: rotate(180deg);
448
+ }
449
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options-container {
450
+ z-index: 1000;
451
+ width: 100%;
452
+ min-width: 120px;
453
+ transform: translateY(-100%);
454
+ }
455
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options {
456
+ background-color: var(--custom-chatbox-toolkit-opt-color);
457
+ border: 1px solid var(--custom-chatbox-toolkit-opt-border-color);
458
+ border-radius: 4px;
459
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
460
+ margin-bottom: 10px;
461
+ max-height: 300px;
462
+ overflow-y: auto;
463
+ animation: dropupAnimation 0.2s ease;
464
+ position: absolute;
465
+ bottom: 1rem;
466
+ left: 0;
467
+ right: 0;
468
+ display: none;
469
+ z-index: 1000;
470
+ }
471
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options.active {
472
+ display: block;
473
+ }
474
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options::-webkit-scrollbar {
475
+ width: 3px;
476
+ }
477
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-options::-webkit-scrollbar-thumb {
478
+ background: rgba(0, 0, 0, 0.2);
479
+ }
480
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option {
481
+ padding: 3px 6px;
482
+ cursor: pointer;
483
+ transition: background-color 0.2s ease;
484
+ font-size: 0.75rem;
485
+ }
486
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option.cancel {
487
+ color: var(--custom-chatbox-gray-color);
488
+ }
489
+ .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option:hover {
490
+ background-color: var(--custom-chatbox-toolkit-opt-active-color);
491
+ }
package/lib/esm/Chatbox/index.scss CHANGED
@@ -45,7 +45,7 @@
45
45
 
46
46
 
47
47
 
48
- /*=================== Chatbox (Core) =================*/
48
+ /*=================== Chatbox (Core) =================*/
49
49
 
50
50
  .custom-chatbox-circle {
51
51
  --custom-chatbox-circle-color: #5A5EB9;
@@ -138,8 +138,13 @@
138
138
  --custom-chatbox-toolkit-btn-active-color: #c2dfff;
139
139
  --custom-chatbox-newchat-btn-color: #f8f9fa;
140
140
  --custom-chatbox-newchat-btn-border-color: #e9ecef;
141
+ --custom-chatbox-toolkit-opt-color: #f8f9fa;
142
+ --custom-chatbox-toolkit-opt-border-color: #e9ecef;
143
+ --custom-chatbox-toolkit-opt-active-color: #c2dfff;
144
+ --custom-chatbox-toolkit-btn-radius: 20px;
141
145
 
142
146
 
147
+
143
148
  min-width: var(--custom-chatbox-w);
144
149
  max-width: var(--custom-chatbox-w);
145
150
  margin: auto;
@@ -204,7 +209,7 @@
204
209
  img, svg, video, canvas, audio, iframe, embed, object {
205
210
  display: inline;
206
211
  }
207
-
212
+
208
213
  &::-webkit-scrollbar {
209
214
  width: 3px;
210
215
  }
@@ -351,6 +356,7 @@
351
356
  display: inline;
352
357
  }
353
358
 
359
+
354
360
  .messageInput {
355
361
  width: 100%;
356
362
  border: 1px solid var(--custom-chatbox-msg-border);
@@ -485,25 +491,27 @@
485
491
  justify-content: center;
486
492
 
487
493
 
488
- > button {
494
+ button {
489
495
  padding: 3px 6px;
490
496
  background-color: var(--custom-chatbox-toolkit-btn-color);
491
497
  border: 1px solid var(--custom-chatbox-toolkit-btn-border-color);
492
- border-radius: 20px;
498
+ border-radius: var(--custom-chatbox-toolkit-btn-radius);
493
499
  cursor: pointer;
494
500
  transition: all 0.3s ease;
495
501
  font-size: 0.75rem;
496
502
 
497
-
503
+
498
504
  img, svg, video, canvas, audio, iframe, embed, object {
499
505
  display: inline;
500
506
  }
501
507
 
508
+
502
509
  &:hover {
503
510
  background-color: var(--custom-chatbox-toolkit-btn-border-color);
504
511
  transform: translateY(-2px);
505
512
  }
506
513
 
514
+ &.opt-active,
507
515
  &.active {
508
516
  background-color: var(--custom-chatbox-toolkit-btn-active-color);
509
517
  }
@@ -513,6 +521,99 @@
513
521
 
514
522
  }
515
523
 
524
+ /* toolkit options */
525
+ @keyframes dropupAnimation {
526
+ from {
527
+ opacity: 0;
528
+ transform: translateY(10px);
529
+ }
530
+
531
+ to {
532
+ opacity: 1;
533
+ transform: translateY(0);
534
+ }
535
+ }
536
+
537
+ .toolkit-select-wrapper {
538
+ position: relative;
539
+ display: inline-block;
540
+
541
+ .toolkit-select-btn {
542
+ display: flex;
543
+ align-items: center;
544
+ justify-content: space-between;
545
+ border: 1px solid #ddd;
546
+ border-radius: var(--custom-chatbox-toolkit-btn-radius);
547
+ cursor: pointer;
548
+ }
549
+
550
+ .toolkit-select-arrow {
551
+ margin-left: 8px;
552
+ font-size: 10px;
553
+ transition: transform 0.2s ease;
554
+ }
555
+
556
+ .toolkit-select-arrow.active {
557
+ transform: rotate(180deg);
558
+ }
559
+
560
+ .toolkit-select-options-container {
561
+ z-index: 1000;
562
+ width: 100%;
563
+ min-width: 120px;
564
+ transform: translateY(-100%);
565
+ }
566
+
567
+ .toolkit-select-options {
568
+ background-color: var(--custom-chatbox-toolkit-opt-color);
569
+ border: 1px solid var(--custom-chatbox-toolkit-opt-border-color);
570
+ border-radius: 4px;
571
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
572
+ margin-bottom: 10px;
573
+ max-height: 300px;
574
+ overflow-y: auto;
575
+ animation: dropupAnimation 0.2s ease;
576
+
577
+ position: absolute;
578
+ bottom: 1rem;
579
+ left: 0;
580
+ right: 0;
581
+ display: none;
582
+ z-index: 1000;
583
+
584
+ &.active {
585
+ display: block;
586
+ }
587
+
588
+
589
+ &::-webkit-scrollbar {
590
+ width: 3px;
591
+ }
592
+
593
+ &::-webkit-scrollbar-thumb {
594
+ background: rgba(0, 0, 0, 0.2);
595
+ }
596
+ }
597
+
598
+ .toolkit-select-option {
599
+ padding: 3px 6px;
600
+ cursor: pointer;
601
+ transition: background-color 0.2s ease;
602
+ font-size: 0.75rem;
603
+
604
+ &.cancel {
605
+ color: var(--custom-chatbox-gray-color);
606
+ }
607
+
608
+ &:hover {
609
+ background-color: var(--custom-chatbox-toolkit-opt-active-color);
610
+ }
611
+ }
612
+
613
+ }
614
+
615
+
616
+
516
617
 
517
618
 
518
619
  }