funda-ui 4.5.888 → 4.5.899

package/lib/esm/Chatbox/index.tsx

@@ -8,7 +8,7 @@ import RootPortal from 'funda-root-portal';
 import useComId from 'funda-utils/dist/cjs/useComId';
 import useDebounce from 'funda-utils/dist/cjs/useDebounce';
 import useThrottle from 'funda-utils/dist/cjs/useThrottle';
-
+import useClickOutside from 'funda-utils/dist/cjs/useClickOutside';
 
 
 // loader
@@ -20,11 +20,16 @@ import {
     formatLatestDisplayContent,
     formatName,
     fixHtmlTags,
-    isStreamResponse
+    isStreamResponse,
+    htmlEncode
 } from './utils/func';
 
 import useStreamController from './useStreamController';
 
+export interface CustomMethod {
+    name: string;
+    func: (...args: any[]) => any;
+}
 
 export type MessageDetail = {
     sender: string; // Sender's name
@@ -37,6 +42,14 @@ export interface FloatingButton {
     label: string;  // HTML string
     value: string;
     onClick: string;
+    isSelect?: boolean;  // Mark whether it is a drop-down selection button
+    [key: string]: any;  // Allows dynamic `onSelect__<number>` attributes, such as `onSelect__1`, `onSelect__2`, ...
+}
+
+export interface FloatingButtonSelectOption {
+    label: string;
+    value: string;
+    onClick: string;
 }
 
 export interface RequestConfig {
@@ -45,18 +58,18 @@ export interface RequestConfig {
     responseExtractor: string;  // JSON path to extract response
 }
 
-type CustomRequestConfig = {
+export type CustomRequestConfig = {
     requestBody: any;
     apiUrl: string;
     headers: any;
 };
 
-type CustomRequestResponse = {
+export type CustomRequestResponse = {
     content: string | Response | null;
     isStream: boolean;
 };
 
-type CustomRequestFunction = (
+export type CustomRequestFunction = (
     message: string,
     config: CustomRequestConfig
 ) => Promise<CustomRequestResponse>;
@@ -90,11 +103,13 @@ export type ChatboxProps = {
     contextData?: Record<string, any>;  // Dynamic JSON data
     toolkitButtons?: FloatingButton[];
     newChatButton?: FloatingButton;
+    customMethods?: CustomMethod[]; // [{"name": "method1", "func": "() => { console.log('test'); }"}, ...]
     customRequest?: CustomRequestFunction;
     renderParser?: (input: string) => Promise<string>;
     requestBodyFormatter?: (body: any, contextData: Record<string, any>, conversationHistory: MessageDetail[]) => Promise<Record<string, any>>;
     nameFormatter?: (input: string) => string;
     onInputChange?: (controlRef: React.RefObject<any>, val: string) => any;
+    onInputCallback?: (input: string) => Promise<string>;
     onChunk?: (controlRef: React.RefObject<any>, lastContent: string, conversationHistory: MessageDetail[]) => any;
     onComplete?: (controlRef: React.RefObject<any>, lastContent: string, conversationHistory: MessageDetail[]) => any;
 };
@@ -148,6 +163,21 @@ const Chatbox = (props: ChatboxProps) => {
     //================================================================
     // helper
     //================================================================
+    const customMethodsRef = useRef<Record<string, Function>>({});
+    useEffect(() => {
+        if (props.customMethods && Array.isArray(props.customMethods)) {
+            const methodsMap: Record<string, Function> = {};
+            
+            props.customMethods.forEach(method => {
+                if (typeof method.func === 'function') {
+                    methodsMap[method.name] = method.func;
+                }
+            });
+
+            customMethodsRef.current = methodsMap;
+        }
+    }, [props.customMethods]);
+
     const exposedMethods = () => {
         return {
             chatOpen: () => {
@@ -187,7 +217,24 @@ const Chatbox = (props: ChatboxProps) => {
             },
             setMessages: (v: MessageDetail[]) => {
                 setMsgList(v);
-            }
+            },
+            // 
+            getCustomMethods: () => {
+                return Object.keys(customMethodsRef.current);
+            },
+            executeCustomMethod: (methodName: string, ...args: any[]) => {
+                if (methodName in customMethodsRef.current) {
+                    try {
+                        return customMethodsRef.current[methodName](...args);
+                    } catch (error) {
+                        console.error(`Error executing custom method ${methodName}:`, error);
+                        return null;
+                    }
+                } else {
+                    console.warn(`Custom method ${methodName} not found`);
+                    return null;
+                }
+            },
             
         };
     };
@@ -233,6 +280,7 @@ const Chatbox = (props: ChatboxProps) => {
             requestBodyFormatter,
             nameFormatter,
             onInputChange,
+            onInputCallback,
             onChunk,
             onComplete,
         } = currentProps;
@@ -304,6 +352,7 @@ const Chatbox = (props: ChatboxProps) => {
             requestBodyFormatter,
             nameFormatter,
             onInputChange,
+            onInputCallback,
             onChunk,
             onComplete,
 
@@ -325,7 +374,21 @@ const Chatbox = (props: ChatboxProps) => {
     //================================================================
     // Custom buttons
     //================================================================
+    const toolkitBtnsRef = useRef<any>(null);
     const [activeButtons, setActiveButtons] = useState<Record<string, boolean>>({});
+    const closeDropdowns = () => {
+        setActiveButtons(prev => {
+            const newState = { ...prev };
+            // Turn off only buttons with "isSelect"
+            args().toolkitButtons?.forEach((btn, index) => {
+                if (btn.isSelect) {
+                    const _id = `${args().prefix || 'custom-'}chatbox-btn-tools-${chatId}${index}`;
+                    newState[_id] = false;
+                }
+            });
+            return newState;
+        });
+    };
     const executeButtonAction = (actionStr: string, buttonId: string, buttonElement: HTMLButtonElement) => {
         try {
             // Create a new function to execute
@@ -352,6 +415,66 @@ const Chatbox = (props: ChatboxProps) => {
         }
     };
 
+    // options
+    const [selectedOpt, setSelectedOpt] = useState<Record<string, string | number>>({});
+    const getButtonOptions = (btn: FloatingButton): FloatingButtonSelectOption[] => {
+        const options: FloatingButtonSelectOption[] = [];
+        let index = 1;
+        
+        while (true) {
+            const optionKey = `onSelect__${index}`;
+            if (!(optionKey in btn)) break;
+            
+            const [label, value, onClick] = btn[optionKey].split('{#}').map((s: string) => s.trim());
+            options.push({ label, value, onClick });
+            index++;
+        }
+
+        return options;
+    };
+
+    const handleExecuteButtonSelect = (buttonId: string, option: FloatingButtonSelectOption, index: number, value: string) => {
+
+        if (option.value === "cancel") {
+            setSelectedOpt(prev => {
+                const newLabels = { ...prev };
+                delete newLabels[buttonId]; // Deletes the saved selected label, which displays the default label
+                return {
+                    ...newLabels,
+                    curIndex: index,
+                    curValue: value
+                };
+            });
+
+        } else {
+            setSelectedOpt(prev => ({
+                ...prev,
+                [buttonId]: option.label,
+                curIndex: index,
+                curValue: value
+            }));
+        }
+
+
+        executeButtonAction(option.onClick, buttonId, document.getElementById(buttonId) as HTMLButtonElement);
+        
+        // Close the drop-down
+        closeDropdowns();
+    };
+
+    // click outside
+    useClickOutside({
+        enabled: Object.values(activeButtons).some(isActive => isActive),
+        isOutside: (event: any) => {
+            return event.target.closest('.toolkit-select-wrapper') === null;
+        },
+        handle: (event: any) => {
+            closeDropdowns();
+        }
+    }, [toolkitBtnsRef, activeButtons]);
+
+ 
+    
     //================================================================
     // Conversation History
     //================================================================
@@ -635,13 +758,18 @@ const Chatbox = (props: ChatboxProps) => {
         if (rootRef.current === null || msgContainerRef.current === null || msInput.current === null) return;
 
         const messageInput: any = msInput.current;
-        const message = messageInput.value;
+        let message = htmlEncode(messageInput.value);
+
+        // It fires in real time as the user enters
+        // Sanitizing input is the process of securing/cleaning/filtering input data.
+        if (typeof args().onInputCallback === 'function') {
+            message = await args().onInputCallback(message);
+        }
 
         if (message.trim() === '') {
             return;
         }
 
-
         // Start the timer
         setElapsedTime(0); // Reset elapsed time
         timer.current = setInterval(() => {
@@ -1247,18 +1375,72 @@ const Chatbox = (props: ChatboxProps) => {
 
                 {/**------------- TOOLKIT BUTTONS -------------*/}
                 {args().toolkitButtons && args().toolkitButtons.length > 0 && (
-                    <div className="toolkit-btns">
+                    <div className="toolkit-btns" ref={toolkitBtnsRef}>
                         {args().toolkitButtons.map((btn: FloatingButton, index: number) => {
                             const _id = `${args().prefix || 'custom-'}chatbox-btn-tools-${chatId}${index}`;
                             const isActive = activeButtons[_id];
-                            return <button
-                                key={index}
-                                id={_id}
-                                className={`${btn.value || ''} ${isActive ? 'active' : ''}`}
-                                onClick={(e: React.MouseEvent<HTMLButtonElement>) => executeButtonAction(btn.onClick, _id, e.currentTarget)}
-                            >
-                                <span dangerouslySetInnerHTML={{ __html: btn.label }}></span>
-                            </button>
+
+                            if (btn.isSelect) {
+                                const options = getButtonOptions(btn);
+
+                                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' : ''}`}
+                                            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                                                e.preventDefault();
+                                                setActiveButtons(prev => ({
+                                                    ...prev,
+                                                    [_id]: !prev[_id]
+                                                }));
+                                            }}
+                                        >
+                                            <span dangerouslySetInnerHTML={{
+                                                __html: selectedOpt[_id] as string || btn.label
+                                            }}></span>
+                                            
+                                            <span className="toolkit-select-arrow"><svg width="5px" height="5px" viewBox="0 -4.5 20 20">
+                                                <g stroke="none" strokeWidth="1" fill="none">
+                                                    <g transform="translate(-180.000000, -6684.000000)" className="arrow-fill-g" fill="currentColor">
+                                                        <g transform="translate(56.000000, 160.000000)">
+                                                            <path d="M144,6525.39 L142.594,6524 L133.987,6532.261 L133.069,6531.38 L133.074,6531.385 L125.427,6524.045 L124,6525.414 C126.113,6527.443 132.014,6533.107 133.987,6535 C135.453,6533.594 134.024,6534.965 144,6525.39">
+                                                            </path>
+                                                        </g>
+                                                    </g>
+                                                </g>
+                                            </svg></span>
+                                        </button>
+
+                                        
+
+                                        <div className={`toolkit-select-options ${isActive ? 'active' : ''}`}>
+                                            {options.map((option: FloatingButtonSelectOption, optIndex: number) => (
+                                                <div
+                                                    key={optIndex}
+                                                    className={`toolkit-select-option ${option.value || ''} ${selectedOpt.curIndex === optIndex ? 'selected' : ''}`}
+                                                    onClick={() => handleExecuteButtonSelect(_id, option, optIndex, option.value)}
+                                                >
+                                                    <span dangerouslySetInnerHTML={{ __html: option.label }}></span>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </div>
+                                );
+                            }
+
+                            // The rendering of the normal button
+                            return (
+                                <button
+                                    key={index}
+                                    id={_id}
+                                    className={`${btn.value || ''} ${isActive ? 'active' : ''}`}
+                                    onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
+                                        executeButtonAction(btn.onClick, _id, e.currentTarget)}
+                                >
+                                    <span dangerouslySetInnerHTML={{ __html: btn.label }}></span>
+                                </button>
+                            );
                         })}
                     </div>
                 )}

package/lib/esm/Chatbox/utils/func.ts

@@ -40,12 +40,15 @@ export function formatName(str: any, isAnswer: boolean, props: ChatboxProps) {
         answerNameIcon,
         nameFormatter
     } = props;
+    
+    let res = str.replace(/\{icon\}/g, `${isAnswer ? answerNameIcon : questionNameIcon}`);
 
     if (typeof nameFormatter === 'function') {
-        return nameFormatter(str.replace(/\{icon\}/g, `${isAnswer ? answerNameIcon : questionNameIcon}`));
-    } else {
-        return str.replace(/\{icon\}/g, `${isAnswer ? answerNameIcon : questionNameIcon}`);
+        const newVal = nameFormatter(res);
+        return newVal;
     }
+    
+    return res;
 }
 
 
@@ -122,4 +125,59 @@ export function isStreamResponse(response: Response): boolean {
 
     // Method 3: Check if response.body is ReadableStream
     return response.body instanceof ReadableStream;
-};
+};
+
+
+
+/**
+ * HTML entities encode
+ *
+ * @param {String} str Input text
+ * @return {String} Filtered text
+ */
+export function htmlEncode(str) {
+
+    return str.replace(/[&<>'"]/g, tag => ({
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        "'": '&#39;',
+        '"': '&quot;'
+    }[tag]));
+
+}
+
+
+/**
+ * HTML entities decode
+ *
+ * @param {String} str Input text
+ * @return {String} Filtered text
+ */
+export function htmlDecode(str) {
+
+    let res = '';
+    const entities = [
+        ['amp', '&'],
+        ['apos', '\''],
+        ['#x27', '\''],
+        ['#x2F', '/'],
+        ['#39', '\''],
+        ['#47', '/'],
+        ['lt', '<'],
+        ['gt', '>'],
+        ['nbsp', ' '],
+        ['quot', '"'],
+        ['#60', '<'],
+        ['#62', '>']
+    ];
+
+    for (let i = 0, max = entities.length; i < max; i++) {
+        str = str.replace(new RegExp('&' + entities[i][0] + ';', 'g'), entities[i][1]);
+    }
+    res = str;
+
+    return res;
+
+}
+

package/lib/esm/Textarea/index.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef, forwardRef, ChangeEvent, KeyboardEvent, useImperativeHandle } from 'react';
 
 
-
 import useComId from 'funda-utils/dist/cjs/useComId';
 import useAutosizeTextArea from 'funda-utils/dist/cjs/useAutosizeTextArea';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';

package/lib/esm/Utils/hooks/useAutosizeTextArea.tsx

@@ -88,7 +88,13 @@ const useAutosizeTextArea = ({
 
             // initialize default row height
             if (el.scrollHeight > 0 && !defaultRowHeightInit) {
-                setDefaultRowHeight(el.scrollHeight + parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth));
+
+                let _defaultRowHeight = el.scrollHeight + parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth);
+                if (maxHeight != 0 && _defaultRowHeight >= maxHeight) {
+                    _defaultRowHeight = maxHeight;
+                }
+
+                setDefaultRowHeight(_defaultRowHeight);
                 setDefaultRowHeightInit(true);
             }
 
@@ -106,12 +112,14 @@ const useAutosizeTextArea = ({
 
             // !!! Compare initial height and changed height
             if (scrollHeight > defaultRowHeight && defaultRowHeight > 0) {
-                if (maxHeight != 0 && scrollHeight >= maxHeight) {
-                    el.style.height = maxHeight + "px";
-                } else {
-                    el.style.height = scrollHeight + "px";
+
+                let _scrollHeight = scrollHeight;
+                if (maxHeight != 0 && _scrollHeight >= maxHeight) {
+                    _scrollHeight = maxHeight;
                 }
                 
+                el.style.height = _scrollHeight + "px";
+                
             }
 
             cb?.([_controlWidth, scrollHeight]);

package/lib/esm/Utils/hooks/useGlobalUrlListener.tsx

@@ -0,0 +1,46 @@
+/**
+ * Global Url Listener (including micro frontends, frameworks, hashes, etc., applicable to multiple react app)
+ * 
+ * @usage:
+
+const App = () => {
+    const url = useGlobalUrlListener();
+
+    useEffect(() => {
+        console.log("URL changed:", url);
+    }, [url]);
+};
+
+ */
+import { useEffect, useState } from "react";
+
+const useGlobalUrlListener = (): string => {
+    // Initialize state with empty string to avoid SSR issues
+    const [url, setUrl] = useState<string>('');
+
+    useEffect(() => {
+        // Type guard for SSR
+        if (typeof window === 'undefined') return;
+
+        // Initialize the URL on the client side
+        setUrl(window.location.href);
+
+        // Create MutationObserver instance
+        const observer: MutationObserver = new MutationObserver(() => {
+            setUrl(window.location.href);
+        });
+
+        // Start observing
+        observer.observe(document, { 
+            subtree: true, 
+            childList: true 
+        });
+
+        // Cleanup function
+        return () => observer.disconnect();
+    }, []);
+
+    return url;
+};
+
+export default useGlobalUrlListener;

package/lib/esm/Utils/hooks/useSessionStorageListener.tsx

@@ -0,0 +1,45 @@
+/**
+ * Session Storage Listener
+ * 
+ * @usage:
+
+const App = () => {
+    const myValue = useSessionStorageListener("myKey");
+
+    useEffect(() => {
+    console.log("sessionStorage change:", myValue);
+    }, [myValue]);
+};
+
+ */
+import { useEffect, useState } from "react";
+
+const useSessionStorageListener = (key: string) => {
+    const [value, setValue] = useState(sessionStorage.getItem(key) || "");
+
+    useEffect(() => {
+        const handleStorageChange = (event: Event) => {
+            if (event instanceof CustomEvent && event.detail.key === key) {
+                setValue(event.detail.value);
+            }
+        };
+
+        window.addEventListener("sessionStorageChange", handleStorageChange);
+
+        return () => window.removeEventListener("sessionStorageChange", handleStorageChange);
+    }, [key]);
+
+    return value;
+};
+
+// interception sessionStorage.setItem
+const originalSetItem = sessionStorage.setItem;
+sessionStorage.setItem = function (key, value) {
+    const event = new CustomEvent("sessionStorageChange", {
+        detail: { key, value },
+    });
+    window.dispatchEvent(event);
+    originalSetItem.apply(this, [key, value]);
+};
+
+export default useSessionStorageListener;

package/package.json

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