feat: add daily request limit with custom toast notification (#167)

- Add DAILY_REQUEST_LIMIT env var support in config API
- Track request count in localStorage (resets daily)
- Show friendly quota limit toast with self-host/sponsor links
- Apply limit to send, regenerate, and edit message actions

app/api/config/route.ts

@@ -8,5 +8,6 @@ export async function GET() {
 
     return NextResponse.json({
         accessCodeRequired: accessCodes.length > 0,
+        dailyRequestLimit: parseInt(process.env.DAILY_REQUEST_LIMIT || "0", 10),
     })
 }

components/chat-panel.tsx

@@ -17,9 +17,10 @@ import type React from "react"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { flushSync } from "react-dom"
 import { FaGithub } from "react-icons/fa"
-import { Toaster } from "sonner"
+import { Toaster, toast } from "sonner"
 import { ButtonWithTooltip } from "@/components/button-with-tooltip"
 import { ChatInput } from "@/components/chat-input"
+import { QuotaLimitToast } from "@/components/quota-limit-toast"
 import {
     SettingsDialog,
     STORAGE_ACCESS_CODE_KEY,
@@ -30,6 +31,8 @@ const STORAGE_MESSAGES_KEY = "next-ai-draw-io-messages"
 const STORAGE_XML_SNAPSHOTS_KEY = "next-ai-draw-io-xml-snapshots"
 const STORAGE_SESSION_ID_KEY = "next-ai-draw-io-session-id"
 const STORAGE_DIAGRAM_XML_KEY = "next-ai-draw-io-diagram-xml"
+const STORAGE_REQUEST_COUNT_KEY = "next-ai-draw-io-request-count"
+const STORAGE_REQUEST_DATE_KEY = "next-ai-draw-io-request-date"
 
 import { useDiagram } from "@/contexts/diagram-context"
 import { findCachedResponse } from "@/lib/cached-responses"
@@ -94,15 +97,71 @@ export default function ChatPanel({
     const [showSettingsDialog, setShowSettingsDialog] = useState(false)
     const [, setAccessCodeRequired] = useState(false)
     const [input, setInput] = useState("")
+    const [dailyRequestLimit, setDailyRequestLimit] = useState(0)
 
-    // Check if access code is required on mount
+    // Check config on mount
     useEffect(() => {
         fetch("/api/config")
             .then((res) => res.json())
-            .then((data) => setAccessCodeRequired(data.accessCodeRequired))
+            .then((data) => {
+                setAccessCodeRequired(data.accessCodeRequired)
+                setDailyRequestLimit(data.dailyRequestLimit || 0)
+            })
             .catch(() => setAccessCodeRequired(false))
     }, [])
 
+    // Helper to check daily request limit
+    const checkDailyLimit = useCallback((): {
+        allowed: boolean
+        remaining: number
+        used: number
+    } => {
+        if (dailyRequestLimit <= 0)
+            return { allowed: true, remaining: -1, used: 0 }
+
+        const today = new Date().toDateString()
+        const storedDate = localStorage.getItem(STORAGE_REQUEST_DATE_KEY)
+        let count = parseInt(
+            localStorage.getItem(STORAGE_REQUEST_COUNT_KEY) || "0",
+            10,
+        )
+
+        if (storedDate !== today) {
+            count = 0
+            localStorage.setItem(STORAGE_REQUEST_DATE_KEY, today)
+            localStorage.setItem(STORAGE_REQUEST_COUNT_KEY, "0")
+        }
+
+        return {
+            allowed: count < dailyRequestLimit,
+            remaining: dailyRequestLimit - count,
+            used: count,
+        }
+    }, [dailyRequestLimit])
+
+    // Helper to increment request count
+    const incrementRequestCount = useCallback((): void => {
+        const count = parseInt(
+            localStorage.getItem(STORAGE_REQUEST_COUNT_KEY) || "0",
+            10,
+        )
+        localStorage.setItem(STORAGE_REQUEST_COUNT_KEY, String(count + 1))
+    }, [])
+
+    // Helper to show quota limit toast
+    const showQuotaLimitToast = useCallback(() => {
+        toast.custom(
+            (t) => (
+                <QuotaLimitToast
+                    used={dailyRequestLimit}
+                    limit={dailyRequestLimit}
+                    onDismiss={() => toast.dismiss(t)}
+                />
+            ),
+            { duration: 15000 },
+        )
+    }, [dailyRequestLimit])
+
     // Generate a unique session ID for Langfuse tracing (restore from localStorage if available)
     const [sessionId, setSessionId] = useState(() => {
         if (typeof window !== "undefined") {
@@ -519,6 +578,13 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                 xmlSnapshotsRef.current.set(messageIndex, chartXml)
                 saveXmlSnapshots()
 
+                // Check daily limit
+                const limitCheck = checkDailyLimit()
+                if (!limitCheck.allowed) {
+                    showQuotaLimitToast()
+                    return
+                }
+
                 const accessCode =
                     localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
                 sendMessage(
@@ -534,6 +600,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                     },
                 )
 
+                incrementRequestCount()
                 setInput("")
                 setFiles([])
             } catch (error) {
@@ -605,6 +672,13 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
             setMessages(newMessages)
         })
 
+        // Check daily limit
+        const limitCheck = checkDailyLimit()
+        if (!limitCheck.allowed) {
+            showQuotaLimitToast()
+            return
+        }
+
         // Now send the message after state is guaranteed to be updated
         const accessCode = localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
         sendMessage(
@@ -619,6 +693,8 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                 },
             },
         )
+
+        incrementRequestCount()
     }
 
     const handleEditMessage = async (messageIndex: number, newText: string) => {
@@ -667,6 +743,13 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
             setMessages(newMessages)
         })
 
+        // Check daily limit
+        const limitCheck = checkDailyLimit()
+        if (!limitCheck.allowed) {
+            showQuotaLimitToast()
+            return
+        }
+
         // Now send the edited message after state is guaranteed to be updated
         const accessCode = localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
         sendMessage(
@@ -681,6 +764,8 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                 },
             },
         )
+
+        incrementRequestCount()
     }
 
     // Collapsed view (desktop only)
@@ -715,7 +800,13 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
             <Toaster
                 position="bottom-center"
                 richColors
+                expand
                 style={{ position: "absolute" }}
+                toastOptions={{
+                    style: {
+                        maxWidth: "480px",
+                    },
+                }}
             />
             {/* Header */}
             <header

components/quota-limit-toast.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import { Coffee, X } from "lucide-react"
+import type React from "react"
+import { FaGithub } from "react-icons/fa"
+
+interface QuotaLimitToastProps {
+    used: number
+    limit: number
+    onDismiss: () => void
+}
+
+export function QuotaLimitToast({
+    used,
+    limit,
+    onDismiss,
+}: QuotaLimitToastProps) {
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === "Escape") {
+            e.preventDefault()
+            onDismiss()
+        }
+    }
+
+    return (
+        <div
+            role="alert"
+            aria-live="polite"
+            tabIndex={0}
+            onKeyDown={handleKeyDown}
+            className="relative w-[400px] overflow-hidden rounded-xl border border-border/50 bg-card p-5 shadow-soft animate-message-in"
+        >
+            {/* Close button */}
+            <button
+                onClick={onDismiss}
+                className="absolute right-3 top-3 p-1.5 rounded-full text-muted-foreground/60 hover:text-foreground hover:bg-muted transition-colors"
+                aria-label="Dismiss"
+            >
+                <X className="w-4 h-4" />
+            </button>
+
+            {/* Title row with icon */}
+            <div className="flex items-center gap-2.5 mb-3 pr-6">
+                <div className="flex-shrink-0 w-8 h-8 rounded-lg bg-accent flex items-center justify-center">
+                    <Coffee
+                        className="w-4 h-4 text-accent-foreground"
+                        strokeWidth={2}
+                    />
+                </div>
+                <h3 className="font-semibold text-foreground text-sm">
+                    Daily Quota Reached
+                </h3>
+                <span className="px-2 py-0.5 text-xs font-medium rounded-md bg-muted text-muted-foreground">
+                    {used}/{limit}
+                </span>
+            </div>
+
+            {/* Message */}
+            <div className="text-sm text-muted-foreground leading-relaxed mb-4 space-y-2">
+                <p>
+                    Oops — you've reached the daily API limit for this demo! As
+                    an indie developer covering all the API costs myself, I have
+                    to set these limits to keep things sustainable.
+                </p>
+                <p>
+                    The good news is that you can self-host the project in
+                    seconds on Vercel (it's fully open-source), or if you love
+                    it, consider sponsoring to help keep the lights on!
+                </p>
+                <p>Your limit resets tomorrow. Thanks for understanding!</p>
+            </div>
+
+            {/* Action buttons */}
+            <div className="flex items-center gap-2">
+                <a
+                    href="https://github.com/DayuanJiang/next-ai-draw-io"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+                >
+                    <FaGithub className="w-3.5 h-3.5" />
+                    Self-host
+                </a>
+                <a
+                    href="https://github.com/sponsors/DayuanJiang"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border text-foreground hover:bg-muted transition-colors"
+                >
+                    <Coffee className="w-3.5 h-3.5" />
+                    Sponsor
+                </a>
+            </div>
+        </div>
+    )
+}