Browse Source

refactor: remove collapsible toggle from ModelParameters

Always display parameters inline instead of behind a collapsible
"Parameters" header. The toggle added unnecessary interaction cost.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
handoff-20260429-1057
shrimbly 5 months ago
parent
commit
d2b5202505
  1. 57
      src/components/nodes/ModelParameters.tsx

57
src/components/nodes/ModelParameters.tsx

@ -65,7 +65,6 @@ export function ModelParameters({
const [schema, setSchema] = useState<ModelParameter[]>([]); const [schema, setSchema] = useState<ModelParameter[]>([]);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [isExpanded, setIsExpanded] = useState(true);
// Use stable selector for API keys to prevent unnecessary re-fetches // Use stable selector for API keys to prevent unnecessary re-fetches
const { replicateApiKey, falApiKey, kieApiKey, wavespeedApiKey } = useProviderApiKeys(); const { replicateApiKey, falApiKey, kieApiKey, wavespeedApiKey } = useProviderApiKeys();
@ -139,12 +138,12 @@ export function ModelParameters({
fetchSchema(); fetchSchema();
}, [modelId, provider, replicateApiKey, falApiKey, kieApiKey, wavespeedApiKey, onInputsLoaded]); }, [modelId, provider, replicateApiKey, falApiKey, kieApiKey, wavespeedApiKey, onInputsLoaded]);
// Notify parent to resize node when schema loads and panel is expanded // Notify parent to resize node when schema loads
useEffect(() => { useEffect(() => {
if (isExpanded && schema.length > 0 && onExpandChange) { if (schema.length > 0 && onExpandChange) {
onExpandChange(true, schema.length); onExpandChange(true, schema.length);
} }
}, [schema, isExpanded, onExpandChange]); }, [schema, onExpandChange]);
const handleParameterChange = useCallback( const handleParameterChange = useCallback(
(name: string, value: unknown) => { (name: string, value: unknown) => {
@ -174,53 +173,7 @@ export function ModelParameters({
} }
return ( return (
<div className="shrink-0"> <div className="shrink-0 space-y-1.5">
{/* Collapsible header */}
<button
onClick={() => {
const newExpanded = !isExpanded;
setIsExpanded(newExpanded);
onExpandChange?.(newExpanded, schema.length);
}}
className="w-full flex items-center justify-between text-[10px] text-neutral-400 hover:text-neutral-300 transition-colors py-0.5"
>
<span className="flex items-center gap-1">
<svg
className={`w-2.5 h-2.5 transition-transform ${isExpanded ? "rotate-90" : ""}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
</svg>
Parameters
{Object.keys(parameters).length > 0 && (
<span className="text-neutral-500">({Object.keys(parameters).length})</span>
)}
</span>
{isLoading && (
<svg className="w-2.5 h-2.5 animate-spin" fill="none" viewBox="0 0 24 24">
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="3"
/>
<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"
/>
</svg>
)}
</button>
{/* Parameter inputs (when expanded) */}
{isExpanded && (
<div className="mt-1 space-y-1.5">
{error ? ( {error ? (
<span className="text-[9px] text-red-400">{error}</span> <span className="text-[9px] text-red-400">{error}</span>
) : isLoading ? ( ) : isLoading ? (
@ -238,8 +191,6 @@ export function ModelParameters({
)) ))
)} )}
</div> </div>
)}
</div>
); );
} }

Loading…
Cancel
Save