feat: add one-click netlify deployment

app/components/header/HeaderActionButtons.client.tsx

@@ -1,21 +1,186 @@
 import { useStore } from '@nanostores/react';
+import { toast } from 'react-toastify';
 import useViewport from '~/lib/hooks';
 import { chatStore } from '~/lib/stores/chat';
+import { netlifyConnection } from '~/lib/stores/netlify';
 import { workbenchStore } from '~/lib/stores/workbench';
+import { webcontainer } from '~/lib/webcontainer';
 import { classNames } from '~/utils/classNames';
+import { path } from '~/utils/path';
+import { useState } from 'react';
+import type { ActionCallbackData } from '~/lib/runtime/message-parser';
 
 interface HeaderActionButtonsProps {}
 
 export function HeaderActionButtons({}: HeaderActionButtonsProps) {
   const showWorkbench = useStore(workbenchStore.showWorkbench);
   const { showChat } = useStore(chatStore);
-
+  const connection = useStore(netlifyConnection);
+  const [activePreviewIndex, setActivePreviewIndex] = useState(0);
+  const previews = useStore(workbenchStore.previews);
+  const activePreview = previews[activePreviewIndex];
+  const [isDeploying, setIsDeploying] = useState(false);
   const isSmallViewport = useViewport(1024);
-
   const canHideChat = showWorkbench || !showChat;
 
+  const handleDeploy = async () => {
+    if (!connection.user || !connection.token) {
+      toast.error('Please connect to Netlify first');
+      return;
+    }
+
+    try {
+      setIsDeploying(true);
+      const artifact = workbenchStore.firstArtifact;
+      
+      if (!artifact) {
+        throw new Error('No active project found');
+      }
+
+      const actionId = 'build-' + Date.now();
+      const actionData: ActionCallbackData = {
+        messageId: "netlify build",
+        artifactId: artifact.id,
+        actionId,
+        action: {
+          type: 'build' as const,
+          content: 'npm run build',
+        }
+      };
+
+      // Add the action first
+      artifact.runner.addAction(actionData);
+      
+      // Then run it
+      await artifact.runner.runAction(actionData);
+
+      if (!artifact.runner.buildOutput) {
+        throw new Error('Build failed');
+      }
+
+      // Get the build files
+      const container = await webcontainer;
+      // Remove /home/project from buildPath if it exists
+      const buildPath = artifact.runner.buildOutput.path.replace('/home/project', '');
+      // Get all files recursively
+      async function getAllFiles(dirPath: string): Promise<Record<string, string>> {
+        const files: Record<string, string> = {};
+        const entries = await container.fs.readdir(dirPath, { withFileTypes: true });
+        
+        for (const entry of entries) {
+          const fullPath = path.join(dirPath, entry.name);
+          if (entry.isFile()) {
+            const content = await container.fs.readFile(fullPath, 'utf-8');
+            // Remove /dist prefix from the path
+            const deployPath = fullPath.replace(buildPath, '');
+            files[deployPath] = content;
+          } else if (entry.isDirectory()) {
+            const subFiles = await getAllFiles(fullPath);
+            Object.assign(files, subFiles);
+          }
+        }
+        
+        return files;
+      }
+
+      const fileContents = await getAllFiles(buildPath);
+      const existingSiteId = localStorage.getItem(`netlify-site-${artifact.id}`);
+
+      // Deploy using the API route with file contents
+      const response = await fetch('/api/deploy', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          siteId: existingSiteId || undefined,
+          files: fileContents,
+          token: connection.token,
+          chatId: artifact.id
+        }),
+      });
+
+      const data = await response.json() as any;
+      
+      if (!response.ok || !data.deploy || !data.site) {
+        console.error('Invalid deploy response:', data);
+        throw new Error(data.error || 'Invalid deployment response');
+      }
+
+      // Poll for deployment status
+      const maxAttempts = 20; // 2 minutes timeout
+      let attempts = 0;
+      let deploymentStatus;
+
+      while (attempts < maxAttempts) {
+        try {
+          const statusResponse = await fetch(`https://api.netlify.com/api/v1/sites/${data.site.id}/deploys/${data.deploy.id}`, {
+            headers: {
+              'Authorization': `Bearer ${connection.token}`,
+            },
+          });
+          
+          deploymentStatus = await statusResponse.json() as any;
+          
+          if (deploymentStatus.state === 'ready' || deploymentStatus.state === 'uploaded') {
+            break;
+          }
+          
+          if (deploymentStatus.state === 'error') {
+            throw new Error('Deployment failed: ' + (deploymentStatus.error_message || 'Unknown error'));
+          }
+          
+          attempts++;
+          await new Promise(resolve => setTimeout(resolve, 1000));
+        } catch (error) {
+          console.error('Status check error:', error);
+          attempts++;
+          await new Promise(resolve => setTimeout(resolve, 2000));
+        }
+      }
+
+      if (attempts >= maxAttempts) {
+        throw new Error('Deployment timed out');
+      }
+      
+      // Store the site ID if it's a new site
+      if (data.site) {
+        localStorage.setItem(`netlify-site-${artifact.id}`, data.site.id);
+      }
+
+      toast.success(
+        <div>
+          Deployed successfully!{' '}
+          <a 
+            href={deploymentStatus.ssl_url || deploymentStatus.url} 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="underline"
+          >
+            View site
+          </a>
+        </div>
+      );
+    } catch (error) {
+      console.error('Deploy error:', error);
+      toast.error(error instanceof Error ? error.message : 'Deployment failed');
+    } finally {
+      setIsDeploying(false);
+    }
+  };
+
   return (
     <div className="flex">
+      <div className="flex border border-bolt-elements-borderColor rounded-md overflow-hidden mr-2 text-sm">
+        <Button 
+          active 
+          disabled={isDeploying || !activePreview}
+          onClick={handleDeploy}
+          className='px-4 hover:bg-bolt-elements-item-backgroundActive'
+        >
+          {isDeploying ? 'Deploying...' : 'Deploy'}
+        </Button>
+      </div>
       <div className="flex border border-bolt-elements-borderColor rounded-md overflow-hidden">
         <Button
           active={showChat}
@@ -51,9 +216,10 @@ interface ButtonProps {
   disabled?: boolean;
   children?: any;
   onClick?: VoidFunction;
+  className?: string;
 }
 
-function Button({ active = false, disabled = false, children, onClick }: ButtonProps) {
+function Button({ active = false, disabled = false, children, onClick, className }: ButtonProps) {
   return (
     <button
       className={classNames('flex items-center p-1.5', {
@@ -62,7 +228,9 @@ function Button({ active = false, disabled = false, children, onClick }: ButtonP
         'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': active && !disabled,
         'bg-bolt-elements-item-backgroundDefault text-alpha-gray-20 dark:text-alpha-white-20 cursor-not-allowed':
           disabled,
-      })}
+      },
+      className
+    )}
       onClick={onClick}
     >
       {children}