feat: add tanstack/react-query, refactor/remove useEffects (#195)

* feat: add tanstack-query

* feat: update byok-section with tanstack/react-query

* refactor: move tools-section, layout-client to react-query

* refactor: remove useEffect in developer-tools, model-preferences, system-prompt

* refactor: add use-key-shortcut, remove useEffect in utton-new-chat, model-selector/base

* refactor remove useEffect pro-dialog, user-preference-store/provider

* refactor: create-agent-form, dialog-trigger-create-agent, agent-store/provider

* refactor: improve use-agent-command

* refactor: remove useEffect agent-detail, use-search-agent, reasoning

* feat: increase MESSAGE_MAX_LENGTH

* refactor: remove useEffect chat-preview-panel

* refactor: remove reasoning, response-stream

* refactor: remove useEffect suggestions, command-history, history-trigger

* refactor, remove use-effect agent-command, agents.tsx, tool-invocation

* refactor: remove useEffect chat.tsx

* refactor: remove useEffect agent-command, sidebar-item, use-chat-draft, feedback-form

Author: ibelick

app/components/agents/agent-detail.tsx

@@ -41,7 +41,7 @@ import {
   X,
 } from "@phosphor-icons/react"
 import { useRouter } from "next/navigation"
-import { useEffect, useState } from "react"
+import { useRef, useState } from "react"
 
 function SystemPromptDisplay({ prompt }: { prompt: string }) {
   const [expanded, setExpanded] = useState(false)
@@ -106,21 +106,21 @@ export function AgentDetail({
   const [isDeleting, setIsDeleting] = useState(false)
   const router = useRouter()
   const { user } = useUser()
+  const didPrefetch = useRef(false)
+
+  if (!didPrefetch.current && isFullPage && randomAgents.length > 0) {
+    randomAgents.forEach((agent) => {
+      router.prefetch(`/agents/${agent.slug}`)
+    })
+    didPrefetch.current = true
+  }
 
   const copyToClipboard = () => {
     navigator.clipboard.writeText(`${window.location.origin}/agents/${slug}`)
     setCopied(true)
     setTimeout(() => setCopied(false), 1000)
   }
 
-  useEffect(() => {
-    if (randomAgents.length > 0 && isFullPage) {
-      randomAgents.forEach((agent) => {
-        router.prefetch(`/agents/${agent.slug}`)
-      })
-    }
-  }, [randomAgents, router, isFullPage])
-
   const handleAgentClick = (agent: AgentSummary) => {
     if (onAgentClick) {
       onAgentClick(agent.id)
@@ -424,8 +424,8 @@ export function AgentDetail({
             <AlertDialogHeader>
               <AlertDialogTitle>Delete Agent</AlertDialogTitle>
               <AlertDialogDescription>
-                Are you sure you want to delete &quot;{name}&quot;? This action cannot be
-                undone.
+                Are you sure you want to delete &quot;{name}&quot;? This action
+                cannot be undone.
               </AlertDialogDescription>
             </AlertDialogHeader>
             <AlertDialogFooter>

app/components/agents/dialog-create-agent/create-agent-form.tsx

@@ -16,7 +16,7 @@ import { AlertCircle, Check, Github, X } from "lucide-react"
 import type React from "react"
 import { ToolsSection } from "./tools-section"
 
-type AgentFormData = {
+export type AgentFormData = {
   name: string
   description: string
   systemPrompt: string

app/components/agents/dialog-create-agent/dialog-trigger-create-agent.tsx

@@ -9,38 +9,25 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog"
 import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer"
-import {
-  Popover,
-  PopoverTrigger,
-} from "@/components/ui/popover"
+import { Popover, PopoverTrigger } from "@/components/ui/popover"
 import { toast } from "@/components/ui/toast"
+import { useAgent } from "@/lib/agent-store/provider"
 import { fetchClient } from "@/lib/fetch"
 import { API_ROUTE_CREATE_AGENT } from "@/lib/routes"
 import { useUser } from "@/lib/user-store/provider"
 import { useRouter } from "next/navigation"
 import type React from "react"
 import { useState } from "react"
 import { useBreakpoint } from "../../../hooks/use-breakpoint"
-import { CreateAgentForm } from "./create-agent-form"
-
-type AgentFormData = {
-  name: string
-  description: string
-  systemPrompt: string
-  mcp: "none" | "git-mcp"
-  repository?: string
-  tools: string[]
-}
+import { AgentFormData, CreateAgentForm } from "./create-agent-form"
 
-type DialogCreateAgentTrigger = {
-  trigger: React.ReactNode
-}
-
-// @todo: add drawer
 export function DialogCreateAgentTrigger({
   trigger,
-}: DialogCreateAgentTrigger) {
+}: {
+  trigger: React.ReactNode
+}) {
   const { user } = useUser()
+  const { refetchUserAgents } = useAgent()
   const isAuthenticated = !!user?.id
   const [open, setOpen] = useState(false)
   const [formData, setFormData] = useState<AgentFormData>({
@@ -58,142 +45,52 @@ export function DialogCreateAgentTrigger({
 
   const generateSystemPrompt = (owner: string, repo: string) => {
     return `You are a helpful GitHub assistant focused on the repository: ${owner}/${repo}.
-    
+
 Use the available tools below to answer any questions. Always prefer using tools over guessing.
-        
+
 Tools available for this repository:
-- \`fetch_${repo}_documentation\`: Fetch the entire documentation file. Use this first when asked about general concepts in ${owner}/${repo}.
-- \`search_${repo}_documentation\`: Semantically search the documentation. Use this for specific questions.
-- \`search_${repo}_code\`: Search code with exact matches using the GitHub API. Use when asked about file contents or code examples.
+- \`fetch_${repo}_documentation\`: Fetch the entire documentation file.
+- \`search_${repo}_documentation\`: Semantically search the documentation.
+- \`search_${repo}_code\`: Search code with exact matches using the GitHub API.
 - \`fetch_generic_url_content\`: Fetch absolute URLs when referenced in the docs or needed for context.
-      
-Never invent answers. Use tools and return what you find.`
-  }
-
-  const handleInputChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    const { name, value } = e.target
-    setFormData({ ...formData, [name]: value })
-
-    // Clear error for this field if it exists
-    if (error[name]) {
-      setError({ ...error, [name]: "" })
-    }
-  }
-
-  const handleRepositoryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const repoValue = e.target.value
-    setRepository(repoValue)
-
-    // Clear repository error if it exists
-    if (error.repository) {
-      setError({ ...error, repository: "" })
-    }
-
-    // Update system prompt if git-mcp is selected and repository format is valid
-    if (formData.mcp === "git-mcp" && validateRepository(repoValue)) {
-      const [owner, repo] = repoValue.split("/")
-      setFormData((prev) => ({
-        ...prev,
-        systemPrompt: generateSystemPrompt(owner, repo),
-      }))
-    }
-  }
-
-  const handleSelectChange = (value: string) => {
-    setFormData({ ...formData, mcp: value as "none" | "git-mcp" })
-
-    // Clear repository error if switching away from git-mcp
-    if (value !== "git-mcp" && error.repository) {
-      setError({ ...error, repository: "" })
-    }
-
-    // If switching to git-mcp and repository is already valid, update system prompt
-    if (value === "git-mcp" && validateRepository(repository)) {
-      const [owner, repo] = repository.split("/")
-      setFormData((prev) => ({
-        ...prev,
-        systemPrompt: generateSystemPrompt(owner, repo),
-      }))
-    }
-  }
 
-  const handleToolsChange = (selectedTools: string[]) => {
-    setFormData({ ...formData, tools: selectedTools })
-  }
-
-  const validateRepository = (repo: string) => {
-    // Simple validation for owner/repo format
-    const regex = /^[a-zA-Z0-9_.-]+\/[a-zA-Z0-9_.-]+$/
-    return regex.test(repo)
+Never invent answers. Use tools and return what you find.`
   }
 
-  const validateForm = () => {
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
     const newErrors: { [key: string]: string } = {}
-
-    if (!formData.name.trim()) {
-      newErrors.name = "Agent name is required"
-    }
-
-    if (!formData.description.trim()) {
+    if (!formData.name.trim()) newErrors.name = "Agent name is required"
+    if (!formData.description.trim())
       newErrors.description = "Description is required"
-    }
-
-    if (!formData.systemPrompt.trim()) {
+    if (!formData.systemPrompt.trim())
       newErrors.systemPrompt = "System prompt is required"
-    }
-
-    if (formData.mcp === "git-mcp" && !validateRepository(repository)) {
+    if (
+      formData.mcp === "git-mcp" &&
+      !/^[a-zA-Z0-9_.-]+\/[a-zA-Z0-9_.-]+$/.test(repository)
+    ) {
       newErrors.repository =
         'Please enter a valid repository in the format "owner/repo"'
     }
-
-    setError(newErrors)
-    return Object.keys(newErrors).length === 0
-  }
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-
-    if (!validateForm()) {
-      return
-    }
+    if (Object.keys(newErrors).length) return setError(newErrors)
 
     setIsLoading(true)
-
     try {
-      // If git-mcp is selected, validate the repository
       if (formData.mcp === "git-mcp") {
         const response = await fetch(
           `https://api.github.com/repos/${repository}`
         )
-
         if (!response.ok) {
-          if (response.status === 404) {
-            setError({
-              ...error,
-              repository:
-                "Repository not found. Please check the repository name and try again.",
-            })
-          } else {
-            setError({
-              ...error,
-              repository: `GitHub API error: ${response.statusText}`,
-            })
-          }
+          setError({ repository: "Repository not found." })
           setIsLoading(false)
           return
         }
-
-        // Add repository to form data
         formData.repository = repository
       }
 
-      const owner = repository ? repository.split("/")[0] : null
-      const repo = repository ? repository.split("/")[1] : null
+      const [owner, repo] = repository.split("/")
 
-      const apiResponse = await fetchClient(API_ROUTE_CREATE_AGENT, {
+      const res = await fetchClient(API_ROUTE_CREATE_AGENT, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -202,10 +99,7 @@ Never invent answers. Use tools and return what you find.`
           systemPrompt: formData.systemPrompt,
           avatar_url: repository ? `https://github.com/${owner}.png` : null,
           mcp_config: repository
-            ? {
-                server: `https://gitmcp.io/${owner}/${repo}`,
-                variables: [],
-              }
+            ? { server: `https://gitmcp.io/${owner}/${repo}`, variables: [] }
             : null,
           example_inputs: repository
             ? [
@@ -222,24 +116,17 @@ Never invent answers. Use tools and return what you find.`
         }),
       })
 
-      if (!apiResponse.ok) {
-        const errorData = await apiResponse.json()
-        throw new Error(errorData.error || "Failed to create agent")
-      }
-
-      const { agent } = await apiResponse.json()
-
-      // Close the dialog and redirect
+      if (!res.ok) throw new Error("Failed to create agent")
+      const { agent } = await res.json()
+      refetchUserAgents()
       setOpen(false)
       router.push(`/?agent=${agent.slug}`)
-    } catch (error: unknown) {
-      console.error("Agent creation error:", error)
+    } catch (err) {
+      console.error(err)
       toast({
-        title: "Error creating agent",
-        description:
-          (error as Error).message || "Failed to create agent. Please try again.",
+        title: "Error",
+        description: "Could not create agent. Try again.",
       })
-      setError({ form: "Failed to create agent. Please try again." })
     } finally {
       setIsLoading(false)
     }
@@ -249,12 +136,26 @@ Never invent answers. Use tools and return what you find.`
     <CreateAgentForm
       formData={formData}
       repository={repository}
-      setRepository={handleRepositoryChange}
+      setRepository={(e) => setRepository(e.target.value)}
       error={error}
       isLoading={isLoading}
-      handleInputChange={handleInputChange}
-      handleSelectChange={handleSelectChange}
-      handleToolsChange={handleToolsChange}
+      handleInputChange={(e) => {
+        const { name, value } = e.target
+        setFormData((f) => ({ ...f, [name]: value }))
+        if (error[name]) setError((err) => ({ ...err, [name]: "" }))
+      }}
+      handleSelectChange={(value) => {
+        setFormData((f) => ({ ...f, mcp: value as "none" | "git-mcp" }))
+        if (value !== "git-mcp") setError((e) => ({ ...e, repository: "" }))
+        if (value === "git-mcp" && /^[^/]+\/[^/]+$/.test(repository)) {
+          const [owner, repo] = repository.split("/")
+          setFormData((f) => ({
+            ...f,
+            systemPrompt: generateSystemPrompt(owner, repo),
+          }))
+        }
+      }}
+      handleToolsChange={(tools) => setFormData((f) => ({ ...f, tools }))}
       handleSubmit={handleSubmit}
       onClose={() => setOpen(false)}
       isDrawer={isMobile}
@@ -285,7 +186,6 @@ Never invent answers. Use tools and return what you find.`
       <DialogContent className="max-h-[90vh] gap-0 overflow-y-auto p-0 sm:max-w-xl">
         <div
           className="h-full w-full"
-          // Prevent the dialog from closing when clicking on the content, needed because of the agent-command component
           onClick={(e) => e.stopPropagation()}
           onMouseDown={(e) => e.stopPropagation()}
         >

app/components/agents/dialog-create-agent/tools-section.tsx

@@ -1,9 +1,11 @@
 "use client"
 
 import { Label } from "@/components/ui/label"
+import { fetchClient } from "@/lib/fetch"
 import { getAllTools } from "@/lib/tools"
 import { cn } from "@/lib/utils"
-import React, { useEffect, useState } from "react"
+import { useQuery } from "@tanstack/react-query"
+import React, { useState } from "react"
 
 const isDev = process.env.NODE_ENV === "development"
 
@@ -12,24 +14,19 @@ type ToolsSectionProps = {
 }
 
 export function ToolsSection({ onSelectTools }: ToolsSectionProps) {
-  const [availableTools, setAvailableTools] = useState<string[] | null>(null)
   const [selectedTools, setSelectedTools] = useState<string[]>([])
   const tools = getAllTools()
 
-  useEffect(() => {
-    if (!isDev) return
-
-    const fetchTools = async () => {
-      try {
-        const response = await fetch("/api/tools-available")
-        const data = await response.json()
-        setAvailableTools(data.available || [])
-      } catch (error) {
-        console.error("Failed to fetch available tools:", error)
-      }
-    }
-    fetchTools()
-  }, [])
+  const { data: availableTools } = useQuery<string[]>({
+    queryKey: ["available-tools"],
+    queryFn: async () => {
+      if (!isDev) return []
+      const res = await fetchClient("/api/tools-available")
+      const json = await res.json()
+      return json.available || []
+    },
+    enabled: isDev,
+  })
 
   const handleToolToggle = (toolId: string) => {
     const newSelection = selectedTools.includes(toolId)