funda-ui 4.6.111 → 4.6.222

package/lib/esm/Chatbox/index.scss

@@ -2,49 +2,69 @@
 
 /*=================== Chatbox (Loading) =================*/
 .custom-chatbox-loader-container {
+    --custom-chatbox-loader-color: #b9caf7;
+    --custom-chatbox-loader-color2: #0d6efd;
+
+    
     width: 130px;
     text-align: start;
 
     .custom-chatbox-loader {
         height: 4px;
         width: 100%;
-        --c: no-repeat linear-gradient(var(--bs-primary) 0 0);
-        background: var(--c), var(--c), #b9caf7;
+        --c: no-repeat linear-gradient(var(--custom-chatbox-loader-color2) 0 0);
+        background: var(--c), var(--c), var(--custom-chatbox-loader-color);
         background-size: 60% 100%;
-        animation: cssAnim--loadermove 3s infinite;
+        animation: loader-move 3s infinite;
     }
-}
 
 
-.dark-mode,
-[data-bs-theme=dark] {
-    
-    .custom-chatbox-loader-container {
-        .custom-chatbox-loader {
-            --c: no-repeat linear-gradient(var(--bs-primary) 0 0);
-            background: var(--c), var(--c), #8692b5;
+    @keyframes loader-move {
+        0% {
+            background-position: -150% 0, -150% 0
+        }
+
+        66% {
+            background-position: 250% 0, -150% 0
+        }
+
+        100% {
+            background-position: 250% 0, 250% 0
         }
     }
-    
 }
 
 
-@keyframes cssAnim--loadermove {
-    0% {
-        background-position: -150% 0, -150% 0
-    }
 
-    66% {
-        background-position: 250% 0, -150% 0
-    }
+.custom-chatbox-mini-loader {
+    --custom-chatbox-miniloader-color: rgba(0,0,0,.5);
+
+    width: 15px;
+    height: 15px;
+    margin: .5rem;
+    margin-bottom: 0;
+    border: 3px dotted var(--custom-chatbox-miniloader-color);
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    animation: mini-loader-spin 1s linear infinite;
+
+    @keyframes mini-loader-spin {
+        0% {
+            transform: rotate(0deg);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
 
-    100% {
-        background-position: 250% 0, 250% 0
     }
 }
 
 
 
+
 /*===================  Chatbox (Core) =================*/
 
 .custom-chatbox-circle {
@@ -142,8 +162,10 @@
     --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;
+    --custom-chatbox-content-html-elem-border-color: #ddd;
+    --custom-chatbox-content-html-elem-bg: rgba(0,0,0,.05);
     
     min-width: var(--custom-chatbox-w);
     max-width: var(--custom-chatbox-w);
@@ -164,6 +186,8 @@
         padding: 0;
         font-size: 0.75rem;
         margin-bottom: .5rem;
+        background: var(--custom-chatbox-msg-bg);
+        padding: .5rem;
     }
 
     summary {
@@ -200,7 +224,7 @@
 
     /* message list */
     .messages {
-        height: calc(100% - 80px);
+        height: calc(100% - 110px);
         overflow-y: auto;
         margin-bottom: 10px;
         font-size: 13px;
@@ -253,6 +277,43 @@
             margin-top: .3rem;
             display: inline-block;
             text-align: start;
+
+
+            /* Custom HTML Styles */
+            .table-container {
+                overflow-x: auto;
+                margin-bottom: .5rem;
+
+                &::-webkit-scrollbar {
+                    height: 10px;
+                }
+            
+                &::-webkit-scrollbar-thumb {
+                    background: rgba(0, 0, 0, 0.2);
+                }
+
+                table {
+                    width: 100%;
+                    border-collapse: collapse;
+                    border-radius: 0.35rem;
+                    
+
+                    thead {
+                        background: var(--custom-chatbox-content-html-elem-bg);
+                        
+                        tr {
+                            white-space: nowrap;
+                        }
+                    }
+
+                    th, td {
+                        padding: .25rem;
+                        text-align: left;
+                        border: 1px solid var(--custom-chatbox-content-html-elem-border-color);
+                    }
+                }
+            }
+
         }
 
 
@@ -274,6 +335,8 @@
             
             .qa-content {
                 width: var(--custom-chatbox-content-w);
+                background: transparent;
+                padding-top: 0;
             }
         }
 
@@ -455,6 +518,11 @@
     /* new chat button */
     .newchat-btn {
         text-align: center;
+        position: absolute;
+        bottom: 95px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 1;
    
         > button {
             padding: 3px 6px;
@@ -542,7 +610,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;
         }
@@ -571,6 +639,7 @@
             box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
             margin-bottom: 10px;
             max-height: 300px;
+            min-width: 120px;
             overflow-y: auto;
             animation: dropupAnimation 0.2s ease;
 
@@ -605,6 +674,7 @@
                 color: var(--custom-chatbox-gray-color);
             }
 
+            &.selected:not(.cancel),
             &:hover {
                 background-color: var(--custom-chatbox-toolkit-opt-active-color);
             }
@@ -615,5 +685,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

@@ -12,7 +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";
@@ -39,11 +38,19 @@ 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;
     onClick: string;
     isSelect?: boolean;  // Mark whether it is a drop-down selection button
+    dynamicOptions?: boolean; // Mark whether to use dynamic options
     [key: string]: any;  // Allows dynamic `onSelect__<number>` attributes, such as `onSelect__1`, `onSelect__2`, ...
 }
 
@@ -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;
@@ -192,8 +201,10 @@ const Chatbox = (props: ChatboxProps) => {
                 setShow(false);
             },
             clearData: () => {
-                setMsgList([]);
+                // Update both the conversation history and displayed messages
                 conversationHistory.current = [];
+                setMsgList([]);
+                
             },
             sendMsg: () => {
                 handleClickSafe();
@@ -205,6 +216,11 @@ const Chatbox = (props: ChatboxProps) => {
                     conversationHistory.current = conversationHistory.current.slice(-maxLength);
                 }
             },
+            setHistory: (messages: MessageDetail[]) => {
+                // Update both the conversation history and displayed messages
+                conversationHistory.current = [...messages];
+                setMsgList([...messages]);
+            },
             setVal: (v: string) => {
                 if (inputContentRef.current) inputContentRef.current.set(v);
             },
@@ -279,6 +295,7 @@ const Chatbox = (props: ChatboxProps) => {
             newChatButton,
             maxHistoryLength,
             customRequest,
+            onQuestionClick,
             renderParser,
             requestBodyFormatter,
             nameFormatter,
@@ -352,6 +369,7 @@ const Chatbox = (props: ChatboxProps) => {
             toolkitButtons,
             newChatButton,
             customRequest,
+            onQuestionClick,
             renderParser,
             requestBodyFormatter,
             nameFormatter,
@@ -361,6 +379,7 @@ const Chatbox = (props: ChatboxProps) => {
             onComplete,
 
             // 
+            defaultQuestionsRes: questions, 
             latestContextData,
             questionNameRes: _questionName,
             answerNameRes: _answerName,
@@ -375,6 +394,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
     //================================================================
@@ -393,16 +434,28 @@ const Chatbox = (props: ChatboxProps) => {
             return newState;
         });
     };
-    const executeButtonAction = (actionStr: string, buttonId: string, buttonElement: HTMLButtonElement) => {
+    const executeButtonAction = async (actionStr: string, buttonId: string, buttonElement: HTMLButtonElement) => {
         try {
-            // Create a new function to execute
             const actionFn = new Function('method', 'isActive', 'button', actionStr);
-            /*
-            function (method, isActive, button) {
-                console.log('Clearing chat');
-                method.clearData();
+
+            // !!!REQUIRED "await"
+            // "customMethods" may be asynchronous
+            const result = await actionFn(exposedMethods(), !activeButtons[buttonId], buttonElement);  
+
+            // If the returned result is an array, it is a dynamic option
+            if (Array.isArray(result) && Object.keys(dynamicOptions).length === 0) {
+                const options: FloatingButtonSelectOption[] = result.map(item => {
+                    const [key, value] = Object.entries(item)[0];
+                    const [label, val, onClick] = (value as string).split('{#}').map((s: string) => s.trim());
+                    return { label, value: val, onClick };
+                });
+
+                // Update dynamic options
+                setDynamicOptions(prev => ({
+                    ...prev,
+                    [buttonId]: options
+                }));
             }
-            */
 
             // Update the button status
             const newState = !activeButtons[buttonId];
@@ -411,17 +464,28 @@ const Chatbox = (props: ChatboxProps) => {
                 [buttonId]: newState
             }));
 
-            return actionFn(exposedMethods(), newState, buttonElement);
-
-           
+            return result;
         } catch (error) {
             console.error('Error executing button action:', error);
         }
     };
+    
+   
 
     // options
     const [selectedOpt, setSelectedOpt] = useState<Record<string, string | number>>({});
-    const getButtonOptions = (btn: FloatingButton): FloatingButtonSelectOption[] => {
+    // Store dynamic options
+    const [dynamicOptions, setDynamicOptions] = useState<Record<string, FloatingButtonSelectOption[]>>({});
+    
+    const getButtonOptions = (btn: FloatingButton, buttonId: string): FloatingButtonSelectOption[] => {
+        // If you are using the dynamic option and already have a cache, return the option for caching
+        //---------
+        if (btn.dynamicOptions && dynamicOptions[buttonId]) {
+            return dynamicOptions[buttonId];
+        }
+
+        // Use the static option from "props"
+        //---------
         const options: FloatingButtonSelectOption[] = [];
         let index = 1;
         
@@ -1124,7 +1188,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 +1198,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 -------------*/}
 
@@ -1378,7 +1461,7 @@ const Chatbox = (props: ChatboxProps) => {
 
 
                 {/**------------- SEND LOADING -------------*/}
-                {args().sendLoading ? <div className="loading"><div style={{ display: loading ? 'block' : 'none' }}><PureLoader customClassName="w-100" txt="" /></div></div> : null}
+                {args().sendLoading ? <div className="loading"><div style={{ display: loading ? 'block' : 'none' }}><PureLoader prefix={args().prefix} customClassName="w-100" txt="" /></div></div> : null}
                 {/**------------- /SEND LOADING -------------*/}
 
 
@@ -1390,8 +1473,8 @@ const Chatbox = (props: ChatboxProps) => {
                             const isActive = activeButtons[_id];
 
                             if (btn.isSelect) {
-                                const options = getButtonOptions(btn);
-
+                                const options = getButtonOptions(btn, _id);
+                                
                                 return (
                                     <div key={index} className="toolkit-select-wrapper">
                                         <button
@@ -1403,6 +1486,9 @@ const Chatbox = (props: ChatboxProps) => {
                                                     ...prev,
                                                     [_id]: !prev[_id]
                                                 }));
+
+                                                //
+                                                executeButtonAction(btn.onClick, _id, e.currentTarget);
                                             }}
                                         >
                                             <span dangerouslySetInnerHTML={{
@@ -1421,18 +1507,23 @@ const Chatbox = (props: ChatboxProps) => {
                                             </svg></span>
                                         </button>
 
-                                        
-
+                                        {/* OPTIONS */}
                                         <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>
-                                            ))}
+
+                                            {options.length > 0 ? <>
+                                                {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 className={`${args().prefix || 'custom-'}chatbox-mini-loader`}></div>
+                                            </>}
+                                            
                                         </div>
                                     </div>
                                 );
@@ -1444,8 +1535,7 @@ const Chatbox = (props: ChatboxProps) => {
                                     key={index}
                                     id={_id}
                                     className={`${btn.value || ''} ${isActive ? 'active' : ''}`}
-                                    onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
-                                        executeButtonAction(btn.onClick, _id, e.currentTarget)}
+                                    onClick={(e: React.MouseEvent<HTMLButtonElement>) => executeButtonAction(btn.onClick, _id, e.currentTarget)}
                                 >
                                     <span dangerouslySetInnerHTML={{ __html: btn.label }}></span>
                                 </button>

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

@@ -1,6 +1,11 @@
 // app.ts
 import type { ChatboxProps } from '../index';
 
+export interface HtmlTagPlaceholder {
+    original: string;
+    placeholder: string;
+    type: 'table' | 'img' | 'svg';
+}
 
 export function isValidJSON(str: string){
     try {
@@ -13,7 +18,7 @@ export function isValidJSON(str: string){
 
 export function formatLatestDisplayContent(str: string) {
     // Regular expression to match <details> tags and their content
-    const output = str.replace(/<details class="think"[^>]*>([\s\S]*?)<\/details>/g, (match, content) => {
+    let output = str.replace(/<details class="think"[^>]*>([\s\S]*?)<\/details>/g, (match, content) => {
         // Use regex to match the content inside the "div.think-content"
         const thinkContentMatch = content.match(/<div class="think-content">([\s\S]*?)<\/div>/);
         
@@ -28,6 +33,12 @@ export function formatLatestDisplayContent(str: string) {
         
         return match; // If not empty, return the original matched content
     });
+
+    // Then handle tables without is-init class
+    output = output.replace(/<table(?![^>]*\bis-init\b)([^>]*)>([\s\S]*?)<\/table>/g, (match, attributes, content) => {
+        // Add is-init class to table and wrap it in container div
+        return `<div class="table-container"><table class="is-init"${attributes}>${content}</table></div>`;
+    });
             
     return output;
 }
@@ -127,3 +138,43 @@ export function isStreamResponse(response: Response): boolean {
     return response.body instanceof ReadableStream;
 };
 
+
+export function extractHtmlTags(html: string): { processedHtml: string; placeholders: HtmlTagPlaceholder[] } {
+    const placeholders: HtmlTagPlaceholder[] = [];
+    let processedHtml = html;
+
+    // <table>
+    processedHtml = processedHtml.replace(/<table[^>]*>[\s\S]*?<\/table>/g, (match) => {
+        const placeholder = `[TABLE_${placeholders.length}]`;
+        placeholders.push({
+            original: `<div class="table-container">${match?.replace('<table', '<table class="is-init"')}</div>`,
+            placeholder,
+            type: 'table'
+        });
+        return placeholder;
+    });
+    
+    // <img>
+    processedHtml = processedHtml.replace(/<img[^>]*>/g, (match) => {
+        const placeholder = `[IMG_${placeholders.length}]`;
+        placeholders.push({
+            original: match,
+            placeholder,
+            type: 'img'
+        });
+        return placeholder;
+    });
+
+    // <svg>
+    processedHtml = processedHtml.replace(/<svg[^>]*>[\s\S]*?<\/svg>/g, (match) => {
+        const placeholder = `[SVG_${placeholders.length}]`;
+        placeholders.push({
+            original: match,
+            placeholder,
+            type: 'svg'
+        });
+        return placeholder;
+    });
+
+    return { processedHtml, placeholders };
+};