funda-ui 4.6.151 → 4.6.333

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,6 +164,9 @@
     --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);
@@ -165,6 +188,8 @@
         padding: 0;
         font-size: 0.75rem;
         margin-bottom: .5rem;
+        background: var(--custom-chatbox-msg-bg);
+        padding: .5rem;
     }
 
     summary {
@@ -201,7 +226,7 @@
 
     /* message list */
     .messages {
-        height: calc(100% - 80px);
+        height: calc(100% - 110px);
         overflow-y: auto;
         margin-bottom: 10px;
         font-size: 13px;
@@ -220,10 +245,11 @@
         }
     
 
-        > div {
+        > div:not(.newchat-btn) {
             margin: 5px 0;
             padding: 3px 5px;
             border-radius: 0.35rem;
+            position: relative;
         }
 
         p {
@@ -254,6 +280,45 @@
             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 +340,8 @@
             
             .qa-content {
                 width: var(--custom-chatbox-content-w);
+                background: transparent;
+                padding-top: 0;
             }
         }
 
@@ -283,6 +350,26 @@
                 
             }
         }
+
+        
+        /* copy button */
+        .copy-btn {
+            position: absolute;
+            left: calc(var(--custom-chatbox-content-w) - .7rem);
+            bottom: 0.5rem;
+            z-index: 1;
+            background: transparent;
+            border: none;
+            padding: 4px;
+            cursor: pointer;
+            opacity: 0.6;
+            transition: opacity 0.2s;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+        
     }
 
     /* dot loading */
@@ -456,7 +543,12 @@
     /* new chat button */
     .newchat-btn {
         text-align: center;
-   
+        position: absolute;
+        bottom: 95px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 1;
+        
         > button {
             padding: 3px 6px;
             background-color: var(--custom-chatbox-newchat-btn-color);
@@ -572,6 +664,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 +699,7 @@
                 color: var(--custom-chatbox-gray-color);
             }
 
+            &.selected:not(.cancel),
             &:hover {
                 background-color: var(--custom-chatbox-toolkit-opt-active-color);
             }
@@ -614,8 +708,6 @@
     }
 
 
-
-
     /* default questions */
     .default-questions-title {
         margin-bottom: .5rem;
@@ -643,8 +735,6 @@
         } 
 
     }
-    
-
 
 
 }

package/lib/esm/Chatbox/index.tsx

@@ -51,6 +51,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`, ...
 }
 
@@ -114,10 +115,14 @@ export type ChatboxProps = {
     newChatButton?: FloatingButton;
     customMethods?: CustomMethod[]; // [{"name": "method1", "func": "() => { console.log('test'); }"}, ...]
     defaultQuestions?: QuestionData;
+    showCopyBtn?: boolean;  // Whether to show copy button for each reply
+    autoCopyReply?: boolean;  // Whether to automatically copy reply to clipboard
     customRequest?: CustomRequestFunction;
     renderParser?: (input: string) => Promise<string>;
     requestBodyFormatter?: (body: any, contextData: Record<string, any>, conversationHistory: MessageDetail[]) => Promise<Record<string, any>>;
+    copiedContentFormatter?: (string: string) => string;
     nameFormatter?: (input: string) => string;
+    onCopyCallback?: (res: Record<string, any>) => void;
     onQuestionClick?: (text: string, methods: Record<string, Function>) => void;
     onInputChange?: (controlRef: React.RefObject<any>, val: string) => any;
     onInputCallback?: (input: string) => Promise<string>;
@@ -201,8 +206,10 @@ const Chatbox = (props: ChatboxProps) => {
                 setShow(false);
             },
             clearData: () => {
-                setMsgList([]);
+                // Update both the conversation history and displayed messages
                 conversationHistory.current = [];
+                setMsgList([]);
+                
             },
             sendMsg: () => {
                 handleClickSafe();
@@ -214,6 +221,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);
             },
@@ -289,9 +301,13 @@ const Chatbox = (props: ChatboxProps) => {
             maxHistoryLength,
             customRequest,
             onQuestionClick,
+            onCopyCallback,
             renderParser,
             requestBodyFormatter,
+            copiedContentFormatter,
             nameFormatter,
+            showCopyBtn,
+            autoCopyReply,
             onInputChange,
             onInputCallback,
             onChunk,
@@ -363,9 +379,13 @@ const Chatbox = (props: ChatboxProps) => {
             newChatButton,
             customRequest,
             onQuestionClick,
+            onCopyCallback,
             renderParser,
             requestBodyFormatter,
+            copiedContentFormatter,
             nameFormatter,
+            showCopyBtn,
+            autoCopyReply,
             onInputChange,
             onInputCallback,
             onChunk,
@@ -386,6 +406,57 @@ const Chatbox = (props: ChatboxProps) => {
 
     }
 
+    //================================================================
+    // Clipboard
+    //================================================================
+    const chatboxCopyToClipboard = async (text: string) => {
+
+        let _content: string = text;
+        if (typeof args().copiedContentFormatter === 'function') {
+            _content = args().copiedContentFormatter(text);
+        } 
+        
+        try {
+            // Try using the modern Clipboard API first
+            if (navigator.clipboard && window.isSecureContext) {
+                await navigator.clipboard.writeText(_content);
+                args().onCopyCallback?.({
+                    success: true,
+                    message: 'Text copied to clipboard',
+                });
+                return true;
+            }
+
+            // Fallback for older browsers
+            const textArea = document.createElement('textarea');
+            textArea.value = _content;
+            textArea.style.position = 'fixed';
+            textArea.style.left = '-999999px';
+            textArea.style.top = '-999999px';
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+            
+            try {
+                document.execCommand('copy');
+                textArea.remove();
+                args().onCopyCallback?.({
+                    success: true,
+                    message: 'Text copied to clipboard',
+                });
+                return true;
+            } catch (err) {
+                textArea.remove();
+                return false;
+            }
+        } catch (err) {
+            args().onCopyCallback?.({
+                success: false,
+                message: `Failed to copy text: ${err}`,
+            });
+            return false;
+        }
+    };
 
 
     //================================================================
@@ -427,16 +498,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 +528,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;
         
@@ -790,6 +884,11 @@ const Chatbox = (props: ChatboxProps) => {
         // Update the message list state
         setMsgList((prevMessages) => [...prevMessages, newMessage]);
 
+        // Auto copy reply if enabled
+        if (args().autoCopyReply && sender === args().answerNameRes) {
+            chatboxCopyToClipboard(content);
+        }
+
     };
 
     const sendMessage = async () => {
@@ -1125,7 +1224,10 @@ const Chatbox = (props: ChatboxProps) => {
         }
     }, [props.defaultMessages]);
 
-
+    useEffect(() => {
+        // Bind chatboxCopyToClipboard to window so it can be called in HTML code
+        (window as any).chatboxCopyToClipboard = chatboxCopyToClipboard;
+      }, []);
 
     return (
         <>
@@ -1190,39 +1292,42 @@ const Chatbox = (props: ChatboxProps) => {
 
                 </> : null}
                 {/**------------- /NO DATA -------------*/}
-
-
+          
 
                 {/**------------- MESSAGES LIST -------------*/}
                 <div className="messages" ref={msgContainerRef}>
 
                     {msgList.map((msg, index) => {
 
+                        const copyTargetId = `${args().prefix || 'custom-'}chatbox-content--${chatId}${index}`;
                         const isAnimProgress = tempAnimText !== '' && msg.sender !== args().questionNameRes && index === msgList.length - 1 && loading;
                         const hasAnimated = animatedMessagesRef.current.has(index);
                         
                         // Mark the message as animated;
                         animatedMessagesRef.current.add(index);
 
+                        const timeShow = `<span class="qa-timestamp">${msg.timestamp}</span>${args().showCopyBtn && msg.tag?.indexOf('[reply]') >= 0 ?(`<button class="copy-btn" onclick="window.chatboxCopyToClipboard(document.querySelector('#${copyTargetId} .qa-content-inner').innerHTML)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.242a2 2 0 0 0-.602-1.43L16.083 2.57A2 2 0 0 0 14.685 2H10a2 2 0 0 0-2 2z"/><path d="M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2"/></svg></button>`) : ''}`;
+
                         return <div key={index} className={msg.tag?.indexOf('[reply]') < 0 ? 'request' : 'reply'} style={{ display: isAnimProgress ? 'none' : '' }}>
                             <div className="qa-name" dangerouslySetInnerHTML={{ __html: `${msg.sender}` }}></div>
 
+
                             {msg.sender === args().questionNameRes ? <>
-                                <div className="qa-content" dangerouslySetInnerHTML={{ __html: `${msg.content} <span class="qa-timestamp">${msg.timestamp}</span>` }}></div>
+                                <div className="qa-content" id={copyTargetId} dangerouslySetInnerHTML={{ __html: `<div class="qa-content-inner">${msg.content}</div> ${timeShow}` }}></div>
                             </> : <>
 
                                 {enableStreamMode ? <>
-                                    <div className="qa-content" dangerouslySetInnerHTML={{ __html: `${msg.content} <span class="qa-timestamp">${msg.timestamp}</span>` }}></div>
+                                    <div className="qa-content" id={copyTargetId} dangerouslySetInnerHTML={{ __html: `<div class="qa-content-inner">${msg.content}</div> ${timeShow}` }}></div>
                                 </> : <>
-                                    <div className="qa-content">
+                                    <div className="qa-content" id={copyTargetId}>
                                         {hasAnimated ? (
-                                            <div dangerouslySetInnerHTML={{ __html: `${msg.content} <span class="qa-timestamp">${msg.timestamp}</span>` }}></div>
+                                            <div dangerouslySetInnerHTML={{ __html: `<div class="qa-content-inner">${msg.content}</div> ${timeShow}` }}></div>
                                         ) : (
                                             <TypingEffect
                                                 onUpdate={() => {
                                                     scrollToBottom();
                                                 }}
-                                                content={`${msg.content} <span class="qa-timestamp">${msg.timestamp}</span>`}
+                                                content={`<div class="qa-content-inner">${msg.content}</div> ${timeShow}`}
                                                 speed={10}
                                             />
                                         )}
@@ -1431,7 +1536,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 +1548,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 +1561,9 @@ const Chatbox = (props: ChatboxProps) => {
                                                     ...prev,
                                                     [_id]: !prev[_id]
                                                 }));
+
+                                                //
+                                                executeButtonAction(btn.onClick, _id, e.currentTarget);
                                             }}
                                         >
                                             <span dangerouslySetInnerHTML={{
@@ -1474,18 +1582,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 +1610,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 };
+};