SurfSense/surfsense_web/components/free-chat/quota-bar.tsx
DESKTOP-RTLN3BA\$punk 0f2e3c7655 refactor: anonymous/free chat experience
- Enhanced lambda function formatting in `_after_commit` for better clarity.
- Simplified generator expression in `_match_condition` for improved readability.
- Streamlined function signature in `_eligible` for consistency.
- Updated imports and refactored anonymous chat routes to use a new agent creation method.
- Added a new function `_load_anon_document` to handle document loading from Redis.
- Improved UI components by replacing legacy structures with modern alternatives, including alerts and separators.
- Refactored quota-related components to utilize new alert structures for better user feedback.
- Cleaned up unused variables and optimized component states for performance.
2026-05-31 15:58:21 -07:00

50 lines
1.5 KiB
TypeScript

"use client";
import { OctagonAlert, Orbit } from "lucide-react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { cn } from "@/lib/utils";
interface QuotaBarProps {
used: number;
limit: number;
warningThreshold: number;
className?: string;
}
export function QuotaBar({ used, limit, warningThreshold, className }: QuotaBarProps) {
const percentage = Math.min((used / limit) * 100, 100);
const remaining = Math.max(limit - used, 0);
const isWarning = used >= warningThreshold;
const isExceeded = used >= limit;
return (
<div className={cn("flex flex-col gap-1.5", className)}>
<div className="flex items-center justify-between text-xs">
<span className="text-muted-foreground">
{used.toLocaleString()} / {limit.toLocaleString()} tokens
</span>
{isExceeded ? (
<span className="font-medium text-destructive">Limit reached</span>
) : isWarning ? (
<span className="flex items-center gap-1 font-medium text-highlight">
<OctagonAlert className="size-3" />
{remaining.toLocaleString()} remaining
</span>
) : (
<span className="font-medium">{percentage.toFixed(0)}%</span>
)}
</div>
<Progress value={percentage} className="h-1.5" />
{isExceeded && (
<Button asChild size="sm" className="mt-0.5 w-full">
<Link href="/register">
<Orbit data-icon="inline-start" />
Create free account for 5M more tokens
</Link>
</Button>
)}
</div>
);
}