feat: add openrouter web search (#207)

* feat: add openrouter websearch

* feat: add web search in sub menu

* fix: menu padding

Author: ibelick

app/api/chat/route.ts

@@ -28,7 +28,8 @@ type ChatRequest = {
   model: string
   isAuthenticated: boolean
   systemPrompt: string
-  agentId?: string
+  agentId: string | null
+  enableSearch: boolean
 }
 
 export async function POST(req: Request) {
@@ -41,6 +42,7 @@ export async function POST(req: Request) {
       isAuthenticated,
       systemPrompt,
       agentId,
+      enableSearch,
     } = (await req.json()) as ChatRequest
 
     if (!messages || !chatId || !userId) {
@@ -114,7 +116,7 @@ export async function POST(req: Request) {
     }
 
     const result = streamText({
-      model: modelConfig.apiSdk(apiKey),
+      model: modelConfig.apiSdk(apiKey, { enableSearch }),
       system: effectiveSystemPrompt,
       messages: cleanedMessages,
       tools: toolsToUse as ToolSet,

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

@@ -12,14 +12,13 @@ import { Button } from "@/components/ui/button"
 import { useAgent } from "@/lib/agent-store/provider"
 import { getModelInfo } from "@/lib/models"
 import { ArrowUp, Stop, Warning } from "@phosphor-icons/react"
-import React, { useCallback, useEffect } from "react"
+import React, { useCallback, useEffect, useMemo } from "react"
 import { PromptSystem } from "../suggestions/prompt-system"
 import { AgentCommand } from "./agent-command"
 import { ButtonFileUpload } from "./button-file-upload"
 import { ButtonSearch } from "./button-search"
 import { FileList } from "./file-list"
 import { SelectedAgent } from "./selected-agent"
-import { useSearchAgent } from "./use-search-agent"
 
 type ChatInputProps = {
   value: string
@@ -37,7 +36,8 @@ type ChatInputProps = {
   isUserAuthenticated: boolean
   stop: () => void
   status?: "submitted" | "streaming" | "ready" | "error"
-  onSearchToggle?: (enabled: boolean, agentId: string | null) => void
+  setEnableSearch?: (enabled: boolean) => void
+  enableSearch?: boolean
 }
 
 export function ChatInput({
@@ -55,10 +55,10 @@ export function ChatInput({
   isUserAuthenticated,
   stop,
   status,
-  onSearchToggle,
+  setEnableSearch,
+  enableSearch,
 }: ChatInputProps) {
   const { currentAgent, curatedAgents, userAgents } = useAgent()
-  const { isSearchEnabled, toggleSearch } = useSearchAgent()
 
   const agentCommand = useAgentCommand({
     value,
@@ -69,18 +69,9 @@ export function ChatInput({
 
   const selectModelConfig = getModelInfo(selectedModel)
   const hasToolSupport = Boolean(selectModelConfig?.tools)
+  const hasSearchSupport = Boolean(selectModelConfig?.webSearch)
   const isOnlyWhitespace = (text: string) => !/[^\s]/.test(text)
 
-  // Handle search toggle
-  const handleSearchToggle = useCallback(
-    (enabled: boolean) => {
-      toggleSearch(enabled)
-      const agentId = enabled ? "search" : null
-      onSearchToggle?.(enabled, agentId)
-    },
-    [toggleSearch, onSearchToggle]
-  )
-
   const handleSend = useCallback(() => {
     if (isSubmitting) {
       return
@@ -168,6 +159,12 @@ export function ChatInput({
     return () => el.removeEventListener("paste", handlePaste)
   }, [agentCommand.textareaRef, handlePaste])
 
+  useMemo(() => {
+    if (!hasSearchSupport && enableSearch) {
+      setEnableSearch?.(false)
+    }
+  }, [hasSearchSupport, enableSearch, setEnableSearch])
+
   return (
     <div className="relative flex w-full flex-col gap-4">
       {hasSuggestions && (
@@ -222,11 +219,13 @@ export function ChatInput({
                 isUserAuthenticated={isUserAuthenticated}
                 className="rounded-full"
               />
-              {/* <ButtonSearch
-                isSelected={isSearchEnabled}
-                onToggle={handleSearchToggle}
-                isAuthenticated={isUserAuthenticated}
-              /> */}
+              {hasSearchSupport ? (
+                <ButtonSearch
+                  isSelected={enableSearch}
+                  onToggle={setEnableSearch}
+                  isAuthenticated={isUserAuthenticated}
+                />
+              ) : null}
               {currentAgent && !hasToolSupport && (
                 <div className="flex items-center gap-1">
                   <Warning className="size-4" />

app/components/chat/chat.tsx

@@ -70,7 +70,7 @@ export function Chat() {
   const [isSubmitting, setIsSubmitting] = useState(false)
   const { preferences } = useUserPreferences()
   const [hasDialogAuth, setHasDialogAuth] = useState(false)
-  const [searchAgentId, setSearchAgentId] = useState<string | null>(null)
+  const [enableSearch, setEnableSearch] = useState(false)
 
   const {
     files,
@@ -155,7 +155,7 @@ export function Chat() {
     input,
     selectedModel,
     systemPrompt,
-    selectedAgentId: searchAgentId || currentAgent?.id || null,
+    selectedAgentId: currentAgent?.id || null,
     createNewChat,
     setHasDialogAuth,
   })
@@ -232,15 +232,15 @@ export function Chat() {
         }
       }
 
-      const effectiveAgentId = searchAgentId || currentAgent?.id
       const options = {
         body: {
           chatId: currentChatId,
           userId: uid,
           model: selectedModel,
           isAuthenticated,
           systemPrompt: systemPrompt || SYSTEM_PROMPT_DEFAULT,
-          ...(effectiveAgentId && { agentId: effectiveAgentId }),
+          agentId: currentAgent?.id || null,
+          enableSearch,
         },
         experimental_attachments: attachments || undefined,
       }
@@ -276,7 +276,6 @@ export function Chat() {
     cleanupOptimisticAttachments,
     ensureChatExists,
     handleFileUploads,
-    searchAgentId,
     currentAgent?.id,
     selectedModel,
     isAuthenticated,
@@ -377,14 +376,6 @@ export function Chat() {
     reload(options)
   }, [user, chatId, selectedModel, isAuthenticated, systemPrompt, reload])
 
-  // Handle search agent toggle
-  const handleSearchToggle = useCallback(
-    (enabled: boolean, agentId: string | null) => {
-      setSearchAgentId(enabled ? agentId : null)
-    },
-    []
-  )
-
   // Memoize the conversation props to prevent unnecessary rerenders
   const conversationProps = useMemo(
     () => ({
@@ -415,7 +406,8 @@ export function Chat() {
       isUserAuthenticated: isAuthenticated,
       stop,
       status,
-      onSearchToggle: handleSearchToggle,
+      setEnableSearch,
+      enableSearch,
     }),
     [
       input,
@@ -434,7 +426,8 @@ export function Chat() {
       isAuthenticated,
       stop,
       status,
-      handleSearchToggle,
+      setEnableSearch,
+      enableSearch,
     ]
   )
 

components/common/model-selector/base.tsx

@@ -271,7 +271,7 @@ export function ModelSelector({
           </TooltipTrigger>
           <TooltipContent>Switch model ⌘⇧P</TooltipContent>
           <DropdownMenuContent
-            className="flex h-[320px] w-[300px] flex-col space-y-0.5 overflow-visible px-0 pt-0"
+            className="flex h-[320px] w-[300px] flex-col space-y-0.5 overflow-visible p-0"
             align="start"
             sideOffset={4}
             forceMount
@@ -292,7 +292,7 @@ export function ModelSelector({
                 />
               </div>
             </div>
-            <div className="flex h-full flex-col space-y-0 overflow-y-auto px-1 pt-1 pb-0">
+            <div className="flex h-full flex-col space-y-0 overflow-y-auto px-1 pt-0 pb-0">
               {isLoadingModels ? (
                 <div className="flex h-full flex-col items-center justify-center p-6 text-center">
                   <p className="text-muted-foreground mb-2 text-sm">

components/common/model-selector/sub-menu.tsx

@@ -4,6 +4,7 @@ import { PROVIDERS } from "@/lib/providers"
 import {
   ArrowSquareOutIcon,
   BrainIcon,
+  GlobeIcon,
   ImageIcon,
   WrenchIcon,
 } from "@phosphor-icons/react"
@@ -51,6 +52,13 @@ export function SubMenu({ hoveredModelData }: SubMenuProps) {
                 <span>Reasoning</span>
               </div>
             )}
+
+            {hoveredModelData.webSearch && (
+              <div className="flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-700 dark:bg-blue-800 dark:text-blue-100">
+                <GlobeIcon className="size-3" />
+                <span>Web Search</span>
+              </div>
+            )}
           </div>
         </div>