funda-ui 4.7.150 → 4.7.155

package/lib/cjs/RootPortal/index.js

@@ -110,7 +110,9 @@ __webpack_require__.r(__webpack_exports__);
 var RootPortal = function RootPortal(props) {
   var containerClassName = props.containerClassName,
     show = props.show,
-    children = props.children;
+    children = props.children,
+    _props$usePortal = props.usePortal,
+    usePortal = _props$usePortal === void 0 ? true : _props$usePortal;
   var containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
 
   // Move HTML templates to tag end body </body>
@@ -121,15 +123,20 @@ var RootPortal = function RootPortal(props) {
   // Use `containerRef.current` to ensure the correctness of the nextjs framework. It may report an error document as undefined
 
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    containerRef.current = document.createElement('div');
-    containerRef.current.className = "root-portal-container ".concat(containerClassName || '');
-    document.body.appendChild(containerRef.current);
+    if (usePortal) {
+      containerRef.current = document.createElement('div');
+      containerRef.current.className = "root-portal-container ".concat(containerClassName || '');
+      document.body.appendChild(containerRef.current);
+    }
     return function () {
-      if (containerRef.current) {
+      if (usePortal && containerRef.current) {
         containerRef.current.remove();
       }
     };
-  }, []);
+  }, [usePortal]);
+  if (!usePortal) {
+    return show ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children) : null;
+  }
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, containerRef.current && show && /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(children, containerRef.current));
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RootPortal);

package/lib/cjs/Select/index.js

@@ -171,7 +171,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         var RootPortal = function RootPortal(props) {
           var containerClassName = props.containerClassName,
             show = props.show,
-            children = props.children;
+            children = props.children,
+            _props$usePortal = props.usePortal,
+            usePortal = _props$usePortal === void 0 ? true : _props$usePortal;
           var containerRef = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
 
           // Move HTML templates to tag end body </body>
@@ -182,15 +184,20 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           // Use `containerRef.current` to ensure the correctness of the nextjs framework. It may report an error document as undefined
 
           (0, react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-            containerRef.current = document.createElement('div');
-            containerRef.current.className = "root-portal-container ".concat(containerClassName || '');
-            document.body.appendChild(containerRef.current);
+            if (usePortal) {
+              containerRef.current = document.createElement('div');
+              containerRef.current.className = "root-portal-container ".concat(containerClassName || '');
+              document.body.appendChild(containerRef.current);
+            }
             return function () {
-              if (containerRef.current) {
+              if (usePortal && containerRef.current) {
                 containerRef.current.remove();
               }
             };
-          }, []);
+          }, [usePortal]);
+          if (!usePortal) {
+            return show ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, children) : null;
+          }
           return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, containerRef.current && show && /*#__PURE__*/(0, react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(children, containerRef.current));
         };
         /* harmony default export */

package/lib/cjs/Toast/index.js

@@ -171,7 +171,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         var RootPortal = function RootPortal(props) {
           var containerClassName = props.containerClassName,
             show = props.show,
-            children = props.children;
+            children = props.children,
+            _props$usePortal = props.usePortal,
+            usePortal = _props$usePortal === void 0 ? true : _props$usePortal;
           var containerRef = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
 
           // Move HTML templates to tag end body </body>
@@ -182,15 +184,20 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           // Use `containerRef.current` to ensure the correctness of the nextjs framework. It may report an error document as undefined
 
           (0, react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-            containerRef.current = document.createElement('div');
-            containerRef.current.className = "root-portal-container ".concat(containerClassName || '');
-            document.body.appendChild(containerRef.current);
+            if (usePortal) {
+              containerRef.current = document.createElement('div');
+              containerRef.current.className = "root-portal-container ".concat(containerClassName || '');
+              document.body.appendChild(containerRef.current);
+            }
             return function () {
-              if (containerRef.current) {
+              if (usePortal && containerRef.current) {
                 containerRef.current.remove();
               }
             };
-          }, []);
+          }, [usePortal]);
+          if (!usePortal) {
+            return show ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, children) : null;
+          }
           return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, containerRef.current && show && /*#__PURE__*/(0, react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(children, containerRef.current));
         };
         /* harmony default export */

package/lib/cjs/Tooltip/index.js

@@ -171,7 +171,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         var RootPortal = function RootPortal(props) {
           var containerClassName = props.containerClassName,
             show = props.show,
-            children = props.children;
+            children = props.children,
+            _props$usePortal = props.usePortal,
+            usePortal = _props$usePortal === void 0 ? true : _props$usePortal;
           var containerRef = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
 
           // Move HTML templates to tag end body </body>
@@ -182,15 +184,20 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           // Use `containerRef.current` to ensure the correctness of the nextjs framework. It may report an error document as undefined
 
           (0, react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-            containerRef.current = document.createElement('div');
-            containerRef.current.className = "root-portal-container ".concat(containerClassName || '');
-            document.body.appendChild(containerRef.current);
+            if (usePortal) {
+              containerRef.current = document.createElement('div');
+              containerRef.current.className = "root-portal-container ".concat(containerClassName || '');
+              document.body.appendChild(containerRef.current);
+            }
             return function () {
-              if (containerRef.current) {
+              if (usePortal && containerRef.current) {
                 containerRef.current.remove();
               }
             };
-          }, []);
+          }, [usePortal]);
+          if (!usePortal) {
+            return show ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, children) : null;
+          }
           return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, containerRef.current && show && /*#__PURE__*/(0, react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(children, containerRef.current));
         };
         /* harmony default export */

package/lib/css/Chatbox/index.css

@@ -154,6 +154,7 @@
   right: 0;
   z-index: 1031;
   height: var(--custom-chatbox-h);
+  /* disable popup */
   /* message list */
   /* dot loading */
   /* control area */
@@ -164,6 +165,12 @@
   /* default questions */
   /* Tooltip */
 }
+.custom-chatbox-container.popup-none {
+  position: relative;
+  bottom: auto;
+  right: auto;
+  box-shadow: none;
+}
 .custom-chatbox-container details {
   font-style: italic;
   margin: 0;
@@ -375,6 +382,7 @@
   border: 1px solid var(--custom-chatbox-gray-color);
   border-radius: 0.35rem;
   transition: all 0.3s ease;
+  background: var(--custom-chatbox-input-bg);
 }
 .custom-chatbox-container .msgcontrol img, .custom-chatbox-container .msgcontrol svg, .custom-chatbox-container .msgcontrol video, .custom-chatbox-container .msgcontrol canvas, .custom-chatbox-container .msgcontrol audio, .custom-chatbox-container .msgcontrol iframe, .custom-chatbox-container .msgcontrol embed, .custom-chatbox-container .msgcontrol object {
   display: inline;

package/lib/esm/Chatbox/index.scss

@@ -189,6 +189,14 @@
     z-index: 1031;
     height: var(--custom-chatbox-h);
 
+    /* disable popup */
+    &.popup-none {
+        position: relative;
+        bottom: auto;
+        right: auto;
+        box-shadow: none;
+    }
+
     details {
         font-style: italic;
         margin: 0;
@@ -449,6 +457,7 @@
         border: 1px solid var(--custom-chatbox-gray-color);
         border-radius: 0.35rem;
         transition: all 0.3s ease;
+        background: var(--custom-chatbox-input-bg);
 
         img, svg, video, canvas, audio, iframe, embed, object {
             display: inline;

package/lib/esm/Chatbox/index.tsx

@@ -12,8 +12,6 @@ import useClickOutside from 'funda-utils/dist/cjs/useClickOutside';
 import { htmlEncode } from 'funda-utils/dist/cjs/sanitize';
 
 
-
-
 // loader
 import PureLoader from './PureLoader';
 import TypingEffect from "./TypingEffect";
@@ -46,16 +44,24 @@ export type QuestionData = {
     list: Array<string>;
 };
 
+export type SelectedOption = {
+    [key: string]: string | number;
+    curIndex: number;
+    curValue: string;
+};
 
 export interface FloatingButton {
     label: string;  // HTML string
     value: string;
     onClick: string;
+    active?: boolean; // Specify if the button should be active by default
     isSelect?: boolean;  // Mark whether it is a drop-down selection button
     dynamicOptions?: boolean; // Mark whether to use dynamic options
+    defaultSelected?: number; // Specify default selected option index
     [key: string]: any;  // Allows dynamic `onSelect__<number>` attributes, such as `onSelect__1`, `onSelect__2`, ...
 }
 
+
 export interface FloatingButtonSelectOption {
     label: string;
     value: string;
@@ -122,6 +128,7 @@ export type ChatboxProps = {
     defaultQuestions?: QuestionData;
     showCopyBtn?: boolean;  // Whether to show copy button for each reply
     autoCopyReply?: boolean;  // Whether to automatically copy reply to clipboard
+    usePopUp?: boolean;
     customRequest?: CustomRequestFunction;
     renderParser?: (input: string) => Promise<string>;
     requestBodyFormatter?: (body: any, contextData: Record<string, any>, conversationHistory: MessageDetail[]) => Promise<Record<string, any>>;
@@ -178,6 +185,11 @@ const Chatbox = (props: ChatboxProps) => {
     const [enableStreamMode, setEnableStreamMode] = useState<boolean>(true);
     const animatedMessagesRef = useRef<Set<number>>(new Set()); // Add a ref to keep track of messages that have already been animated
 
+    // Keep track of whether the default values have been initialized
+    const [initializedDefaults, setInitializedDefaults] = useState<Record<string, boolean>>({});
+
+
+
     //
     const timer = useRef<any>(null);
 
@@ -307,6 +319,7 @@ const Chatbox = (props: ChatboxProps) => {
             toolkitButtons,
             newChatButton,
             maxHistoryLength,
+            usePopUp,
             customRequest,
             onQuestionClick,
             onCopyCallback,
@@ -387,6 +400,7 @@ const Chatbox = (props: ChatboxProps) => {
             maxHistoryLength,
             toolkitButtons,
             newChatButton,
+            usePopUp,
             customRequest,
             onQuestionClick,
             onCopyCallback,
@@ -508,6 +522,19 @@ const Chatbox = (props: ChatboxProps) => {
             return newState;
         });
     };
+
+    // The onClick action specifically used to perform the default options
+    const executeDefaultOptionAction = async (actionStr: string, buttonId: string) => {
+        try {
+            const actionFn = new Function('method', 'isActive', 'button', actionStr);
+            // To perform the action, pass false as the "isActive" parameter, as this is the default option
+            await actionFn(exposedMethods(), false, document.getElementById(buttonId));
+        } catch (error) {
+            console.error('Error executing default option action:', error);
+        }
+    };
+
+
     const executeButtonAction = async (actionStr: string, buttonId: string, buttonElement: HTMLButtonElement) => {
         try {
             const actionFn = new Function('method', 'isActive', 'button', actionStr);
@@ -547,7 +574,11 @@ const Chatbox = (props: ChatboxProps) => {
    
 
     // options
-    const [selectedOpt, setSelectedOpt] = useState<Record<string, string | number>>({});
+    const [selectedOpt, setSelectedOpt] = useState<SelectedOption>({
+        curIndex: -1,
+        curValue: ''
+    });
+    
     // Store dynamic options
     const [dynamicOptions, setDynamicOptions] = useState<Record<string, FloatingButtonSelectOption[]>>({});
     
@@ -575,7 +606,7 @@ const Chatbox = (props: ChatboxProps) => {
         return options;
     };
 
-    const handleExecuteButtonSelect = (buttonId: string, option: FloatingButtonSelectOption, index: number, value: string) => {
+    const handleExecuteButtonSelect = (buttonId: string, option: FloatingButtonSelectOption, index: number, value: string, isDefaultSelection: boolean = false) => {
 
         if (option.value === "cancel") {
             setSelectedOpt(prev => {
@@ -597,11 +628,15 @@ const Chatbox = (props: ChatboxProps) => {
             }));
         }
 
+            
+        // The button action is performed and the drop-down menu is closed only when it is not the default selection
+        if (!isDefaultSelection) {
+            executeButtonAction(option.onClick, buttonId, document.getElementById(buttonId) as HTMLButtonElement);
+            
+            // Close the drop-down
+            closeDropdowns();
+        }
 
-        executeButtonAction(option.onClick, buttonId, document.getElementById(buttonId) as HTMLButtonElement);
-        
-        // Close the drop-down
-        closeDropdowns();
     };
 
     // click outside
@@ -1054,10 +1089,11 @@ const Chatbox = (props: ChatboxProps) => {
                     customMethodsRef.current,
                     conversationHistory.current
                 );
-
                 const { content, isStream } = customResponse;
                 let contentRes: any = content;
 
+
+
                 // Update stream mode
                 setEnableStreamMode(isStream);
 
@@ -1164,6 +1200,7 @@ const Chatbox = (props: ChatboxProps) => {
                 // hide loader
                 setLoaderDisplay(false);
 
+                
                 let result: any = jsonResponse;
                 if (extractPath) {
                     for (const path of extractPath) {
@@ -1176,6 +1213,7 @@ const Chatbox = (props: ChatboxProps) => {
                 // Replace with a valid label
                 content = fixHtmlTags(content, args().withReasoning, args().reasoningSwitchLabel);
 
+                
                 return {
                     reply: formatLatestDisplayContent(content),
                     useStreamRender: false
@@ -1244,10 +1282,57 @@ const Chatbox = (props: ChatboxProps) => {
         (window as any).chatboxCopyToClipboard = chatboxCopyToClipboard;
       }, []);
 
+
+
+    // Initialize the default value of toolkit buttons
+    useEffect(() => {
+        if (args().toolkitButtons) {
+            args().toolkitButtons.forEach((btn: FloatingButton, index: number) => {
+                const _id = `${args().prefix || 'custom-'}chatbox-btn-tools-${chatId}${index}`;
+
+                if (btn.isSelect) {
+                    
+                    if (!initializedDefaults[_id] && typeof btn.defaultSelected === 'number') {
+                        const options = getButtonOptions(btn, _id);
+
+                        // If there is a default selected item, initialize the selected state
+                        if (btn.defaultSelected >= 0 && btn.defaultSelected < options.length) {
+                            const defaultOption = options[btn.defaultSelected];
+                            if (defaultOption) {
+                                // Update the selected status
+                                // console.log('--> defaultOption: ', defaultOption);
+                    
+                                // Pass the "isDefaultSelection" parameter as true
+                                handleExecuteButtonSelect(_id, defaultOption, btn.defaultSelected, defaultOption.value, true);
+
+                                // Perform the onClick action alone
+                                executeDefaultOptionAction(defaultOption.onClick, _id);
+                                    
+
+                                // Mark this button with the default value initialized
+                                setInitializedDefaults(prev => ({
+                                    ...prev,
+                                    [_id]: true
+                                }));
+
+                            }
+                        }
+                    }
+                } else if (btn.active) {
+                    // For non-select buttons, if defaultActive is true, execute the onClick action
+                    executeButtonAction(btn.onClick, _id, document.getElementById(_id) as HTMLButtonElement);
+                }
+
+             
+            })
+        }
+    }, [chatId, args().toolkitButtons]); // It is only executed when the component is first rendered and when toolkitButtons changes
+
+
     return (
         <>
 
-        <RootPortal show={true} containerClassName="Chatbox">
+        <RootPortal show={true} usePortal={args().usePopUp} containerClassName="Chatbox">
 
             {/**------------- BUBBLE -------------*/}
             {args().bubble ? <>
@@ -1270,7 +1355,7 @@ const Chatbox = (props: ChatboxProps) => {
             {/**------------- CLOSE BUTTON------------- */}
 
 
-            <div style={{ display: show ? 'block' : 'none' }} className={`${args().prefix || 'custom-'}chatbox-container`} ref={rootRef}>
+            <div style={{ display: show ? 'block' : 'none' }} className={`${args().prefix || 'custom-'}chatbox-container ${typeof args().usePopUp !== 'undefined' && args().usePopUp === false ? 'popup-none' : ''}`} ref={rootRef}>
 
                 {/**------------- NO DATA -------------*/}
                 {msgList.length === 0 ? <>
@@ -1310,7 +1395,8 @@ const Chatbox = (props: ChatboxProps) => {
           
 
                 {/**------------- MESSAGES LIST -------------*/}
-                <div className="messages" ref={msgContainerRef}>
+                {/** Prevent excessive height overflow */}
+                <div className={`messages ${msgList.length === 0 ? 'd-none' : ''}`} ref={msgContainerRef}>
 
                     {msgList.map((msg, index) => {
 
@@ -1570,12 +1656,13 @@ const Chatbox = (props: ChatboxProps) => {
 
                             if (btn.isSelect) {
                                 const options = getButtonOptions(btn, _id);
-                                
+
                                 return (
                                     <div key={index} className="toolkit-select-wrapper">
                                         <button
                                             id={_id}
-                                            className={`toolkit-select-btn ${btn.value || ''} ${isActive ? 'active' : ''} ${selectedOpt.curValue !== 'cancel' && typeof selectedOpt.curValue !== 'undefined' && selectedOpt.curValue !== '' ? 'opt-active' : ''}`}
+                                            data-value={btn.value || ''}
+                                            className={`toolkit-select-btn ${isActive ? 'active' : ''} ${selectedOpt.curValue !== 'cancel' && typeof selectedOpt.curValue !== 'undefined' && selectedOpt.curValue !== '' ? 'opt-active' : ''}`}
                                             onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
                                                 e.preventDefault();
                                                 setActiveButtons(prev => ({
@@ -1610,7 +1697,8 @@ const Chatbox = (props: ChatboxProps) => {
                                                 {options.map((option: FloatingButtonSelectOption, optIndex: number) => (
                                                     <div
                                                         key={optIndex}
-                                                        className={`toolkit-select-option ${option.value || ''} ${selectedOpt.curIndex === optIndex ? 'selected' : ''}`}
+                                                        data-value={option.value || ''}
+                                                        className={`toolkit-select-option ${selectedOpt.curIndex === optIndex ? 'selected' : ''}`}
                                                         onClick={() => handleExecuteButtonSelect(_id, option, optIndex, option.value)}
                                                     >
                                                         <span dangerouslySetInnerHTML={{ __html: option.label }}></span>

package/lib/esm/RootPortal/index.tsx

@@ -6,13 +6,15 @@ export type RootPortalProps = {
     containerClassName?: string;
     children?: React.ReactNode;
     show?: boolean;
+    usePortal?: boolean;
 };
 
 const RootPortal = (props: RootPortalProps) => {
     const {
         containerClassName,
         show,
-        children
+        children,
+        usePortal = true
     } = props;
 
     const containerRef = useRef<HTMLElement>();
@@ -25,19 +27,23 @@ const RootPortal = (props: RootPortalProps) => {
     // Use `containerRef.current` to ensure the correctness of the nextjs framework. It may report an error document as undefined
 
     useEffect(() => {
-
-        containerRef.current = document.createElement('div');
-        containerRef.current.className = `root-portal-container ${containerClassName || ''}`;
-        document.body.appendChild(containerRef.current);
-        
+        if (usePortal) {
+            containerRef.current = document.createElement('div');
+            containerRef.current.className = `root-portal-container ${containerClassName || ''}`;
+            document.body.appendChild(containerRef.current);
+        }
 
         return () => {
-            if (containerRef.current) {
+            if (usePortal && containerRef.current) {
                 containerRef.current.remove();
             }
         };
-    }, []);
+    }, [usePortal]);
 
+    if (!usePortal) {
+        return show ? <>{children}</> : null;
+    }
+    
     return (
         <>
             {containerRef.current && show && createPortal(

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.7.150",
+  "version": "4.7.155",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",