migrated chats to use reactquery, upgraded entire deploymodal to use reactquery instead of manual state management

Author: waleedlatif1

apps/docs/tsconfig.json

@@ -11,10 +11,8 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts",
     "content/docs/execution/index.mdx",
-    "content/docs/connections/index.mdx",
-    ".next/dev/types/**/*.ts"
+    "content/docs/connections/index.mdx"
   ],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", ".next"]
 }

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx

@@ -48,7 +48,7 @@ import { ActionBar } from '@/app/workspace/[workspaceId]/knowledge/[id]/componen
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
 import { useDocument, useDocumentChunks, useKnowledgeBase } from '@/hooks/kb/use-knowledge'
-import { knowledgeKeys } from '@/hooks/queries/knowledge'
+import { knowledgeKeys, useDocumentChunkSearchQuery } from '@/hooks/queries/knowledge'
 
 const logger = createLogger('Document')
 
@@ -313,69 +313,22 @@ export function Document({
     isFetching: isFetchingChunks,
   } = useDocumentChunks(knowledgeBaseId, documentId, currentPageFromURL)
 
-  const [searchResults, setSearchResults] = useState<ChunkData[]>([])
-  const [isLoadingSearch, setIsLoadingSearch] = useState(false)
-  const [searchError, setSearchError] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!debouncedSearchQuery.trim()) {
-      setSearchResults([])
-      setSearchError(null)
-      return
-    }
-
-    let isMounted = true
-
-    const searchAllChunks = async () => {
-      try {
-        setIsLoadingSearch(true)
-        setSearchError(null)
-
-        const allResults: ChunkData[] = []
-        let hasMore = true
-        let offset = 0
-        const limit = 100
-
-        while (hasMore && isMounted) {
-          const response = await fetch(
-            `/api/knowledge/${knowledgeBaseId}/documents/${documentId}/chunks?search=${encodeURIComponent(debouncedSearchQuery)}&limit=${limit}&offset=${offset}`
-          )
-
-          if (!response.ok) {
-            throw new Error('Search failed')
-          }
-
-          const result = await response.json()
-
-          if (result.success && result.data) {
-            allResults.push(...result.data)
-            hasMore = result.pagination?.hasMore || false
-            offset += limit
-          } else {
-            hasMore = false
-          }
-        }
-
-        if (isMounted) {
-          setSearchResults(allResults)
-        }
-      } catch (err) {
-        if (isMounted) {
-          setSearchError(err instanceof Error ? err.message : 'Search failed')
-        }
-      } finally {
-        if (isMounted) {
-          setIsLoadingSearch(false)
-        }
-      }
+  const {
+    data: searchResults = [],
+    isLoading: isLoadingSearch,
+    error: searchQueryError,
+  } = useDocumentChunkSearchQuery(
+    {
+      knowledgeBaseId,
+      documentId,
+      search: debouncedSearchQuery,
+    },
+    {
+      enabled: Boolean(debouncedSearchQuery.trim()),
     }
+  )
 
-    searchAllChunks()
-
-    return () => {
-      isMounted = false
-    }
-  }, [debouncedSearchQuery, knowledgeBaseId, documentId])
+  const searchError = searchQueryError instanceof Error ? searchQueryError.message : null
 
   const [selectedChunks, setSelectedChunks] = useState<Set<string>>(new Set())
   const [selectedChunk, setSelectedChunk] = useState<ChunkData | null>(null)

apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/workflow-selector/workflow-selector.tsx

@@ -1,9 +1,10 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { X } from 'lucide-react'
 import { Badge, Combobox, type ComboboxOption } from '@/components/emcn'
 import { Skeleton } from '@/components/ui'
+import { useWorkflows } from '@/hooks/queries/workflows'
 
 interface WorkflowSelectorProps {
   workspaceId: string
@@ -25,26 +26,9 @@ export function WorkflowSelector({
   onChange,
   error,
 }: WorkflowSelectorProps) {
-  const [workflows, setWorkflows] = useState<Array<{ id: string; name: string }>>([])
-  const [isLoading, setIsLoading] = useState(true)
-
-  useEffect(() => {
-    const load = async () => {
-      try {
-        setIsLoading(true)
-        const response = await fetch(`/api/workflows?workspaceId=${workspaceId}`)
-        if (response.ok) {
-          const data = await response.json()
-          setWorkflows(data.data || [])
-        }
-      } catch {
-        setWorkflows([])
-      } finally {
-        setIsLoading(false)
-      }
-    }
-    load()
-  }, [workspaceId])
+  const { data: workflows = [], isPending: isLoading } = useWorkflows(workspaceId, {
+    syncRegistry: false,
+  })
 
   const options: ComboboxOption[] = useMemo(() => {
     return workflows.map((w) => ({

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx

@@ -83,8 +83,7 @@ interface A2aDeployProps {
   workflowNeedsRedeployment?: boolean
   onSubmittingChange?: (submitting: boolean) => void
   onCanSaveChange?: (canSave: boolean) => void
-  onAgentExistsChange?: (exists: boolean) => void
-  onPublishedChange?: (published: boolean) => void
+  /** Callback for when republish status changes - depends on local form state */
   onNeedsRepublishChange?: (needsRepublish: boolean) => void
   onDeployWorkflow?: () => Promise<void>
 }
@@ -99,8 +98,6 @@ export function A2aDeploy({
   workflowNeedsRedeployment,
   onSubmittingChange,
   onCanSaveChange,
-  onAgentExistsChange,
-  onPublishedChange,
   onNeedsRepublishChange,
   onDeployWorkflow,
 }: A2aDeployProps) {
@@ -236,14 +233,6 @@ export function A2aDeploy({
     }
   }, [existingAgent, workflowName, workflowDescription])
 
-  useEffect(() => {
-    onAgentExistsChange?.(!!existingAgent)
-  }, [existingAgent, onAgentExistsChange])
-
-  useEffect(() => {
-    onPublishedChange?.(existingAgent?.isPublished ?? false)
-  }, [existingAgent?.isPublished, onPublishedChange])
-
   const hasFormChanges = useMemo(() => {
     if (!existingAgent) return false
     const savedSchemes = existingAgent.authentication?.schemes || []
@@ -278,6 +267,7 @@ export function A2aDeploy({
 
   const needsRepublish = existingAgent && (hasFormChanges || hasWorkflowChanges)
 
+  // Notify parent of republish status changes (depends on local form state)
   useEffect(() => {
     onNeedsRepublishChange?.(!!needsRepublish)
   }, [needsRepublish, onNeedsRepublishChange])

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx

@@ -29,9 +29,11 @@ import { OutputSelect } from '@/app/workspace/[workspaceId]/w/[workflowId]/compo
 import {
   type AuthType,
   type ChatFormData,
-  useChatDeployment,
-  useIdentifierValidation,
-} from './hooks'
+  useCreateChat,
+  useDeleteChat,
+  useUpdateChat,
+} from '@/hooks/queries/chats'
+import { useIdentifierValidation } from './hooks'
 
 const logger = createLogger('ChatDeploy')
 
@@ -45,7 +47,6 @@ interface ChatDeployProps {
   existingChat: ExistingChat | null
   isLoadingChat: boolean
   onRefetchChat: () => Promise<void>
-  onChatExistsChange?: (exists: boolean) => void
   chatSubmitting: boolean
   setChatSubmitting: (submitting: boolean) => void
   onValidationChange?: (isValid: boolean) => void
@@ -97,7 +98,6 @@ export function ChatDeploy({
   existingChat,
   isLoadingChat,
   onRefetchChat,
-  onChatExistsChange,
   chatSubmitting,
   setChatSubmitting,
   onValidationChange,
@@ -121,8 +121,12 @@ export function ChatDeploy({
 
   const [formData, setFormData] = useState<ChatFormData>(initialFormData)
   const [errors, setErrors] = useState<FormErrors>({})
-  const { deployChat } = useChatDeployment()
   const formRef = useRef<HTMLFormElement>(null)
+
+  // React Query mutations for chat operations
+  const createChatMutation = useCreateChat()
+  const updateChatMutation = useUpdateChat()
+  const deleteChatMutation = useDeleteChat()
   const [isIdentifierValid, setIsIdentifierValid] = useState(false)
   const [hasInitializedForm, setHasInitializedForm] = useState(false)
 
@@ -231,15 +235,29 @@ export function ChatDeploy({
         return
       }
 
-      const chatUrl = await deployChat(
-        workflowId,
-        formData,
-        deploymentInfo,
-        existingChat?.id,
-        imageUrl
-      )
+      let chatUrl: string
+
+      if (existingChat?.id) {
+        // Update existing chat
+        const result = await updateChatMutation.mutateAsync({
+          chatId: existingChat.id,
+          workflowId,
+          formData,
+          imageUrl,
+        })
+        chatUrl = result.chatUrl
+      } else {
+        // Create new chat
+        const result = await createChatMutation.mutateAsync({
+          workflowId,
+          formData,
+          apiKey: deploymentInfo?.apiKey,
+          imageUrl,
+        })
+        chatUrl = result.chatUrl
+      }
 
-      onChatExistsChange?.(true)
+      // Mutations handle cache invalidation, no need for onChatExistsChange
       onDeployed?.()
       onVersionActivated?.()
 
@@ -266,18 +284,14 @@ export function ChatDeploy({
     try {
       setIsDeleting(true)
 
-      const response = await fetch(`/api/chat/manage/${existingChat.id}`, {
-        method: 'DELETE',
+      await deleteChatMutation.mutateAsync({
+        chatId: existingChat.id,
+        workflowId,
       })
 
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Failed to delete chat')
-      }
-
       setImageUrl(null)
       setHasInitializedForm(false)
-      onChatExistsChange?.(false)
+      // Mutation handles cache invalidation, no need for onChatExistsChange
       await onRefetchChat()
 
       onDeploymentComplete?.()

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/index.ts

@@ -1,2 +1 @@
-export { type AuthType, type ChatFormData, useChatDeployment } from './use-chat-deployment'
 export { useIdentifierValidation } from './use-identifier-validation'