Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 1x 1x 1x 1x 3x 3x 3x 3x 3x 3x | import type { Skill } from '@shared/types/data';
import { Badge } from '@web/components/ui/badge';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@web/components/ui/tooltip';
import { Loader2 } from 'lucide-react';
import type { ReactElement } from 'react';
interface SkillWarmingUpIndicatorProps {
skill: Skill;
/** The size of the icon */
size?: 'sm' | 'md' | 'lg';
/** Which side the tooltip should appear on */
tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
/** Whether to show as a badge or just an icon */
variant?: 'icon' | 'badge';
}
/**
* Displays an indicator when a skill is in the warming up phase
* (evaluations_regenerated_at is null, meaning it needs at least 5 logs).
* Shows nothing when the skill has completed the initial warm up.
*/
export function SkillWarmingUpIndicator({
skill,
size = 'sm',
tooltipSide = 'right',
variant = 'icon',
}: SkillWarmingUpIndicatorProps): ReactElement | null {
// Only show when evaluations have not been regenerated yet
if (skill.evaluations_regenerated_at !== null) return null;
const iconSizeClass = {
sm: 'size-3',
md: 'size-3.5',
lg: 'size-4',
}[size];
if (variant === 'badge') {
return (
<Tooltip>
<TooltipTrigger asChild>
<Badge className="gap-1.5 bg-blue-100 dark:bg-blue-950 text-blue-800 dark:text-blue-200 hover:bg-blue-200 dark:hover:bg-blue-900 border-blue-200 dark:border-blue-800">
<Loader2 className={`${iconSizeClass} animate-spin`} />
Warming Up
</Badge>
</TooltipTrigger>
<TooltipContent side={tooltipSide} className="max-w-xs py-2">
<WarmingUpTooltipContent />
</TooltipContent>
</Tooltip>
);
}
return (
<Tooltip>
<TooltipTrigger asChild>
<span className="inline-flex shrink-0">
<Loader2
className={`${iconSizeClass} text-blue-800 dark:text-blue-200 animate-spin`}
/>
</span>
</TooltipTrigger>
<TooltipContent side={tooltipSide} className="max-w-xs py-2">
<WarmingUpTooltipContent />
</TooltipContent>
</Tooltip>
);
}
/**
* Reusable tooltip content for warming up indicators
*/
function WarmingUpTooltipContent(): ReactElement {
return (
<div className="space-y-1.5">
<p className="font-semibold m-0">Skill warming up</p>
<p className="text-xs m-0">
This skill needs at least 5 logs to produce the initial system prompts
and evaluations. Send some requests to the skill to warm it up.
</p>
</div>
);
}
|