funda-ui 4.7.133 → 4.7.152

package/lib/esm/CascadingSelectE2E/index.tsx

@@ -20,9 +20,13 @@ import {
     addTreeDepth,
     addTreeIndent
 } from 'funda-utils/dist/cjs/tree';
+import {
+    htmlToPlain
+} from 'funda-utils/dist/cjs/format-string';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
+
 import Group from './Group';
 
 
@@ -45,6 +49,8 @@ export type CascadingSelectE2EProps = {
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
     perColumnHeadersShow?: boolean;
     exceededSidePosOffset?: number;
     value?: string;
@@ -107,6 +113,8 @@ const CascadingSelectE2E = (props: CascadingSelectE2EProps) => {
         wrapperClassName,
         controlClassName,
         controlExClassName,
+        searchable = false,
+        searchPlaceholder = '',
         perColumnHeadersShow = true,
         exceededSidePosOffset,
         disabled,
@@ -151,6 +159,9 @@ const CascadingSelectE2E = (props: CascadingSelectE2EProps) => {
     const valRef = useRef<any>(null);
     const listRef = useRef<any>(null);
 
+    // searchable
+    const [columnSearchKeywords, setColumnSearchKeywords] = useState<string[]>([]);
+
 
     // exposes the following methods
     useImperativeHandle(
@@ -1337,6 +1348,17 @@ const CascadingSelectE2E = (props: CascadingSelectE2EProps) => {
 
     }, [value]);
 
+
+    // Automatically complete and truncate column Search Keywords each time the number of columns changes
+    useEffect(() => {
+        if (listData.current.length !== columnSearchKeywords.length) {
+            setColumnSearchKeywords(
+                Array(listData.current.length).fill('').map((v, i) => columnSearchKeywords[i] || '')
+            );
+        }
+    }, [listData.current.length]);
+
+
     return (
         <>
 
@@ -1372,13 +1394,43 @@ const CascadingSelectE2E = (props: CascadingSelectE2EProps) => {
                                 {listData.current.map((item: any, level: number) => {
 
                                     if (item.length > 0) {
+
+                                        // filter data
+                                        let filteredItem = item;
+                                        if (searchable && columnSearchKeywords[level]) {
+                                            const keyword = columnSearchKeywords[level].toLowerCase();
+                                            filteredItem = item.filter((opt: any) =>
+                                                (htmlToPlain(opt.name) || '').toLowerCase().includes(keyword)
+                                            );
+                                        }
+
+
                                         return (
                                             <li key={level} data-col={level} className="cas-select-e2e__items-col">
+
+                                 
+                                                {/* SEARCH BOX */}
+                                                {searchable && (
+                                                    <div className="cas-select-e2e__items-col-searchbox">
+                                                        <input
+                                                            type="text"
+                                                            placeholder={searchPlaceholder}
+                                                            value={columnSearchKeywords[level] || ''}
+                                                            onChange={e => {
+                                                                const newKeywords = [...columnSearchKeywords];
+                                                                newKeywords[level] = e.target.value;
+                                                                setColumnSearchKeywords(newKeywords);
+                                                            }}
+                                                        />
+                                                    </div>
+                                                )}
+                                                {/* /SEARCH BOX */}
+
                                                 <Group
                                                     perColumnHeadersShow={perColumnHeadersShow}
                                                     level={level}
                                                     columnTitle={columnTitleData}
-                                                    data={item}
+                                                    data={filteredItem}  // filter result
                                                     cleanNodeBtnClassName={cleanNodeBtnClassName}
                                                     cleanNodeBtnContent={cleanNodeBtnContent}
                                                     selectEv={(e, value, index) => handleClickItem(e, value, index, level, listData.current)}

package/lib/esm/Chatbox/index.tsx

@@ -13,7 +13,6 @@ import { htmlEncode } from 'funda-utils/dist/cjs/sanitize';
 
 
 
-
 // loader
 import PureLoader from './PureLoader';
 import TypingEffect from "./TypingEffect";
@@ -46,16 +45,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;
@@ -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);
 
@@ -508,6 +520,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 +572,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 +604,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 +626,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 +1087,11 @@ const Chatbox = (props: ChatboxProps) => {
                     customMethodsRef.current,
                     conversationHistory.current
                 );
-
                 const { content, isStream } = customResponse;
                 let contentRes: any = content;
 
+
+
                 // Update stream mode
                 setEnableStreamMode(isStream);
 
@@ -1164,6 +1198,7 @@ const Chatbox = (props: ChatboxProps) => {
                 // hide loader
                 setLoaderDisplay(false);
 
+                
                 let result: any = jsonResponse;
                 if (extractPath) {
                     for (const path of extractPath) {
@@ -1176,6 +1211,7 @@ const Chatbox = (props: ChatboxProps) => {
                 // Replace with a valid label
                 content = fixHtmlTags(content, args().withReasoning, args().reasoningSwitchLabel);
 
+                
                 return {
                     reply: formatLatestDisplayContent(content),
                     useStreamRender: false
@@ -1244,6 +1280,53 @@ 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 (
         <>
 
@@ -1570,12 +1653,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 +1694,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/Checkbox/index.tsx

@@ -58,7 +58,7 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
     const idRes = id || uniqueID;
     const rootRef = useRef<any>(null);
     const valRef = useRef<any>(null);
-    const [val, setVal] = useState<any>(null || false);  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
+    const [val, setVal] = useState<boolean>(false);  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
 
     // exposes the following methods
     useImperativeHandle(
@@ -78,7 +78,7 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
                     onChange(null, false);
                 }
             },
-            set: (value: string, cb?: any) => {
+            set: (value: boolean, cb?: any) => {
                 setVal(value);
                 cb?.();
 
@@ -133,7 +133,9 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
     useEffect(() => {
 
         // default value
-        setVal(checked);
+        if (typeof checked === 'boolean') {
+            setVal(checked);
+        }
 
         // Set a checkbox to indeterminate state
         if (typeof indeterminate !== 'undefined') {

package/lib/esm/LiveSearch/index.tsx

@@ -144,6 +144,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
     } = props;
 
 
+    const QUERY_STRING_PLACEHOLDER = '------';  // Invalid parameters for the first automatic request
     const DEPTH = depth || 1055;  // the default value same as bootstrap
     const POS_OFFSET = 0;
     const EXCEEDED_SIDE_POS_OFFSET = Number(exceededSidePosOffset) || 15;
@@ -773,7 +774,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
         // data init
         //--------------
         const _oparams: any[] = fetchFuncMethodParams || [];
-        const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : (fetchTrigger && !fetchUpdate) ? '' : (fetchUpdate ? '------' : (fetchTrigger ? '------' : '')));
+        const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : (fetchTrigger && !fetchUpdate) ? '' : (fetchUpdate ? QUERY_STRING_PLACEHOLDER : (fetchTrigger ? QUERY_STRING_PLACEHOLDER : '')));
         if (!firstFetch) {
             fetchData((_params).join(','));
             setFirstFetch(true);  // avoid triggering two data requests if the input value has not changed

package/lib/esm/Select/index.scss

@@ -17,9 +17,11 @@
     --cus-sel-removebtn-fill: #000;
     --cus-sel-removebtn-hover-fill: #f00;
 
+        
     position: relative; /* Required */
 
 
+    
 
     /*------ Placeholder for input ------*/
     input::placeholder {
@@ -33,7 +35,6 @@
             fill: var(--cus-sel-arrow-fill);
         }
     }
-        
     /*------ Clean ------*/
     .clean {
         svg .clean-fill-g {
@@ -71,6 +72,7 @@
     .custom-select-multi__control-blinking-cursor {
         display: inline-block;
         color: var(--cus-sel-placeholder-color);
+        width: 100%;
 
         &.animated {
             animation: 1s mf-sel-blink step-end infinite;
@@ -80,6 +82,15 @@
             color: var(--cus-sel-input-placeholder-color);
         }
 
+        /* Text preview */
+        > span {
+            display: inline-block;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            max-width: 100%;
+        }
+
 
     }
     .custom-select-multi__control-blinking-following-cursor {
@@ -383,7 +394,7 @@
     --cus-sel-listgroup-content-scrollbar-w: 10px;
     --cus-sel-listgroup-grouptitle-color: #a2a2a2;
     --cus-sel-listgroup-groupborder-color: #d8d8d8;
-
+    --cus-sel-loader-color: #000000;
 
 
 
@@ -391,11 +402,41 @@
     min-width: var(--cus-sel-listgroup-popwin-min-width);
     z-index: 1055;  /* --bs-modal-zindex */
 
+    
     &.active {
         display: block !important;
     }
 
+    
+
+    /*------ Loader ------*/
+    .cus-select-loader {
+        pointer-events: none;
+        z-index: 1;
+        width: 12px;
+        height: 12px;
+        text-align: center;
+        transform-origin: center;
+        transform: translate(-5px, 0) rotate(0);
+        animation: 1s linear infinite cus-select__spinner;
+
+        svg {
+            vertical-align: top;
+
+            path {
+                fill: var(--cus-sel-loader-color);
+            }
+        }
+    }
+
+    @keyframes cus-select__spinner {
+        to {
+            transform: translate(-5px, 0) rotate(-360deg);
+        }
+    }
 
+ 
+    /*------ Options ------*/
     .custom-select__options-contentlist {
         overflow: hidden;
         overflow-y: auto;