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

[waleedlatif1]

Description

added new image upload component, fixed some state issues with success view

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Tested manually

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added tests that prove my fix is effective or that my feature works
• All tests pass locally and in CI (bun run test)
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules
• I have updated version numbers as needed (if needed)
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Security Considerations:

• My changes do not introduce any new security vulnerabilities
• I have considered the security implications of my changes

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sim	🔄 Building (Inspect)	Visit Preview	💬 Add feedback	Aug 1, 2025 7:43pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
docs	⬜️ Skipped (Inspect)			Aug 1, 2025 7:43pm

[greptile-apps]

Greptile Summary

This PR adds image upload functionality to chat deployments and fixes state management issues in the success view. The changes introduce a new ImageUpload component that provides drag-and-drop file handling, validation, and cloud storage integration through both presigned URLs and fallback server uploads. The component supports Azure Blob Storage and AWS S3 with proper security configuration via Next.js remotePatterns.

The chat deployment flow has been enhanced with image customization capabilities, allowing users to upload logos for their deployed chat interfaces. The deployment schema and API integration now support an optional imageUrl parameter. State management improvements include better handling of existing chat edits through an isEditingExisting flag that optimizes subdomain validation, and enhanced success view interactions with hidden trigger buttons that enable proper communication between modal footer buttons and form components.

Additional changes include removal of verbose logging statements from Ollama provider utilities and store methods, and proper export organization for the new hooks and components. The implementation follows established patterns in the codebase while adding comprehensive error handling and loading states for the new image upload workflow.

Confidence score: 3/5

• This PR introduces significant new functionality with potential architectural concerns around component coupling
• Score reflects complex state management changes and a problematic deeply nested import path that violates established patterns
• Pay close attention to the ImageUpload component's import path and the DOM querying pattern in deploy-modal.tsx

Context used:

Context - Use established path alias patterns instead of deeply nested relative import paths. (link)

_{13 files reviewed, 7 comments}

_{Edit Code Review Bot Settings | Greptile}

[greptile-apps]

logic: This optimistic validation could lead to a race condition. If originalSubdomain loads after the user has already changed the subdomain, this early return might prevent proper validation of the new value.

[greptile-apps]

style: Consider grouping the optional parameters into an options object for better maintainability as the function signature grows.

Context Used: Context - Group optional parameters into an options object for better maintainability when defining functions or methods. (link)

[greptile-apps]

style: Consider using path alias instead of deeply nested relative import

Context Used: Context - Use established path alias patterns instead of deeply nested relative import paths. (link)

[greptile-apps]

style: Type assertion to unknown bypasses TypeScript safety. Consider defining proper event type

Context Used: Context - Avoid using type assertions to 'any' in TypeScript. Instead, ensure proper type definitions are used to maintain type safety. (link)

[greptile-apps]

logic: Redundant condition - displayUrl is already falsy-checked on line 128

Suggested change

	) : displayUrl ? (
	) : (

[greptile-apps]

logic: No error handling if presignedData.uploadUrl or presignedData.fileInfo.path are missing from response

Suggested change

	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
	}
	if (presignedResponse.ok) {
	// Use direct upload with presigned URL
	const presignedData = await presignedResponse.json()
	// Validate required fields in presigned response
	if (!presignedData.uploadUrl || !presignedData.fileInfo?.path) {
	throw new Error('Invalid presigned response: missing uploadUrl or fileInfo.path')
	}
	// 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
	}

[greptile-apps]

style: Creates object URL but doesn't immediately clean up previous one when file changes

Suggested change

	const previewUrl = URL.createObjectURL(file)
	setPreviewUrl(previewUrl)
	previewRef.current = previewUrl
	// Clean up previous preview URL to prevent memory leaks
	if (previewRef.current) {
	URL.revokeObjectURL(previewRef.current)
	}
	const previewUrl = URL.createObjectURL(file)
	setPreviewUrl(previewUrl)
	previewRef.current = previewUrl