58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import { ChevronIcon } from '../ui/icons';
|
|
import { LightbulbIcon } from '../ui/icons/LightbulbIcon';
|
|
|
|
interface AISummaryCardProps {
|
|
summary?: string;
|
|
loading?: boolean;
|
|
error?: string | null;
|
|
expanded: boolean;
|
|
onToggleExpanded: () => void;
|
|
}
|
|
|
|
export default function AISummaryCard({
|
|
summary,
|
|
loading,
|
|
error,
|
|
expanded,
|
|
onToggleExpanded,
|
|
}: AISummaryCardProps) {
|
|
if (!summary && !loading && !error) return null;
|
|
|
|
return (
|
|
<div className="px-3 pt-3 pb-1">
|
|
<div className="bg-teal-50 dark:bg-teal-900/20 border border-teal-200 dark:border-teal-800/50 rounded p-2.5">
|
|
<button
|
|
onClick={onToggleExpanded}
|
|
className="w-full flex items-center justify-between gap-1.5 mb-1.5"
|
|
>
|
|
<div className="flex items-center gap-1.5">
|
|
<LightbulbIcon className="w-3.5 h-3.5 text-teal-600 dark:text-teal-400" />
|
|
<span className="text-xs font-semibold text-teal-700 dark:text-teal-400">
|
|
AI Summary
|
|
</span>
|
|
</div>
|
|
<ChevronIcon
|
|
direction={expanded ? 'down' : 'right'}
|
|
className="w-3.5 h-3.5 text-teal-600 dark:text-teal-400"
|
|
/>
|
|
</button>
|
|
{expanded && (
|
|
<>
|
|
{error ? (
|
|
<div className="text-xs text-warm-600 dark:text-warm-400">
|
|
Failed to generate summary.
|
|
</div>
|
|
) : loading ? (
|
|
<div className="space-y-1.5">
|
|
<div className="h-3 bg-teal-200/60 dark:bg-teal-800/40 rounded animate-pulse w-full" />
|
|
<div className="h-3 bg-teal-200/60 dark:bg-teal-800/40 rounded animate-pulse w-4/5" />
|
|
</div>
|
|
) : (
|
|
<p className="text-xs text-warm-700 dark:text-warm-300 leading-relaxed">{summary}</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|