fix(chat-deploy): added new image upload component, fixed some state issues with success view

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/components/subdomain-input.tsx

@@ -10,6 +10,7 @@ interface SubdomainInputProps {
   originalSubdomain?: string
   disabled?: boolean
   onValidationChange?: (isValid: boolean) => void
+  isEditingExisting?: boolean
 }
 
 const getDomainSuffix = (() => {
@@ -23,8 +24,13 @@ export function SubdomainInput({
   originalSubdomain,
   disabled = false,
   onValidationChange,
+  isEditingExisting = false,
 }: SubdomainInputProps) {
-  const { isChecking, error, isValid } = useSubdomainValidation(value, originalSubdomain)
+  const { isChecking, error, isValid } = useSubdomainValidation(
+    value,
+    originalSubdomain,
+    isEditingExisting
+  )
 
   // Notify parent of validation changes
   useEffect(() => {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/components/success-view.tsx

@@ -18,9 +18,11 @@ interface ExistingChat {
 interface SuccessViewProps {
   deployedUrl: string
   existingChat: ExistingChat | null
+  onDelete?: () => void
+  onUpdate?: () => void
 }
 
-export function SuccessView({ deployedUrl, existingChat }: SuccessViewProps) {
+export function SuccessView({ deployedUrl, existingChat, onDelete, onUpdate }: SuccessViewProps) {
   const url = new URL(deployedUrl)
   const hostname = url.hostname
   const isDevelopmentUrl = hostname.includes('localhost')
@@ -71,6 +73,10 @@ export function SuccessView({ deployedUrl, existingChat }: SuccessViewProps) {
           </a>
         </p>
       </div>
+
+      {/* Hidden triggers for modal footer buttons */}
+      <button type='button' data-delete-trigger onClick={onDelete} style={{ display: 'none' }} />
+      <button type='button' data-update-trigger onClick={onUpdate} style={{ display: 'none' }} />
     </div>
   )
 }

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

@@ -1,6 +1,7 @@
 import { useChatDeployment } from './use-chat-deployment'
 import { useChatForm } from './use-chat-form'
+import { useImageUpload } from './use-image-upload'
 
-export { useChatDeployment, useChatForm }
+export { useChatDeployment, useChatForm, useImageUpload }
 
 export type { ChatFormData, ChatFormErrors } from './use-chat-form'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/hooks/use-chat-deployment.ts

@@ -23,6 +23,7 @@ const chatSchema = z.object({
   customizations: z.object({
     primaryColor: z.string(),
     welcomeMessage: z.string(),
+    imageUrl: z.string().optional(),
   }),
   authType: z.enum(['public', 'password', 'email']).default('public'),
   password: z.string().optional(),
@@ -50,7 +51,8 @@ export function useChatDeployment() {
       workflowId: string,
       formData: ChatFormData,
       deploymentInfo: { apiKey: string } | null,
-      existingChatId?: string
+      existingChatId?: string,
+      imageUrl?: string | null
     ) => {
       setState({ isLoading: true, error: null, deployedUrl: null })
 
@@ -79,6 +81,7 @@ export function useChatDeployment() {
           customizations: {
             primaryColor: '#802FFF',
             welcomeMessage: formData.welcomeMessage.trim(),
+            ...(imageUrl && { imageUrl }),
           },
           authType: formData.authType,
           password: formData.authType === 'password' ? formData.password : undefined,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/hooks/use-image-upload.ts

@@ -0,0 +1,184 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { createLogger } from '@/lib/logs/console/logger'
+
+const logger = createLogger('ImageUpload')
+const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5MB
+const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/jpg']
+
+interface UseImageUploadProps {
+  onUpload?: (url: string | null) => void
+  onError?: (error: string) => void
+  uploadToServer?: boolean
+}
+
+export function useImageUpload({
+  onUpload,
+  onError,
+  uploadToServer = false,
+}: UseImageUploadProps = {}) {
+  const previewRef = useRef<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
+  const [fileName, setFileName] = useState<string | null>(null)
+  const [isUploading, setIsUploading] = useState(false)
+
+  const validateFile = useCallback((file: File): string | null => {
+    if (file.size > MAX_FILE_SIZE) {
+      return `File "${file.name}" is too large. Maximum size is 5MB.`
+    }
+    if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
+      return `File "${file.name}" is not a supported image format. Please use PNG or JPEG.`
+    }
+    return null
+  }, [])
+
+  const handleThumbnailClick = useCallback(() => {
+    fileInputRef.current?.click()
+  }, [])
+
+  const uploadFileToServer = useCallback(async (file: File): Promise<string> => {
+    try {
+      // First, try to get a pre-signed URL for direct upload with chat type
+      const presignedResponse = await fetch('/api/files/presigned?type=chat', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          fileName: file.name,
+          contentType: file.type,
+          fileSize: file.size,
+        }),
+      })
+
+      if (presignedResponse.ok) {
+        // Use direct upload with presigned URL
+        const presignedData = await presignedResponse.json()
+
+        // Log the presigned URL response for debugging
+        logger.info('Presigned URL response:', presignedData)
+
+        // Upload directly to storage provider
+        const uploadHeaders: Record<string, string> = {
+          'Content-Type': file.type,
+        }
+
+        // Add any additional headers from the presigned response (for Azure Blob)
+        if (presignedData.uploadHeaders) {
+          Object.assign(uploadHeaders, presignedData.uploadHeaders)
+        }
+
+        const uploadResponse = await fetch(presignedData.uploadUrl, {
+          method: 'PUT',
+          body: file,
+          headers: uploadHeaders,
+        })
+
+        logger.info(`Upload response status: ${uploadResponse.status}`)
+        logger.info(
+          'Upload response headers:',
+          Object.fromEntries(uploadResponse.headers.entries())
+        )
+
+        if (!uploadResponse.ok) {
+          const responseText = await uploadResponse.text()
+          logger.error(`Direct upload failed: ${uploadResponse.status} - ${responseText}`)
+          throw new Error(`Direct upload failed: ${uploadResponse.status} - ${responseText}`)
+        }
+
+        // Use the file info returned from the presigned URL endpoint
+        const publicUrl = presignedData.fileInfo.path
+        logger.info(`Image uploaded successfully via direct upload: ${publicUrl}`)
+        return publicUrl
+      }
+      // Fallback to traditional upload through API route
+      const formData = new FormData()
+      formData.append('file', file)
+
+      const response = await fetch('/api/files/upload', {
+        method: 'POST',
+        body: formData,
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({ error: response.statusText }))
+        throw new Error(errorData.error || `Failed to upload file: ${response.status}`)
+      }
+
+      const data = await response.json()
+      const publicUrl = data.path
+      logger.info(`Image uploaded successfully via server upload: ${publicUrl}`)
+      return publicUrl
+    } catch (error) {
+      throw new Error(error instanceof Error ? error.message : 'Failed to upload image')
+    }
+  }, [])
+
+  const handleFileChange = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0]
+      if (file) {
+        // Validate file first
+        const validationError = validateFile(file)
+        if (validationError) {
+          onError?.(validationError)
+          return
+        }
+
+        setFileName(file.name)
+
+        // Always create preview URL
+        const previewUrl = URL.createObjectURL(file)
+        setPreviewUrl(previewUrl)
+        previewRef.current = previewUrl
+
+        if (uploadToServer) {
+          setIsUploading(true)
+          try {
+            const serverUrl = await uploadFileToServer(file)
+            onUpload?.(serverUrl)
+          } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Failed to upload image'
+            onError?.(errorMessage)
+          } finally {
+            setIsUploading(false)
+          }
+        } else {
+          onUpload?.(previewUrl)
+        }
+      }
+    },
+    [onUpload, onError, uploadToServer, uploadFileToServer, validateFile]
+  )
+
+  const handleRemove = useCallback(() => {
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl)
+    }
+    setPreviewUrl(null)
+    setFileName(null)
+    previewRef.current = null
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+    onUpload?.(null) // Notify parent that image was removed
+  }, [previewUrl, onUpload])
+
+  useEffect(() => {
+    return () => {
+      if (previewRef.current) {
+        URL.revokeObjectURL(previewRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    previewUrl,
+    fileName,
+    fileInputRef,
+    handleThumbnailClick,
+    handleFileChange,
+    handleRemove,
+    isUploading,
+  }
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/hooks/use-subdomain-validation.ts

@@ -1,6 +1,10 @@
 import { useEffect, useRef, useState } from 'react'
 
-export function useSubdomainValidation(subdomain: string, originalSubdomain?: string) {
+export function useSubdomainValidation(
+  subdomain: string,
+  originalSubdomain?: string,
+  isEditingExisting?: boolean
+) {
   const [isChecking, setIsChecking] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [isValid, setIsValid] = useState(false)
@@ -18,12 +22,20 @@ export function useSubdomainValidation(subdomain: string, originalSubdomain?: st
     setIsValid(false)
     setIsChecking(false)
 
-    // Skip validation if empty or same as original
+    // Skip validation if empty
     if (!subdomain.trim()) {
       return
     }
 
-    if (subdomain === originalSubdomain) {
+    // Skip validation if same as original (existing deployment)
+    if (originalSubdomain && subdomain === originalSubdomain) {
+      setIsValid(true)
+      return
+    }
+
+    // If we're editing an existing deployment but originalSubdomain isn't available yet,
+    // assume it's valid and wait for the data to load
+    if (isEditingExisting && !originalSubdomain) {
       setIsValid(true)
       return
     }
@@ -64,7 +76,7 @@ export function useSubdomainValidation(subdomain: string, originalSubdomain?: st
         clearTimeout(timeoutRef.current)
       }
     }
-  }, [subdomain, originalSubdomain])
+  }, [subdomain, originalSubdomain, isEditingExisting])
 
   return { isChecking, error, isValid }
 }