@kitn.ai/ui/dist/components/context.d.ts

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import { JSX } from 'solid-js';
/** Default fraction (0–1) at which the meter transitions to the warning colour. */
export declare const DEFAULT_WARN_THRESHOLD = 0.7;
/** Default fraction (0–1) at which the meter transitions to the danger colour. */
export declare const DEFAULT_DANGER_THRESHOLD = 0.9;
/**
 * Compute the severity level for a given usage fraction and thresholds.
 * `pct` is a 0–1 fraction (e.g. `usedTokens / maxTokens`).
 */
export declare function computeSeverity(pct: number, warnThreshold?: number, dangerThreshold?: number): ContextSeverity;
export type ContextSeverity = 'ok' | 'warn' | 'danger';
export interface ContextProps {
    usedTokens: number;
    maxTokens: number;
    inputTokens?: number;
    outputTokens?: number;
    reasoningTokens?: number;
    cacheTokens?: number;
    estimatedCost?: number;
    /**
     * Fraction (0–1) above which the progress bar turns yellow.
     * Defaults to `0.7` (70%).
     */
    warnThreshold?: number;
    /**
     * Fraction (0–1) above which the progress bar turns red.
     * Defaults to `0.9` (90%).
     */
    dangerThreshold?: number;
    children?: JSX.Element;
}
export declare function Context(props: ContextProps): JSX.Element;
export interface ContextTriggerProps {
    children?: JSX.Element;
    class?: string;
}
export declare function ContextTrigger(props: ContextTriggerProps): JSX.Element;
export interface ContextContentProps {
    class?: string;
    children?: JSX.Element;
}
export declare function ContextContent(props: ContextContentProps): JSX.Element;
export interface ContextContentHeaderProps {
    class?: string;
    children?: JSX.Element;
}
export declare function ContextContentHeader(props: ContextContentHeaderProps): JSX.Element;
export interface ContextContentBodyProps {
    class?: string;
    children?: JSX.Element;
}
export declare function ContextContentBody(props: ContextContentBodyProps): JSX.Element;
export interface ContextContentFooterProps {
    class?: string;
    children?: JSX.Element;
}
export declare function ContextContentFooter(props: ContextContentFooterProps): JSX.Element;
export interface ContextUsageRowProps {
    class?: string;
    children?: JSX.Element;
}
export declare function ContextInputUsage(props: ContextUsageRowProps): JSX.Element;
export declare function ContextOutputUsage(props: ContextUsageRowProps): JSX.Element;
export declare function ContextReasoningUsage(props: ContextUsageRowProps): JSX.Element;
export declare function ContextCacheUsage(props: ContextUsageRowProps): JSX.Element;