feat: add more models (#80)

* feat: init open-provider

* feat: extract settings types

* feat: improve typing

* feat: add anthropic

* feat: update models dropdown free/pro

* feat: add anthropic models

* feat: init usage file

* feat: track usage for pro model

* feat: add checkLimitsAndNotify for pro models

* feat: update model-selector

* feat: add Advanced model usage

* feat: move gpt-4.1 free model

* feat: update HeaderAgent

Author: ibelick

.env.example

@@ -17,3 +17,9 @@ CSRF_SECRET=your_csrf_secret
 
 # Exa
 EXA_API_KEY=your_exa_api_key
+
+# Gemini
+GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_api_key
+
+# Anthropic
+ANTHROPIC_API_KEY=your_anthropic_api_key

app/api/agents/core/tools/usage.ts

@@ -1,13 +1,7 @@
-import {
-  checkSpecialAgentUsage,
-  checkUsage,
-  incrementSpecialAgentUsage,
-  incrementUsage,
-  SpecialAgentLimitError,
-  UsageLimitError,
-} from "@/lib/api"
+import { checkSpecialAgentUsage, incrementSpecialAgentUsage } from "@/lib/api"
 import { sanitizeUserInput } from "@/lib/sanitize"
 import { validateUserIdentity } from "@/lib/server/api"
+import { checkUsage, incrementUsage } from "@/lib/usage"
 import { SupabaseClient } from "@supabase/supabase-js"
 
 /**

app/api/chat/route.ts

@@ -1,11 +1,10 @@
-// /chat/api/chat.ts
-import { checkUsage, incrementUsage } from "@/lib/api"
-import { MODELS, SYSTEM_PROMPT_DEFAULT } from "@/lib/config"
+import { MODELS_OPTIONS, SYSTEM_PROMPT_DEFAULT } from "@/lib/config"
 import { sanitizeUserInput } from "@/lib/sanitize"
 import { validateUserIdentity } from "@/lib/server/api"
+import { checkUsageByModel, incrementUsageByModel } from "@/lib/usage"
 import { Attachment } from "@ai-sdk/ui-utils"
 import { createOpenRouter } from "@openrouter/ai-sdk-provider"
-import { Message as MessageAISDK, streamText } from "ai"
+import { LanguageModelV1, Message as MessageAISDK, streamText } from "ai"
 
 // Maximum allowed duration for streaming (in seconds)
 export const maxDuration = 30
@@ -41,7 +40,7 @@ export async function POST(req: Request) {
 
     const supabase = await validateUserIdentity(userId, isAuthenticated)
 
-    await checkUsage(supabase, userId)
+    await checkUsageByModel(supabase, userId, model, isAuthenticated)
 
     const userMessage = messages[messages.length - 1]
     if (userMessage && userMessage.role === "user") {
@@ -57,7 +56,7 @@ export async function POST(req: Request) {
         console.error("Error saving user message:", msgError)
       } else {
         console.log("User message saved successfully.")
-        await incrementUsage(supabase, userId)
+        await incrementUsageByModel(supabase, userId, model, isAuthenticated)
       }
     }
 
@@ -77,7 +76,7 @@ export async function POST(req: Request) {
       }
     }
 
-    const modelConfig = MODELS.find((m) => m.id === model)
+    const modelConfig = MODELS_OPTIONS.find((m) => m.id === model)
 
     if (!modelConfig) {
       throw new Error(`Model ${model} not found`)
@@ -87,13 +86,13 @@ export async function POST(req: Request) {
       const openRouter = createOpenRouter({
         apiKey: process.env.OPENROUTER_API_KEY,
       })
-      modelInstance = openRouter.chat(modelConfig.api_sdk) // this is a special case for openrouter. Normal openrouter models are not supported.
+      modelInstance = openRouter.chat(modelConfig.api_sdk as string) // this is a special case for openrouter. Normal openrouter models are not supported.
     } else {
       modelInstance = modelConfig.api_sdk
     }
 
     const result = streamText({
-      model: modelInstance,
+      model: modelInstance as LanguageModelV1,
       system: effectiveSystemPrompt,
       messages,
       onError: (err) => {

app/api/create-chat-agent/route.ts

@@ -1,5 +1,5 @@
-import { checkUsage } from "@/lib/api"
 import { validateUserIdentity } from "@/lib/server/api"
+import { checkUsageByModel } from "@/lib/usage"
 
 export async function POST(request: Request) {
   try {
@@ -15,7 +15,7 @@ export async function POST(request: Request) {
 
     const supabase = await validateUserIdentity(userId, isAuthenticated)
 
-    await checkUsage(supabase, userId)
+    await checkUsageByModel(supabase, userId, model, isAuthenticated)
 
     const { data: agent, error: agentError } = await supabase
       .from("agents")

app/api/create-chat/route.ts

@@ -1,6 +1,6 @@
-import { checkUsage } from "@/lib/api"
 import { SYSTEM_PROMPT_DEFAULT } from "@/lib/config"
 import { validateUserIdentity } from "@/lib/server/api"
+import { checkUsageByModel } from "@/lib/usage"
 
 export async function POST(request: Request) {
   try {
@@ -14,8 +14,7 @@ export async function POST(request: Request) {
 
     const supabase = await validateUserIdentity(userId, isAuthenticated)
 
-    // Only check usage but don't increment
-    await checkUsage(supabase, userId)
+    await checkUsageByModel(supabase, userId, model, isAuthenticated)
 
     // Insert a new chat record in the chats table
     const { data: chatData, error: chatError } = await supabase

app/api/rate-limits/route.ts

@@ -1,45 +1,54 @@
 import {
   AUTH_DAILY_MESSAGE_LIMIT,
+  DAILY_LIMIT_PRO_MODELS,
   NON_AUTH_DAILY_MESSAGE_LIMIT,
 } from "@/lib/config"
 import { validateUserIdentity } from "../../../lib/server/api"
 
-
 export async function GET(req: Request) {
-  
-    const { searchParams } = new URL(req.url)
-    const userId = searchParams.get("userId")
-    const isAuthenticated = searchParams.get("isAuthenticated") === "true"
-    
-    if (!userId) {
-      return new Response(JSON.stringify({error: "Missing userId"}), {
-        status: 400,
-      })
-    }
-
-    const supabase = await validateUserIdentity(userId, isAuthenticated)
+  const { searchParams } = new URL(req.url)
+  const userId = searchParams.get("userId")
+  const isAuthenticated = searchParams.get("isAuthenticated") === "true"
 
-    const { data, error } = await supabase
-      .from("users")
-      .select("daily_message_count")
-      .eq("id", userId)
-      .maybeSingle()
+  if (!userId) {
+    return new Response(JSON.stringify({ error: "Missing userId" }), {
+      status: 400,
+    })
+  }
 
-    if (error || !data){
-      return new Response(JSON.stringify({ error: error?.message }), {
-        status: 500,
-      })
-    }
+  const supabase = await validateUserIdentity(userId, isAuthenticated)
 
-    const dailyLimit = isAuthenticated
-      ? AUTH_DAILY_MESSAGE_LIMIT
-      : NON_AUTH_DAILY_MESSAGE_LIMIT
-    const dailyCount = data.daily_message_count || 0
-    const remaining = dailyLimit - dailyCount
+  const { data, error } = await supabase
+    .from("users")
+    .select("daily_message_count, daily_pro_message_count")
+    .eq("id", userId)
+    .maybeSingle()
 
-    return new Response(JSON.stringify({ dailyCount, dailyLimit, remaining }), {
-      status: 200,
+  if (error || !data) {
+    return new Response(JSON.stringify({ error: error?.message }), {
+      status: 500,
     })
-  } 
-  
-
+  }
+
+  const dailyLimit = isAuthenticated
+    ? AUTH_DAILY_MESSAGE_LIMIT
+    : NON_AUTH_DAILY_MESSAGE_LIMIT
+  const proDailyLimit = DAILY_LIMIT_PRO_MODELS
+  const dailyCount = data.daily_message_count || 0
+  const dailyProCount = data.daily_pro_message_count || 0
+  const remaining = dailyLimit - dailyCount
+  const remainingPro = proDailyLimit - dailyProCount
+
+  return new Response(
+    JSON.stringify({
+      dailyCount,
+      dailyLimit,
+      remaining,
+      dailyProCount,
+      remainingPro,
+    }),
+    {
+      status: 200,
+    }
+  )
+}

app/components/chat-input/select-model.tsx

@@ -6,8 +6,8 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
+import { MODELS_OPTIONS, PROVIDERS } from "@/lib/config"
 import { CaretDown } from "@phosphor-icons/react"
-import { MODELS_OPTIONS, PROVIDERS_OPTIONS } from "../../../lib/config"
 import { PopoverContentAuth } from "./popover-content-auth"
 
 export type SelectModelProps = {
@@ -21,9 +21,11 @@ export function SelectModel({
   onSelectModel,
   isUserAuthenticated,
 }: SelectModelProps) {
-  const model = MODELS_OPTIONS.find((model) => model.id === selectedModel)
-  const provider = PROVIDERS_OPTIONS.find(
-    (provider) => provider.id === model?.provider
+  const currentModel = MODELS_OPTIONS.find(
+    (model) => model.id === selectedModel
+  )
+  const currentProvider = PROVIDERS.find(
+    (provider) => provider.id === currentModel?.provider
   )
 
   if (!isUserAuthenticated) {
@@ -38,8 +40,10 @@ export function SelectModel({
                 className="border-border dark:bg-secondary text-accent-foreground h-9 w-auto rounded-full border bg-transparent"
                 type="button"
               >
-                {provider?.icon && <provider.icon className="size-5" />}
-                {model?.name}
+                {currentProvider?.icon && (
+                  <currentProvider.icon className="size-5" />
+                )}
+                {currentModel?.name}
                 <CaretDown className="size-4" />
               </Button>
             </PopoverTrigger>

app/components/chat/chat.tsx

@@ -67,8 +67,6 @@ export function Chat() {
   )
   const [hydrated, setHydrated] = useState(false)
   const searchParams = useSearchParams()
-  const router = useRouter()
-  const hasSentInitialPromptRef = useRef(false)
   const hasSentFirstMessageRef = useRef(false)
   const { callAgent, isTooling, statusCall, agent } = useAgent()
 

app/components/chat/use-chat-utils.ts

@@ -45,7 +45,16 @@ export function useChatUtils({
       if (rateData.remaining === REMAINING_QUERY_ALERT_THRESHOLD) {
         toast({
           title: `Only ${rateData.remaining} query${
-            rateData.remaining === 1 ? "" : "ies"
+            rateData.remaining === 1 ? "y" : "ies"
+          } remaining today.`,
+          status: "info",
+        })
+      }
+
+      if (rateData.remainingPro === REMAINING_QUERY_ALERT_THRESHOLD) {
+        toast({
+          title: `Only ${rateData.remainingPro} pro quer${
+            rateData.remainingPro === 1 ? "y" : "ies"
           } remaining today.`,
           status: "info",
         })

app/components/layout/header-agent.tsx

@@ -6,58 +6,64 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
-import { cn } from "@/lib/utils"
 import { Info } from "@phosphor-icons/react"
+import { AnimatePresence, motion } from "motion/react"
+import { AgentHeader } from "./header"
 
 type HeaderAgentProps = {
-  avatarUrl: string
-  name: string
-  info: string
-  className?: string
+  agent?: AgentHeader | null
 }
 
-export function HeaderAgent({
-  avatarUrl,
-  name,
-  info,
-  className,
-}: HeaderAgentProps) {
+export function HeaderAgent({ agent }: HeaderAgentProps) {
   const isMobile = useBreakpoint(768)
-  const initials = name
+  const initials = agent?.name
     .split(" ")
     .map((n) => n[0])
     .join("")
 
   return (
-    <div
-      className={cn(
-        "bg-background/40 flex items-center justify-center gap-2 rounded-t-none rounded-b-md px-0 py-0 backdrop-blur-2xl md:px-3 md:py-3",
-        className
-      )}
-    >
-      <Avatar className="size-10">
-        <AvatarImage src={avatarUrl} alt={name} className="object-cover" />
-        <AvatarFallback>{initials}</AvatarFallback>
-      </Avatar>
+    <AnimatePresence mode="wait">
+      {agent && (
+        <motion.div
+          key={agent.slug}
+          initial={{ opacity: 0, scale: 0.95, filter: "blur(2px)" }}
+          animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+          exit={{ opacity: 0, scale: 0.95, filter: "blur(2px)" }}
+          transition={{
+            duration: 0.15,
+            ease: "easeOut",
+          }}
+          className="bg-background/40 flex items-center justify-center gap-2 rounded-t-none rounded-b-md px-0 py-0 backdrop-blur-2xl md:px-3 md:py-3"
+        >
+          <Avatar className="size-10">
+            <AvatarImage
+              src={agent?.avatar_url || ""}
+              alt={agent.name}
+              className="object-cover"
+            />
+            <AvatarFallback>{initials}</AvatarFallback>
+          </Avatar>
 
-      <div className="flex items-center">
-        <h2 className="text-sm font-medium">{name}</h2>
-        {!isMobile && info && (
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button className="text-muted-foreground hover:text-foreground ml-1.5 transition-colors">
-                  <Info className="size-4" />
-                  <span className="sr-only">User information</span>
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p className="max-w-xs text-sm">{info}</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        )}
-      </div>
-    </div>
+          <div className="flex items-center">
+            <h2 className="text-sm font-medium">{agent.name}</h2>
+            {!isMobile && agent.description && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button className="text-muted-foreground hover:text-foreground ml-1.5 transition-colors">
+                      <Info className="size-4" />
+                      <span className="sr-only">User information</span>
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="max-w-xs text-sm">{agent.description}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
   )
 }