| "use client"; |
|
|
| import { useMemo } from "react"; |
| import { getCoursePlanGenerationErrorMessage, type CoursePlanGenerationError } from "./coursePlanApi"; |
|
|
| interface LearnAnythingErrorStateProps { |
| error: CoursePlanGenerationError; |
| isGenerating: boolean; |
| onRetry: () => void; |
| canRetry: boolean; |
| } |
|
|
| |
| |
| |
| |
| export function LearnAnythingErrorState({ |
| error, |
| isGenerating, |
| onRetry, |
| canRetry, |
| }: LearnAnythingErrorStateProps) { |
| const message = useMemo(() => getCoursePlanGenerationErrorMessage(error), [error]); |
|
|
| |
| const isAuthError = error.kind === "auth"; |
| const isRateLimitError = error.kind === "rate-limit"; |
| const isNetworkOrServerError = error.kind === "network" || error.kind === "server" || error.kind === "unknown"; |
|
|
| return ( |
| <div |
| className={`rounded-xl border p-4 ${isAuthError ? "border-yellow-500/30 bg-yellow-500/[0.05]" : isRateLimitError ? "border-orange-500/30 bg-orange-500/[0.05]" : "border-white/10 bg-white/[0.04]"}`} |
| aria-live="polite" |
| > |
| {/* Error Message */} |
| <p className={`text-sm ${isAuthError ? "text-yellow-400" : isRateLimitError ? "text-orange-400" : "text-white/75"}`}> |
| {message} |
| </p> |
| |
| {/* Additional context for certain errors */} |
| {isAuthError && ( |
| <p className="mt-2 text-xs text-white/45"> |
| Authentication required to generate course plans |
| </p> |
| )} |
| |
| {isRateLimitError && ( |
| <p className="mt-2 text-xs text-white/45"> |
| Free generation limit reached for now |
| </p> |
| )} |
| |
| {/* Retry button - only shown for retryable errors */} |
| {canRetry && !isGenerating && ( |
| <div className="mt-4"> |
| <button |
| type="button" |
| onClick={onRetry} |
| disabled={isGenerating} |
| className="rounded-lg border border-white/15 px-4 py-2 text-sm text-white/75 transition-colors hover:bg-white/10 disabled:opacity-50" |
| > |
| {isGenerating ? "Retrying..." : "Retry generation"} |
| </button> |
| </div> |
| )} |
| |
| {/* No retry for auth errors - just informational */} |
| {isAuthError && !canRetry && ( |
| <div className="mt-4"> |
| <p className="text-xs text-white/40"> |
| Please sign in to access course plan generation |
| </p> |
| </div> |
| )} |
| |
| {/* No retry for rate limit - just informational */} |
| {isRateLimitError && !canRetry && ( |
| <div className="mt-4"> |
| <p className="text-xs text-white/40"> |
| Your starter outline is still available above |
| </p> |
| </div> |
| )} |
| |
| {/* For other errors, show saved request info if available */} |
| {isNetworkOrServerError && error.status && ( |
| <p className="mt-2 text-xs text-white/40"> |
| Error code: {error.status} |
| {error.retryAfter && ` - Retry in ${error.retryAfter}s`} |
| </p> |
| )} |
| </div> |
| ); |
| } |
|
|
