funda-ui 4.7.624 → 4.7.701

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

@@ -1,180 +0,0 @@
-// app.ts
-import type { ChatboxProps } from '../index';
-
-export interface HtmlTagPlaceholder {
-    original: string;
-    placeholder: string;
-    type: 'table' | 'img' | 'svg';
-}
-
-export function formatLatestDisplayContent(str: string) {
-    // Regular expression to match <details> tags and their 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>/);
-        
-        if (thinkContentMatch) {
-            const thinkContent = thinkContentMatch[1].trim(); // Get the content inside "div.think-content" and trim whitespace
-            
-            // Check if "div.think-content" is empty
-            if (thinkContent === '') {
-                return ''; // If empty, return an empty string to replace the entire <details> tag
-            }
-        }
-        
-        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;
-}
-
-export function formatName(str: any, isAnswer: boolean, props: ChatboxProps) {
-    if (typeof str !== "string")  return str;
-
-    const {
-        questionNameIcon,
-        answerNameIcon,
-        nameFormatter
-    } = props;
-    
-    let res = str.replace(/\{icon\}/g, `${isAnswer ? answerNameIcon : questionNameIcon}`);
-
-    if (typeof nameFormatter === 'function') {
-        const newVal = nameFormatter(res);
-        return newVal;
-    }
-    
-    return res;
-}
-
-
-export function typewriterEffect(messagesDiv: HTMLElement, element: HTMLElement, str: string, speed: number = 50) {
-    if (!element) return;
-
-    const originalHTML = str;
-    element.innerHTML = '';
-
-    let cursor = 0;
-    let tempHTML = '';
-    const tagStack: string[] = [];
-
-    function type() {
-        if (cursor >= originalHTML.length) {
-            // Clear the cursor after typing is complete
-            element.innerHTML = tempHTML; // Set the final content without the cursor
-            return;
-        }
-
-        const currentChar = originalHTML[cursor];
-
-        if (currentChar === '<') {
-            const closeTagIndex = originalHTML.indexOf('>', cursor);
-            const tagContent = originalHTML.slice(cursor, closeTagIndex + 1);
-            tempHTML += tagContent;
-
-            // Handle opening and closing tags
-            if (/^<\/?\w+/.test(tagContent)) {
-                if (!/^<\//.test(tagContent)) {
-                    // Opening tag
-                    tagStack.push(tagContent as never);
-                } else {
-                    // Closing tag
-                    tagStack.pop();
-                }
-            }
-
-            cursor = closeTagIndex + 1;
-        } else {
-            tempHTML += currentChar;
-            cursor++;
-        }
-
-        messagesDiv.scrollTop = messagesDiv.scrollHeight; // Scroll to the bottom
-        element.innerHTML = tempHTML + '<span class="cursor">|</span>'; // Show cursor
-        setTimeout(type, speed);
-    }
-
-    type();
-}
-
-
-export function fixHtmlTags(html: string, withReasoning: boolean, reasoningSwitchLabel: string) {
-    // Replace with a valid label
-    return html.replace('<think>', `<details class="think" ${withReasoning ? 'open' : ''}><summary>${reasoningSwitchLabel}</summary><div class="think-content">`)
-    .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;
-};
-
-
-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 };
-};
-
-
-export function toBoolean(val) {
-    if (typeof val === "boolean") return val;
-    if (typeof val === "string") {
-        return val.toLowerCase() === "true";
-    }
-    return Boolean(val); 
-}

package/publish/lib/esm/Checkbox/index.tsx

@@ -1,206 +0,0 @@
-import React, { useImperativeHandle, useState, useEffect, useRef, forwardRef } from 'react';
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-export type CheckboxOptionChangeFnType = (e: React.ChangeEvent<HTMLInputElement> | null, val: boolean, element: HTMLElement) => void;
-
-
-export type CheckboxProps = {
-    contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
-    wrapperClassName?: string;
-    controlClassName?: string;
-    itemSelectedClassName?: string;
-    value: string | boolean;
-    label?: React.ReactNode | string;
-    name?: string;
-    disabled?: any;
-    required?: any;
-    checked?: boolean;
-    indeterminate?: boolean;
-    /** -- */
-    id?: string;
-    style?: React.CSSProperties;
-    tabIndex?: number;
-    [key: `data-${string}`]: string | undefined;
-    /** This function is called whenever the data is updated.
-     *  Exposes the JSON format data about the option as an argument.
-     */
-    onChange?: CheckboxOptionChangeFnType | null;
-    onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-};
-
-const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
-    const {
-        contentRef,
-        wrapperClassName,
-        controlClassName,
-        itemSelectedClassName,
-        disabled,
-        required,
-        value,
-        label,
-        name,
-        id,
-        checked,
-        indeterminate,
-        style,
-        tabIndex,
-        onChange,
-        onBlur,
-        onFocus,
-        ...attributes
-    } = props;
-
-    const uniqueID = useComId();
-    const idRes = id || uniqueID;
-    const rootRef = useRef<any>(null);
-    const valRef = useRef<any>(null);
-    const [val, setVal] = useState<boolean>(false);  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
-
-    // exposes the following methods
-    useImperativeHandle(
-        contentRef,
-        () => ({
-            control: () => {
-                return valRef.current;
-            },
-            getLatestVal: () => {
-                return val;
-            },
-            clear: (cb?: any) => {
-                setVal(false);
-                cb?.();
-
-                if (typeof (onChange) === 'function') {
-                    onChange(null, false, valRef.current);
-                }
-            },
-            set: (value: boolean, cb?: any) => {
-                setVal(value);
-                cb?.();
-
-                if (typeof (onChange) === 'function') {
-                    onChange(null, value, valRef.current);
-                }
-            }
-        }),
-        [contentRef, val],
-    );
-
-
-
-    function handleFocus(event: any) {
-        rootRef.current?.classList.add('focus');
-
-        //
-        onFocus?.(event);
-    }
-
-
-    function handleChange(event: any) {
-        const _val = event.target.checked;
-
-        setVal(_val);
-
-        //----
-        //remove focus style
-        rootRef.current?.classList.remove('focus');
-
-        //
-        if (typeof (onChange) === 'function') {
-            onChange(event, _val, valRef.current);
-        }
-
-
-
-    }
-
-
-    function handleBlur(event: any) {
-
-        //----
-        //remove focus style
-        rootRef.current?.classList.remove('focus');
-
-        //
-        onBlur?.(event);
-    }
-
-
-    useEffect(() => {
-
-        // default value
-        if (typeof checked === 'boolean') {
-            setVal(checked);
-        }
-
-        // Set a checkbox to indeterminate state
-        if (typeof indeterminate !== 'undefined') {
-            valRef.current.indeterminate = indeterminate;
-        }
-
-    }, [checked, indeterminate]);
-
-
-    return (
-        <>
-
-            <div className={combinedCls(
-                'form-check__wrapper',
-                clsWrite(wrapperClassName, 'mb-3 position-relative'),
-                val ? clsWrite(itemSelectedClassName, 'item-selected') : undefined
-            )} ref={rootRef}>
-                <div className="form-check">
-                    <input
-                        ref={(node) => {
-                            valRef.current = node;
-                            if (typeof externalRef === 'function') {
-                                externalRef(node);
-                            } else if (externalRef) {
-                                externalRef.current = node;
-                            }
-                        }}
-                        tabIndex={tabIndex || 0}
-                        type="checkbox"
-                        className={clsWrite(controlClassName, 'form-check-input')}
-                        id={`label-${idRes}`}
-
-                        // Don't use "name", it's just a container to display the label
-                        data-name={name?.match(/(\[.*?\])/gi) ? `${name.split('[')[0]}-label[]` : `${name}-label`}
-                        data-checkbox
-                        data-checked={val}
-                        disabled={disabled || null}
-                        required={required || null}
-                        onChange={handleChange}
-                        onFocus={handleFocus}
-                        onBlur={handleBlur}
-                        defaultValue={value as string || ''}
-                        checked={val || false}   // component status will not change if defaultChecked is used,  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
-                        style={{ cursor: 'pointer', ...style }}
-                        {...attributes}
-                    />
-
-
-                    <input
-                        type="hidden"
-                        tabIndex={-1}
-                        id={idRes}
-                        name={name}
-                        value={val ? value as string || '' : ''}  // do not use `defaultValue`
-                        onChange={() => void(0)}
-                        {...attributes}
-                    />
-
-                    {label ? <>{typeof label === 'string' ? <label htmlFor={`label-${idRes}`} className="form-check-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label> : <label htmlFor={`label-${idRes}`} className="form-check-label">{label}</label>}</> : null}
-                </div>
-            </div>
-
-
-        </>
-    )
-});
-
-export default Checkbox;

package/publish/lib/esm/ColorPicker/index.scss

@@ -1,91 +0,0 @@
-/* ======================================================
-    <!-- Color Picker -->
-/* ====================================================== */
-
-.custom-colorpicker__wrapper {
-    position: relative;
-    --color-control-border-radius: 0.375rem;
-    --color-control-size: 30px;
-    --color-control-border-color: rgba(0,0,0,.1);
-
-
-    .custom-colorpicker-control {
-
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        background-color: transparent;
-        padding: 0 !important;
-        width: var(--color-control-size) !important;
-        height: var(--color-control-size) !important;
-        border: none;
-        cursor: pointer;
-        
-        &::-webkit-color-swatch {
-            border: 2px solid var(--color-control-border-color);
-        }
-        &::-moz-color-swatch {
-            border: 2px solid var(--color-control-border-color);
-        }
-
-        &:disabled { 
-            cursor: not-allowed;
-        }
-
-
-    }
-
-
-
-    /* placeholder */
-    .custom-colorpicker__transparent-placeholder {
-        position: absolute;
-        width: var(--color-control-size);
-        height: var(--color-control-size);
-        left: 0;
-        top: 0;
-        z-index: 1;
-        pointer-events: none;
-        background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==) repeat;
-    }
- 
-
-    &.custom-colorpicker--rounded {
-        .custom-colorpicker-control {
-            &::-webkit-color-swatch {
-                border-radius: var(--color-control-border-radius);
-            }
-
-            &::-moz-color-swatch {
-                border-radius: var(--color-control-border-radius);
-            }
-        }
-
-        .custom-colorpicker__transparent-placeholder {
-            border-radius: var(--color-control-border-radius);
-        }
-     
-
-    }
-
-    &.custom-colorpicker--circle {
-
-        .custom-colorpicker-control {
-            &::-webkit-color-swatch {
-                border-radius: 50%;
-            }
-
-            &::-moz-color-swatch {
-                border-radius: 50%;
-            }
-        }
-
-        .custom-colorpicker__transparent-placeholder {
-            border-radius: 50%;
-        }
-
-    }
-
-
-
-}

package/publish/lib/esm/ColorPicker/index.tsx

@@ -1,204 +0,0 @@
-import React, { useState, useEffect, useRef, forwardRef, ChangeEvent, FocusEvent } from 'react';
-
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-export interface ColorPickerProps extends React.ComponentPropsWithoutRef<"input"> {
-    wrapperClassName?: string;
-    controlClassName?: string;
-    controlExClassName?: string;
-    clearBtnClassName?: string;
-    clearBtnLabel?: string;
-    value?: string;
-    requiredLabel?: React.ReactNode | string;
-    label?: React.ReactNode | string;
-    name?: string;
-    disabled?: any;
-    required?: any;
-    readOnly?: any;
-    shape?: string;
-    /** -- */
-    id?: string;
-    style?: React.CSSProperties;
-    tabIndex?: number;
-    [key: `data-${string}`]: string | undefined;
-    onChange?: (e: any) => void;
-    onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-    onClear?: (e: any) => void;
-    
-};
-
-
-const ColorPicker = forwardRef((props: ColorPickerProps, externalRef: any) => {
-    const {
-        wrapperClassName,
-        controlClassName,
-        controlExClassName,
-        clearBtnClassName,
-        clearBtnLabel,
-        disabled,
-        required,
-        readOnly,
-        value,
-        requiredLabel,
-        label,
-        name,
-        shape,
-        id,
-        style,
-        tabIndex,
-        onChange,
-        onBlur,
-        onFocus,
-        onClear,
-        ...attributes
-    } = props;
-
-
-    const uniqueID = useComId();
-    const idRes = id || uniqueID;
-    const rootRef = useRef<any>(null);
-    const valRef = useRef<any>(null);
-    const [changedVal, setChangedVal] = useState<string>(value || '');
-    let shapeClassName = '';
-
-    if (shape && typeof shape === 'string') {
-        switch (shape) {
-            case 'rounded':
-                shapeClassName = 'custom-colorpicker--rounded';
-                break;
-            case 'circle':
-                shapeClassName = 'custom-colorpicker--circle';
-                break;
-        }
-    }
-
-
-
-    function handleFocus(event: FocusEvent<HTMLInputElement>) {
-        rootRef.current?.classList.add('focus');
-
-        //
-        onFocus?.(event);
-    }
-
-    function handleChange(event: ChangeEvent<HTMLInputElement>) {
-        const val = event.target.value;
-
-        setChangedVal(val);
-
-
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
-        //
-        onChange?.(event);
-
-    }
-
-    function handleBlur(event: FocusEvent<HTMLInputElement>) {
-        const el = event.target;
-        const val = event.target.value;
-
-
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
-        //
-        onBlur?.(event);
-    }
-
-
-    useEffect(() => {
-
-        // update default value
-        //--------------
-        setChangedVal(value || '');
-
-    }, [value]);
-
-
-    return (
-        <>
-
-            <div className={combinedCls(
-                'custom-colorpicker__wrapper',
-                shapeClassName,
-                clsWrite(wrapperClassName, 'mb-3 position-relative')
-            )} ref={rootRef}>
-                {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label> : <label htmlFor={idRes} className="form-label">{label}</label>}</> : null}
-
-                <div className="position-relative">
-                <div className="input-group">
-                        <input
-                            ref={(node) => {
-                                valRef.current = node;
-                                if (typeof externalRef === 'function') {
-                                    externalRef(node);
-                                } else if (externalRef) {
-                                    externalRef.current = node;
-                                }
-                            }}
-
-                            
-                            tabIndex={tabIndex || 0}
-                            type='color'
-                            className={combinedCls(
-                                clsWrite(controlClassName, 'form-control custom-colorpicker-control flex-grow-0'),
-                                controlExClassName
-                            )}
-                            value={changedVal}
-                            onFocus={handleFocus}
-                            onBlur={handleBlur}
-                            onChange={handleChange}
-                            disabled={disabled || null}
-                            readOnly={readOnly || null}
-                            style={style}
-                            {...attributes}
-                        />
-
-                        {/* Prevents the color from automatically becoming #000000 when it is empty */}
-                        <input
-                            tabIndex={-1}
-                            type="hidden"
-                            id={idRes}
-                            name={name}
-                            value={changedVal}  // do not use `defaultValue`
-                            onChange={() => void(0)}
-                            required={required || null}
-                            {...attributes}
-                        />
-
-                        {changedVal !== '' ? <><button tabIndex={-1} type="button" className={clearBtnClassName || 'btn btn-link btn-sm'} onClick={(e: React.MouseEvent) => {
-                            setChangedVal('');
-                            onChange?.(e);
-                            onClear?.(e);
-                        }}>{clearBtnLabel || 'clear'}
-                        </button></> : null}
-
-
-                    </div>
-                    {required ? <>{requiredLabel || requiredLabel === '' ? requiredLabel : <span className="position-absolute end-0 top-0 my-2 mx-2"><span className="text-danger">*</span></span>}</> : ''}
-
-                    {changedVal === '' ? <><div className="custom-colorpicker__transparent-placeholder"></div></> : null}
-
-                </div>
-
-                
-            </div>
-
-
-        </>
-    )
-});
-
-export default ColorPicker;