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 | 1x 1x 1x 1x | 'use client';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@web/components/ui/tooltip';
import { useSettingsValidation } from '@web/hooks/use-settings-validation';
import { AlertCircle } from 'lucide-react';
import type { ReactElement } from 'react';
interface AIProvidersStatusIndicatorProps {
/** The size of the icon */
size?: 'sm' | 'md' | 'lg';
/** Which side the tooltip should appear on */
tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
}
/**
* Displays an indicator when AI providers are missing required model types.
* Shows nothing when both text and embed models exist or when loading.
*/
export function AIProvidersStatusIndicator({
size = 'sm',
tooltipSide = 'right',
}: AIProvidersStatusIndicatorProps): ReactElement | null {
const { isLoading, hasTextModels, hasEmbedModels, hasRequiredModelTypes } =
useSettingsValidation();
if (isLoading) return null;
// All required model types exist
if (hasRequiredModelTypes) return null;
// Build requirements list
const missingTypes: string[] = [];
if (!hasTextModels) {
missingTypes.push('text model');
}
if (!hasEmbedModels) {
missingTypes.push('embedding model');
}
const iconSizeClass = {
sm: 'size-3',
md: 'size-3.5',
lg: 'size-4',
}[size];
return (
<Tooltip>
<TooltipTrigger asChild>
<span className="inline-flex shrink-0">
<AlertCircle
className={`${iconSizeClass} text-orange-800 dark:text-orange-200`}
/>
</span>
</TooltipTrigger>
<TooltipContent side={tooltipSide} className="max-w-xs py-2">
<div className="space-y-1.5">
<p className="font-semibold m-0">Models needed</p>
<ul className="text-xs list-disc pl-4 space-y-0.5">
{missingTypes.map((type) => (
<li key={type}>Add at least one {type}</li>
))}
</ul>
</div>
</TooltipContent>
</Tooltip>
);
}
|