added hooks for chat chats and updated callers to all use reactquery

Author: waleedlatif1

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

@@ -267,7 +267,6 @@ 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

@@ -123,7 +123,6 @@ export function ChatDeploy({
   const [errors, setErrors] = useState<FormErrors>({})
   const formRef = useRef<HTMLFormElement>(null)
 
-  // React Query mutations for chat operations
   const createChatMutation = useCreateChat()
   const updateChatMutation = useUpdateChat()
   const deleteChatMutation = useDeleteChat()
@@ -238,7 +237,6 @@ export function ChatDeploy({
       let chatUrl: string
 
       if (existingChat?.id) {
-        // Update existing chat
         const result = await updateChatMutation.mutateAsync({
           chatId: existingChat.id,
           workflowId,
@@ -247,7 +245,6 @@ export function ChatDeploy({
         })
         chatUrl = result.chatUrl
       } else {
-        // Create new chat
         const result = await createChatMutation.mutateAsync({
           workflowId,
           formData,
@@ -257,7 +254,6 @@ export function ChatDeploy({
         chatUrl = result.chatUrl
       }
 
-      // Mutations handle cache invalidation, no need for onChatExistsChange
       onDeployed?.()
       onVersionActivated?.()
 
@@ -291,7 +287,6 @@ export function ChatDeploy({
 
       setImageUrl(null)
       setHasInitializedForm(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/form/form.tsx

@@ -17,11 +17,17 @@ import { Skeleton } from '@/components/ui'
 import { isDev } from '@/lib/core/config/feature-flags'
 import { cn } from '@/lib/core/utils/cn'
 import { getBaseUrl, getEmailDomain } from '@/lib/core/utils/urls'
+import {
+  type FieldConfig,
+  useCreateForm,
+  useDeleteForm,
+  useFormByWorkflow,
+  useUpdateForm,
+} from '@/hooks/queries/forms'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import { EmbedCodeGenerator } from './components/embed-code-generator'
 import { FormBuilder } from './components/form-builder'
-import { useFormDeployment } from './hooks/use-form-deployment'
 import { useIdentifierValidation } from './hooks/use-identifier-validation'
 
 const logger = createLogger('FormDeploy')
@@ -34,38 +40,11 @@ interface FormErrors {
   general?: string
 }
 
-interface FieldConfig {
-  name: string
-  type: string
-  label: string
-  description?: string
-  required?: boolean
-}
-
-export interface ExistingForm {
-  id: string
-  identifier: string
-  title: string
-  description?: string
-  customizations: {
-    primaryColor?: string
-    thankYouMessage?: string
-    logoUrl?: string
-    fieldConfigs?: FieldConfig[]
-  }
-  authType: 'public' | 'password' | 'email'
-  hasPassword?: boolean
-  allowedEmails?: string[]
-  showBranding: boolean
-  isActive: boolean
-}
-
 interface FormDeployProps {
   workflowId: string
   onDeploymentComplete?: () => void
   onValidationChange?: (isValid: boolean) => void
   onSubmittingChange?: (isSubmitting: boolean) => void
-  onExistingFormChange?: (exists: boolean) => void
   formSubmitting?: boolean
   setFormSubmitting?: (submitting: boolean) => void
   onDeployed?: () => Promise<void>
@@ -81,7 +60,6 @@ export function FormDeploy({
   onDeploymentComplete,
   onValidationChange,
   onSubmittingChange,
-  onExistingFormChange,
   formSubmitting,
   setFormSubmitting,
   onDeployed,
@@ -95,16 +73,19 @@ export function FormDeploy({
   const [authType, setAuthType] = useState<'public' | 'password' | 'email'>('public')
   const [password, setPassword] = useState('')
   const [emailItems, setEmailItems] = useState<TagItem[]>([])
-  const [existingForm, setExistingForm] = useState<ExistingForm | null>(null)
-  const [isLoading, setIsLoading] = useState(true)
   const [formUrl, setFormUrl] = useState('')
   const [inputFields, setInputFields] = useState<{ name: string; type: string }[]>([])
   const [showPasswordField, setShowPasswordField] = useState(false)
   const [fieldConfigs, setFieldConfigs] = useState<FieldConfig[]>([])
   const [errors, setErrors] = useState<FormErrors>({})
   const [isIdentifierValid, setIsIdentifierValid] = useState(false)
 
-  const { createForm, updateForm, deleteForm, isSubmitting } = useFormDeployment()
+  const { data: existingForm, isLoading } = useFormByWorkflow(workflowId)
+  const createFormMutation = useCreateForm()
+  const updateFormMutation = useUpdateForm()
+  const deleteFormMutation = useDeleteForm()
+
+  const isSubmitting = createFormMutation.isPending || updateFormMutation.isPending
 
   const {
     isChecking: isCheckingIdentifier,
@@ -124,73 +105,45 @@ export function FormDeploy({
     setErrors((prev) => ({ ...prev, [field]: undefined }))
   }
 
-  // Fetch existing form deployment
+  // Populate form fields when existing form data is loaded
   useEffect(() => {
-    async function fetchExistingForm() {
-      if (!workflowId) return
+    if (existingForm) {
+      setIdentifier(existingForm.identifier)
+      setTitle(existingForm.title)
+      setDescription(existingForm.description || '')
+      setThankYouMessage(
+        existingForm.customizations?.thankYouMessage ||
+          'Your response has been submitted successfully.'
+      )
+      setAuthType(existingForm.authType)
+      setEmailItems(
+        (existingForm.allowedEmails || []).map((email) => ({ value: email, isValid: true }))
+      )
+      if (existingForm.customizations?.fieldConfigs) {
+        setFieldConfigs(existingForm.customizations.fieldConfigs)
+      }
 
+      const baseUrl = getBaseUrl()
       try {
-        setIsLoading(true)
-        const response = await fetch(`/api/workflows/${workflowId}/form/status`)
-
-        if (response.ok) {
-          const data = await response.json()
-          if (data.isDeployed && data.form) {
-            const detailResponse = await fetch(`/api/form/manage/${data.form.id}`)
-            if (detailResponse.ok) {
-              const formDetail = await detailResponse.json()
-              const form = formDetail.form as ExistingForm
-              setExistingForm(form)
-              onExistingFormChange?.(true)
-
-              setIdentifier(form.identifier)
-              setTitle(form.title)
-              setDescription(form.description || '')
-              setThankYouMessage(
-                form.customizations?.thankYouMessage ||
-                  'Your response has been submitted successfully.'
-              )
-              setAuthType(form.authType)
-              setEmailItems(
-                (form.allowedEmails || []).map((email) => ({ value: email, isValid: true }))
-              )
-              if (form.customizations?.fieldConfigs) {
-                setFieldConfigs(form.customizations.fieldConfigs)
-              }
-
-              const baseUrl = getBaseUrl()
-              try {
-                const url = new URL(baseUrl)
-                let host = url.host
-                if (host.startsWith('www.')) host = host.substring(4)
-                setFormUrl(`${url.protocol}//${host}/form/${form.identifier}`)
-              } catch {
-                setFormUrl(
-                  isDev
-                    ? `http://localhost:3000/form/${form.identifier}`
-                    : `https://sim.ai/form/${form.identifier}`
-                )
-              }
-            }
-          } else {
-            setExistingForm(null)
-            onExistingFormChange?.(false)
-
-            const workflowName =
-              useWorkflowStore.getState().blocks[Object.keys(useWorkflowStore.getState().blocks)[0]]
-                ?.name || 'Form'
-            setTitle(`${workflowName} Form`)
-          }
-        }
-      } catch (err) {
-        logger.error('Error fetching form deployment:', err)
-      } finally {
-        setIsLoading(false)
+        const url = new URL(baseUrl)
+        let host = url.host
+        if (host.startsWith('www.')) host = host.substring(4)
+        setFormUrl(`${url.protocol}//${host}/form/${existingForm.identifier}`)
+      } catch {
+        setFormUrl(
+          isDev
+            ? `http://localhost:3000/form/${existingForm.identifier}`
+            : `https://sim.ai/form/${existingForm.identifier}`
+        )
       }
+    } else if (!isLoading) {
+      // Set default title for new forms
+      const workflowName =
+        useWorkflowStore.getState().blocks[Object.keys(useWorkflowStore.getState().blocks)[0]]
+          ?.name || 'Form'
+      setTitle(`${workflowName} Form`)
     }
-
-    fetchExistingForm()
-  }, [workflowId, onExistingFormChange])
+  }, [existingForm, isLoading])
 
   // Get input fields from start block and initialize field configs
   useEffect(() => {
@@ -281,17 +234,21 @@ export function FormDeploy({
 
       try {
         if (existingForm) {
-          await updateForm(existingForm.id, {
-            identifier,
-            title,
-            description,
-            customizations,
-            authType,
-            password: password || undefined,
-            allowedEmails,
+          await updateFormMutation.mutateAsync({
+            formId: existingForm.id,
+            workflowId,
+            data: {
+              identifier,
+              title,
+              description,
+              customizations,
+              authType,
+              password: password || undefined,
+              allowedEmails,
+            },
           })
         } else {
-          const result = await createForm({
+          const result = await createFormMutation.mutateAsync({
             workflowId,
             identifier,
             title,
@@ -342,8 +299,8 @@ export function FormDeploy({
       password,
       allowedEmails,
       isIdentifierValid,
-      createForm,
-      updateForm,
+      createFormMutation,
+      updateFormMutation,
       onDeployed,
       onDeploymentComplete,
     ]
@@ -353,17 +310,19 @@ export function FormDeploy({
     if (!existingForm) return
 
     try {
-      await deleteForm(existingForm.id)
-      setExistingForm(null)
-      onExistingFormChange?.(false)
+      await deleteFormMutation.mutateAsync({
+        formId: existingForm.id,
+        workflowId,
+      })
+      // Reset form fields after successful deletion
       setIdentifier('')
       setTitle('')
       setDescription('')
       setFormUrl('')
     } catch (err) {
       logger.error('Error deleting form:', err)
     }
-  }, [existingForm, deleteForm, onExistingFormChange])
+  }, [existingForm, deleteFormMutation, workflowId])
 
   if (isLoading) {
     return (