@vertesia/ui 0.60.0 → 0.62.0

package/src/core/components/shadcn/selectBox.tsx

@@ -5,13 +5,11 @@ import { useState, useEffect, useRef } from 'react';
 
 import { Popover, PopoverContent, PopoverTrigger, PopoverClose } from './popover';
 import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from './command';
-import { VInput } from './input';
+import { Input } from './input';
 
-interface VSelectBoxProps<T> {
+interface VSelectBoxBaseProps<T> {
     options: T[] | undefined;
-    value?: T;
     optionLabel?: (option: T) => React.ReactNode;
-    onChange: (option: T) => void;
     onBlur?: () => void;
     onKeyDown?: (e: React.KeyboardEvent, isOpen: boolean) => void;
     label?: string;
@@ -27,7 +25,21 @@ interface VSelectBoxProps<T> {
     border?: boolean;
 }
 
-export function VSelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border= true }: Readonly<VSelectBoxProps<T>>) {
+interface VSelectBoxSingleProps<T> extends VSelectBoxBaseProps<T> {
+    multiple?: false;
+    value?: T;
+    onChange: (option: T) => void;
+}
+
+interface VSelectBoxMultipleProps<T> extends VSelectBoxBaseProps<T> {
+    multiple: true;
+    value?: T[];
+    onChange: (options: T[]) => void;
+}
+
+type VSelectBoxProps<T> = VSelectBoxSingleProps<T> | VSelectBoxMultipleProps<T>;
+
+export function VSelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by }: Readonly<VSelectBoxProps<T>>) {
     const triggerRef = useRef<HTMLDivElement>(null);
     const [open, setOpen] = useState(false);
     const [width, setWidth] = useState<number>(0);
@@ -65,8 +77,45 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
     };
 
     const _onClick = (opt: any) => {
-        setOpen(false);
-        onChange(opt);
+        if (multiple) {
+            const currentValues = Array.isArray(value) ? value : [];
+            const isSelected = isOptionSelected(opt, currentValues);
+
+            if (isSelected) {
+                // Remove from selection
+                const newValues = currentValues.filter(v => !isOptionsEqual(v, opt));
+                (onChange as (options: T[]) => void)(newValues);
+            } else {
+                // Add to selection
+                (onChange as (options: T[]) => void)([...currentValues, opt]);
+            }
+            // Don't close the popover in multiple mode
+        } else {
+            setOpen(false);
+            (onChange as (option: T) => void)(opt);
+        }
+    };
+
+    // Helper function to check if an option is selected
+    const isOptionSelected = (option: T, selectedValues: T[]): boolean => {
+        if (!selectedValues || selectedValues.length === 0) return false;
+        return selectedValues.some(v => isOptionsEqual(v, option));
+    };
+
+    // Helper function to compare options for equality
+    const isOptionsEqual = (a: T, b: T): boolean => {
+        // Handle null/undefined values
+        if (a == null || b == null) {
+            return a === b;
+        }
+        
+        if (typeof by === 'string') {
+            return (a as any)[by] === (b as any)[by];
+        } else if (typeof by === 'function') {
+            return by(a, b);
+        } else {
+            return isEqual(a, b);
+        }
     };
 
     let filteredOptions = options || [];
@@ -85,6 +134,41 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
     const filterFn = getFilterByFn(filterBy);
     filteredOptions = filteredOptions.filter(o => filterFn(o).includes(filterLc))
 
+    const renderSingleValue = () => {
+        if (!value || (Array.isArray(value) && value.length === 0)) {
+            return <span className="text-muted">{placeholder}</span>;
+        }
+        const singleValue = Array.isArray(value) ? value[0] : value;
+        return optionLabel ? optionLabel(singleValue) : singleValue as string;
+    };
+
+    const renderMultipleValue = () => {
+        const arrayValue = Array.isArray(value) ? value : (value ? [value] : []);
+
+        if (arrayValue.length === 0) {
+            return <span className="text-muted">{placeholder}</span>;
+        }
+
+        if (arrayValue.length === 1) {
+            return optionLabel ? optionLabel(arrayValue[0]) : arrayValue[0] as string;
+        }
+
+        return (
+            <div className="flex flex-wrap gap-1">
+                {arrayValue.slice(0, 1).map((item, index) => (
+                    <span key={index} className="inline-flex items-center gap-1 px-2 py-1 text-xs bg-muted rounded">
+                        {optionLabel ? optionLabel(item) : item as string}
+                    </span>
+                ))}
+                {arrayValue.length > 1 && (
+                    <span className="inline-flex items-center px-2 py-1 text-xs bg-muted rounded">
+                        +{arrayValue.length - 1} more
+                    </span>
+                )}
+            </div>
+        );
+    };
+
     return (
         <Popover>
             <PopoverTrigger asChild>
@@ -94,36 +178,42 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                     className={clsx(
                         className,
                         border && 'border border-border',
-                        'flex flex-row gap-2 items-center justify-between p-2 rounded-md group',
+                        'flex flex-row gap-2 items-center justify-between p-2 rounded-md group relative',
                         !disabled && "cursor-pointer hover:bg-muted"
                     )}
                 >
                     <div
                         className={clsx(
-                            "flex flex-col w-fill rounded-md text-sm items-center justify-center truncate ",
-                            !disabled && ""
+                            "flex flex-col w-full rounded-md text-sm items-center justify-center truncate",
+                            !disabled && "",
+                            isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && "pr-6"
                         )}
                     >
                         {label && <div className='w-full text-left text-xs font-semibold'>{label}</div>}
                         <div className={clsx('w-full text-left', !disabled && '')}>
-                            {value ? (optionLabel ? optionLabel(value) : value as string) : placeholder}
+                            {multiple ? renderMultipleValue() : renderSingleValue()}
                         </div>
-                        {isClearable && value && (
+                    </div>
+                    <div className="flex items-center gap-1">
+                        {isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && (
                             <div
                                 onClick={(e) => {
                                     e.stopPropagation();
+                                    if (multiple) {
+                                        (onChange as (options: T[]) => void)([] as T[]);
+                                    } else {
+                                        (onChange as (option: T) => void)(undefined as any);
+                                    }
                                 }}
-                                className="absolute right-2 top-1/2 transform -translate-y-1/2 cursor-pointer"
+                                className="cursor-pointer hover:bg-muted/20 rounded p-1"
                             >
                                 <X className="size-4" />
                             </div>
                         )}
-                    </div>
-                    {
-                        !disabled && (
+                        {!disabled && (
                             <ChevronsUpDown className="size-4 opacity-50" />
-                        )
-                    }
+                        )}
+                    </div>
                 </div>
             </PopoverTrigger>
 
@@ -141,27 +231,42 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                         <div className='mx-2'>
                             <SearchIcon className="size-4" />
                         </div>
-                        <VInput variant='unstyled' value={filterValue} onChange={setFilterValue} className="w-full p-1 rounded-md" placeholder="Search..." />
+                        <Input variant='unstyled' value={filterValue} onChange={setFilterValue} className="w-full p-1 rounded-md" placeholder="Search..." />
                     </div>
                 )}
                 <Command className="overflow-hidden">
                     <CommandList className="max-h-[200px] overflow-y-auto">
                         <CommandEmpty>No result found.</CommandEmpty>
                         <CommandGroup className="overflow-visible">
-                            {filteredOptions?.map((opt, index) => (
-                                <CommandItem
-                                    key={index}
-                                    onSelect={() => _onClick(opt)}
-                                    className="w-full"
-                                >
-                                    <PopoverClose className='w-full flex justify-between items-center'>
-                                        <div className='w-full truncate text-left'>
-                                            {optionLabel ? optionLabel(opt) : opt as String}
-                                        </div>
-                                        {isEqual(value, opt) && <Check className="size-4" />}
-                                    </PopoverClose>
-                                </CommandItem>
-                            ))}
+                            {filteredOptions?.map((opt, index) => {
+                                const isSelected = multiple
+                                    ? isOptionSelected(opt, Array.isArray(value) ? value : [])
+                                    : value != null ? isOptionsEqual(value as T, opt) : false;
+
+                                return (
+                                    <CommandItem
+                                        key={index}
+                                        onSelect={() => _onClick(opt)}
+                                        className="w-full"
+                                    >
+                                        {multiple ? (
+                                            <div className='w-full flex justify-between items-center cursor-pointer'>
+                                                <div className='w-full truncate text-left'>
+                                                    {optionLabel ? optionLabel(opt) : opt as String}
+                                                </div>
+                                                {isSelected && <Check className="size-4" />}
+                                            </div>
+                                        ) : (
+                                            <PopoverClose className='w-full flex justify-between items-center'>
+                                                <div className='w-full truncate text-left'>
+                                                    {optionLabel ? optionLabel(opt) : opt as String}
+                                                </div>
+                                                {isSelected && <Check className="size-4" />}
+                                            </PopoverClose>
+                                        )}
+                                    </CommandItem>
+                                );
+                            })}
                         </CommandGroup>
                     </CommandList>
                 </Command>

package/src/core/components/styles.ts

@@ -1,5 +1,5 @@
 const INPUT_UNSTYLED = "block m-0 p-0 w-full border-0 focus:outline-hidden focus:ring-0 bg-transparent"
-const INPUT_NO_PADDING = "block sm:text-sm sm:leading-6 rounded-md border-0 text-gray-900 shadow-2xs ring-1 ring-inset ring-gray-300 dark:ring-slate-600 dark:text-slate-50 dark:bg-slate-800 placeholder:text-gray-400 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 dark:focus:ring-indigo-800"
+const INPUT_NO_PADDING = "rounded-md text-sm flex w-full rounded-md border border-input bg-background ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
 const INPUT = INPUT_NO_PADDING + " py-1.5";
 
 const Styles = {

package/src/core/components/table/index.tsx

@@ -47,3 +47,11 @@ export function TBody({ isLoading = false, columns, rows = 3, children }: TBodyS
         </tbody>
     )
 }
+
+export function TR({ className, children, ...others }: React.HTMLProps<HTMLTableRowElement>) {
+    return (
+        <tr className={clsx("hover:bg-muted hover:cursor-pointer", className)} {...others}>
+            {children}
+        </tr>
+    )
+}

package/src/core/index.ts

@@ -1,2 +1,3 @@
+export * from "./components/index.js";
 export * from "./hooks/index.js";
-export * from "./components/index.js";
+export * from "./utils/index.js";

package/src/core/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/core/utils/index.ts

@@ -0,0 +1 @@
+export * from "./cn.js";

package/src/features/agent/PayloadBuilder.tsx

@@ -0,0 +1,208 @@
+import { AsyncExecutionResult, VertesiaClient } from "@vertesia/client";
+import { ExecutionEnvironmentRef, Interaction, JSONSchema, mergePromptsSchema, PopulatedInteraction } from "@vertesia/common";
+import { JSONObject } from "@vertesia/json";
+import { useUserSession } from "@vertesia/ui/session";
+import Ajv, { ValidateFunction } from "ajv";
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+export interface ConversationWorkflowPayload {
+    interaction?: Interaction | undefined;
+    environment?: ExecutionEnvironmentRef | undefined;
+    model?: string;
+    prompt_data?: JSONObject | undefined,
+    tools: string[],
+}
+
+export class PayloadBuilder implements ConversationWorkflowPayload {
+    _interactive: boolean = true;
+    _start: boolean = false;
+
+    payload: ConversationWorkflowPayload;
+    interactionParamsSchema?: JSONSchema | null;
+    private _inputValidator?: {
+        validate: ValidateFunction;
+        schema: JSONSchema;
+    };
+
+    constructor(public vertesia: VertesiaClient, public updateState: (data: PayloadBuilder) => void) {
+        this.payload = {
+            model: '',
+            tools: [],
+        }
+    }
+
+    onStateChanged() {
+        this.updateState(this.clone());
+    }
+
+    clone() {
+        const builder = new PayloadBuilder(this.vertesia, this.updateState);
+        builder.interactionParamsSchema = this.interactionParamsSchema;
+        builder.payload = this.payload;
+        builder._interactive = this._interactive;
+        builder._inputValidator = this._inputValidator;
+        builder._start = this._start;
+        return builder;
+    }
+
+    get interactive() {
+        return this._interactive;
+    }
+    set interactive(interactive: boolean) {
+        if (interactive !== this._interactive) {
+            this._interactive = interactive;
+            this.onStateChanged();
+        }
+    }
+
+    get interaction() {
+        return this.payload.interaction;
+    }
+    set interaction(interaction: Interaction | undefined) {
+        if (interaction?.id !== this.payload.interaction?.id) {
+            this.payload.interaction = interaction;
+            this.interactionParamsSchema = mergePromptsSchema(this.interaction as PopulatedInteraction) as JSONSchema;
+            // Reset the validator when schema changes
+            this._inputValidator = undefined;
+            if (interaction) {
+                if (interaction.model) {
+                    this.payload.model = interaction.model;
+                } else {
+                    this.payload.model = undefined;
+                }
+                if (interaction.environment) {
+                    if (typeof interaction.environment === 'string') {
+                        this.vertesia.environments.retrieve(interaction.environment).then((environment) => this.environment = environment);
+                    } else {
+                        this.payload.environment = interaction.environment;
+                    }
+                }
+            }
+            this.onStateChanged();
+        }
+    }
+
+    get environment() {
+        return this.payload.environment;
+    }
+    set environment(environment: ExecutionEnvironmentRef | undefined) {
+        if (environment?.id !== this.payload.environment?.id) {
+            this.payload.environment = environment;
+            this.onStateChanged();
+        }
+    }
+
+    get model() {
+        return this.payload.model;
+    }
+    set model(model: string | undefined) {
+        if (model !== this.payload.model) {
+            this.payload.model = model;
+            this.onStateChanged();
+        }
+    }
+
+    get tools() {
+        return this.payload.tools;
+    }
+    set tools(tools: string[]) {
+        this.payload.tools = tools;
+        this.onStateChanged();
+    }
+
+    get prompt_data(): JSONObject | undefined {
+        return this.payload.prompt_data;
+    }
+    set prompt_data(prompt_data: JSONObject) {
+        this.payload.prompt_data = prompt_data;
+        this.onStateChanged();
+    }
+
+    set run(run: AsyncExecutionResult | { workflow_id: string; run_id: string }) {
+        console.log("run", run);
+        this.onStateChanged();
+    }
+
+    set start(value: boolean) {
+        if (this._start !== value) {
+            this._start = value;
+            this.onStateChanged();
+        }
+    }
+
+    get start(): boolean {
+        return this._start;
+    }
+
+    reset() {
+        this._start = false;
+        this._interactive = true;
+        this.payload = {
+            model: '',
+            tools: [],
+            interaction: undefined,
+            environment: undefined,
+            prompt_data: undefined
+        };
+        this.interactionParamsSchema = null;
+        this._inputValidator = undefined;
+
+        this.onStateChanged();
+
+        if (location.hash) {
+            const urlWithoutHash = window.location.origin + window.location.pathname + window.location.search;
+            history.replaceState(null, '', urlWithoutHash); location.hash = '';
+        }
+    }
+
+    validateInput(): { isValid: boolean; errorMessage?: string } {
+        if (!this.interactionParamsSchema) {
+            return { isValid: true };
+        }
+
+        // If schema has changed or validator not initialized, recompile
+        if (!this._inputValidator || this._inputValidator.schema !== this.interactionParamsSchema) {
+            const ajv = new Ajv({ strict: false });
+            this._inputValidator = {
+                validate: ajv.compile(this.interactionParamsSchema),
+                schema: this.interactionParamsSchema
+            };
+        }
+
+        const prompt_data = this.payload.prompt_data || {};
+        const isValid = this._inputValidator.validate(prompt_data);
+
+        if (!isValid) {
+            const errorMessage: string = this._inputValidator.validate.errors
+                ? this._inputValidator.validate.errors.map((err) => `${err.instancePath}: ${err.message}`).join(', ')
+                : 'Invalid payload data';
+            return { isValid: false, errorMessage };
+        }
+
+        return { isValid: true };
+    }
+}
+
+export const PayloadContext = createContext<PayloadBuilder | undefined>(undefined);
+
+interface PayloadProviderProps {
+    children: React.ReactNode;
+}
+export function PayloadBuilderProvider({ children }: PayloadProviderProps) {
+    const { client } = useUserSession();
+    const [builder, setBuilder] = useState<PayloadBuilder>();
+    useEffect(() => {
+        setBuilder(new PayloadBuilder(client, setBuilder));
+    }, []);
+    return builder && (
+        <PayloadContext.Provider value={builder}>{children}</PayloadContext.Provider >
+    )
+}
+
+export function usePayloadBuilder() {
+    const ctx = useContext(PayloadContext);
+    if (!ctx) {
+        throw new Error('usePayloadBuilder must be used within a PayloadProvider');
+    }
+    return ctx;
+}