fix(ui): add number input for sliders, use textarea for text inputs

- Allow typing numbers directly in slider inputs
- Use textarea for text parameters like say_text
This commit is contained in:
2026-04-01 19:20:42 -04:00
parent 74b5507769
commit cf21a27995
@@ -917,12 +917,13 @@ const ParameterEditor = React.memo(function ParameterEditor({
if (param.type === "text") { if (param.type === "text") {
control = ( control = (
<Input <textarea
value={(localValue as string) ?? ""} value={(localValue as string) ?? ""}
placeholder={param.placeholder} placeholder={param.placeholder}
onChange={(e) => handleUpdate(e.target.value)} onChange={(e) => handleUpdate(e.target.value)}
onBlur={handleCommit} onBlur={handleCommit}
className="mt-1 h-7 w-full text-xs" rows={3}
className="mt-1 w-full rounded-md border border-input bg-transparent px-3 py-2 text-xs shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
/> />
); );
} else if (param.type === "select") { } else if (param.type === "select") {
@@ -982,14 +983,24 @@ const ParameterEditor = React.memo(function ParameterEditor({
max={max} max={max}
step={step} step={step}
value={[Number(numericVal)]} value={[Number(numericVal)]}
onValueChange={(vals) => setLocalValue(vals[0])} // Update only local visual onValueChange={(vals) => setLocalValue(vals[0])}
onPointerUp={() => handleUpdate(localValue)} // Commit on release onPointerUp={() => handleUpdate(localValue)}
/>
<Input
type="number"
value={Number(numericVal)}
min={min}
max={max}
step={step}
onChange={(e) => {
const v = parseFloat(e.target.value);
if (!isNaN(v)) {
setLocalValue(Math.max(min, Math.min(max, v)));
}
}}
onBlur={handleCommit}
className="h-7 w-16 text-xs tabular-nums"
/> />
<span className="text-muted-foreground min-w-[2.5rem] text-right text-[10px] tabular-nums">
{step < 1
? Number(numericVal).toFixed(2)
: Number(numericVal).toString()}
</span>
</div> </div>
<div className="text-muted-foreground mt-1 flex justify-between text-[10px]"> <div className="text-muted-foreground mt-1 flex justify-between text-[10px]">
<span>{min}</span> <span>{min}</span>