funda-ui 4.5.767 → 4.5.888

package/lib/esm/Chatbox/TypingEffect.tsx

@@ -1,30 +1,83 @@
 import React, { useEffect, useState } from 'react';
 
 interface TypingEffectProps {
-    messagesDiv: any;
     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
 }
 
-const TypingEffect: React.FC<TypingEffectProps> = ({ messagesDiv, content, speed, onComplete }) => {
+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 [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);
+        setProcessedContent(processedHtml);
+        setImagePlaceholders(placeholders);
+    }, [content]);
+
+    // Handle typing effects
     useEffect(() => {
         const timer = setInterval(() => {
-            if (index < content.length) {
-                setDisplayedContent((prev) => prev + content[index]);
+            if (index < processedContent.length) {
+                let newContent = processedContent.substring(0, index + 1);
+                
+                // Replace the completed placeholder
+                imagePlaceholders.forEach(({ original, placeholder }) => {
+                    if (newContent.includes(placeholder)) {
+                        newContent = newContent.replace(placeholder, original);
+                    }
+                });
+
+                setDisplayedContent(newContent);
                 setIndex((prev) => prev + 1);
-                if (messagesDiv !== null) messagesDiv.scrollTop = messagesDiv.scrollHeight; // Scroll to the bottom
+                onUpdate?.();
             } else {
                 clearInterval(timer);
-                onComplete?.(); // Call the onComplete callback if provided
+                onComplete?.();
             }
         }, speed);
 
-        return () => clearInterval(timer); // Cleanup on unmount
-    }, [content, index, speed, onComplete]);
+        return () => clearInterval(timer);
+    }, [processedContent, index, speed, onComplete, onUpdate, imagePlaceholders]);
 
     return <span dangerouslySetInnerHTML={{ __html: displayedContent }} />;
 };

package/lib/esm/Chatbox/index.scss

@@ -201,7 +201,10 @@
         font-size: 13px;
         margin-right: 0;
 
-
+        img, svg, video, canvas, audio, iframe, embed, object {
+            display: inline;
+        }
+        
         &::-webkit-scrollbar {
             width: 3px;
         }
@@ -344,6 +347,10 @@
         z-index: 1;
         width: calc(100% - 40px);
 
+        img, svg, video, canvas, audio, iframe, embed, object {
+            display: inline;
+        }
+
         .messageInput {
             width: 100%;
             border: 1px solid var(--custom-chatbox-msg-border);
@@ -366,7 +373,7 @@
                 color: var(--custom-chatbox-default-txt-color);
                 resize: none;
                 max-height: 50vh;
-                border-color: var(--custom-chatbox-gray-color);
+                border: 1px solid var(--custom-chatbox-gray-color);
 
                 &::-webkit-scrollbar {
                     width: 3px;
@@ -453,6 +460,10 @@
             font-size: 0.8125rem;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 
+            img, svg, video, canvas, audio, iframe, embed, object {
+                display: inline;
+            }
+
             &:hover {
                 transform: translateY(-2px);
             }
@@ -483,6 +494,11 @@
             transition: all 0.3s ease;
             font-size: 0.75rem;
 
+
+            img, svg, video, canvas, audio, iframe, embed, object {
+                display: inline;
+            }
+
             &:hover {
                 background-color: var(--custom-chatbox-toolkit-btn-border-color);
                 transform: translateY(-2px);

package/lib/esm/Chatbox/index.tsx

@@ -19,11 +19,13 @@ import {
     isValidJSON,
     formatLatestDisplayContent,
     formatName,
-    fixHtmlTags
+    fixHtmlTags,
+    isStreamResponse
 } from './utils/func';
 
 import useStreamController from './useStreamController';
 
+
 export type MessageDetail = {
     sender: string; // Sender's name
     timestamp: string; // Time when the message was sent
@@ -43,6 +45,23 @@ export interface RequestConfig {
     responseExtractor: string;  // JSON path to extract response
 }
 
+type CustomRequestConfig = {
+    requestBody: any;
+    apiUrl: string;
+    headers: any;
+};
+
+type CustomRequestResponse = {
+    content: string | Response | null;
+    isStream: boolean;
+};
+
+type CustomRequestFunction = (
+    message: string,
+    config: CustomRequestConfig
+) => Promise<CustomRequestResponse>;
+
+
 export type ChatboxProps = {
     debug?: boolean;
     prefix?: string;
@@ -71,8 +90,9 @@ export type ChatboxProps = {
     contextData?: Record<string, any>;  // Dynamic JSON data
     toolkitButtons?: FloatingButton[];
     newChatButton?: FloatingButton;
+    customRequest?: CustomRequestFunction;
     renderParser?: (input: string) => Promise<string>;
-    requestBodyFormatter?: (body: any, contextData: Record<string, any>, conversationHistory: MessageDetail[]) => any;
+    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;
     onChunk?: (controlRef: React.RefObject<any>, lastContent: string, conversationHistory: MessageDetail[]) => any;
@@ -118,6 +138,8 @@ const Chatbox = (props: ChatboxProps) => {
     const [msgList, setMsgList] = useState<MessageDetail[]>([]);
     const [elapsedTime, setElapsedTime] = useState<number>(0);
     const [tempAnimText, setTempAnimText] = useState<string>('');
+    const [enableStreamMode, setEnableStreamMode] = useState<boolean>(true);
+    const animatedMessagesRef = useRef<Set<number>>(new Set()); // Add a ref to keep track of messages that have already been animated
 
     //
     const timer = useRef<any>(null);
@@ -154,9 +176,18 @@ const Chatbox = (props: ChatboxProps) => {
             setVal: (v: string) => {
                 if (inputContentRef.current) inputContentRef.current.set(v);
             },
+            getContextData: () => {
+                return contextDataRef.current;
+            },
             setContextData: (v: Record<string, any>) => {
                 contextDataRef.current = v;
             },
+            getMessages: () => {
+                return msgList;
+            },
+            setMessages: (v: MessageDetail[]) => {
+                setMsgList(v);
+            }
             
         };
     };
@@ -197,6 +228,7 @@ const Chatbox = (props: ChatboxProps) => {
             toolkitButtons,
             newChatButton,
             maxHistoryLength,
+            customRequest,
             renderParser,
             requestBodyFormatter,
             nameFormatter,
@@ -267,6 +299,7 @@ const Chatbox = (props: ChatboxProps) => {
             maxHistoryLength,
             toolkitButtons,
             newChatButton,
+            customRequest,
             renderParser,
             requestBodyFormatter,
             nameFormatter,
@@ -640,7 +673,7 @@ const Chatbox = (props: ChatboxProps) => {
 
             // reply (normal)
             //======================
-            if (!args().isStream) {
+            if (!res.useStreamRender) {
                 const reply = res.reply;
                 let replyRes = `${reply}`;
 
@@ -658,7 +691,6 @@ const Chatbox = (props: ChatboxProps) => {
 
                 //reset SSE
                 closeSSE();
-
             }
 
 
@@ -701,8 +733,12 @@ const Chatbox = (props: ChatboxProps) => {
 
     const mainRequest = async (msg: string) => {
 
-        // Use vLLM's API
-        //======================
+        const currentStreamMode: boolean | undefined = args().isStream;
+
+        // Update stream mode
+        setEnableStreamMode(currentStreamMode as boolean);
+
+
         try {
             // Parse and interpolate request body template
             let requestBodyRes = JSON.parse(
@@ -715,7 +751,7 @@ const Chatbox = (props: ChatboxProps) => {
             // 
             // If a formatter function exists, it is used to process the request body
             if (typeof args().requestBodyFormatter === 'function') {
-                requestBodyRes = args().requestBodyFormatter(requestBodyRes, args().latestContextData, conversationHistory.current);
+                requestBodyRes = await args().requestBodyFormatter(requestBodyRes, args().latestContextData, conversationHistory.current);
             } 
 
             // Scroll to the bottom
@@ -724,8 +760,63 @@ const Chatbox = (props: ChatboxProps) => {
                 scrollToBottom();
             }, 500);
 
+            {/* ======================================================== */}
+            {/* ===================== CUSTOM REQUEST  ================== */}
+            {/* ======================================================== */}
+            // Check if customRequest exists and use it
+            if (typeof args().customRequest === 'function') {
+
+                // Update stream mode
+                setEnableStreamMode(false);
+
+                let customResponse: any = await args().customRequest(msg, {
+                    requestBody: requestBodyRes,
+                    apiUrl: args().requestApiUrl || '',
+                    headers: args().headerConfigRes
+                });
+
+                const { content, isStream } = customResponse;
+                let contentRes: any = content;
+
+                // Update stream mode
+                setEnableStreamMode(isStream);
+
+                // NORMAL
+                //++++++++++++++++++++++++++++++++++++++++++++++++
+                if (!isStream && typeof contentRes === 'string' && contentRes.trim() !== '') {
+                    // Replace with a valid label 
+                    contentRes = fixHtmlTags(contentRes as string, args().withReasoning, args().reasoningSwitchLabel);
+
+                    return {
+                        reply: formatLatestDisplayContent(contentRes),
+                        useStreamRender: false
+                    };
+                }
+                
+                // STREAM
+                //++++++++++++++++++++++++++++++++++++++++++++++++
+                if (isStream && isStreamResponse(contentRes as never)) {
+                    // Start streaming
+                    await streamController.start(contentRes as never);
+
+                    return {
+                        reply: tempAnimText, // The final content will be in tempAnimText
+                        useStreamRender: true
+                    };
+                }
+
+
+                // DEFAULT
+                //++++++++++++++++++++++++++++++++++++++++++++++++
+                if (contentRes === null) {
+                    // Update stream mode
+                    setEnableStreamMode(currentStreamMode as boolean);
+                }
+
+            }
+
 
-            if (args().isStream) {
+            if (currentStreamMode) {
                 {/* ======================================================== */}
                 {/* ======================== STREAM  ====================== */}
                 {/* ======================================================== */}
@@ -746,7 +837,8 @@ const Chatbox = (props: ChatboxProps) => {
 
 
                     return {
-                        reply: _errInfo
+                        reply: _errInfo,
+                        useStreamRender: false
                     };
                 }
                 
@@ -754,7 +846,8 @@ const Chatbox = (props: ChatboxProps) => {
                 await streamController.start(response);
 
                 return {
-                    reply: tempAnimText // The final content will be in tempAnimText
+                    reply: tempAnimText, // The final content will be in tempAnimText
+                    useStreamRender: true
                 };
 
 
@@ -780,7 +873,8 @@ const Chatbox = (props: ChatboxProps) => {
                     setLoaderDisplay(false);
 
                     return {
-                        reply: _errInfo
+                        reply: _errInfo,
+                        useStreamRender: false
                     };
                 }
                
@@ -803,16 +897,14 @@ const Chatbox = (props: ChatboxProps) => {
                 content = fixHtmlTags(content, args().withReasoning, args().reasoningSwitchLabel);
 
                 return {
-                    reply: formatLatestDisplayContent(content)
+                    reply: formatLatestDisplayContent(content),
+                    useStreamRender: false
                 };
 
             }
 
 
 
-
-
-
         } catch (error) {
             const _err = `--> Error in mainRequest: ${error}`;
             console.error(_err);
@@ -821,7 +913,8 @@ const Chatbox = (props: ChatboxProps) => {
             closeSSE();
             
             return {
-                reply: _err
+                reply: _err,
+                useStreamRender: false
             };
         }
 
@@ -832,7 +925,7 @@ const Chatbox = (props: ChatboxProps) => {
     useImperativeHandle(
         propsRef.current.contentRef,
         () => exposedMethods(),
-        [propsRef.current.contentRef, inputContentRef, msInput],
+        [propsRef.current.contentRef, inputContentRef, msInput, msgList],
     );
 
 
@@ -859,6 +952,13 @@ const Chatbox = (props: ChatboxProps) => {
         }
     }, [props.defaultMessages]);
 
+    useEffect(() => {
+        if (Array.isArray(props.defaultMessages) && props.defaultMessages.length > 0) {
+            // Update the default messages
+            setMsgList(props.defaultMessages);
+        }
+    }, [props.defaultMessages]);
+
 
 
     return (
@@ -914,7 +1014,10 @@ const Chatbox = (props: ChatboxProps) => {
                     {msgList.map((msg, 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);
 
                         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>
@@ -923,15 +1026,22 @@ const Chatbox = (props: ChatboxProps) => {
                                 <div className="qa-content" dangerouslySetInnerHTML={{ __html: `${msg.content} <span class="qa-timestamp">${msg.timestamp}</span>` }}></div>
                             </> : <>
 
-                                {args().isStream ? <>
+                                {enableStreamMode ? <>
                                     <div className="qa-content" dangerouslySetInnerHTML={{ __html: `${msg.content} <span class="qa-timestamp">${msg.timestamp}</span>` }}></div>
                                 </> : <>
                                     <div className="qa-content">
-                                        <TypingEffect
-                                            messagesDiv={msgContainerRef.current}
-                                            content={`${msg.content} <span class="qa-timestamp">${msg.timestamp}</span>`}
-                                            speed={10}
-                                        />
+                                        {hasAnimated ? (
+                                            <div dangerouslySetInnerHTML={{ __html: `${msg.content} <span class="qa-timestamp">${msg.timestamp}</span>` }}></div>
+                                        ) : (
+                                            <TypingEffect
+                                                onUpdate={() => {
+                                                    scrollToBottom();
+                                                }}
+                                                content={`${msg.content} <span class="qa-timestamp">${msg.timestamp}</span>`}
+                                                speed={10}
+                                            />
+                                        )}
+                                        
                                     </div>
                                 </>}
                             </>}
@@ -945,7 +1055,7 @@ const Chatbox = (props: ChatboxProps) => {
                     {/* ======================================================== */}
                     {/* ====================== STREAM  begin ==================== */}
                     {/* ======================================================== */}
-                    {args().isStream ? <>
+                    {enableStreamMode ? <>
                         {args().verbose ? <>
                             {/* +++++++++++++++ With reasoning ++++++++++++++++++++ */}
 
@@ -1010,7 +1120,7 @@ const Chatbox = (props: ChatboxProps) => {
                     {/* ======================================================== */}
                     {/* ====================== NORMAL  begin ==================== */}
                     {/* ======================================================== */}
-                    {!args().isStream ? <>
+                    {!enableStreamMode ? <>
                         {/** ANIM TEXT (has loading) */}
                         {loading ? <>
                             <div className="reply reply-waiting">
@@ -1042,6 +1152,7 @@ const Chatbox = (props: ChatboxProps) => {
                     {args().newChatButton && msgList.length > 0 && (
                         <div className="newchat-btn">
                             <button 
+                                id={`${args().prefix || 'custom-'}chatbox-btn-new-${chatId}`}
                                 onClick={(e: React.MouseEvent<HTMLButtonElement>) => executeButtonAction(args().newChatButton.onClick, `${args().prefix || 'custom-'}chatbox-btn-new-${chatId}`, e.currentTarget)}
                             >
                                 <span dangerouslySetInnerHTML={{ __html: args().newChatButton?.label || '' }}></span>
@@ -1090,7 +1201,7 @@ const Chatbox = (props: ChatboxProps) => {
                                 e.preventDefault();
                                 e.stopPropagation();
 
-                                if (!args().isStream) {
+                                if (!enableStreamMode) {
                                     // normal request
                                     abortNormalRequest();
                                 } else {
@@ -1111,7 +1222,7 @@ const Chatbox = (props: ChatboxProps) => {
                                 e.stopPropagation();
 
                                 // normal request
-                                if (!args().isStream) {
+                                if (!enableStreamMode) {
                                     if (abortController.current.signal.aborted) {
                                         reconnectNormalRequest();
                                     }
@@ -1142,6 +1253,7 @@ const Chatbox = (props: ChatboxProps) => {
                             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)}
                             >

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

@@ -105,3 +105,21 @@ export function fixHtmlTags(html: string, withReasoning: boolean, reasoningSwitc
     .replace('</think>', '</div></details> ');
 }
 
+export function isStreamResponse(response: Response): boolean {
+    // Method 1: Check Content-Type
+    const contentType = response.headers.get('Content-Type');
+    if (contentType) {
+        return contentType.includes('text/event-stream') || 
+               contentType.includes('application/x-ndjson') ||
+               contentType.includes('application/stream+json');
+    }
+
+    // Method 2: Check Transfer-Encoding
+    const transferEncoding = response.headers.get('Transfer-Encoding');
+    if (transferEncoding) {
+        return transferEncoding.includes('chunked');
+    }
+
+    // Method 3: Check if response.body is ReadableStream
+    return response.body instanceof ReadableStream;
+};

package/lib/esm/Textarea/index.tsx

@@ -1,6 +1,7 @@
 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';
@@ -8,7 +9,6 @@ import { actualPropertyValue, getTextTop } from 'funda-utils/dist/cjs/inputsCalc
 import useDebounce from 'funda-utils/dist/cjs/useDebounce';
 
 
-
 export type TextareaProps = {
     contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
     wrapperClassName?: string;

package/package.json

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