funda-ui 4.6.151 → 4.6.222

package/lib/css/Chatbox/index.css

@@ -1,24 +1,19 @@
 /*=================== Chatbox (Loading) =================*/
 .custom-chatbox-loader-container {
+  --custom-chatbox-loader-color: #b9caf7;
+  --custom-chatbox-loader-color2: #0d6efd;
   width: 130px;
   text-align: start;
 }
 .custom-chatbox-loader-container .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 .custom-chatbox-loader-container .custom-chatbox-loader,
-[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 cssAnim--loadermove {
+@keyframes loader-move {
   0% {
     background-position: -150% 0, -150% 0;
   }
@@ -29,6 +24,29 @@
     background-position: 250% 0, 250% 0;
   }
 }
+
+.custom-chatbox-mini-loader {
+  --custom-chatbox-miniloader-color: rgba(0,0,0,.5);
+  width: 15px;
+  height: 15px;
+  margin: 0.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);
+  }
+}
+
 /*===================  Chatbox (Core) =================*/
 .custom-chatbox-circle {
   --custom-chatbox-circle-color: #5A5EB9;
@@ -115,6 +133,8 @@
   --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);
   margin: auto;
@@ -142,6 +162,8 @@
   padding: 0;
   font-size: 0.75rem;
   margin-bottom: 0.5rem;
+  background: var(--custom-chatbox-msg-bg);
+  padding: 0.5rem;
 }
 .custom-chatbox-container summary {
   cursor: pointer;
@@ -171,7 +193,7 @@
   font-size: 0.75rem;
 }
 .custom-chatbox-container .messages {
-  height: calc(100% - 80px);
+  height: calc(100% - 110px);
   overflow-y: auto;
   margin-bottom: 10px;
   font-size: 13px;
@@ -216,6 +238,33 @@
   margin-top: 0.3rem;
   display: inline-block;
   text-align: start;
+  /* Custom HTML Styles */
+}
+.custom-chatbox-container .messages .qa-content .table-container {
+  overflow-x: auto;
+  margin-bottom: 0.5rem;
+}
+.custom-chatbox-container .messages .qa-content .table-container::-webkit-scrollbar {
+  height: 10px;
+}
+.custom-chatbox-container .messages .qa-content .table-container::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+}
+.custom-chatbox-container .messages .qa-content .table-container table {
+  width: 100%;
+  border-collapse: collapse;
+  border-radius: 0.35rem;
+}
+.custom-chatbox-container .messages .qa-content .table-container table thead {
+  background: var(--custom-chatbox-content-html-elem-bg);
+}
+.custom-chatbox-container .messages .qa-content .table-container table thead tr {
+  white-space: nowrap;
+}
+.custom-chatbox-container .messages .qa-content .table-container table th, .custom-chatbox-container .messages .qa-content .table-container table td {
+  padding: 0.25rem;
+  text-align: left;
+  border: 1px solid var(--custom-chatbox-content-html-elem-border-color);
 }
 .custom-chatbox-container .messages .request {
   text-align: end;
@@ -232,6 +281,8 @@
 }
 .custom-chatbox-container .messages .reply .qa-content {
   width: var(--custom-chatbox-content-w);
+  background: transparent;
+  padding-top: 0;
 }
 .custom-chatbox-container .msg-dotted-loader-container {
   font-weight: normal;
@@ -373,6 +424,11 @@
 }
 .custom-chatbox-container .newchat-btn {
   text-align: center;
+  position: absolute;
+  bottom: 95px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
 }
 .custom-chatbox-container .newchat-btn > button {
   padding: 3px 6px;
@@ -462,6 +518,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;
   position: absolute;
@@ -489,7 +546,7 @@
 .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option.cancel {
   color: var(--custom-chatbox-gray-color);
 }
-.custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option:hover {
+.custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option.selected:not(.cancel), .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 {

package/lib/esm/Chatbox/PureLoader.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 
 type PureLoaderProps = {
+    prefix?: string;
     txt?: React.ReactNode;
     center?: boolean;
     customClassName?: string;
@@ -12,6 +13,7 @@ type PureLoaderProps = {
 const PureLoader = (props: PureLoaderProps) => {
 
     const {
+        prefix = 'custom-',
         txt,
         center,
         customClassName
@@ -21,11 +23,11 @@ const PureLoader = (props: PureLoaderProps) => {
     return (
         <>
 
-            <div className={`app-chatbox-loader-container ${customClassName || ''}`}>
+            <div className={`${prefix}chatbox-loader-container ${customClassName || ''}`}>
                 <div className="row g-0 align-items-center">
                     <div className={center ? 'text-center' : ''}><small>{txt || txt === '' ? txt : 'Loading...'}</small></div>
                     <div>
-                        <div className="app-chatbox-loader"></div>
+                        <div className="${prefix}chatbox-loader"></div>
                     </div>
                 </div>
             </div>

package/lib/esm/Chatbox/TypingEffect.tsx

@@ -1,57 +1,28 @@
 import React, { useEffect, useState } from 'react';
 
-interface TypingEffectProps {
+// extract
+import { extractHtmlTags } from './utils/func';
+import type { HtmlTagPlaceholder } from './utils/func';
+
+export interface TypingEffectProps {
     content: string; // The content to display
     speed: number; // Speed of typing in milliseconds
     onComplete?: () => void; // Callback when typing is complete
     onUpdate?: () => void; // Callback when typing
 }
 
-interface ImagePlaceholder {
-    original: string;
-    placeholder: string;
-    type: 'img' | 'svg';
-}
+
 const TypingEffect: React.FC<TypingEffectProps> = ({ content, speed, onComplete, onUpdate }) => {
     const [displayedContent, setDisplayedContent] = useState<string>('');
     const [index, setIndex] = useState<number>(0);
-    const [imagePlaceholders, setImagePlaceholders] = useState<ImagePlaceholder[]>([]);
+    const [htmlTagPlaceholder, setHtmlTagPlaceholders] = useState<HtmlTagPlaceholder[]>([]);
     const [processedContent, setProcessedContent] = useState<string>('');
 
     // Extract and replace image tags
     useEffect(() => {
-        const extractImages = (html: string): { processedHtml: string; placeholders: ImagePlaceholder[] } => {
-            const placeholders: ImagePlaceholder[] = [];
-            let processedHtml = html;
-
-            // <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 };
-        };
-
-        const { processedHtml, placeholders } = extractImages(content);
+        const { processedHtml, placeholders } = extractHtmlTags(content);
         setProcessedContent(processedHtml);
-        setImagePlaceholders(placeholders);
+        setHtmlTagPlaceholders(placeholders);
     }, [content]);
 
     // Handle typing effects
@@ -61,7 +32,7 @@ const TypingEffect: React.FC<TypingEffectProps> = ({ content, speed, onComplete,
                 let newContent = processedContent.substring(0, index + 1);
                 
                 // Replace the completed placeholder
-                imagePlaceholders.forEach(({ original, placeholder }) => {
+                htmlTagPlaceholder.forEach(({ original, placeholder }) => {
                     if (newContent.includes(placeholder)) {
                         newContent = newContent.replace(placeholder, original);
                     }
@@ -77,9 +48,9 @@ const TypingEffect: React.FC<TypingEffectProps> = ({ content, speed, onComplete,
         }, speed);
 
         return () => clearInterval(timer);
-    }, [processedContent, index, speed, onComplete, onUpdate, imagePlaceholders]);
+    }, [processedContent, index, speed, onComplete, onUpdate, htmlTagPlaceholder]);
 
-    return <span dangerouslySetInnerHTML={{ __html: displayedContent }} />;
+    return <div dangerouslySetInnerHTML={{ __html: displayedContent }} />;
 };
 
 export default TypingEffect;

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 {
@@ -144,7 +164,8 @@
     --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);
@@ -165,6 +186,8 @@
         padding: 0;
         font-size: 0.75rem;
         margin-bottom: .5rem;
+        background: var(--custom-chatbox-msg-bg);
+        padding: .5rem;
     }
 
     summary {
@@ -201,7 +224,7 @@
 
     /* message list */
     .messages {
-        height: calc(100% - 80px);
+        height: calc(100% - 110px);
         overflow-y: auto;
         margin-bottom: 10px;
         font-size: 13px;
@@ -254,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);
+                    }
+                }
+            }
+
         }
 
 
@@ -275,6 +335,8 @@
             
             .qa-content {
                 width: var(--custom-chatbox-content-w);
+                background: transparent;
+                padding-top: 0;
             }
         }
 
@@ -456,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;
@@ -572,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;
 
@@ -606,6 +674,7 @@
                 color: var(--custom-chatbox-gray-color);
             }
 
+            &.selected:not(.cancel),
             &:hover {
                 background-color: var(--custom-chatbox-toolkit-opt-active-color);
             }

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";
@@ -51,6 +50,7 @@ export interface FloatingButton {
     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`, ...
 }
 
@@ -201,8 +201,10 @@ const Chatbox = (props: ChatboxProps) => {
                 setShow(false);
             },
             clearData: () => {
-                setMsgList([]);
+                // Update both the conversation history and displayed messages
                 conversationHistory.current = [];
+                setMsgList([]);
+                
             },
             sendMsg: () => {
                 handleClickSafe();
@@ -214,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);
             },
@@ -427,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];
@@ -445,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;
         
@@ -1431,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 -------------*/}
 
 
@@ -1443,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
@@ -1456,6 +1486,9 @@ const Chatbox = (props: ChatboxProps) => {
                                                     ...prev,
                                                     [_id]: !prev[_id]
                                                 }));
+
+                                                //
+                                                executeButtonAction(btn.onClick, _id, e.currentTarget);
                                             }}
                                         >
                                             <span dangerouslySetInnerHTML={{
@@ -1474,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>
                                 );
@@ -1497,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>