Update setup/settings flow for runtime
This commit is contained in:
Will Chen
@@ -1,21 +1,48 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { IpcClient } from "@/ipc/ipc_client";
|
||||
import { useSettings } from "@/hooks/useSettings"; // Assuming useSettings provides a refresh function
|
||||
import { RuntimeMode } from "@/lib/schemas";
|
||||
import { ExternalLink } from "lucide-react";
|
||||
|
||||
interface SetupRuntimeFlowProps {
|
||||
onRuntimeSelected: (mode: RuntimeMode) => Promise<void>;
|
||||
hideIntroText?: boolean;
|
||||
}
|
||||
|
||||
export function SetupRuntimeFlow({ onRuntimeSelected }: SetupRuntimeFlowProps) {
|
||||
const [isLoading, setIsLoading] = useState<RuntimeMode | null>(null);
|
||||
export function SetupRuntimeFlow({ hideIntroText }: SetupRuntimeFlowProps) {
|
||||
const [isLoading, setIsLoading] = useState<RuntimeMode | "check" | null>(
|
||||
null
|
||||
);
|
||||
const [showNodeInstallPrompt, setShowNodeInstallPrompt] = useState(false);
|
||||
const [nodeVersion, setNodeVersion] = useState<string | null>(null);
|
||||
const [npmVersion, setNpmVersion] = useState<string | null>(null);
|
||||
const [downloadClicked, setDownloadClicked] = useState(false);
|
||||
const { updateSettings } = useSettings();
|
||||
|
||||
// Pre-check Node.js status on component mount (optional but good UX)
|
||||
useEffect(() => {
|
||||
const checkNode = async () => {
|
||||
try {
|
||||
const status = await IpcClient.getInstance().getNodejsStatus();
|
||||
setNodeVersion(status.nodeVersion);
|
||||
setNpmVersion(status.npmVersion);
|
||||
} catch (error) {
|
||||
console.error("Failed to check Node.js status:", error);
|
||||
// Assume not installed if check fails
|
||||
setNodeVersion(null);
|
||||
setNpmVersion(null);
|
||||
}
|
||||
};
|
||||
checkNode();
|
||||
}, []);
|
||||
|
||||
const handleSelect = async (mode: RuntimeMode) => {
|
||||
if (isLoading) return; // Prevent double clicks
|
||||
|
||||
setIsLoading(mode);
|
||||
try {
|
||||
await onRuntimeSelected(mode);
|
||||
// No need to setIsLoading(null) as the component will unmount on success
|
||||
await updateSettings({ runtimeMode: mode });
|
||||
// Component likely unmounts on success
|
||||
} catch (error) {
|
||||
console.error("Failed to set runtime mode:", error);
|
||||
alert(
|
||||
@@ -27,18 +54,45 @@ export function SetupRuntimeFlow({ onRuntimeSelected }: SetupRuntimeFlowProps) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleLocalNodeClick = async () => {
|
||||
if (isLoading) return;
|
||||
|
||||
setIsLoading("check");
|
||||
try {
|
||||
if (nodeVersion && npmVersion) {
|
||||
// Node and npm found, proceed directly
|
||||
handleSelect("local-node");
|
||||
} else {
|
||||
// Node or npm not found, show prompt
|
||||
setShowNodeInstallPrompt(true);
|
||||
setIsLoading(null);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to check Node.js status on click:", error);
|
||||
// Show prompt if check fails
|
||||
setShowNodeInstallPrompt(true);
|
||||
setIsLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center max-w-2xl m-auto p-8">
|
||||
<h1 className="text-4xl font-bold mb-4 text-center">Welcome to Dyad</h1>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 mb-10 text-center">
|
||||
You can start building apps with AI in a moment, but first pick how you
|
||||
want to run these apps. You can always change your mind later.
|
||||
</p>
|
||||
<div className="flex flex-col items-center justify-center max-w-2xl m-auto p-6">
|
||||
{!hideIntroText && (
|
||||
<>
|
||||
<h1 className="text-4xl font-bold mb-2 text-center">
|
||||
Welcome to Dyad
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 mb-6 text-center">
|
||||
Before you start building, choose how your apps will run. <br />
|
||||
Don’t worry — you can change this later anytime.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="w-full space-y-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="relative bg-(--background-lightest) w-full justify-start p-6 h-auto text-left relative"
|
||||
className="relative bg-(--background-lightest) w-full justify-start p-4 h-auto text-left relative"
|
||||
onClick={() => handleSelect("web-sandbox")}
|
||||
disabled={!!isLoading}
|
||||
>
|
||||
@@ -65,27 +119,29 @@ export function SetupRuntimeFlow({ onRuntimeSelected }: SetupRuntimeFlowProps) {
|
||||
</svg>
|
||||
)}
|
||||
<div>
|
||||
<p className="font-medium text-base">Sandboxed Runtime</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
<p className="font-medium text-base">Sandboxed Mode</p>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
<div>
|
||||
<span className="absolute top-4 right-2 bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded-full">
|
||||
Recommended for beginners
|
||||
</span>
|
||||
Code will run inside a browser sandbox.
|
||||
<p>Apps run in a protected environment within your browser.</p>
|
||||
<p>Does not support advanced apps.</p>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="bg-(--background-lightest) w-full justify-start p-6 h-auto text-left relative"
|
||||
onClick={() => handleSelect("local-node")}
|
||||
disabled={!!isLoading}
|
||||
className="bg-(--background-lightest) w-full justify-start p-4 h-auto text-left relative flex flex-col items-start"
|
||||
onClick={handleLocalNodeClick}
|
||||
disabled={isLoading === "web-sandbox" || isLoading === "local-node"}
|
||||
style={{ height: "auto" }} // Ensure height adjusts
|
||||
>
|
||||
{isLoading === "local-node" && (
|
||||
{isLoading === "check" || isLoading === "local-node" ? (
|
||||
<svg
|
||||
className="animate-spin h-5 w-5 mr-3 absolute right-4 top-1/2 -translate-y-1/2"
|
||||
className="animate-spin h-5 w-5 mr-3 absolute right-4 top-6" // Adjust position
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
@@ -104,17 +160,97 @@ export function SetupRuntimeFlow({ onRuntimeSelected }: SetupRuntimeFlowProps) {
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
)}
|
||||
<div>
|
||||
<p className="font-medium text-base">Local Node.js Runtime</p>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
) : null}
|
||||
<div className="w-full">
|
||||
<p className="font-medium text-base">Full Access Mode</p>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1 w-full">
|
||||
<p>
|
||||
Code will run using Node.js on your computer and have full
|
||||
system access.
|
||||
<span className="absolute top-4 right-2 bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded-full">
|
||||
Best for power users
|
||||
</span>
|
||||
<p>
|
||||
Apps run directly on your computer with full access to your
|
||||
system.
|
||||
</p>
|
||||
<p>
|
||||
Supports advanced apps that require server-side capabilities.
|
||||
</p>
|
||||
</p>
|
||||
<p className=" mt-2 text-wrap wrap-break-word text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900 px-2 py-1 rounded-md">
|
||||
|
||||
{showNodeInstallPrompt && (
|
||||
<div className="mt-4 p-4 border border-yellow-300 bg-yellow-50 dark:bg-yellow-900/30 rounded-md text-yellow-800 dark:text-yellow-200 w-full">
|
||||
<p className="font-semibold">Install Node.js</p>
|
||||
<p className="mt-1">
|
||||
This mode requires Node.js to be installed.
|
||||
</p>
|
||||
{downloadClicked ? (
|
||||
<div
|
||||
className="text-blue-400 cursor-pointer flex items-center"
|
||||
onClick={() => {
|
||||
IpcClient.getInstance().openExternalUrl(
|
||||
"https://nodejs.org/en/download#:~:text=Or%20get%20a%20prebuilt%20Node.js"
|
||||
);
|
||||
setDownloadClicked(true);
|
||||
}}
|
||||
>
|
||||
Download Node.js
|
||||
<ExternalLink className="w-3 h-3 ml-1" />
|
||||
</div>
|
||||
) : null}
|
||||
{!downloadClicked ? (
|
||||
<Button
|
||||
size="sm"
|
||||
className=" mt-3 w-full inline-flex items-center justify-center"
|
||||
onClick={() => {
|
||||
IpcClient.getInstance().openExternalUrl(
|
||||
"https://nodejs.org/en/download#:~:text=Or%20get%20a%20prebuilt%20Node.js"
|
||||
);
|
||||
setDownloadClicked(true);
|
||||
}}
|
||||
>
|
||||
Download Node.js <ExternalLink className="w-3 h-3 ml-1" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
className="mt-3 w-full"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation(); // Prevent outer button click
|
||||
handleSelect("local-node"); // Proceed with selection
|
||||
}}
|
||||
disabled={isLoading === "local-node"} // Disable while processing selection
|
||||
>
|
||||
{isLoading === "local-node" ? (
|
||||
<svg
|
||||
className="animate-spin h-4 w-4 mr-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
) : null}
|
||||
Continue - I installed Node.js
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="mt-4 text-wrap break-words text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/50 px-2 py-1 rounded-md">
|
||||
Warning: this will run AI-generated code directly on your
|
||||
computer, which could put your system at risk.
|
||||
computer, which could put your computer at risk.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user