All files / web/src/components/settings validation-warnings.tsx

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
88
89
90
91
92
93
94
95
96
97
98
99
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';
 
import { Link } from '@tanstack/react-router';
import { Button } from '@web/components/ui/button';
import { Card, CardContent } from '@web/components/ui/card';
import { AlertCircleIcon, RefreshCwIcon } from 'lucide-react';
import type { ReactElement } from 'react';
 
export interface ErrorWarningProps {
  /** Error message to display */
  error: string;
  /** Callback to retry the operation */
  onRetry: () => void;
}
 
export function ErrorWarning({
  error,
  onRetry,
}: ErrorWarningProps): ReactElement {
  return (
    <Card className="border-destructive">
      <CardContent className="pt-6">
        <div className="flex items-center gap-2 text-destructive" role="alert">
          <AlertCircleIcon className="h-5 w-5" aria-hidden="true" />
          <p>{error}</p>
        </div>
        <Button variant="outline" onClick={onRetry} className="mt-4">
          <RefreshCwIcon className="h-4 w-4 mr-2" aria-hidden="true" />
          Retry
        </Button>
      </CardContent>
    </Card>
  );
}
 
export interface NoModelsWarningProps {
  /** Optional custom message */
  message?: string;
  /** Link to create models page */
  createModelLink?: string;
}
 
export function NoModelsWarning({
  message = 'You need to add at least one model before you can configure system settings.',
  createModelLink = '/models/create',
}: NoModelsWarningProps): ReactElement {
  return (
    <Card className="border-amber-500 bg-amber-50 dark:bg-amber-950/20">
      <CardContent className="pt-6">
        <div className="flex items-start gap-3" role="alert">
          <AlertCircleIcon
            className="h-5 w-5 text-amber-500 mt-0.5"
            aria-hidden="true"
          />
          <div className="space-y-2">
            <p className="font-medium">No models configured</p>
            <p className="text-sm text-muted-foreground">{message}</p>
            <Button asChild variant="outline" className="mt-2">
              <Link to={createModelLink}>Add Your First Model</Link>
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
 
export interface IncompleteSettingsWarningProps {
  /** List of missing field names */
  missingFields: string[];
  /** Optional custom title */
  title?: string;
}
 
export function IncompleteSettingsWarning({
  missingFields,
  title = 'Settings incomplete',
}: IncompleteSettingsWarningProps): ReactElement {
  return (
    <Card className="border-amber-500 bg-amber-50 dark:bg-amber-950/20">
      <CardContent className="pt-6">
        <div className="flex items-start gap-3" role="alert">
          <AlertCircleIcon
            className="h-5 w-5 text-amber-500 mt-0.5"
            aria-hidden="true"
          />
          <div className="space-y-2">
            <p className="font-medium">{title}</p>
            <p className="text-sm text-muted-foreground">
              Please configure all required models below for the system to
              function properly. Missing: {missingFields.join(', ')}
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}