Skip to content

B
bit-pm
提交 d3c1f8e3 authored 作者: Will Chen's avatar Will Chen
浏览文件
操作

clear runtime consent and settings

上级 34f06996
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 479 行增加 和 14 行删除
package-lock.json
浏览文件 @ d3c1f8e3
差异被折叠。
src/app/TitleBar.tsx
浏览文件 @ d3c1f8e3
......@@ -2,11 +2,25 @@ import { useAtom } from "jotai";
import { selectedAppIdAtom } from "@/atoms/appAtoms";
import { useLoadApps } from "@/hooks/useLoadApps";
import { useRouter } from "@tanstack/react-router";
import { useSettings } from "@/hooks/useSettings";
import { RuntimeMode } from "@/lib/schemas";
function formatRuntimeMode(runtimeMode: RuntimeMode | undefined) {
switch (runtimeMode) {
case "web-sandbox":
return "Sandbox";
case "local-node":
return "Local";
default:
return runtimeMode;
}
}
export const TitleBar = () => {
const [selectedAppId] = useAtom(selectedAppIdAtom);
const { apps } = useLoadApps();
const { navigate } = useRouter();
const { settings } = useSettings();
// Get selected app name
const selectedApp = apps.find((app) => app.id === selectedAppId);
......@@ -15,9 +29,11 @@ export const TitleBar = () => {
: "(no app selected)";
return (
<div className="z-11 w-full h-8 bg-(--sidebar) absolute top-0 left-0 app-region-drag flex items-center">
<div className="no-app-region-drag pl-24 text-sm font-medium">
{displayText}
<div className="@container z-11 w-full h-8 bg-(--sidebar) absolute top-0 left-0 app-region-drag flex items-center">
<div className="pl-24"></div>
<div className="hidden @md:block text-sm font-medium">{displayText}</div>
<div className="text-sm font-medium pl-4">
{formatRuntimeMode(settings?.runtimeMode)} runtime
</div>
<div className="flex-1 text-center text-sm font-medium">Dyad</div>
</div>
......
src/components/SetupRuntimeFlow.tsx 0 → 100644
浏览文件 @ d3c1f8e3
import { useState } 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";
interface SetupRuntimeFlowProps {
onRuntimeSelected: (mode: RuntimeMode) => Promise<void>;
}
export function SetupRuntimeFlow({ onRuntimeSelected }: SetupRuntimeFlowProps) {
const [isLoading, setIsLoading] = useState<RuntimeMode | null>(null);
const handleSelect = async (mode: RuntimeMode) => {
setIsLoading(mode);
try {
await onRuntimeSelected(mode);
// No need to setIsLoading(null) as the component will unmount on success
} catch (error) {
console.error("Failed to set runtime mode:", error);
alert(
`Error setting runtime mode: ${
error instanceof Error ? error.message : String(error)
}`
);
setIsLoading(null); // Reset loading state on error
}
};
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="w-full space-y-4">
<Button
variant="outline"
className="relative bg-(--background-lightest) w-full justify-start p-6 h-auto text-left relative"
onClick={() => handleSelect("web-sandbox")}
disabled={!!isLoading}
>
{isLoading === "web-sandbox" && (
<svg
className="animate-spin h-5 w-5 mr-3 absolute right-4 top-1/2 -translate-y-1/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>
)}
<div>
<p className="font-medium text-base">Sandboxed Runtime</p>
<p 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.
</div>
</p>
</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}
>
{isLoading === "local-node" && (
<svg
className="animate-spin h-5 w-5 mr-3 absolute right-4 top-1/2 -translate-y-1/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>
)}
<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">
<p>
Code will run using Node.js on your computer and have full
system access.
</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">
Warning: this will run AI-generated code directly on your
computer, which could put your system at risk.
</p>
</div>
</div>
</Button>
</div>
</div>
);
}
src/components/ui/toggle-group.tsx 0 → 100644
浏览文件 @ d3c1f8e3
import * as React from "react"
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
import { type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
import { toggleVariants } from "@/components/ui/toggle"
const ToggleGroupContext = React.createContext<
VariantProps<typeof toggleVariants>
>({
size: "default",
variant: "default",
})
function ToggleGroup({
className,
variant,
size,
children,
...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
VariantProps<typeof toggleVariants>) {
return (
<ToggleGroupPrimitive.Root
data-slot="toggle-group"
data-variant={variant}
data-size={size}
className={cn(
"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
className
)}
{...props}
>
<ToggleGroupContext.Provider value={{ variant, size }}>
{children}
</ToggleGroupContext.Provider>
</ToggleGroupPrimitive.Root>
)
}
function ToggleGroupItem({
className,
children,
variant,
size,
...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
VariantProps<typeof toggleVariants>) {
const context = React.useContext(ToggleGroupContext)
return (
<ToggleGroupPrimitive.Item
data-slot="toggle-group-item"
data-variant={context.variant || variant}
data-size={context.size || size}
className={cn(
toggleVariants({
variant: context.variant || variant,
size: context.size || size,
}),
"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
className
)}
{...props}
>
{children}
</ToggleGroupPrimitive.Item>
)
}
export { ToggleGroup, ToggleGroupItem }
src/components/ui/toggle.tsx 0 → 100644
浏览文件 @ d3c1f8e3
"use client"
import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const toggleVariants = cva(
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
{
variants: {
variant: {
default: "bg-transparent",
outline:
"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
},
size: {
default: "h-9 px-2 min-w-9",
sm: "h-8 px-1.5 min-w-8",
lg: "h-10 px-2.5 min-w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
function Toggle({
className,
variant,
size,
...props
}: React.ComponentProps<typeof TogglePrimitive.Root> &
VariantProps<typeof toggleVariants>) {
return (
<TogglePrimitive.Root
data-slot="toggle"
className={cn(toggleVariants({ variant, size, className }))}
{...props}
/>
)
}
export { Toggle, toggleVariants }
src/ipc/ipc_types.ts
浏览文件 @ d3c1f8e3
......@@ -24,7 +24,6 @@ export interface ChatResponseEnd {
export interface CreateAppParams {
name: string;
path: string;
}
export interface CreateAppResult {
......
src/lib/schemas.ts
浏览文件 @ d3c1f8e3
......@@ -61,12 +61,16 @@ export const ProviderSettingSchema = z.object({
*/
export type ProviderSetting = z.infer<typeof ProviderSettingSchema>;
export const RuntimeModeSchema = z.enum(["web-sandbox", "local-node", "unset"]);
export type RuntimeMode = z.infer<typeof RuntimeModeSchema>;
/**
* Zod schema for user settings
*/
export const UserSettingsSchema = z.object({
selectedModel: LargeLanguageModelSchema,
providerSettings: z.record(z.string(), ProviderSettingSchema),
runtimeMode: RuntimeModeSchema,
});
/**
......
src/main/settings.ts
浏览文件 @ d3c1f8e3
......@@ -9,6 +9,7 @@ const DEFAULT_SETTINGS: UserSettings = {
provider: "auto",
},
providerSettings: {},
runtimeMode: "unset",
};
const SETTINGS_FILE = "user-settings.json";
......
src/pages/home.tsx
浏览文件 @ d3c1f8e3
import { useNavigate, useSearch } from "@tanstack/react-router";
import { useAtom, useSetAtom } from "jotai";
import { chatInputValueAtom } from "../atoms/chatAtoms";
import { selectedAppIdAtom, appsListAtom } from "@/atoms/appAtoms";
import { selectedAppIdAtom } from "@/atoms/appAtoms";
import { IpcClient } from "@/ipc/ipc_client";
import { generateCuteAppName } from "@/lib/utils";
import { useLoadApps } from "@/hooks/useLoadApps";
......@@ -11,15 +11,16 @@ import { ChatInput } from "@/components/chat/ChatInput";
import { isPreviewOpenAtom } from "@/atoms/viewAtoms";
import { useState, useEffect } from "react";
import { useStreamChat } from "@/hooks/useStreamChat";
import { SetupRuntimeFlow } from "@/components/SetupRuntimeFlow";
import { RuntimeMode } from "@/lib/schemas";
export default function HomePage() {
const [inputValue, setInputValue] = useAtom(chatInputValueAtom);
const navigate = useNavigate();
const search = useSearch({ from: "/" });
const [appsList] = useAtom(appsListAtom);
const setSelectedAppId = useSetAtom(selectedAppIdAtom);
const { refreshApps } = useLoadApps();
const { isAnyProviderSetup } = useSettings();
const { settings, isAnyProviderSetup, updateSettings } = useSettings();
const setIsPreviewOpen = useSetAtom(isPreviewOpenAtom);
const [isLoading, setIsLoading] = useState(false);
const { streamMessage } = useStreamChat();
......@@ -34,6 +35,10 @@ export default function HomePage() {
}
}, [appId, navigate]);
const handleSetRuntimeMode = async (mode: RuntimeMode) => {
await updateSettings({ runtimeMode: mode });
};
const handleSubmit = async () => {
if (!inputValue.trim()) return;
......@@ -42,33 +47,33 @@ export default function HomePage() {
// Create the chat and navigate
const result = await IpcClient.getInstance().createApp({
name: generateCuteAppName(),
path: "./apps/foo",
});
// Add a 2-second timeout *after* the streamMessage call
// This makes the loading UI feel less janky.
// Stream the message
streamMessage({ prompt: inputValue, chatId: result.chatId });
await new Promise((resolve) => setTimeout(resolve, 2000));
setInputValue("");
setSelectedAppId(result.app.id);
setIsPreviewOpen(false);
refreshApps();
await refreshApps(); // Ensure refreshApps is awaited if it's async
navigate({ to: "/chat", search: { id: result.chatId } });
} catch (error) {
console.error("Failed to create chat:", error);
setIsLoading(false);
setIsLoading(false); // Ensure loading state is reset on error
}
// No finally block needed for setIsLoading(false) here if navigation happens on success
};
// Loading overlay
// Loading overlay for app creation
if (isLoading) {
return (
<div className="flex flex-col items-center justify-center max-w-3xl m-auto p-8">
<div className="w-full flex flex-col items-center">
{/* Loading Spinner */}
<div className="relative w-24 h-24 mb-8">
<div className="absolute top-0 left-0 w-full h-full border-8 border-gray-200 dark:border-gray-700 rounded-full"></div>
<div className="absolute top-0 left-0 w-full h-full border-8 border-t-(--primary) rounded-full animate-spin"></div>
<div className="absolute top-0 left-0 w-full h-full border-8 border-t-primary rounded-full animate-spin"></div>
</div>
<h2 className="text-2xl font-bold mb-2 text-gray-800 dark:text-gray-200">
Building your app
......@@ -82,6 +87,13 @@ export default function HomePage() {
);
}
// Runtime Setup Flow
// Render this only if runtimeMode is not set in settings
if (settings?.runtimeMode === "unset") {
return <SetupRuntimeFlow onRuntimeSelected={handleSetRuntimeMode} />;
}
// Main Home Page Content (Rendered only if runtimeMode is set)
return (
<div className="flex flex-col items-center justify-center max-w-3xl m-auto p-8">
<h1 className="text-6xl font-bold mb-12 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400 tracking-tight">
......
src/pages/settings.tsx
浏览文件 @ d3c1f8e3
......@@ -4,11 +4,110 @@ import { ProviderSettingsGrid } from "@/components/ProviderSettings";
import ConfirmationDialog from "@/components/ConfirmationDialog";
import { IpcClient } from "@/ipc/ipc_client";
import { showSuccess, showError } from "@/lib/toast";
import { useSettings } from "@/hooks/useSettings";
import { RuntimeMode } from "@/lib/schemas";
// Helper component for runtime option buttons
function RuntimeOptionButton({
title,
description,
badge,
warning,
isSelected,
isLoading,
onClick,
disabled,
}: {
title: string;
description: string;
badge?: string;
warning?: string;
isSelected: boolean;
isLoading: boolean;
onClick: () => void;
disabled: boolean;
}) {
return (
<button
onClick={onClick}
disabled={disabled || isSelected}
className={`w-full justify-start p-6 h-auto text-left relative rounded-lg border transition-colors duration-150 group
${
isSelected
? "border-blue-500 dark:border-blue-400 bg-blue-50 dark:bg-gray-700 ring-2 ring-blue-300 dark:ring-blue-600"
: "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50"
}
${
disabled && !isSelected
? "opacity-50 cursor-not-allowed"
: "cursor-pointer"
}
`}
>
{isLoading && (
<div className="absolute right-4 top-1/2 -translate-y-1/2">
{/* Inline SVG Spinner */}
<svg
className="animate-spin h-5 w-5 text-gray-500 dark:text-gray-400"
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>
</div>
)}
{badge && (
<span className="absolute top-2 right-2 bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded-full group-hover:bg-blue-200 dark:group-hover:bg-blue-900">
{badge}
</span>
)}
<div>
<p
className={`font-medium text-base ${
isSelected
? "text-blue-800 dark:text-blue-100"
: "text-gray-900 dark:text-white"
}`}
>
{title}
</p>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
{description}
</p>
{warning && (
<p className="mt-2 text-wrap break-word text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900 px-2 py-1 rounded-md text-xs">
{warning}
</p>
)}
</div>
</button>
);
}
export default function SettingsPage() {
const { theme, setTheme } = useTheme();
const {
settings,
updateSettings,
loading: settingsLoading,
error: settingsError,
} = useSettings();
const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
const [isResetting, setIsResetting] = useState(false);
const [isUpdatingRuntime, setIsUpdatingRuntime] = useState(false);
const handleResetEverything = async () => {
setIsResetting(true);
......@@ -31,6 +130,29 @@ export default function SettingsPage() {
}
};
const handleRuntimeChange = async (newMode: RuntimeMode) => {
if (newMode === settings?.runtimeMode || isUpdatingRuntime) return;
setIsUpdatingRuntime(true);
try {
await updateSettings({ runtimeMode: newMode });
showSuccess("Runtime mode updated successfully.");
} catch (error) {
console.error("Error updating runtime mode:", error);
showError(
error instanceof Error
? error.message
: "Failed to update runtime mode."
);
} finally {
setIsUpdatingRuntime(false);
}
};
const currentRuntimeMode =
settings?.runtimeMode && settings.runtimeMode !== "unset"
? settings.runtimeMode
: "web-sandbox";
return (
<div className="min-h-screen p-8">
<div className="max-w-5xl mx-auto">
......@@ -73,6 +195,72 @@ export default function SettingsPage() {
</div>
</div>
{/* Runtime Environment Section */}
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
<h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
Runtime Environment
</h2>
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
Choose how app code is executed. This affects performance and
security.
</p>
{settingsLoading ? (
<div className="flex items-center justify-center h-24">
{/* Inline SVG Spinner */}
<svg
className="animate-spin h-8 w-8 text-gray-500 dark:text-gray-400"
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>
</div>
) : settingsError ? (
<p className="text-red-500 text-center">
Error loading runtime settings: {settingsError.message}
</p>
) : (
<div className="space-y-4">
<RuntimeOptionButton
title="Sandboxed Runtime"
description="Code runs inside a browser sandbox. Safer, limited system access."
badge="Recommended for beginners"
isSelected={currentRuntimeMode === "web-sandbox"}
isLoading={
isUpdatingRuntime && currentRuntimeMode !== "web-sandbox"
}
onClick={() => handleRuntimeChange("web-sandbox")}
disabled={isUpdatingRuntime}
/>
<RuntimeOptionButton
title="Local Node.js Runtime"
description="Code runs using Node.js on your computer. Full system access."
warning="Warning: Running AI-generated code directly on your computer can be risky. Only use code from trusted sources."
isSelected={currentRuntimeMode === "local-node"}
isLoading={
isUpdatingRuntime && currentRuntimeMode !== "local-node"
}
onClick={() => handleRuntimeChange("local-node")}
disabled={isUpdatingRuntime}
/>
</div>
)}
</div>
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
<ProviderSettingsGrid configuredProviders={[]} />
</div>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论