Spaces:
Running
Running
File size: 2,923 Bytes
eee3ce2 | 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 | tsx
import React from 'react'
import { useAppStore } from '@/store/useAppStore'
import { AlertTriangle, RefreshCw, X } from 'lucide-react'
/**
* Component for displaying error messages with retry functionality
*/
export function ErrorMessage() {
const { error, clearError, retryOptimization } = useAppStore()
if (!error) return null
return (
<div className="card p-6 border-red-200 dark:border-red-800">
<div className="flex items-start space-x-4">
{/* Error Icon */}
<div className="w-10 h-10 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center flex-shrink-0">
<AlertTriangle className="w-6 h-6 text-red-600 dark:text-red-400" />
</div>
{/* Error Content */}
<div className="flex-1">
<h3 className="text-lg font-semibold text-red-900 dark:text-red-100 mb-2">
Fehler bei der Optimierung
</h3>
<p className="text-red-700 dark:text-red-300 mb-4">
{error}
</p>
{/* Error Categories */}
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4">
<h4 className="text-sm font-medium text-red-900 dark:text-red-100 mb-2">
Häufige Ursachen:
</h4>
<ul className="text-sm text-red-700 dark:text-red-300 space-y-1">
<li>• Netzwerkverbindung unterbrochen</li>
<li>• KI-Service vorübergehend nicht verfügbar</li>
<li>• Prompt zu komplex oder ungültig</li>
<li>• Browser-Sicherheitseinstellungen blockieren Anfragen</li>
</ul>
</div>
{/* Action Buttons */}
<div className="flex flex-col sm:flex-row gap-3">
<button
onClick={retryOptimization}
className="flex-1 btn-primary flex items-center justify-center space-x-2"
>
<RefreshCw className="w-4 h-4" />
<span>Erneut versuchen</span>
</button>
<button
onClick={clearError}
className="btn-secondary flex items-center justify-center space-x-2 px-4"
>
<X className="w-4 h-4" />
<span>Schließen</span>
</button>
</div>
{/* Help Text */}
<div className="mt-4 text-xs text-red-600 dark:text-red-400">
<p>
Falls das Problem besteht, versuche folgendes:
</p>
<ul className="list-disc list-inside mt-1 space-y-1">
<li>Aktualisiere die Seite (F5)</li>
<li>Deaktiviere temporär Browser-Erweiterungen</li>
<li>Überprüfe deine Internetverbindung</li>
<li>Reduziere die Prompt-Länge</li>
</ul>
</div>
</div>
</div>
</div>
)
}
</html> |