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.

surfsense_web/components/free-chat/quota-bar.tsx

@@ -2,6 +2,7 @@
 
 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";
 
@@ -19,38 +20,30 @@ export function QuotaBar({ used, limit, warningThreshold, className }: QuotaBarP
 	const isExceeded = used >= limit;
 
 	return (
-		<div className={cn("space-y-1.5", className)}>
-			<div className="flex justify-between items-center text-xs">
+		<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-red-500">Limit reached</span>
+					<span className="font-medium text-destructive">Limit reached</span>
 				) : isWarning ? (
-					<span className="font-medium text-amber-500 flex items-center gap-1">
-						<OctagonAlert className="h-3 w-3" />
+					<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={cn(
-					"h-1.5",
-					isExceeded && "[&>div]:bg-red-500",
-					isWarning && !isExceeded && "[&>div]:bg-amber-500"
-				)}
-			/>
+			<Progress value={percentage} className="h-1.5" />
 			{isExceeded && (
-				<Link
-					href="/register"
-					className="flex items-center justify-center gap-1.5 rounded-md bg-linear-to-r from-purple-600 to-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-opacity hover:opacity-90"
-				>
-					<Orbit className="h-3 w-3" />
-					Create free account for 5M more tokens
-				</Link>
+				<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>
 	);