fix(chat-deploy): fix launch chat popup and auth persistence, clean up React anti-patterns

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

@@ -108,7 +108,6 @@ export function ChatDeploy({
   onVersionActivated,
 }: ChatDeployProps) {
   const [imageUrl, setImageUrl] = useState<string | null>(null)
-  const [isDeleting, setIsDeleting] = useState(false)
   const [internalShowDeleteConfirmation, setInternalShowDeleteConfirmation] = useState(false)
 
   const showDeleteConfirmation =
@@ -181,9 +180,11 @@ export function ChatDeploy({
       Boolean(existingChat)) &&
     ((formData.authType !== 'email' && formData.authType !== 'sso') || formData.emails.length > 0)
 
-  useEffect(() => {
+  const [prevIsFormValid, setPrevIsFormValid] = useState(isFormValid)
+  if (prevIsFormValid !== isFormValid) {
+    setPrevIsFormValid(isFormValid)
     onValidationChange?.(isFormValid)
-  }, [isFormValid, onValidationChange])
+  }
 
   useEffect(() => {
     if (existingChat && !hasInitializedForm) {
@@ -222,13 +223,20 @@ export function ChatDeploy({
 
     setChatSubmitting(true)
 
+    const isNewChat = !existingChat?.id
+
+    // Open window before async operation to avoid popup blockers
+    const newTab = isNewChat ? window.open('', '_blank') : null
+
     try {
       if (!validateForm(!!existingChat)) {
+        newTab?.close()
         setChatSubmitting(false)
         return
       }
 
       if (!isIdentifierValid && formData.identifier !== existingChat?.identifier) {
+        newTab?.close()
         setError('identifier', 'Please wait for identifier validation to complete')
         setChatSubmitting(false)
         return
@@ -257,13 +265,17 @@ export function ChatDeploy({
       onDeployed?.()
       onVersionActivated?.()
 
-      if (chatUrl) {
-        window.open(chatUrl, '_blank', 'noopener,noreferrer')
+      if (newTab && chatUrl) {
+        newTab.opener = null
+        newTab.location.href = chatUrl
+      } else if (newTab) {
+        newTab.close()
       }
 
-      setHasInitializedForm(false)
       await onRefetchChat()
+      setHasInitializedForm(false)
     } catch (error: any) {
+      newTab?.close()
       if (error.message?.includes('identifier')) {
         setError('identifier', error.message)
       } else {
@@ -278,8 +290,6 @@ export function ChatDeploy({
     if (!existingChat || !existingChat.id) return
 
     try {
-      setIsDeleting(true)
-
       await deleteChatMutation.mutateAsync({
         chatId: existingChat.id,
         workflowId,
@@ -294,7 +304,6 @@ export function ChatDeploy({
       logger.error('Failed to delete chat:', error)
       setError('general', error.message || 'An unexpected error occurred while deleting')
     } finally {
-      setIsDeleting(false)
       setShowDeleteConfirmation(false)
     }
   }
@@ -424,12 +433,12 @@ export function ChatDeploy({
             <Button
               variant='default'
               onClick={() => setShowDeleteConfirmation(false)}
-              disabled={isDeleting}
+              disabled={deleteChatMutation.isPending}
             >
               Cancel
             </Button>
-            <Button variant='destructive' onClick={handleDelete} disabled={isDeleting}>
-              {isDeleting ? 'Deleting...' : 'Delete'}
+            <Button variant='destructive' onClick={handleDelete} disabled={deleteChatMutation.isPending}>
+              {deleteChatMutation.isPending ? 'Deleting...' : 'Delete'}
             </Button>
           </ModalFooter>
         </ModalContent>
@@ -497,9 +506,11 @@ function IdentifierInput({
     isEditingExisting
   )
 
-  useEffect(() => {
+  const [prevIsValid, setPrevIsValid] = useState(isValid)
+  if (prevIsValid !== isValid) {
+    setPrevIsValid(isValid)
     onValidationChange?.(isValid)
-  }, [isValid, onValidationChange])
+  }
 
   const handleChange = (newValue: string) => {
     const lowercaseValue = newValue.toLowerCase()

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { useQueryClient } from '@tanstack/react-query'
 import {
@@ -113,6 +113,7 @@ export function DeployModal({
   const [showA2aDeleteConfirm, setShowA2aDeleteConfirm] = useState(false)
 
   const [chatSuccess, setChatSuccess] = useState(false)
+  const chatSuccessTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null)
 
   const [isCreateKeyModalOpen, setIsCreateKeyModalOpen] = useState(false)
   const [isApiInfoModalOpen, setIsApiInfoModalOpen] = useState(false)
@@ -233,6 +234,11 @@ export function DeployModal({
       setDeployError(null)
       setDeployWarnings([])
     }
+    return () => {
+      if (chatSuccessTimeoutRef.current) {
+        clearTimeout(chatSuccessTimeoutRef.current)
+      }
+    }
   }, [open, workflowId])
 
   useEffect(() => {
@@ -377,15 +383,16 @@ export function DeployModal({
   const handleChatDeployed = useCallback(async () => {
     if (!workflowId) return
 
-    queryClient.invalidateQueries({ queryKey: deploymentKeys.info(workflowId) })
     queryClient.invalidateQueries({ queryKey: deploymentKeys.versions(workflowId) })
-    queryClient.invalidateQueries({ queryKey: deploymentKeys.chatStatus(workflowId) })
 
     await refetchDeployedState()
     useWorkflowRegistry.getState().setWorkflowNeedsRedeployment(workflowId, false)
 
+    if (chatSuccessTimeoutRef.current) {
+      clearTimeout(chatSuccessTimeoutRef.current)
+    }
     setChatSuccess(true)
-    setTimeout(() => setChatSuccess(false), 2000)
+    chatSuccessTimeoutRef.current = setTimeout(() => setChatSuccess(false), 2000)
   }, [workflowId, queryClient, refetchDeployedState])
 
   const handleRefetchChat = useCallback(async () => {
@@ -394,14 +401,7 @@ export function DeployModal({
 
   const handleChatFormSubmit = useCallback(() => {
     const form = document.getElementById('chat-deploy-form') as HTMLFormElement
-    if (form) {
-      const updateTrigger = form.querySelector('[data-update-trigger]') as HTMLButtonElement
-      if (updateTrigger) {
-        updateTrigger.click()
-      } else {
-        form.requestSubmit()
-      }
-    }
+    form?.requestSubmit()
   }, [])
 
   const handleChatDelete = useCallback(() => {

apps/sim/hooks/queries/deployments.ts

@@ -217,8 +217,8 @@ export function useChatDeploymentInfo(workflowId: string | null, options?: { ena
     chatExists: statusQuery.data?.isDeployed ?? false,
     existingChat: detailQuery.data ?? null,
     refetch: async () => {
-      await statusQuery.refetch()
-      if (statusQuery.data?.deployment?.id) {
+      const statusResult = await statusQuery.refetch()
+      if (statusResult.data?.deployment?.id) {
         await detailQuery.refetch()
       }
     },

apps/sim/tools/greenhouse/index.ts

@@ -1,14 +1,14 @@
-import { greenhouseGetApplicationTool } from '@/tools/greenhouse/get-application'
-import { greenhouseGetCandidateTool } from '@/tools/greenhouse/get-candidate'
-import { greenhouseGetJobTool } from '@/tools/greenhouse/get-job'
-import { greenhouseGetUserTool } from '@/tools/greenhouse/get-user'
-import { greenhouseListApplicationsTool } from '@/tools/greenhouse/list-applications'
-import { greenhouseListCandidatesTool } from '@/tools/greenhouse/list-candidates'
-import { greenhouseListDepartmentsTool } from '@/tools/greenhouse/list-departments'
-import { greenhouseListJobStagesTool } from '@/tools/greenhouse/list-job-stages'
-import { greenhouseListJobsTool } from '@/tools/greenhouse/list-jobs'
-import { greenhouseListOfficesTool } from '@/tools/greenhouse/list-offices'
-import { greenhouseListUsersTool } from '@/tools/greenhouse/list-users'
+import { greenhouseGetApplicationTool } from '@/tools/greenhouse/get_application'
+import { greenhouseGetCandidateTool } from '@/tools/greenhouse/get_candidate'
+import { greenhouseGetJobTool } from '@/tools/greenhouse/get_job'
+import { greenhouseGetUserTool } from '@/tools/greenhouse/get_user'
+import { greenhouseListApplicationsTool } from '@/tools/greenhouse/list_applications'
+import { greenhouseListCandidatesTool } from '@/tools/greenhouse/list_candidates'
+import { greenhouseListDepartmentsTool } from '@/tools/greenhouse/list_departments'
+import { greenhouseListJobStagesTool } from '@/tools/greenhouse/list_job_stages'
+import { greenhouseListJobsTool } from '@/tools/greenhouse/list_jobs'
+import { greenhouseListOfficesTool } from '@/tools/greenhouse/list_offices'
+import { greenhouseListUsersTool } from '@/tools/greenhouse/list_users'
 
 export {
   greenhouseGetApplicationTool,