feat(webui): registry editor context-window/output/temperature fields + advanced section
This commit is contained in:
m4
@@ -245,6 +245,7 @@ function ModelEditor({
|
||||
const [expanded, setExpanded] = useState(
|
||||
() => availabilityFor(data, ref) === null
|
||||
);
|
||||
const [showAdvanced, setShowAdvanced] = useState(false);
|
||||
const capability = (key: "tools" | "vision" | "structured_output") => {
|
||||
const protocolAllows = spec?.protocol_capabilities[key] !== false;
|
||||
return (
|
||||
@@ -350,6 +351,52 @@ function ModelEditor({
|
||||
</Field>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||
<NumberField
|
||||
label="Context window"
|
||||
value={runtime.context_window_tokens}
|
||||
nullable
|
||||
onChange={(value) => setRuntime({ context_window_tokens: value })}
|
||||
/>
|
||||
<NumberField
|
||||
label="Max output tokens"
|
||||
value={runtime.max_output_tokens}
|
||||
rule={rule("max_output_tokens")}
|
||||
onChange={(value) =>
|
||||
setRuntime({ max_output_tokens: value ?? runtime.max_output_tokens })
|
||||
}
|
||||
/>
|
||||
<NumberField
|
||||
label={rule("temperature")?.supported === false ? "Temperature (unsupported)" : "Temperature"}
|
||||
value={runtime.temperature}
|
||||
nullable
|
||||
rule={rule("temperature")}
|
||||
onChange={(value) => setRuntime({ temperature: value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
Capabilities
|
||||
</span>
|
||||
{capability("tools")}
|
||||
{capability("vision")}
|
||||
{capability("structured_output")}
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded={showAdvanced}
|
||||
className="flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setShowAdvanced((current) => !current)}
|
||||
>
|
||||
{showAdvanced ? (
|
||||
<ChevronDown className="size-3.5" aria-hidden="true" />
|
||||
) : (
|
||||
<ChevronRight className="size-3.5" aria-hidden="true" />
|
||||
)}
|
||||
Advanced
|
||||
</button>
|
||||
{showAdvanced && (
|
||||
<div className="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||
<Field label="Limit mode">
|
||||
<select
|
||||
className={inputClass}
|
||||
@@ -364,26 +411,12 @@ function ModelEditor({
|
||||
<option value="input_only">input_only</option>
|
||||
</select>
|
||||
</Field>
|
||||
<NumberField
|
||||
label="Context window"
|
||||
value={runtime.context_window_tokens}
|
||||
nullable
|
||||
onChange={(value) => setRuntime({ context_window_tokens: value })}
|
||||
/>
|
||||
<NumberField
|
||||
label="Max input tokens"
|
||||
value={runtime.max_input_tokens}
|
||||
nullable
|
||||
onChange={(value) => setRuntime({ max_input_tokens: value })}
|
||||
/>
|
||||
<NumberField
|
||||
label="Max output tokens"
|
||||
value={runtime.max_output_tokens}
|
||||
rule={rule("max_output_tokens")}
|
||||
onChange={(value) =>
|
||||
setRuntime({ max_output_tokens: value ?? runtime.max_output_tokens })
|
||||
}
|
||||
/>
|
||||
<NumberField
|
||||
label="Min effective input"
|
||||
value={runtime.min_effective_input_tokens}
|
||||
@@ -448,13 +481,6 @@ function ModelEditor({
|
||||
<option value="tested_contract">tested contract</option>
|
||||
</select>
|
||||
</Field>
|
||||
<NumberField
|
||||
label={rule("temperature")?.supported === false ? "Temperature (unsupported)" : "Temperature"}
|
||||
value={runtime.temperature}
|
||||
nullable
|
||||
rule={rule("temperature")}
|
||||
onChange={(value) => setRuntime({ temperature: value })}
|
||||
/>
|
||||
<NumberField
|
||||
label="Top p"
|
||||
value={runtime.top_p}
|
||||
@@ -493,13 +519,7 @@ function ModelEditor({
|
||||
</select>
|
||||
</Field>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
Capabilities
|
||||
</span>
|
||||
{capability("tools")}
|
||||
{capability("vision")}
|
||||
{capability("structured_output")}
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
@@ -562,6 +582,8 @@ function ProviderEditor({
|
||||
const spec = adapterSpecFor(data.adapter_specs, provider.adapter);
|
||||
const authModes = supportedAuthModes(spec);
|
||||
const credentialStatus = credentialStatusFor(data, provider.auth.credential_id);
|
||||
const [showSecret, setShowSecret] = useState(false);
|
||||
const [showAdvanced, setShowAdvanced] = useState(false);
|
||||
const setRuntime = (patch: Partial<ProviderConfig["runtime"]>) =>
|
||||
onChange({ ...provider, runtime: { ...provider.runtime, ...patch } });
|
||||
|
||||
@@ -690,50 +712,67 @@ function ProviderEditor({
|
||||
</select>
|
||||
</Field>
|
||||
{provider.auth.mode !== "none" && (
|
||||
<>
|
||||
<Field
|
||||
label="Credential id"
|
||||
hint={
|
||||
credentialStatus?.configured
|
||||
? `configured${credentialStatus.hint ? ` (${credentialStatus.hint})` : ""}`
|
||||
: "not configured"
|
||||
}
|
||||
>
|
||||
<Field
|
||||
label="API Key"
|
||||
hint={
|
||||
stagedCredential
|
||||
? "staged — will be saved with the registry"
|
||||
: credentialStatus?.configured
|
||||
? `configured${credentialStatus.hint ? ` (${credentialStatus.hint})` : ""} — leave blank to keep`
|
||||
: "paste your API key"
|
||||
}
|
||||
>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
className={inputClass}
|
||||
value={provider.auth.credential_id ?? ""}
|
||||
onChange={(event) =>
|
||||
onChange({
|
||||
...provider,
|
||||
auth: { ...provider.auth, credential_id: event.target.value || null },
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label="Secret (write-once)"
|
||||
hint={
|
||||
stagedCredential
|
||||
? "staged — saved with the registry"
|
||||
: "leave blank to keep the current secret"
|
||||
}
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
className={inputClass}
|
||||
type={showSecret ? "text" : "password"}
|
||||
className={`${inputClass} pr-8`}
|
||||
value={stagedCredential ?? ""}
|
||||
autoComplete="new-password"
|
||||
onChange={(event) =>
|
||||
provider.auth.credential_id &&
|
||||
onCredentialStage(provider.auth.credential_id, event.target.value)
|
||||
placeholder={
|
||||
credentialStatus?.configured
|
||||
? (credentialStatus.hint ?? "configured")
|
||||
: "sk-..."
|
||||
}
|
||||
onChange={(event) => {
|
||||
const credentialId =
|
||||
provider.auth.credential_id ?? `${provider.id}-credential`;
|
||||
if (!provider.auth.credential_id) {
|
||||
onChange({
|
||||
...provider,
|
||||
auth: { ...provider.auth, credential_id: credentialId },
|
||||
});
|
||||
}
|
||||
onCredentialStage(credentialId, event.target.value);
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
</>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={showSecret ? "Hide API key" : "Show API key"}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setShowSecret((current) => !current)}
|
||||
>
|
||||
{showSecret ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</Field>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded={showAdvanced}
|
||||
className="flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setShowAdvanced((current) => !current)}
|
||||
>
|
||||
{showAdvanced ? (
|
||||
<ChevronDown className="size-3.5" aria-hidden="true" />
|
||||
) : (
|
||||
<ChevronRight className="size-3.5" aria-hidden="true" />
|
||||
)}
|
||||
Advanced
|
||||
</button>
|
||||
{showAdvanced && (
|
||||
<div className="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||
<NumberField
|
||||
label="Timeout (s)"
|
||||
value={provider.runtime.timeout_seconds}
|
||||
@@ -779,6 +818,8 @@ function ProviderEditor({
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
|
||||
Reference in New Issue
Block a user