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-warning-banner.tsx

@@ -3,6 +3,7 @@
 import { OctagonAlert, Orbit, X } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
@@ -27,61 +28,46 @@ export function QuotaWarningBanner({
 
 	if (isExceeded) {
 		return (
-			<div
-				className={cn(
-					"rounded-lg border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/50 p-4",
-					className
-				)}
-			>
-				<div className="flex items-start gap-3">
-					<OctagonAlert className="h-5 w-5 text-red-500 shrink-0 mt-0.5" />
-					<div className="flex-1 space-y-2">
-						<p className="text-sm font-medium text-red-800 dark:text-red-200">
-							Free token limit reached
-						</p>
-						<p className="text-xs text-red-600 dark:text-red-300">
-							You&apos;ve used all {limit.toLocaleString()} free tokens. Create a free account to
-							get $5 of premium credit and access to all models.
-						</p>
-						<Link
-							href="/register"
-							className="inline-flex items-center gap-1.5 rounded-md bg-linear-to-r from-purple-600 to-blue-600 px-4 py-2 text-sm font-medium text-white transition-opacity hover:opacity-90"
-						>
-							<Orbit className="h-4 w-4" />
+			<Alert variant="destructive" className={className}>
+				<OctagonAlert />
+				<AlertTitle>Free token limit reached</AlertTitle>
+				<AlertDescription>
+					<p>
+						You&apos;ve used all {limit.toLocaleString()} free tokens. Create a free account to get
+						$5 of premium credit and access to all models.
+					</p>
+					<Button asChild size="sm" className="mt-1">
+						<Link href="/register">
+							<Orbit data-icon="inline-start" />
 							Create Free Account
 						</Link>
-					</div>
-				</div>
-			</div>
+					</Button>
+				</AlertDescription>
+			</Alert>
 		);
 	}
 
 	return (
-		<div
-			className={cn(
-				"rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/50 p-3",
-				className
-			)}
-		>
-			<div className="flex items-center gap-3">
-				<OctagonAlert className="h-4 w-4 text-amber-500 shrink-0" />
-				<p className="flex-1 text-xs text-amber-700 dark:text-amber-300">
-					You&apos;ve used {used.toLocaleString()} of {limit.toLocaleString()} free tokens.{" "}
-					<Link href="/register" className="font-medium underline hover:no-underline">
-						Create an account
-					</Link>{" "}
-					for $5 of premium credit.
-				</p>
-				<Button
-					type="button"
-					variant="ghost"
-					size="icon"
-					onClick={() => setDismissed(true)}
-					className="size-6 text-amber-400 hover:bg-transparent hover:text-amber-600 dark:hover:text-amber-200"
-				>
-					<X className="h-4 w-4" />
-				</Button>
-			</div>
-		</div>
+		<Alert variant="warning" className={cn("pr-10", className)}>
+			<OctagonAlert />
+			<AlertTitle>Running low on free tokens</AlertTitle>
+			<AlertDescription>
+				You&apos;ve used {used.toLocaleString()} of {limit.toLocaleString()} free tokens.{" "}
+				<Link href="/register" className="font-medium underline hover:no-underline">
+					Create an account
+				</Link>{" "}
+				for $5 of premium credit.
+			</AlertDescription>
+			<Button
+				type="button"
+				variant="ghost"
+				size="icon"
+				onClick={() => setDismissed(true)}
+				aria-label="Dismiss"
+				className="absolute top-2 right-2 size-6"
+			>
+				<X />
+			</Button>
+		</Alert>
 	);
 }