funda-ui 4.7.615 → 4.7.624

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

@@ -0,0 +1,180 @@
+// 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

@@ -0,0 +1,206 @@
+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

@@ -0,0 +1,91 @@
+/* ======================================================
+    <!-- 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

@@ -0,0 +1,204 @@
+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;