File size: 3,990 Bytes
540437a ff8c636 540437a ff8c636 540437a d7637ba 540437a 5db99fa 540437a 5db99fa d7637ba 540437a d7637ba 540437a d7637ba 540437a d7637ba 540437a d7637ba 540437a | 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 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Typography,
} from '@mui/material';
import type { PlanTier } from '@/hooks/useUserQuota';
const HF_PRICING_URL = 'https://huggingface.co/pricing';
const PRO_CAP = 20;
interface ClaudeCapDialogProps {
open: boolean;
plan: PlanTier;
cap: number;
onClose: () => void;
onUseFreeModel: () => void;
onUpgrade: () => void;
}
export default function ClaudeCapDialog({
open,
plan,
cap,
onClose,
onUseFreeModel,
onUpgrade,
}: ClaudeCapDialogProps) {
const isFreePlan = plan === 'free';
return (
<Dialog
open={open}
onClose={onClose}
slotProps={{
backdrop: { sx: { backgroundColor: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)' } },
}}
PaperProps={{
sx: {
bgcolor: 'var(--panel)',
border: '1px solid var(--border)',
borderRadius: 'var(--radius-md)',
boxShadow: 'var(--shadow-1)',
maxWidth: 460,
mx: 2,
},
}}
>
<DialogTitle
sx={{ color: 'var(--text)', fontWeight: 700, fontSize: '1rem', pt: 2.5, pb: 0, px: 3 }}
>
You've hit your premium model limit
</DialogTitle>
<DialogContent sx={{ px: 3, pt: 1.25, pb: 0 }}>
<DialogContentText
sx={{ color: 'var(--muted-text)', fontSize: '0.85rem', lineHeight: 1.6 }}
>
Opus and GPT-5.5 are expensive to run, so we cap premium models at {cap}{' '}
{cap === 1 ? 'session' : 'sessions'} a day. {isFreePlan
? 'HF Pro raises the daily premium-model limit.'
: 'Your plan has used today’s premium-model allowance.'}{' '}
Give Kimi, MiniMax, GLM, or DeepSeek a spin instead.
</DialogContentText>
{isFreePlan && (
<Box
sx={{
mt: 2,
p: 1.5,
borderRadius: '8px',
bgcolor: 'var(--accent-yellow-weak)',
border: '1px solid var(--border)',
}}
>
<Typography
variant="caption"
sx={{
display: 'block',
fontWeight: 700,
color: 'var(--text)',
fontSize: '0.78rem',
mb: 0.5,
letterSpacing: '0.02em',
}}
>
HF Pro ($9/mo) — more premium model sessions
</Typography>
<Typography
variant="caption"
sx={{ display: 'block', color: 'var(--muted-text)', fontSize: '0.78rem', lineHeight: 1.55 }}
>
{PRO_CAP} premium model sessions/day here, 20× HF Inference credits,
ZeroGPU access, and priority on Spaces hardware.
</Typography>
</Box>
)}
</DialogContent>
<DialogActions sx={{ px: 3, pb: 2.5, pt: 2, gap: 1 }}>
{isFreePlan && (
<Button
component="a"
href={HF_PRICING_URL}
target="_blank"
rel="noopener noreferrer"
onClick={onUpgrade}
variant="contained"
size="small"
sx={{
fontSize: '0.82rem',
px: 2.5,
bgcolor: 'var(--accent-yellow)',
color: '#000',
textTransform: 'none',
fontWeight: 700,
boxShadow: 'none',
'&:hover': { bgcolor: '#FFB340', boxShadow: 'none' },
}}
>
Upgrade to Pro
</Button>
)}
<Button
onClick={onUseFreeModel}
size="small"
sx={{
color: 'var(--muted-text)',
fontSize: '0.82rem',
px: 2,
textTransform: 'none',
'&:hover': { bgcolor: 'var(--hover-bg)' },
}}
>
Use a free model
</Button>
</DialogActions>
</Dialog>
);
}
|