You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1286 lines
56 KiB
1286 lines
56 KiB
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { generateWorkflowId, useWorkflowStore } from "@/store/workflowStore";
|
|
import { ProviderType, ProviderSettings, NodeDefaultsConfig, LLMProvider, LLMModelType } from "@/types";
|
|
import { CanvasNavigationSettings, PanMode, ZoomMode, SelectionMode } from "@/types/canvas";
|
|
import { EnvStatusResponse } from "@/app/api/env-status/route";
|
|
import { loadNodeDefaults, saveNodeDefaults } from "@/store/utils/localStorage";
|
|
import { ProviderModel } from "@/lib/providers/types";
|
|
import { ModelSearchDialog } from "@/components/modals/ModelSearchDialog";
|
|
import { useInlineParameters } from "@/hooks/useInlineParameters";
|
|
|
|
// LLM provider and model options (mirrored from LLMGenerateNode)
|
|
const LLM_PROVIDERS: { value: LLMProvider; label: string }[] = [
|
|
{ value: "google", label: "Google" },
|
|
{ value: "openai", label: "OpenAI" },
|
|
{ value: "anthropic", label: "Anthropic" },
|
|
];
|
|
|
|
const LLM_MODELS: Record<LLMProvider, { value: LLMModelType; label: string }[]> = {
|
|
google: [
|
|
{ value: "gemini-3-flash-preview", label: "Gemini 3 Flash" },
|
|
{ value: "gemini-2.5-flash", label: "Gemini 2.5 Flash" },
|
|
{ value: "gemini-3-pro-preview", label: "Gemini 3.0 Pro" },
|
|
{ value: "gemini-3.1-pro-preview", label: "Gemini 3.1 Pro" },
|
|
],
|
|
openai: [
|
|
{ value: "gpt-4.1-mini", label: "GPT-4.1 Mini" },
|
|
{ value: "gpt-4.1-nano", label: "GPT-4.1 Nano" },
|
|
],
|
|
anthropic: [
|
|
{ value: "claude-sonnet-4.5", label: "Claude Sonnet 4.5" },
|
|
{ value: "claude-haiku-4.5", label: "Claude Haiku 4.5" },
|
|
{ value: "claude-opus-4.6", label: "Claude Opus 4.6" },
|
|
],
|
|
};
|
|
|
|
// Provider icons
|
|
const GeminiIcon = () => (
|
|
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" />
|
|
</svg>
|
|
);
|
|
|
|
const ReplicateIcon = () => (
|
|
<svg className="w-4 h-4" viewBox="0 0 1000 1000" fill="currentColor">
|
|
<polygon points="1000,427.6 1000,540.6 603.4,540.6 603.4,1000 477,1000 477,427.6" />
|
|
<polygon points="1000,213.8 1000,327 364.8,327 364.8,1000 238.4,1000 238.4,213.8" />
|
|
<polygon points="1000,0 1000,113.2 126.4,113.2 126.4,1000 0,1000 0,0" />
|
|
</svg>
|
|
);
|
|
|
|
const FalIcon = () => (
|
|
<svg className="w-4 h-4" viewBox="0 0 1855 1855" fill="currentColor">
|
|
<path fillRule="evenodd" clipRule="evenodd" d="M1181.65 78C1212.05 78 1236.42 101.947 1239.32 131.261C1265.25 392.744 1480.07 600.836 1750.02 625.948C1780.28 628.764 1805 652.366 1805 681.816V1174.18C1805 1203.63 1780.28 1227.24 1750.02 1230.05C1480.07 1255.16 1265.25 1463.26 1239.32 1724.74C1236.42 1754.05 1212.05 1778 1181.65 1778H673.354C642.951 1778 618.585 1754.05 615.678 1724.74C589.754 1463.26 374.927 1255.16 104.984 1230.05C74.7212 1227.24 50 1203.63 50 1174.18V681.816C50 652.366 74.7213 628.764 104.984 625.948C374.927 600.836 589.754 392.744 615.678 131.261C618.585 101.946 642.951 78 673.353 78H1181.65ZM402.377 926.561C402.377 1209.41 638.826 1438.71 930.501 1438.71C1222.18 1438.71 1458.63 1209.41 1458.63 926.561C1458.63 643.709 1222.18 414.412 930.501 414.412C638.826 414.412 402.377 643.709 402.377 926.561Z" />
|
|
</svg>
|
|
);
|
|
|
|
const WaveSpeedIcon = () => (
|
|
<svg className="w-4 h-4" viewBox="0 0 512 512" fill="currentColor">
|
|
<path d="M308.946 153.758C314.185 153.758 318.268 158.321 317.516 163.506C306.856 237.02 270.334 302.155 217.471 349.386C211.398 354.812 203.458 357.586 195.315 357.586H127.562C117.863 357.586 110.001 349.724 110.001 340.025V333.552C110.001 326.82 113.882 320.731 119.792 317.505C176.087 286.779 217.883 232.832 232.32 168.537C234.216 160.09 241.509 153.758 250.167 153.758H308.946Z" />
|
|
<path d="M183.573 153.758C188.576 153.758 192.592 157.94 192.069 162.916C187.11 210.12 160.549 250.886 122.45 275.151C116.916 278.676 110 274.489 110 267.928V171.318C110 161.62 117.862 153.758 127.56 153.758H183.573Z" />
|
|
<path d="M414.815 153.758C425.503 153.758 433.734 163.232 431.799 173.743C420.697 234.038 398.943 290.601 368.564 341.414C362.464 351.617 351.307 357.586 339.419 357.586H274.228C266.726 357.586 262.611 348.727 267.233 342.819C306.591 292.513 334.86 233.113 348.361 168.295C350.104 159.925 357.372 153.758 365.922 153.758H414.815Z" />
|
|
</svg>
|
|
);
|
|
|
|
// Get provider icon component
|
|
const getProviderIcon = (provider: ProviderType) => {
|
|
switch (provider) {
|
|
case "gemini":
|
|
return <GeminiIcon />;
|
|
case "replicate":
|
|
return <ReplicateIcon />;
|
|
case "fal":
|
|
return <FalIcon />;
|
|
case "wavespeed":
|
|
return <WaveSpeedIcon />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
interface ProjectSetupModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSave: (id: string, name: string, directoryPath: string) => void;
|
|
mode: "new" | "settings";
|
|
}
|
|
|
|
export function ProjectSetupModal({
|
|
isOpen,
|
|
onClose,
|
|
onSave,
|
|
mode,
|
|
}: ProjectSetupModalProps) {
|
|
const sanitizeProjectFolderName = (projectName: string): string => {
|
|
return projectName
|
|
.trim()
|
|
.replace(/[<>:"/\\|?*\x00-\x1F]/g, "_")
|
|
.replace(/\.+$/g, "")
|
|
.trim();
|
|
};
|
|
|
|
const joinPathForPlatform = (basePath: string, folderName: string): string => {
|
|
const trimmedBase = basePath.trim();
|
|
const separator = /^[A-Za-z]:[\\\/]/.test(trimmedBase) || trimmedBase.startsWith("\\\\") ? "\\" : "/";
|
|
const endsWithSeparator = trimmedBase.endsWith("/") || trimmedBase.endsWith("\\");
|
|
return `${trimmedBase}${endsWithSeparator ? "" : separator}${folderName}`;
|
|
};
|
|
|
|
const getPathBasename = (fullPath: string): string => {
|
|
const withoutTrailingSeparator = fullPath.trim().replace(/[\\/]+$/, "");
|
|
const parts = withoutTrailingSeparator.split(/[\\/]/);
|
|
return parts[parts.length - 1] || "";
|
|
};
|
|
|
|
const ensureProjectSubfolderPath = (basePath: string, projectName: string): string => {
|
|
const trimmedBase = basePath.trim();
|
|
const sanitizedFolder = sanitizeProjectFolderName(projectName);
|
|
if (!sanitizedFolder) return trimmedBase;
|
|
|
|
const basename = getPathBasename(trimmedBase);
|
|
if (basename.toLowerCase() === sanitizedFolder.toLowerCase()) {
|
|
return trimmedBase;
|
|
}
|
|
|
|
return joinPathForPlatform(trimmedBase, sanitizedFolder);
|
|
};
|
|
|
|
const {
|
|
workflowName,
|
|
saveDirectoryPath,
|
|
useExternalImageStorage,
|
|
setUseExternalImageStorage,
|
|
providerSettings,
|
|
updateProviderApiKey,
|
|
toggleProvider,
|
|
maxConcurrentCalls,
|
|
setMaxConcurrentCalls,
|
|
canvasNavigationSettings,
|
|
updateCanvasNavigationSettings,
|
|
} = useWorkflowStore();
|
|
|
|
// Inline parameters hook
|
|
const { inlineParametersEnabled, setInlineParameters } = useInlineParameters();
|
|
|
|
// Tab state
|
|
const [activeTab, setActiveTab] = useState<"project" | "providers" | "nodeDefaults" | "canvas">("project");
|
|
|
|
// Project tab state
|
|
const [name, setName] = useState("");
|
|
const [directoryPath, setDirectoryPath] = useState("");
|
|
const [externalStorage, setExternalStorage] = useState(true);
|
|
const [isValidating, setIsValidating] = useState(false);
|
|
const [isBrowsing, setIsBrowsing] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// Provider tab state
|
|
const [localProviders, setLocalProviders] = useState<ProviderSettings>(providerSettings);
|
|
const [showApiKey, setShowApiKey] = useState<Record<ProviderType, boolean>>({
|
|
gemini: false,
|
|
openai: false,
|
|
anthropic: false,
|
|
replicate: false,
|
|
fal: false,
|
|
kie: false,
|
|
wavespeed: false,
|
|
});
|
|
const [overrideActive, setOverrideActive] = useState<Record<ProviderType, boolean>>({
|
|
gemini: false,
|
|
openai: false,
|
|
anthropic: false,
|
|
replicate: false,
|
|
fal: false,
|
|
kie: false,
|
|
wavespeed: false,
|
|
});
|
|
const [envStatus, setEnvStatus] = useState<EnvStatusResponse | null>(null);
|
|
|
|
// Node defaults tab state
|
|
const [localNodeDefaults, setLocalNodeDefaults] = useState<NodeDefaultsConfig>({});
|
|
const [showImageModelDialog, setShowImageModelDialog] = useState(false);
|
|
const [showVideoModelDialog, setShowVideoModelDialog] = useState(false);
|
|
|
|
// Canvas tab state
|
|
const [localCanvasSettings, setLocalCanvasSettings] = useState<CanvasNavigationSettings>(canvasNavigationSettings);
|
|
|
|
// Pre-fill when opening in settings mode
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
// Reset to project tab when opening
|
|
if (mode === "new") {
|
|
setActiveTab("project");
|
|
}
|
|
|
|
if (mode === "settings") {
|
|
setName(workflowName || "");
|
|
setDirectoryPath(saveDirectoryPath || "");
|
|
setExternalStorage(useExternalImageStorage);
|
|
} else if (mode === "new") {
|
|
setName("");
|
|
setDirectoryPath("");
|
|
setExternalStorage(true);
|
|
}
|
|
|
|
// Sync local providers state
|
|
setLocalProviders(providerSettings);
|
|
setShowApiKey({ gemini: false, openai: false, anthropic: false, replicate: false, fal: false, kie: false, wavespeed: false });
|
|
// Initialize override as active if user already has a key set
|
|
setOverrideActive({
|
|
gemini: !!providerSettings.providers.gemini?.apiKey,
|
|
openai: !!providerSettings.providers.openai?.apiKey,
|
|
anthropic: !!providerSettings.providers.anthropic?.apiKey,
|
|
replicate: !!providerSettings.providers.replicate?.apiKey,
|
|
fal: !!providerSettings.providers.fal?.apiKey,
|
|
kie: !!providerSettings.providers.kie?.apiKey,
|
|
wavespeed: !!providerSettings.providers.wavespeed?.apiKey,
|
|
});
|
|
setError(null);
|
|
|
|
// Load node defaults
|
|
setLocalNodeDefaults(loadNodeDefaults());
|
|
setShowImageModelDialog(false);
|
|
setShowVideoModelDialog(false);
|
|
|
|
// Sync canvas settings
|
|
setLocalCanvasSettings(canvasNavigationSettings);
|
|
|
|
// Fetch env status
|
|
fetch("/api/env-status")
|
|
.then((res) => res.json())
|
|
.then((data: EnvStatusResponse) => setEnvStatus(data))
|
|
.catch(() => setEnvStatus(null));
|
|
}
|
|
}, [isOpen, mode, workflowName, saveDirectoryPath, useExternalImageStorage, providerSettings, canvasNavigationSettings]);
|
|
|
|
const handleBrowse = async () => {
|
|
setIsBrowsing(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const response = await fetch("/api/browse-directory");
|
|
const result = await response.json();
|
|
|
|
if (!result.success) {
|
|
setError(result.error || "Failed to open directory picker");
|
|
return;
|
|
}
|
|
|
|
if (result.cancelled) {
|
|
return;
|
|
}
|
|
|
|
if (result.path) {
|
|
setDirectoryPath(result.path);
|
|
}
|
|
} catch (err) {
|
|
setError(
|
|
`Failed to open directory picker: ${err instanceof Error ? err.message : "Unknown error"}`
|
|
);
|
|
} finally {
|
|
setIsBrowsing(false);
|
|
}
|
|
};
|
|
|
|
const handleSaveProject = async () => {
|
|
if (!name.trim()) {
|
|
setError("Project name is required");
|
|
return;
|
|
}
|
|
|
|
if (!directoryPath.trim()) {
|
|
setError("Project directory is required");
|
|
return;
|
|
}
|
|
|
|
const fullProjectPath = ensureProjectSubfolderPath(directoryPath, name);
|
|
|
|
if (!(fullProjectPath.startsWith("/") || /^[A-Za-z]:[\\\/]/.test(fullProjectPath) || fullProjectPath.startsWith("\\\\"))) {
|
|
setError("Project directory must be an absolute path (starting with /, a drive letter, or a UNC path)");
|
|
return;
|
|
}
|
|
|
|
setIsValidating(true);
|
|
setError(null);
|
|
|
|
try {
|
|
// Validate path shape when it already exists
|
|
const response = await fetch(
|
|
`/api/workflow?path=${encodeURIComponent(fullProjectPath)}`
|
|
);
|
|
const result = await response.json();
|
|
|
|
if (result.exists && !result.isDirectory) {
|
|
setError("Project path is not a directory");
|
|
setIsValidating(false);
|
|
return;
|
|
}
|
|
|
|
const id = mode === "new" ? generateWorkflowId() : useWorkflowStore.getState().workflowId || generateWorkflowId();
|
|
// Update external storage setting
|
|
setUseExternalImageStorage(externalStorage);
|
|
onSave(id, name.trim(), fullProjectPath);
|
|
setIsValidating(false);
|
|
} catch (err) {
|
|
setError(
|
|
`Failed to validate directory: ${err instanceof Error ? err.message : "Unknown error"}`
|
|
);
|
|
setIsValidating(false);
|
|
}
|
|
};
|
|
|
|
const handleSaveProviders = () => {
|
|
// Save each provider's settings
|
|
const providerIds: ProviderType[] = ["gemini", "openai", "anthropic", "replicate", "fal", "kie", "wavespeed"];
|
|
for (const providerId of providerIds) {
|
|
const local = localProviders.providers[providerId];
|
|
const current = providerSettings.providers[providerId];
|
|
|
|
if (!local || !current) continue;
|
|
|
|
// Update enabled state if changed
|
|
if (local.enabled !== current.enabled) {
|
|
toggleProvider(providerId, local.enabled);
|
|
}
|
|
|
|
// Update API key if changed
|
|
if (local.apiKey !== current.apiKey) {
|
|
updateProviderApiKey(providerId, local.apiKey);
|
|
}
|
|
}
|
|
onClose();
|
|
};
|
|
|
|
const handleSaveNodeDefaults = () => {
|
|
saveNodeDefaults(localNodeDefaults);
|
|
onClose();
|
|
};
|
|
|
|
const handleSaveCanvas = () => {
|
|
updateCanvasNavigationSettings(localCanvasSettings);
|
|
onClose();
|
|
};
|
|
|
|
const handleSave = () => {
|
|
if (activeTab === "project") {
|
|
handleSaveProject();
|
|
} else if (activeTab === "providers") {
|
|
handleSaveProviders();
|
|
} else if (activeTab === "canvas") {
|
|
handleSaveCanvas();
|
|
} else {
|
|
handleSaveNodeDefaults();
|
|
}
|
|
};
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === "Enter" && !isValidating && !isBrowsing) {
|
|
handleSave();
|
|
}
|
|
if (e.key === "Escape") {
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
const updateLocalProvider = (
|
|
providerId: ProviderType,
|
|
updates: { enabled?: boolean; apiKey?: string | null }
|
|
) => {
|
|
setLocalProviders((prev) => ({
|
|
providers: {
|
|
...prev.providers,
|
|
[providerId]: {
|
|
...prev.providers[providerId],
|
|
...updates,
|
|
},
|
|
},
|
|
}));
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
onWheelCapture={(e) => e.stopPropagation()}
|
|
>
|
|
<div
|
|
className="bg-neutral-800 rounded-xl w-[520px] border border-neutral-700 shadow-2xl overflow-clip flex flex-col max-h-[80vh]"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onKeyDown={handleKeyDown}
|
|
>
|
|
<div className="px-8 pt-8 pb-0 shrink-0">
|
|
<div className="flex items-center gap-2 mb-5">
|
|
<img src="/banana_icon.png" alt="" className="w-6 h-6" />
|
|
<h2 className="text-xl font-medium text-neutral-100">
|
|
{mode === "new" ? "New Project" : "Project Settings"}
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Tab Bar */}
|
|
<div className="flex gap-1.5 p-1 bg-neutral-900/50 rounded-lg">
|
|
<button
|
|
onClick={() => setActiveTab("project")}
|
|
className={`px-3 py-1.5 text-sm rounded-md transition-all duration-150 ${activeTab === "project" ? "bg-neutral-700 text-neutral-100 font-medium" : "text-neutral-400 hover:text-neutral-300 hover:bg-neutral-800/50"}`}
|
|
>
|
|
Project
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab("providers")}
|
|
className={`px-3 py-1.5 text-sm rounded-md transition-all duration-150 ${activeTab === "providers" ? "bg-neutral-700 text-neutral-100 font-medium" : "text-neutral-400 hover:text-neutral-300 hover:bg-neutral-800/50"}`}
|
|
>
|
|
Providers
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab("nodeDefaults")}
|
|
className={`px-3 py-1.5 text-sm rounded-md transition-all duration-150 ${activeTab === "nodeDefaults" ? "bg-neutral-700 text-neutral-100 font-medium" : "text-neutral-400 hover:text-neutral-300 hover:bg-neutral-800/50"}`}
|
|
>
|
|
Node Defaults
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab("canvas")}
|
|
className={`px-3 py-1.5 text-sm rounded-md transition-all duration-150 ${activeTab === "canvas" ? "bg-neutral-700 text-neutral-100 font-medium" : "text-neutral-400 hover:text-neutral-300 hover:bg-neutral-800/50"}`}
|
|
>
|
|
Canvas
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scrollable tab content area */}
|
|
<div className="flex-1 min-h-0 overflow-y-auto px-8 py-5">
|
|
|
|
{/* Project Tab Content */}
|
|
{activeTab === "project" && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm text-neutral-400 mb-1">
|
|
Project Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder="my-project"
|
|
autoFocus
|
|
className="w-full px-3 py-2 bg-neutral-900 border border-neutral-600 rounded-lg text-neutral-100 text-sm focus:outline-none focus:border-neutral-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm text-neutral-400 mb-1">
|
|
Project Directory
|
|
</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={directoryPath}
|
|
onChange={(e) => setDirectoryPath(e.target.value)}
|
|
placeholder="/Users/username/projects/my-project"
|
|
className="flex-1 px-3 py-2 bg-neutral-900 border border-neutral-600 rounded-lg text-neutral-100 text-sm focus:outline-none focus:border-neutral-500"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={handleBrowse}
|
|
disabled={isBrowsing}
|
|
className="px-3 py-2 bg-neutral-700 hover:bg-neutral-600 disabled:bg-neutral-700 disabled:opacity-50 text-neutral-200 text-sm rounded-lg transition-colors"
|
|
>
|
|
{isBrowsing ? "..." : "Browse"}
|
|
</button>
|
|
</div>
|
|
<p className="text-xs text-neutral-400 mt-1">
|
|
Workflow files and images will be saved here. Subfolders for inputs and generations will be auto-created.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="pt-2 border-t border-neutral-700">
|
|
<label className="flex items-center justify-between gap-3 cursor-pointer">
|
|
<div>
|
|
<span className="text-sm text-neutral-200">Embed images as base64</span>
|
|
<p className="text-xs text-neutral-400">
|
|
Embeds all images in workflow, larger workflow files. Can hit memory limits on very large workflows.
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={!externalStorage}
|
|
onClick={() => setExternalStorage(externalStorage ? false : true)}
|
|
className={`relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors ${!externalStorage ? "bg-blue-500" : "bg-neutral-600"}`}
|
|
>
|
|
<span className={`inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform ${!externalStorage ? "translate-x-[18px]" : "translate-x-[3px]"}`} />
|
|
</button>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="pt-2 border-t border-neutral-700">
|
|
<label className="flex items-center justify-between gap-3 cursor-pointer">
|
|
<div>
|
|
<span className="text-sm text-neutral-200">Show model settings on nodes</span>
|
|
<p className="text-xs text-neutral-400">
|
|
Show model parameters inside generation nodes instead of the side panel
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={inlineParametersEnabled}
|
|
onClick={() => setInlineParameters(!inlineParametersEnabled)}
|
|
className={`relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors ${inlineParametersEnabled ? "bg-blue-500" : "bg-neutral-600"}`}
|
|
>
|
|
<span className={`inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform ${inlineParametersEnabled ? "translate-x-[18px]" : "translate-x-[3px]"}`} />
|
|
</button>
|
|
</label>
|
|
</div>
|
|
|
|
{error && <p className="text-sm text-red-400">{error}</p>}
|
|
</div>
|
|
)}
|
|
|
|
{/* Providers Tab Content */}
|
|
{activeTab === "providers" && (
|
|
<div className="space-y-3">
|
|
{/* Gemini Provider */}
|
|
<div className="p-3 bg-neutral-900 rounded-lg border border-neutral-700">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-neutral-100">Google Gemini</span>
|
|
{envStatus?.gemini && !overrideActive.gemini ? (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-green-400">Configured via .env</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOverrideActive((prev) => ({ ...prev, gemini: true }))}
|
|
className="px-2 py-1 text-xs text-neutral-400 hover:text-neutral-200 transition-colors"
|
|
>
|
|
Override
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type={showApiKey.gemini ? "text" : "password"}
|
|
value={localProviders.providers.gemini?.apiKey || ""}
|
|
onChange={(e) => updateLocalProvider("gemini", { apiKey: e.target.value || null })}
|
|
placeholder="AIza..."
|
|
className="w-48 px-2 py-1 bg-neutral-800 border border-neutral-600 rounded-lg text-neutral-100 text-xs focus:outline-none focus:border-neutral-500"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowApiKey((prev) => ({ ...prev, gemini: !prev.gemini }))}
|
|
className="text-xs text-neutral-400 hover:text-neutral-200"
|
|
>
|
|
{showApiKey.gemini ? "Hide" : "Show"}
|
|
</button>
|
|
{envStatus?.gemini && (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setOverrideActive((prev) => ({ ...prev, gemini: false }));
|
|
updateLocalProvider("gemini", { apiKey: null });
|
|
}}
|
|
className="text-xs text-neutral-500 hover:text-neutral-300"
|
|
>
|
|
Cancel
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* OpenAI Provider */}
|
|
<div className="p-3 bg-neutral-900 rounded-lg border border-neutral-700">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-neutral-100">OpenAI</span>
|
|
{envStatus?.openai && !overrideActive.openai ? (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-green-400">Configured via .env</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOverrideActive((prev) => ({ ...prev, openai: true }))}
|
|
className="px-2 py-1 text-xs text-neutral-400 hover:text-neutral-200 transition-colors"
|
|
>
|
|
Override
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type={showApiKey.openai ? "text" : "password"}
|
|
value={localProviders.providers.openai?.apiKey || ""}
|
|
onChange={(e) => updateLocalProvider("openai", { apiKey: e.target.value || null })}
|
|
placeholder="sk-..."
|
|
className="w-48 px-2 py-1 bg-neutral-800 border border-neutral-600 rounded-lg text-neutral-100 text-xs focus:outline-none focus:border-neutral-500"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowApiKey((prev) => ({ ...prev, openai: !prev.openai }))}
|
|
className="text-xs text-neutral-400 hover:text-neutral-200"
|
|
>
|
|
{showApiKey.openai ? "Hide" : "Show"}
|
|
</button>
|
|
{envStatus?.openai && (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setOverrideActive((prev) => ({ ...prev, openai: false }));
|
|
updateLocalProvider("openai", { apiKey: null });
|
|
}}
|
|
className="text-xs text-neutral-500 hover:text-neutral-300"
|
|
>
|
|
Cancel
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Anthropic Provider */}
|
|
<div className="p-3 bg-neutral-900 rounded-lg border border-neutral-700">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-neutral-100">Anthropic</span>
|
|
{envStatus?.anthropic && !overrideActive.anthropic ? (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-green-400">Configured via .env</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOverrideActive((prev) => ({ ...prev, anthropic: true }))}
|
|
className="px-2 py-1 text-xs text-neutral-400 hover:text-neutral-200 transition-colors"
|
|
>
|
|
Override
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type={showApiKey.anthropic ? "text" : "password"}
|
|
value={localProviders.providers.anthropic?.apiKey || ""}
|
|
onChange={(e) => updateLocalProvider("anthropic", { apiKey: e.target.value || null })}
|
|
placeholder="sk-ant-..."
|
|
className="w-48 px-2 py-1 bg-neutral-800 border border-neutral-600 rounded-lg text-neutral-100 text-xs focus:outline-none focus:border-neutral-500"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowApiKey((prev) => ({ ...prev, anthropic: !prev.anthropic }))}
|
|
className="text-xs text-neutral-400 hover:text-neutral-200"
|
|
>
|
|
{showApiKey.anthropic ? "Hide" : "Show"}
|
|
</button>
|
|
{envStatus?.anthropic && (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setOverrideActive((prev) => ({ ...prev, anthropic: false }));
|
|
updateLocalProvider("anthropic", { apiKey: null });
|
|
}}
|
|
className="text-xs text-neutral-500 hover:text-neutral-300"
|
|
>
|
|
Cancel
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Replicate Provider */}
|
|
<div className="p-3 bg-neutral-900 rounded-lg border border-neutral-700">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-neutral-100">Replicate</span>
|
|
{envStatus?.replicate && !overrideActive.replicate ? (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-green-400">Configured via .env</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOverrideActive((prev) => ({ ...prev, replicate: true }))}
|
|
className="px-2 py-1 text-xs text-neutral-400 hover:text-neutral-200 transition-colors"
|
|
>
|
|
Override
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type={showApiKey.replicate ? "text" : "password"}
|
|
value={localProviders.providers.replicate?.apiKey || ""}
|
|
onChange={(e) => updateLocalProvider("replicate", { apiKey: e.target.value || null })}
|
|
placeholder="r8_..."
|
|
className="w-48 px-2 py-1 bg-neutral-800 border border-neutral-600 rounded-lg text-neutral-100 text-xs focus:outline-none focus:border-neutral-500"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowApiKey((prev) => ({ ...prev, replicate: !prev.replicate }))}
|
|
className="text-xs text-neutral-400 hover:text-neutral-200"
|
|
>
|
|
{showApiKey.replicate ? "Hide" : "Show"}
|
|
</button>
|
|
{envStatus?.replicate && (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setOverrideActive((prev) => ({ ...prev, replicate: false }));
|
|
updateLocalProvider("replicate", { apiKey: null });
|
|
}}
|
|
className="text-xs text-neutral-500 hover:text-neutral-300"
|
|
>
|
|
Cancel
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* fal.ai Provider */}
|
|
<div className="p-3 bg-neutral-900 rounded-lg border border-neutral-700">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-neutral-100">fal.ai</span>
|
|
{envStatus?.fal && !overrideActive.fal ? (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-green-400">Configured via .env</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOverrideActive((prev) => ({ ...prev, fal: true }))}
|
|
className="px-2 py-1 text-xs text-neutral-400 hover:text-neutral-200 transition-colors"
|
|
>
|
|
Override
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type={showApiKey.fal ? "text" : "password"}
|
|
value={localProviders.providers.fal?.apiKey || ""}
|
|
onChange={(e) => updateLocalProvider("fal", { apiKey: e.target.value || null })}
|
|
placeholder="..."
|
|
className="w-48 px-2 py-1 bg-neutral-800 border border-neutral-600 rounded-lg text-neutral-100 text-xs focus:outline-none focus:border-neutral-500"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowApiKey((prev) => ({ ...prev, fal: !prev.fal }))}
|
|
className="text-xs text-neutral-400 hover:text-neutral-200"
|
|
>
|
|
{showApiKey.fal ? "Hide" : "Show"}
|
|
</button>
|
|
{envStatus?.fal && (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setOverrideActive((prev) => ({ ...prev, fal: false }));
|
|
updateLocalProvider("fal", { apiKey: null });
|
|
}}
|
|
className="text-xs text-neutral-500 hover:text-neutral-300"
|
|
>
|
|
Cancel
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Kie.ai Provider */}
|
|
<div className="p-3 bg-neutral-900 rounded-lg border border-neutral-700">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-neutral-100">Kie.ai</span>
|
|
{envStatus?.kie && !overrideActive.kie ? (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-green-400">Configured via .env</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOverrideActive((prev) => ({ ...prev, kie: true }))}
|
|
className="px-2 py-1 text-xs text-neutral-400 hover:text-neutral-200 transition-colors"
|
|
>
|
|
Override
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type={showApiKey.kie ? "text" : "password"}
|
|
value={localProviders.providers.kie?.apiKey || ""}
|
|
onChange={(e) => updateLocalProvider("kie", { apiKey: e.target.value || null })}
|
|
placeholder="..."
|
|
className="w-48 px-2 py-1 bg-neutral-800 border border-neutral-600 rounded-lg text-neutral-100 text-xs focus:outline-none focus:border-neutral-500"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowApiKey((prev) => ({ ...prev, kie: !prev.kie }))}
|
|
className="text-xs text-neutral-400 hover:text-neutral-200"
|
|
>
|
|
{showApiKey.kie ? "Hide" : "Show"}
|
|
</button>
|
|
{envStatus?.kie && (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setOverrideActive((prev) => ({ ...prev, kie: false }));
|
|
updateLocalProvider("kie", { apiKey: null });
|
|
}}
|
|
className="text-xs text-neutral-500 hover:text-neutral-300"
|
|
>
|
|
Cancel
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* WaveSpeed Provider */}
|
|
<div className="p-3 bg-neutral-900 rounded-lg border border-neutral-700">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-neutral-100">WaveSpeed</span>
|
|
{envStatus?.wavespeed && !overrideActive.wavespeed ? (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-green-400">Configured via .env</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOverrideActive((prev) => ({ ...prev, wavespeed: true }))}
|
|
className="px-2 py-1 text-xs text-neutral-400 hover:text-neutral-200 transition-colors"
|
|
>
|
|
Override
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type={showApiKey.wavespeed ? "text" : "password"}
|
|
value={localProviders.providers.wavespeed?.apiKey || ""}
|
|
onChange={(e) => updateLocalProvider("wavespeed", { apiKey: e.target.value || null })}
|
|
placeholder="..."
|
|
className="w-48 px-2 py-1 bg-neutral-800 border border-neutral-600 rounded-lg text-neutral-100 text-xs focus:outline-none focus:border-neutral-500"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowApiKey((prev) => ({ ...prev, wavespeed: !prev.wavespeed }))}
|
|
className="text-xs text-neutral-400 hover:text-neutral-200"
|
|
>
|
|
{showApiKey.wavespeed ? "Hide" : "Show"}
|
|
</button>
|
|
{envStatus?.wavespeed && (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setOverrideActive((prev) => ({ ...prev, wavespeed: false }));
|
|
updateLocalProvider("wavespeed", { apiKey: null });
|
|
}}
|
|
className="text-xs text-neutral-500 hover:text-neutral-300"
|
|
>
|
|
Cancel
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-xs text-neutral-400 mt-2">
|
|
Add API keys via <code className="px-1 py-0.5 bg-neutral-800 rounded">.env.local</code> for better security. Keys added here override .env and are stored in your browser.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Node Defaults Tab Content */}
|
|
{activeTab === "nodeDefaults" && (
|
|
<div className="space-y-3">
|
|
{/* GenerateImage Section */}
|
|
<div className="p-3 bg-neutral-900 rounded-lg border border-neutral-700">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-neutral-100">Default Image Model</span>
|
|
<div className="flex items-center gap-2">
|
|
{localNodeDefaults.generateImage?.selectedModel ? (
|
|
<>
|
|
<div className="flex items-center gap-1.5 text-xs text-neutral-300">
|
|
{getProviderIcon(localNodeDefaults.generateImage.selectedModel.provider)}
|
|
<span className="truncate max-w-[150px]">
|
|
{localNodeDefaults.generateImage.selectedModel.displayName}
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowImageModelDialog(true)}
|
|
className="px-2 py-1 text-xs bg-neutral-700 hover:bg-neutral-600 text-neutral-200 rounded transition-colors"
|
|
>
|
|
Change
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
const { generateImage, ...rest } = localNodeDefaults;
|
|
setLocalNodeDefaults(rest);
|
|
}}
|
|
className="text-xs text-neutral-400 hover:text-neutral-200"
|
|
>
|
|
Clear
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="text-xs text-neutral-400">System default (Gemini nano-banana-pro)</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowImageModelDialog(true)}
|
|
className="px-2 py-1 text-xs bg-neutral-700 hover:bg-neutral-600 text-neutral-200 rounded transition-colors"
|
|
>
|
|
Select Model
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* GenerateVideo Section */}
|
|
<div className="p-3 bg-neutral-900 rounded-lg border border-neutral-700">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-neutral-100">Default Video Model</span>
|
|
<div className="flex items-center gap-2">
|
|
{localNodeDefaults.generateVideo?.selectedModel ? (
|
|
<>
|
|
<div className="flex items-center gap-1.5 text-xs text-neutral-300">
|
|
{getProviderIcon(localNodeDefaults.generateVideo.selectedModel.provider)}
|
|
<span className="truncate max-w-[150px]">
|
|
{localNodeDefaults.generateVideo.selectedModel.displayName}
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowVideoModelDialog(true)}
|
|
className="px-2 py-1 text-xs bg-neutral-700 hover:bg-neutral-600 text-neutral-200 rounded transition-colors"
|
|
>
|
|
Change
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
const { generateVideo, ...rest } = localNodeDefaults;
|
|
setLocalNodeDefaults(rest);
|
|
}}
|
|
className="text-xs text-neutral-400 hover:text-neutral-200"
|
|
>
|
|
Clear
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="text-xs text-neutral-400">None set (select on first use)</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowVideoModelDialog(true)}
|
|
className="px-2 py-1 text-xs bg-neutral-700 hover:bg-neutral-600 text-neutral-200 rounded transition-colors"
|
|
>
|
|
Select Model
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* LLM Section */}
|
|
<div className="p-3 bg-neutral-900 rounded-lg border border-neutral-700">
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-neutral-100">Default LLM Settings</span>
|
|
{localNodeDefaults.llm && (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
const { llm, ...rest } = localNodeDefaults;
|
|
setLocalNodeDefaults(rest);
|
|
}}
|
|
className="text-xs text-neutral-400 hover:text-neutral-200"
|
|
>
|
|
Clear
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{!localNodeDefaults.llm ? (
|
|
<p className="text-xs text-neutral-400">Using system defaults (Google Gemini 3 Flash)</p>
|
|
) : null}
|
|
|
|
{/* Provider dropdown */}
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-xs text-neutral-400 w-20">Provider</label>
|
|
<select
|
|
value={localNodeDefaults.llm?.provider || "google"}
|
|
onChange={(e) => {
|
|
const newProvider = e.target.value as LLMProvider;
|
|
const firstModelForProvider = LLM_MODELS[newProvider][0].value;
|
|
const currentTemp = localNodeDefaults.llm?.temperature ?? 0.7;
|
|
setLocalNodeDefaults(prev => ({
|
|
...prev,
|
|
llm: {
|
|
...prev.llm,
|
|
provider: newProvider,
|
|
model: firstModelForProvider,
|
|
// Clamp temperature for Anthropic (max 1.0)
|
|
...(newProvider === "anthropic" && currentTemp > 1 ? { temperature: 1 } : {}),
|
|
}
|
|
}));
|
|
}}
|
|
className="flex-1 px-2 py-1 text-xs bg-neutral-800 border border-neutral-600 rounded text-neutral-100 focus:outline-none focus:border-neutral-500"
|
|
>
|
|
{LLM_PROVIDERS.map((p) => (
|
|
<option key={p.value} value={p.value}>{p.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Model dropdown */}
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-xs text-neutral-400 w-20">Model</label>
|
|
<select
|
|
value={localNodeDefaults.llm?.model || LLM_MODELS[localNodeDefaults.llm?.provider || "google"][0].value}
|
|
onChange={(e) => {
|
|
setLocalNodeDefaults(prev => ({
|
|
...prev,
|
|
llm: { ...prev.llm, model: e.target.value as LLMModelType }
|
|
}));
|
|
}}
|
|
className="flex-1 px-2 py-1 text-xs bg-neutral-800 border border-neutral-600 rounded text-neutral-100 focus:outline-none focus:border-neutral-500"
|
|
>
|
|
{LLM_MODELS[localNodeDefaults.llm?.provider || "google"].map((m) => (
|
|
<option key={m.value} value={m.value}>{m.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Temperature slider */}
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-xs text-neutral-400 w-20">
|
|
Temp: {(localNodeDefaults.llm?.temperature ?? 0.7).toFixed(1)}
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max={(localNodeDefaults.llm?.provider || "google") === "anthropic" ? "1" : "2"}
|
|
step="0.1"
|
|
value={localNodeDefaults.llm?.temperature ?? 0.7}
|
|
onChange={(e) => {
|
|
setLocalNodeDefaults(prev => ({
|
|
...prev,
|
|
llm: { ...prev.llm, temperature: parseFloat(e.target.value) }
|
|
}));
|
|
}}
|
|
className="flex-1 h-1 bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-neutral-400"
|
|
/>
|
|
</div>
|
|
|
|
{/* Max Tokens slider */}
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-xs text-neutral-400 w-20">
|
|
Tokens: {(localNodeDefaults.llm?.maxTokens ?? 8192).toLocaleString()}
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min="256"
|
|
max="16384"
|
|
step="256"
|
|
value={localNodeDefaults.llm?.maxTokens ?? 8192}
|
|
onChange={(e) => {
|
|
setLocalNodeDefaults(prev => ({
|
|
...prev,
|
|
llm: { ...prev.llm, maxTokens: parseInt(e.target.value, 10) }
|
|
}));
|
|
}}
|
|
className="flex-1 h-1 bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-neutral-400"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Execution Section */}
|
|
<div className="p-3 bg-neutral-900 rounded-lg border border-neutral-700">
|
|
<div className="flex flex-col gap-3">
|
|
<span className="text-sm font-medium text-neutral-100">Execution Settings</span>
|
|
|
|
{/* Concurrency slider */}
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-xs text-neutral-400 w-32">
|
|
Max Parallel Calls: {maxConcurrentCalls}
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min="1"
|
|
max="10"
|
|
step="1"
|
|
value={maxConcurrentCalls}
|
|
onChange={(e) => setMaxConcurrentCalls(parseInt(e.target.value, 10))}
|
|
className="flex-1 h-1 bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-neutral-400"
|
|
/>
|
|
</div>
|
|
<p className="text-xs text-neutral-400">
|
|
Maximum number of nodes to execute in parallel during workflow execution.
|
|
Higher values may improve speed but increase API rate limit risk.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-xs text-neutral-400 mt-2">
|
|
These defaults are applied when creating nodes via keyboard shortcuts (Shift+G, Shift+L, etc).
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Canvas Tab Content */}
|
|
{activeTab === "canvas" && (
|
|
<div className="space-y-3">
|
|
<p className="text-xs text-neutral-400">Configure how you navigate and interact with the canvas.</p>
|
|
{/* Pan Mode */}
|
|
<div className="p-3 bg-neutral-900 rounded-lg border border-neutral-700">
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-neutral-100">Pan Mode</span>
|
|
<p className="text-xs text-neutral-400">
|
|
{localCanvasSettings.panMode === "space" && "Hold Space and drag to pan"}
|
|
{localCanvasSettings.panMode === "middleMouse" && "Click and drag with middle mouse button"}
|
|
{localCanvasSettings.panMode === "always" && "Pan without holding any keys"}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-1 p-0.5 bg-neutral-800 rounded-md">
|
|
{([
|
|
{ value: "space" as PanMode, label: "Space + Drag" },
|
|
{ value: "middleMouse" as PanMode, label: "Middle Mouse" },
|
|
{ value: "always" as PanMode, label: "Always On" },
|
|
] as const).map((option) => (
|
|
<button
|
|
key={option.value}
|
|
type="button"
|
|
onClick={() => setLocalCanvasSettings({ ...localCanvasSettings, panMode: option.value })}
|
|
className={`flex-1 px-2 py-1.5 text-xs rounded transition-all duration-150 ${
|
|
localCanvasSettings.panMode === option.value
|
|
? "bg-neutral-700 text-neutral-100 font-medium"
|
|
: "text-neutral-400 hover:text-neutral-300"
|
|
}`}
|
|
>
|
|
{option.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Zoom Mode */}
|
|
<div className="p-3 bg-neutral-900 rounded-lg border border-neutral-700">
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-neutral-100">Zoom Mode</span>
|
|
<p className="text-xs text-neutral-400">
|
|
{localCanvasSettings.zoomMode === "altScroll" && "Hold Alt and scroll to zoom"}
|
|
{localCanvasSettings.zoomMode === "ctrlScroll" && "Hold Ctrl/Cmd and scroll to zoom"}
|
|
{localCanvasSettings.zoomMode === "scroll" && "Scroll to zoom without modifier keys"}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-1 p-0.5 bg-neutral-800 rounded-md">
|
|
{([
|
|
{ value: "altScroll" as ZoomMode, label: "Alt + Scroll" },
|
|
{ value: "ctrlScroll" as ZoomMode, label: "Ctrl + Scroll" },
|
|
{ value: "scroll" as ZoomMode, label: "Scroll" },
|
|
] as const).map((option) => (
|
|
<button
|
|
key={option.value}
|
|
type="button"
|
|
onClick={() => setLocalCanvasSettings({ ...localCanvasSettings, zoomMode: option.value })}
|
|
className={`flex-1 px-2 py-1.5 text-xs rounded transition-all duration-150 ${
|
|
localCanvasSettings.zoomMode === option.value
|
|
? "bg-neutral-700 text-neutral-100 font-medium"
|
|
: "text-neutral-400 hover:text-neutral-300"
|
|
}`}
|
|
>
|
|
{option.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Selection Mode */}
|
|
<div className="p-3 bg-neutral-900 rounded-lg border border-neutral-700">
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-neutral-100">Selection Mode</span>
|
|
<p className="text-xs text-neutral-400">
|
|
{localCanvasSettings.selectionMode === "click" && "Click to select nodes"}
|
|
{localCanvasSettings.selectionMode === "altDrag" && "Hold Alt and drag to select"}
|
|
{localCanvasSettings.selectionMode === "shiftDrag" && "Hold Shift and drag to select"}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-1 p-0.5 bg-neutral-800 rounded-md">
|
|
{([
|
|
{ value: "click" as SelectionMode, label: "Click" },
|
|
{ value: "altDrag" as SelectionMode, label: "Alt + Drag" },
|
|
{ value: "shiftDrag" as SelectionMode, label: "Shift + Drag" },
|
|
] as const).map((option) => (
|
|
<button
|
|
key={option.value}
|
|
type="button"
|
|
onClick={() => setLocalCanvasSettings({ ...localCanvasSettings, selectionMode: option.value })}
|
|
className={`flex-1 px-2 py-1.5 text-xs rounded transition-all duration-150 ${
|
|
localCanvasSettings.selectionMode === option.value
|
|
? "bg-neutral-700 text-neutral-100 font-medium"
|
|
: "text-neutral-400 hover:text-neutral-300"
|
|
}`}
|
|
>
|
|
{option.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
|
|
{/* Fixed footer */}
|
|
<div className="flex justify-end gap-2 px-8 py-5 border-t border-neutral-700/50 shrink-0">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-100 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={activeTab === "project" && (isValidating || isBrowsing)}
|
|
className="px-4 py-2 text-sm bg-white text-neutral-900 rounded-lg hover:bg-neutral-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
{activeTab === "project"
|
|
? (isValidating ? "Validating..." : mode === "new" ? "Create" : "Save")
|
|
: "Save"
|
|
}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Model Selection Dialogs */}
|
|
{showImageModelDialog && (
|
|
<ModelSearchDialog
|
|
isOpen={showImageModelDialog}
|
|
onClose={() => setShowImageModelDialog(false)}
|
|
onModelSelected={(model: ProviderModel) => {
|
|
setLocalNodeDefaults(prev => ({
|
|
...prev,
|
|
generateImage: {
|
|
...prev.generateImage,
|
|
selectedModel: {
|
|
provider: model.provider,
|
|
modelId: model.id,
|
|
displayName: model.name,
|
|
}
|
|
}
|
|
}));
|
|
setShowImageModelDialog(false);
|
|
}}
|
|
initialCapabilityFilter="image"
|
|
/>
|
|
)}
|
|
{showVideoModelDialog && (
|
|
<ModelSearchDialog
|
|
isOpen={showVideoModelDialog}
|
|
onClose={() => setShowVideoModelDialog(false)}
|
|
onModelSelected={(model: ProviderModel) => {
|
|
setLocalNodeDefaults(prev => ({
|
|
...prev,
|
|
generateVideo: {
|
|
...prev.generateVideo,
|
|
selectedModel: {
|
|
provider: model.provider,
|
|
modelId: model.id,
|
|
displayName: model.name,
|
|
}
|
|
}
|
|
}));
|
|
setShowVideoModelDialog(false);
|
|
}}
|
|
initialCapabilityFilter="video"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|