agentic-ui-libs/dist/types/index.d.ts

A modular, config-driven analytics library for React and Angular applications

export interface Icon {
    name: string;
    type?: 'human' | 'logo' | 'icon' | 'inlineTool' | 'toolLibrary' | 'KNOWLEDGE' | 'MCP';
    color?: string;
}
export interface DataPoint {
    id?: string;
    name?: string;
    avatar?: string;
    icon?: Icon | string;
    runs?: number;
    responseTime?: string;
    tokens?: number;
    [key: string]: any;
}
export interface Environment {
    _id: string;
    envName: string;
    appId: string;
    description: string;
    isEnabled: boolean;
    status: string;
    appVersion: {
        versionName: string;
        status: string;
        versionComments?: string;
    };
}
export interface MetricData {
    title: string;
    value: number | string;
    change?: {
        value: number;
        type: 'increase' | 'decrease';
    };
    icon?: string;
    info?: string;
    highlighted?: boolean;
    metricType?: 'users' | 'sessions' | 'messages' | 'tokens' | 'agentRuns' | 'toolRuns' | 'modelRuns';
    view?: ViewConfig;
    controls?: ControlsConfig;
}
export interface ColorPalette {
    primary: string[];
    secondary: string[];
    accent: string[];
    semantic: {
        success: string;
        warning: string;
        error: string;
        info: string;
    };
    gradients?: {
        [key: string]: string[];
    };
}
export interface ChartLineConfig {
    dataKey: string;
    color: string;
    label: string;
    strokeWidth?: number;
    strokeDasharray?: string;
    gradient?: {
        enabled: boolean;
        colors: string[];
        direction?: 'horizontal' | 'vertical';
    };
    opacity?: number;
}
export interface TooltipConfig {
    show?: boolean;
    style?: 'default' | 'dark';
    formatter?: (value: any, name: string, props: any) => [string, string];
    labelFormatter?: (label: string) => string;
}
export interface ChartConfig {
    type: 'line' | 'bar' | 'area' | 'pie';
    title: string;
    data: DataPoint[];
    dataKey?: string;
    color?: string;
    lines?: ChartLineConfig[];
    yAxisLabel?: string;
    xAxisLabel?: string;
    dateRange?: {
        start: string;
        end: string;
    };
    tooltip?: TooltipConfig;
    height?: number;
    showLegend?: boolean;
    legendPosition?: 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right';
    showGrid?: boolean;
    curve?: 'monotone' | 'linear' | 'step';
}
export interface TableColumnConfig {
    key: string;
    title: string;
    width?: number;
    align?: 'left' | 'center' | 'right';
    sortable?: boolean;
    filterable?: boolean;
    formatter?: (value: any, row: DataPoint) => string | React.ReactNode;
    render?: (value: any, row: DataPoint) => React.ReactNode;
}
export interface TableConfig {
    title: string;
    data: DataPoint[];
    columns: TableColumnConfig[];
    pagination?: {
        enabled: boolean;
        pageSize: number;
        showSizeChanger?: boolean;
    };
    sorting?: {
        enabled: boolean;
        defaultSort?: {
            key: string;
            order: 'asc' | 'desc';
        };
    };
    filtering?: {
        enabled: boolean;
        searchable?: boolean;
    };
    actions?: {
        enabled: boolean;
        items: Array<{
            label: string;
            action: (row: DataPoint) => void;
            icon?: string;
        }>;
    };
}
export type ViewType = 'chart' | 'table' | 'mixed';
export interface ViewConfig {
    type: ViewType;
    chart?: ChartConfig;
    table?: TableConfig;
    layout?: 'horizontal' | 'vertical';
}
export interface DropdownOption {
    label: string;
    value: string;
    avatar?: string;
    icon?: string;
    disabled?: boolean;
    type?: string;
}
export interface ControlsConfig {
    dropdown?: {
        label: string;
        options: DropdownOption[];
        defaultValue?: string | string[];
        multiSelect?: boolean;
        searchable?: boolean;
        onChange?: (value: string | string[]) => void;
    };
    buttons?: Array<{
        label: string;
        value: string;
        icon?: string;
        active?: boolean;
        onClick?: (value: string) => void;
    }>;
    toggle?: {
        chartView: boolean;
        tableView: boolean;
        onToggle?: (view: 'chart' | 'table') => void;
    };
}
export interface DashboardSection {
    id: string;
    title: string;
    description?: string;
    metrics: MetricData[];
    view: ViewConfig;
    controls?: ControlsConfig;
    dataSource?: {
        endpoint?: string;
        refreshInterval?: number;
        transformer?: (data: any) => DataPoint[];
    };
    layout?: {
        span?: number;
        order?: number;
        responsive?: {
            mobile?: number;
            tablet?: number;
            desktop?: number;
        };
    };
}
export interface DateRange {
    from?: Date;
    to?: Date;
}
export interface GlobalControlsConfig {
    draft?: {
        label: string;
        options: DropdownOption[];
        defaultValue?: string;
        onChange?: (value: string) => void;
    };
    timeRange?: {
        label: string;
        options?: DropdownOption[];
        defaultValue?: string;
        onChange?: (value: string | DateRange) => void;
        useDatePicker?: boolean;
    };
    export?: {
        enabled: boolean;
        formats?: Array<'csv' | 'json' | 'pdf'>;
        onExport?: (format: string) => void;
    };
    refresh?: {
        enabled: boolean;
        interval?: number;
        onRefresh?: () => void;
    };
}
export interface DashboardConfig {
    id: string;
    title: string;
    subtitle?: string;
    version?: string;
    sections: DashboardSection[];
    globalControls?: GlobalControlsConfig;
    layout?: {
        columns?: number;
        gap?: number;
        responsive?: boolean;
    };
    theme?: {
        colors?: {
            primary?: string;
            secondary?: string;
            success?: string;
            warning?: string;
            error?: string;
        };
        typography?: {
            fontFamily?: string;
            fontSize?: {
                small?: string;
                medium?: string;
                large?: string;
            };
        };
    };
}
export type ComponentSize = 'sm' | 'md' | 'lg';
export type ComponentVariant = 'default' | 'outline' | 'ghost';
export interface ComponentProps {
    className?: string;
    size?: ComponentSize;
    variant?: ComponentVariant;
}
export interface DashboardEventHandlers {
    onSectionChange?: (sectionId: string, data: any) => void;
    onMetricClick?: (sectionId: string, metric: MetricData) => void;
    onChartInteraction?: (sectionId: string, data: any) => void;
    onTableRowClick?: (sectionId: string, row: DataPoint) => void;
    onControlChange?: (sectionId: string, controlType: string, value: any) => void;
    onDataRefresh?: (sectionId: string) => void;
    onError?: (error: Error, context: string) => void;
}
export interface DataProvider {
    id: string;
    name: string;
    fetch: (config: any) => Promise<DataPoint[]>;
    transform?: (data: any) => DataPoint[];
    cache?: {
        enabled: boolean;
        ttl: number;
    };
}
export interface AnalyticsPlugin {
    id: string;
    name: string;
    version: string;
    components?: {
        charts?: Record<string, React.ComponentType<any>>;
        tables?: Record<string, React.ComponentType<any>>;
        controls?: Record<string, React.ComponentType<any>>;
    };
    dataProviders?: DataProvider[];
    themes?: Record<string, any>;
}
export interface ApiHeaders {
    authorization?: string;
    accountId?: string;
    'Content-Type'?: string;
    [key: string]: string | undefined;
}
export interface AppConfig {
    baseUrl: string;
    dashboardType?: 'agenticDashboard' | 'langfuseDashboard';
    projectId: string;
    environment: string;
    headers?: ApiHeaders;
    defaultTimeRange?: {
        fromTimestamp: string;
        toTimestamp: string;
    };
    refreshInterval?: number;
}
export interface ApiResponse<T = any> {
    result: {
        data: {
            json: T;
            meta?: any;
        };
    };
}
export interface UsageAnalyticsCards {
    type: 'cards';
    category: 'usage-analytics';
    data: {
        users: number;
        sessions: number;
        messages: {
            input: number;
            output: number;
            total: number;
        };
        tokens: {
            input: number;
            output: number;
            total: number;
        };
        trends?: {
            users: {
                previous: number;
                change: number;
                changePercent: number;
            };
            sessions: {
                previous: number;
                change: number;
                changePercent: number;
            };
            messages: {
                previous: {
                    input: number;
                    output: number;
                    total: number;
                };
                change: {
                    input: number;
                    output: number;
                    total: number;
                };
                changePercent: {
                    input: number;
                    output: number;
                    total: number;
                };
            };
            tokens: {
                previous: {
                    input: number;
                    output: number;
                    total: number;
                };
                change: {
                    input: number;
                    output: number;
                    total: number;
                };
                changePercent: {
                    input: number;
                    output: number;
                    total: number;
                };
            };
        };
    };
    includeTrends?: boolean;
}
export interface RunsCards {
    type: 'cards';
    category: 'runs';
    data: {
        agentRuns: number;
        toolRuns: {
            codeTools: number;
            libraryTools: number;
            knowledgeTools: number;
            mcpTools: number;
            total: number;
        };
        modelRuns: number;
        trends?: {
            agentRuns: {
                previous: number;
                change: number;
                changePercent: number;
            };
            toolRuns: {
                previous: {
                    codeTools: number;
                    libraryTools: number;
                    knowledgeTools: number;
                    mcpTools: number;
                    total: number;
                };
                change: {
                    codeTools: number;
                    libraryTools: number;
                    knowledgeTools: number;
                    mcpTools: number;
                    total: number;
                };
                changePercent: {
                    codeTools: number;
                    libraryTools: number;
                    knowledgeTools: number;
                    mcpTools: number;
                    total: number;
                };
            };
            modelRuns: {
                previous: number;
                change: number;
                changePercent: number;
            };
        };
    };
    includeTrends?: boolean;
}
export interface TimeSeriesDataPoint {
    timestamp: string;
    count: number;
    input_tokens?: number;
    output_tokens?: number;
    listView?: Array<{
        modelName?: string;
        provider?: string;
        agentName?: string;
        toolName?: string;
        toolType?: string;
        icon?: string;
        count: number;
        totalInputTokens?: number;
        totalOutputTokens?: number;
        totalTokens?: number;
        avgResponseTime?: number;
    }>;
}
export interface TimeSeriesResponse {
    type: 'time-series';
    category: 'usage-analytics' | 'runs';
    metric: string;
    data: TimeSeriesDataPoint[];
    rawData?: any[];
    groups?: any[];
}
export interface ApiRequestParams {
    projectId: string;
    type: 'cards' | 'time-series';
    category: 'usage-analytics' | 'runs';
    envId: string;
    fromTimestamp: string;
    toTimestamp: string;
    filter?: any[];
    metric?: string;
    timeDimension: 'day' | 'hour' | 'week' | 'month';
    includeTrends?: boolean;
}
//# sourceMappingURL=index.d.ts.map