funda-ui 4.6.111 → 4.6.151

package/lib/cjs/Chatbox/index.js

@@ -4213,7 +4213,7 @@ function src_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 var Chatbox = function Chatbox(props) {
-  var _args$newChatButton;
+  var _list, _args$newChatButton;
   var chatId = useComId_default()().replace(/\-/g, '_');
 
   // Store latest props in refs
@@ -4386,6 +4386,7 @@ var Chatbox = function Chatbox(props) {
       newChatButton = currentProps.newChatButton,
       maxHistoryLength = currentProps.maxHistoryLength,
       customRequest = currentProps.customRequest,
+      onQuestionClick = currentProps.onQuestionClick,
       renderParser = currentProps.renderParser,
       requestBodyFormatter = currentProps.requestBodyFormatter,
       nameFormatter = currentProps.nameFormatter,
@@ -4451,6 +4452,7 @@ var Chatbox = function Chatbox(props) {
       toolkitButtons: toolkitButtons,
       newChatButton: newChatButton,
       customRequest: customRequest,
+      onQuestionClick: onQuestionClick,
       renderParser: renderParser,
       requestBodyFormatter: requestBodyFormatter,
       nameFormatter: nameFormatter,
@@ -4459,6 +4461,7 @@ var Chatbox = function Chatbox(props) {
       onChunk: onChunk,
       onComplete: onComplete,
       // 
+      defaultQuestionsRes: questions,
       latestContextData: latestContextData,
       questionNameRes: _questionName,
       answerNameRes: _answerName,
@@ -4471,14 +4474,37 @@ var Chatbox = function Chatbox(props) {
     };
   };
 
+  //================================================================
+  // Custom Questions
+  //================================================================
+  var _useState17 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(props.defaultQuestions),
+    _useState18 = src_slicedToArray(_useState17, 2),
+    questions = _useState18[0],
+    setQuestions = _useState18[1];
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (props.defaultQuestions) {
+      setQuestions(props.defaultQuestions);
+    }
+  }, [props.defaultQuestions]);
+  var hasQuestion = function hasQuestion() {
+    return args().defaultQuestionsRes && args().defaultQuestionsRes.list.length > 0;
+  };
+  var handleQuestionClick = function handleQuestionClick(text) {
+    var _args$onQuestionClick, _args;
+    if (inputContentRef.current) {
+      inputContentRef.current.set(text);
+    }
+    (_args$onQuestionClick = (_args = args()).onQuestionClick) === null || _args$onQuestionClick === void 0 ? void 0 : _args$onQuestionClick.call(_args, text, exposedMethods());
+  };
+
   //================================================================
   // Custom buttons
   //================================================================
   var toolkitBtnsRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
-  var _useState17 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
-    _useState18 = src_slicedToArray(_useState17, 2),
-    activeButtons = _useState18[0],
-    setActiveButtons = _useState18[1];
+  var _useState19 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
+    _useState20 = src_slicedToArray(_useState19, 2),
+    activeButtons = _useState20[0],
+    setActiveButtons = _useState20[1];
   var closeDropdowns = function closeDropdowns() {
     setActiveButtons(function (prev) {
       var _args$toolkitButtons;
@@ -4516,10 +4542,10 @@ var Chatbox = function Chatbox(props) {
   };
 
   // options
-  var _useState19 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
-    _useState20 = src_slicedToArray(_useState19, 2),
-    selectedOpt = _useState20[0],
-    setSelectedOpt = _useState20[1];
+  var _useState21 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
+    _useState22 = src_slicedToArray(_useState21, 2),
+    selectedOpt = _useState22[0],
+    setSelectedOpt = _useState22[1];
   var getButtonOptions = function getButtonOptions(btn) {
     var options = [];
     var index = 1;
@@ -4814,7 +4840,7 @@ var Chatbox = function Chatbox(props) {
   var streamController = src_useStreamController({
     onChunk: function () {
       var _onChunk = src_asyncToGenerator( /*#__PURE__*/src_regeneratorRuntime().mark(function _callee2(chunk, index) {
-        var _args$onChunk, _args2;
+        var _args$onChunk, _args3;
         var res;
         return src_regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -4831,7 +4857,7 @@ var Chatbox = function Chatbox(props) {
             case 3:
               res = _context2.sent;
               //
-              (_args$onChunk = (_args2 = args()).onChunk) === null || _args$onChunk === void 0 ? void 0 : _args$onChunk.call(_args2, inputContentRef.current, res, conversationHistory.current);
+              (_args$onChunk = (_args3 = args()).onChunk) === null || _args$onChunk === void 0 ? void 0 : _args$onChunk.call(_args3, inputContentRef.current, res, conversationHistory.current);
             case 5:
             case "end":
               return _context2.stop();
@@ -4845,7 +4871,7 @@ var Chatbox = function Chatbox(props) {
     }(),
     onComplete: function () {
       var _onComplete = src_asyncToGenerator( /*#__PURE__*/src_regeneratorRuntime().mark(function _callee3(lastContent) {
-        var _args$onComplete, _args4;
+        var _args$onComplete, _args5;
         var res;
         return src_regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
@@ -4859,7 +4885,7 @@ var Chatbox = function Chatbox(props) {
               displayMessage(args().answerNameRes, res);
 
               //
-              (_args$onComplete = (_args4 = args()).onComplete) === null || _args$onComplete === void 0 ? void 0 : _args$onComplete.call(_args4, inputContentRef.current, res, conversationHistory.current);
+              (_args$onComplete = (_args5 = args()).onComplete) === null || _args$onComplete === void 0 ? void 0 : _args$onComplete.call(_args5, inputContentRef.current, res, conversationHistory.current);
 
               //
               closeSSE();
@@ -4919,7 +4945,7 @@ var Chatbox = function Chatbox(props) {
   };
   var sendMessage = /*#__PURE__*/function () {
     var _ref2 = src_asyncToGenerator( /*#__PURE__*/src_regeneratorRuntime().mark(function _callee4() {
-      var messageInput, message, inputMsg, res, _args$onChunk2, _args6, _args$onComplete2, _args7, reply, replyRes;
+      var messageInput, message, inputMsg, res, _args$onChunk2, _args7, _args$onComplete2, _args8, reply, replyRes;
       return src_regeneratorRuntime().wrap(function _callee4$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
@@ -4999,8 +5025,8 @@ var Chatbox = function Chatbox(props) {
             displayMessage(args().answerNameRes, replyRes); // Display AI reply
 
             //
-            (_args$onChunk2 = (_args6 = args()).onChunk) === null || _args$onChunk2 === void 0 ? void 0 : _args$onChunk2.call(_args6, inputContentRef.current, replyRes, conversationHistory.current);
-            (_args$onComplete2 = (_args7 = args()).onComplete) === null || _args$onComplete2 === void 0 ? void 0 : _args$onComplete2.call(_args7, inputContentRef.current, replyRes, conversationHistory.current);
+            (_args$onChunk2 = (_args7 = args()).onChunk) === null || _args$onChunk2 === void 0 ? void 0 : _args$onChunk2.call(_args7, inputContentRef.current, replyRes, conversationHistory.current);
+            (_args$onComplete2 = (_args8 = args()).onComplete) === null || _args$onComplete2 === void 0 ? void 0 : _args$onComplete2.call(_args8, inputContentRef.current, replyRes, conversationHistory.current);
 
             //reset SSE
             closeSSE();
@@ -5299,7 +5325,7 @@ var Chatbox = function Chatbox(props) {
     className: "".concat(args().prefix || 'custom-', "chatbox-container"),
     ref: rootRef
   }, msgList.length === 0 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    className: "d-flex flex-column align-items-center justify-content-center h-50"
+    className: "d-flex flex-column align-items-center justify-content-center ".concat(hasQuestion() ? '' : 'h-50')
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("p", null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
     width: "70px",
     height: "70px",
@@ -5326,7 +5352,25 @@ var Chatbox = function Chatbox(props) {
     dangerouslySetInnerHTML: {
       __html: "".concat(args().noDataPlaceholder)
     }
-  }))) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+  }), hasQuestion() && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+    className: "default-questions"
+  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+    className: "default-questions-title",
+    dangerouslySetInnerHTML: {
+      __html: "".concat(args().defaultQuestionsRes.title)
+    }
+  }), (_list = args().defaultQuestionsRes.list) === null || _list === void 0 ? void 0 : _list.map(function (question, index) {
+    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+      key: index,
+      className: "default-question-item",
+      onClick: function onClick() {
+        return handleQuestionClick(question);
+      },
+      dangerouslySetInnerHTML: {
+        __html: "".concat(question)
+      }
+    });
+  })))) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "messages",
     ref: msgContainerRef
   }, msgList.map(function (msg, index) {
@@ -5464,8 +5508,8 @@ var Chatbox = function Chatbox(props) {
       }
     },
     onChange: function onChange(e) {
-      var _args$onInputChange, _args10;
-      (_args$onInputChange = (_args10 = args()).onInputChange) === null || _args$onInputChange === void 0 ? void 0 : _args$onInputChange.call(_args10, inputContentRef.current, e.target.value);
+      var _args$onInputChange, _args11;
+      (_args$onInputChange = (_args11 = args()).onInputChange) === null || _args$onInputChange === void 0 ? void 0 : _args$onInputChange.call(_args11, inputContentRef.current, e.target.value);
     },
     rows: args().defaultRows || 3,
     autoSize: true,

package/lib/cjs/Date/index.js

@@ -5002,6 +5002,9 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
   var defaultValueIsEmpty = function defaultValueIsEmpty(s) {
     return typeof s === 'undefined' || s === null || s === 'null' || s === '';
   };
+  var propExist = function propExist(p) {
+    return typeof p !== 'undefined' && p !== null && p !== '';
+  };
 
   // Localization
   var _langHoursTitle = langHoursTitle || 'Hours';
@@ -5613,6 +5616,54 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     }
     return [_res, v];
   }
+  function tools() {
+    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+      className: (0,cls.combinedCls)('date2d__control-tools', {
+        'date2d__control-tools--hover-show-tools': SHOW_TOOLS_ENABLED
+      })
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("a", {
+      tabIndex: -1,
+      href: "#",
+      className: (0,cls.combinedCls)('date2d__control-tools__close', {
+        'd-none': HIDE_CLEAR_BTN_ENABLED || !dateDefaultValueExist
+      }),
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation(); // Avoid triggering pop-ups
+
+        clearAll();
+        onClear === null || onClear === void 0 ? void 0 : onClear(getFullTimeData(''));
+      }
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
+      width: "12px",
+      height: "12px",
+      viewBox: "0 0 1024 1024"
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("path", {
+      fill: "#000",
+      d: "M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
+    }))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("a", {
+      tabIndex: -1,
+      href: "#",
+      className: "date2d__control-tools__trigger",
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation(); // Avoid triggering pop-ups
+
+        handleShow();
+      }
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
+      width: "14px",
+      height: "14px",
+      viewBox: "0 0 24 24",
+      fill: "none"
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("path", {
+      d: "M3 9H21M9 15L11 17L15 13M7 3V5M17 3V5M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z",
+      stroke: "#000000",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }))));
+  }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     // update default value
     //--------------
@@ -5931,54 +5982,9 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
         setChangedVal(_full);
         setTimeVal([splitVals[3], splitVals[4], _val]);
       }
-    }, attributes))) : null) : null)),
+    }, attributes))) : null) : null), propExist(iconRight) ? tools() : null),
     style: style
-  }, attributes)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
-    className: (0,cls.combinedCls)('date2d__control-tools', {
-      'date2d__control-tools--hover-show-tools': SHOW_TOOLS_ENABLED
-    })
-  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("a", {
-    tabIndex: -1,
-    href: "#",
-    className: (0,cls.combinedCls)('date2d__control-tools__close', {
-      'd-none': HIDE_CLEAR_BTN_ENABLED || !dateDefaultValueExist
-    }),
-    onClick: function onClick(e) {
-      e.preventDefault();
-      e.stopPropagation(); // Avoid triggering pop-ups
-
-      clearAll();
-      onClear === null || onClear === void 0 ? void 0 : onClear(getFullTimeData(''));
-    }
-  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
-    width: "12px",
-    height: "12px",
-    viewBox: "0 0 1024 1024"
-  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("path", {
-    fill: "#000",
-    d: "M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
-  }))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("a", {
-    tabIndex: -1,
-    href: "#",
-    className: "date2d__control-tools__trigger",
-    onClick: function onClick(e) {
-      e.preventDefault();
-      e.stopPropagation(); // Avoid triggering pop-ups
-
-      handleShow();
-    }
-  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
-    width: "14px",
-    height: "14px",
-    viewBox: "0 0 24 24",
-    fill: "none"
-  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("path", {
-    d: "M3 9H21M9 15L11 17L15 13M7 3V5M17 3V5M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z",
-    stroke: "#000000",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })))))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((dist_cjs_default()), {
+  }, attributes)), !propExist(iconRight) ? tools() : null)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((dist_cjs_default()), {
     show: isShow,
     containerClassName: (0,cls.combinedCls)('Date', "Date--".concat(type))
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", _extends({

package/lib/cjs/Select/index.d.ts

@@ -13,9 +13,9 @@ export interface OptionConfig {
     disabled?: boolean;
     optgroup?: any[];
     group?: boolean;
-    label: any;
-    listItemLabel?: any;
-    value: any;
+    label: string;
+    listItemLabel?: string;
+    value: string | number | boolean;
     queryString: string | number;
     callback?: () => void;
 }
@@ -46,7 +46,7 @@ export declare type SelectProps = {
     multiSelect?: MultiSelectConfig;
     multiSelectEntireAreaTrigger?: boolean;
     multiSelectSelectedItemOnlyStatus?: multiSelectSelectedItemOnlyStatusConfig;
-    renderSelectedValue?: (selectedData: MultiSelectControlValConfig, removeFunc: (e: React.MouseEvent) => void) => void;
+    renderSelectedValue?: (selectedData: MultiSelectControlValConfig, removeFunc: (e: React.MouseEvent) => void) => React.ReactNode;
     cleanTrigger?: CleanTriggerConfig;
     defaultValue?: string | OptionConfig;
     value?: string | OptionConfig;

package/lib/cjs/TagInput/index.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
+export interface TagValConfig {
+    content: string;
+    id: number;
+    [key: string]: string | boolean | number;
+}
 export declare type TagInputProps = {
     contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
@@ -13,6 +18,7 @@ export declare type TagInputProps = {
     required?: any;
     readOnly?: any;
     placeholder?: string;
+    renderSelectedValue?: (selectedData: TagValConfig[], removeFunc: (e: React.MouseEvent) => void) => React.ReactNode;
     /** Whether to use square brackets to save result and initialize default value */
     extractValueByBrackets?: boolean;
     /** -- */

package/lib/cjs/TagInput/index.js

@@ -828,7 +828,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var funda_utils_dist_cjs_convert__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_convert__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(188);
 /* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__);
-var _excluded = ["contentRef", "wrapperClassName", "maxTags", "disabled", "required", "placeholder", "readOnly", "value", "requiredLabel", "label", "name", "id", "autoComplete", "autoCapitalize", "spellCheck", "extractValueByBrackets", "minLength", "maxLength", "style", "tabIndex", "onChange", "onBlur", "onFocus"];
+var _excluded = ["contentRef", "wrapperClassName", "maxTags", "disabled", "required", "placeholder", "renderSelectedValue", "readOnly", "value", "requiredLabel", "label", "name", "id", "autoComplete", "autoCapitalize", "spellCheck", "extractValueByBrackets", "minLength", "maxLength", "style", "tabIndex", "onChange", "onBlur", "onFocus"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 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."); }
@@ -850,6 +850,7 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     disabled = props.disabled,
     required = props.required,
     placeholder = props.placeholder,
+    renderSelectedValue = props.renderSelectedValue,
     readOnly = props.readOnly,
     value = props.value,
     requiredLabel = props.requiredLabel,
@@ -932,6 +933,8 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
   }
   function handleRemove(e) {
     e.preventDefault();
+    e.stopPropagation(); /* REQUIRED */
+
     var idToRemove = Number(e.currentTarget.dataset.item);
     var newArray = items.filter(function (item) {
       return item.id !== idToRemove;
@@ -1056,7 +1059,7 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     className: "tag-input__control-wrapper"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
     className: "tag-input__list"
-  }, items ? items.map(function (item, index) {
+  }, typeof renderSelectedValue === 'function' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, renderSelectedValue(items, handleRemove)) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, items ? items.map(function (item, index) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       key: index
     }, item.content, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
@@ -1072,7 +1075,7 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
       fill: "#000",
       d: "M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
     }))));
-  }) : null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }) : null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__.combinedCls)('tag-input__control', {
       'disabled': disabled
     }),

package/lib/css/Chatbox/index.css

@@ -113,6 +113,8 @@
   --custom-chatbox-toolkit-opt-border-color: #e9ecef;
   --custom-chatbox-toolkit-opt-active-color: #c2dfff;
   --custom-chatbox-toolkit-btn-radius: 20px;
+  --custom-chatbox-questions-bg: #f5f5f5;
+  --custom-chatbox-questions-hover-bg: #e9e9e9;
   min-width: var(--custom-chatbox-w);
   max-width: var(--custom-chatbox-w);
   margin: auto;
@@ -132,6 +134,7 @@
   /* new chat button */
   /* toolkit buttons */
   /* toolkit options */
+  /* default questions */
 }
 .custom-chatbox-container details {
   font-style: italic;
@@ -434,7 +437,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border: 1px solid #ddd;
+  border: 1px solid var(--custom-chatbox-gray-color);
   border-radius: var(--custom-chatbox-toolkit-btn-radius);
   cursor: pointer;
 }
@@ -489,3 +492,24 @@
 .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option:hover {
   background-color: var(--custom-chatbox-toolkit-opt-active-color);
 }
+.custom-chatbox-container .default-questions-title {
+  margin-bottom: 0.5rem;
+}
+.custom-chatbox-container .default-questions {
+  padding: 15px;
+  width: 100%;
+}
+.custom-chatbox-container .default-question-item {
+  padding: 0.3rem 1rem;
+  margin-bottom: 0.2rem;
+  background-color: var(--custom-chatbox-questions-bg);
+  border-radius: 0.35rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.custom-chatbox-container .default-question-item:hover {
+  background-color: var(--custom-chatbox-questions-hover-bg);
+}
+.custom-chatbox-container .default-question-item:last-child {
+  margin-bottom: 0;
+}

package/lib/esm/Chatbox/index.scss

@@ -142,7 +142,8 @@
     --custom-chatbox-toolkit-opt-border-color: #e9ecef;
     --custom-chatbox-toolkit-opt-active-color: #c2dfff;
     --custom-chatbox-toolkit-btn-radius: 20px;
-
+    --custom-chatbox-questions-bg: #f5f5f5;
+    --custom-chatbox-questions-hover-bg: #e9e9e9;
     
     
     min-width: var(--custom-chatbox-w);
@@ -542,7 +543,7 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
-            border: 1px solid #ddd;
+            border: 1px solid var(--custom-chatbox-gray-color);
             border-radius: var(--custom-chatbox-toolkit-btn-radius);
             cursor: pointer;
         }
@@ -615,5 +616,35 @@
 
 
 
+    /* default questions */
+    .default-questions-title {
+        margin-bottom: .5rem;
+    }
+    .default-questions {
+        padding: 15px;
+        width: 100%;
+    }
+    
+    .default-question-item {
+        padding: .3rem 1rem;
+        margin-bottom: .2rem;
+        background-color: var(--custom-chatbox-questions-bg);
+        border-radius: 0.35rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        
+        &:hover {
+            background-color: var(--custom-chatbox-questions-hover-bg);
+        }
+
+        
+        &:last-child {
+            margin-bottom: 0;
+        } 
+
+    }
+    
+
+
 
 }

package/lib/esm/Chatbox/index.tsx

@@ -39,6 +39,13 @@ export type MessageDetail = {
     tag: string; // such as '[reply]'
 };
 
+
+export type QuestionData = {
+    title: string;
+    list: Array<string>;
+};
+
+
 export interface FloatingButton {
     label: string;  // HTML string
     value: string;
@@ -106,10 +113,12 @@ export type ChatboxProps = {
     toolkitButtons?: FloatingButton[];
     newChatButton?: FloatingButton;
     customMethods?: CustomMethod[]; // [{"name": "method1", "func": "() => { console.log('test'); }"}, ...]
+    defaultQuestions?: QuestionData;
     customRequest?: CustomRequestFunction;
     renderParser?: (input: string) => Promise<string>;
     requestBodyFormatter?: (body: any, contextData: Record<string, any>, conversationHistory: MessageDetail[]) => Promise<Record<string, any>>;
     nameFormatter?: (input: string) => string;
+    onQuestionClick?: (text: string, methods: Record<string, Function>) => void;
     onInputChange?: (controlRef: React.RefObject<any>, val: string) => any;
     onInputCallback?: (input: string) => Promise<string>;
     onChunk?: (controlRef: React.RefObject<any>, lastContent: string, conversationHistory: MessageDetail[]) => any;
@@ -279,6 +288,7 @@ const Chatbox = (props: ChatboxProps) => {
             newChatButton,
             maxHistoryLength,
             customRequest,
+            onQuestionClick,
             renderParser,
             requestBodyFormatter,
             nameFormatter,
@@ -352,6 +362,7 @@ const Chatbox = (props: ChatboxProps) => {
             toolkitButtons,
             newChatButton,
             customRequest,
+            onQuestionClick,
             renderParser,
             requestBodyFormatter,
             nameFormatter,
@@ -361,6 +372,7 @@ const Chatbox = (props: ChatboxProps) => {
             onComplete,
 
             // 
+            defaultQuestionsRes: questions, 
             latestContextData,
             questionNameRes: _questionName,
             answerNameRes: _answerName,
@@ -375,6 +387,28 @@ const Chatbox = (props: ChatboxProps) => {
     }
 
 
+
+    //================================================================
+    // Custom Questions
+    //================================================================
+    const [questions, setQuestions] = useState<QuestionData | undefined>(props.defaultQuestions);
+    useEffect(() => {
+        if (props.defaultQuestions) {
+            setQuestions(props.defaultQuestions);
+        }
+    }, [props.defaultQuestions]);
+    const hasQuestion = () => {
+        return args().defaultQuestionsRes && (args().defaultQuestionsRes as QuestionData).list.length > 0;
+    };
+    const handleQuestionClick = (text: string) => {
+        if (inputContentRef.current) {
+            inputContentRef.current.set(text);
+        }
+
+        args().onQuestionClick?.(text, exposedMethods());
+    };
+
+
     //================================================================
     // Custom buttons
     //================================================================
@@ -1124,7 +1158,7 @@ const Chatbox = (props: ChatboxProps) => {
                 {/**------------- NO DATA -------------*/}
                 {msgList.length === 0 ? <>
 
-                    <div className="d-flex flex-column align-items-center justify-content-center h-50">
+                    <div className={`d-flex flex-column align-items-center justify-content-center ${hasQuestion() ? '' : 'h-50'}`}>
                         <p>
                             <svg width="70px" height="70px" viewBox="0 0 24 24" fill="none">
                                 <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88837 21.6244 10.4003 22 12 22Z" stroke="#858297" strokeWidth="1.5" />
@@ -1134,7 +1168,26 @@ const Chatbox = (props: ChatboxProps) => {
 
                         </p>
                         <p className="text-primary" dangerouslySetInnerHTML={{ __html: `${args().noDataPlaceholder}` }}></p>
+
+                        {/** DEFAULT QUESTIONS */}
+                        {hasQuestion() && (
+                            <div className="default-questions">
+                                <div className="default-questions-title" dangerouslySetInnerHTML={{ __html: `${(args().defaultQuestionsRes as QuestionData).title}` }}></div>
+                                {(args().defaultQuestionsRes as QuestionData).list?.map((question: string, index: number) => (
+                                    <div 
+                                        key={index}
+                                        className="default-question-item"
+                                        onClick={() => handleQuestionClick(question)}
+                                        dangerouslySetInnerHTML={{ __html: `${question}` }}
+                                    />
+                                ))}
+                            </div>
+                        )}
+                        {/** /DEFAULT QUESTIONS */}
+
                     </div>
+
+
                 </> : null}
                 {/**------------- /NO DATA -------------*/}