🎨 style: parameters panel update (#4780)

* 🔧 refactor: replace doubleClickHandler with onDoubleClick in slider components

* 🔧 refactor: consolidate DynamicInput and DynamicInputNumber components into a single DynamicInput component; fix: UI crashing when typing a character instead of number in max context/output tokens

* 🔧 style: update component styles to use bg-surface-secondary and bg-surface-tertiary for improved UI consistency
This commit is contained in:
Marco Beretta 2024-11-23 01:10:03 +01:00 committed by GitHub
parent 2a77c98f51
commit ead9e11134
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 79 additions and 174 deletions

View file

@ -146,7 +146,7 @@ export default function Settings({
disabled={readonly}
value={[(temperatureValue as number) ?? 1]}
onValueChange={(value) => setTemperature(value[0])}
doubleClickHandler={() => setTemperature(1)}
onDoubleClick={() => setTemperature(1)}
max={2}
min={0}
step={0.01}
@ -184,7 +184,7 @@ export default function Settings({
disabled={readonly}
value={[(topPValue as number) ?? 1]}
onValueChange={(value) => setTopP(value[0])}
doubleClickHandler={() => setTopP(1)}
onDoubleClick={() => setTopP(1)}
max={1}
min={0}
step={0.01}
@ -223,7 +223,7 @@ export default function Settings({
disabled={readonly}
value={[(freqPValue as number) ?? 0]}
onValueChange={(value) => setFreqP(value[0])}
doubleClickHandler={() => setFreqP(0)}
onDoubleClick={() => setFreqP(0)}
max={2}
min={-2}
step={0.01}
@ -262,7 +262,7 @@ export default function Settings({
disabled={readonly}
value={[(presPValue as number) ?? 0]}
onValueChange={(value) => setPresP(value[0])}
doubleClickHandler={() => setPresP(0)}
onDoubleClick={() => setPresP(0)}
max={2}
min={-2}
step={0.01}
@ -319,7 +319,7 @@ export default function Settings({
imageDetailNumeric[imageDetail ?? ''] ?? imageDetailNumeric[ImageDetail.auto],
]}
onValueChange={(value) => setImageDetail(imageDetailValue[value[0]])}
doubleClickHandler={() => setImageDetail(ImageDetail.auto)}
onDoubleClick={() => setImageDetail(ImageDetail.auto)}
max={2}
min={0}
step={1}

View file

@ -77,7 +77,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
disabled={readonly}
value={[temperature ?? 0]}
onValueChange={(value: number[]) => setTemperature(value[0])}
doubleClickHandler={() => setTemperature(1)}
onDoubleClick={() => setTemperature(1)}
max={2}
min={0}
step={0.01}

View file

@ -165,14 +165,14 @@ export default function Settings({ conversation, setOption, models, readonly }:
disabled={readonly}
value={[temperature ?? google.temperature.default]}
onValueChange={(value) => setTemperature(value[0])}
doubleClickHandler={() => setTemperature(google.temperature.default)}
onDoubleClick={() => setTemperature(google.temperature.default)}
max={google.temperature.max}
min={google.temperature.min}
step={google.temperature.step}
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation?.endpoint ?? ''} type="temp" side={ESide.Left} />
<OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
</HoverCard>
<HoverCard openDelay={300}>
<HoverCardTrigger className="grid w-full items-center gap-2">
@ -205,14 +205,14 @@ export default function Settings({ conversation, setOption, models, readonly }:
disabled={readonly}
value={[topP ?? google.topP.default]}
onValueChange={(value) => setTopP(value[0])}
doubleClickHandler={() => setTopP(google.topP.default)}
onDoubleClick={() => setTopP(google.topP.default)}
max={google.topP.max}
min={google.topP.min}
step={google.topP.step}
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation?.endpoint ?? ''} type="topp" side={ESide.Left} />
<OptionHover endpoint={conversation.endpoint ?? ''} type="topp" side={ESide.Left} />
</HoverCard>
<HoverCard openDelay={300}>
@ -246,14 +246,14 @@ export default function Settings({ conversation, setOption, models, readonly }:
disabled={readonly}
value={[topK ?? google.topK.default]}
onValueChange={(value) => setTopK(value[0])}
doubleClickHandler={() => setTopK(google.topK.default)}
onDoubleClick={() => setTopK(google.topK.default)}
max={google.topK.max}
min={google.topK.min}
step={google.topK.step}
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation?.endpoint ?? ''} type="topk" side={ESide.Left} />
<OptionHover endpoint={conversation.endpoint ?? ''} type="topk" side={ESide.Left} />
</HoverCard>
<HoverCard openDelay={300}>
<HoverCardTrigger className="grid w-full items-center gap-2">
@ -286,7 +286,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
disabled={readonly}
value={[maxOutputTokens ?? google.maxOutputTokens.default]}
onValueChange={(value) => setMaxOutputTokens(value[0])}
doubleClickHandler={() => setMaxOutputTokens(google.maxOutputTokens.default)}
onDoubleClick={() => setMaxOutputTokens(google.maxOutputTokens.default)}
max={google.maxOutputTokens.max}
min={google.maxOutputTokens.min}
step={google.maxOutputTokens.step}
@ -294,7 +294,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
/>
</HoverCardTrigger>
<OptionHover
endpoint={conversation?.endpoint ?? ''}
endpoint={conversation.endpoint ?? ''}
type="maxoutputtokens"
side={ESide.Left}
/>

View file

@ -251,14 +251,14 @@ export default function Settings({
disabled={readonly}
value={[temperatureValue ?? 0.8]}
onValueChange={(value) => setTemperature(value[0])}
doubleClickHandler={() => setTemperature(0.8)}
onDoubleClick={() => setTemperature(0.8)}
max={2}
min={0}
step={0.01}
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation?.endpoint ?? ''} type="temp" side={ESide.Left} />
<OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
</HoverCard>
<HoverCard openDelay={300}>
<HoverCardTrigger className="grid w-full items-center gap-2">
@ -291,14 +291,14 @@ export default function Settings({
disabled={readonly}
value={[topPValue ?? 1]}
onValueChange={(value) => setTopP(value[0])}
doubleClickHandler={() => setTopP(1)}
onDoubleClick={() => setTopP(1)}
max={1}
min={0}
step={0.01}
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation?.endpoint ?? ''} type="topp" side={ESide.Left} />
<OptionHover endpoint={conversation.endpoint ?? ''} type="topp" side={ESide.Left} />
</HoverCard>
<HoverCard openDelay={300}>
@ -332,14 +332,14 @@ export default function Settings({
disabled={readonly}
value={[freqPValue ?? 0]}
onValueChange={(value) => setFreqP(value[0])}
doubleClickHandler={() => setFreqP(0)}
onDoubleClick={() => setFreqP(0)}
max={2}
min={-2}
step={0.01}
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation?.endpoint ?? ''} type="freq" side={ESide.Left} />
<OptionHover endpoint={conversation.endpoint ?? ''} type="freq" side={ESide.Left} />
</HoverCard>
<HoverCard openDelay={300}>
@ -373,14 +373,14 @@ export default function Settings({
disabled={readonly}
value={[presPValue ?? 0]}
onValueChange={(value) => setPresP(value[0])}
doubleClickHandler={() => setPresP(0)}
onDoubleClick={() => setPresP(0)}
max={2}
min={-2}
step={0.01}
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation?.endpoint ?? ''} type="pres" side={ESide.Left} />
<OptionHover endpoint={conversation.endpoint ?? ''} type="pres" side={ESide.Left} />
</HoverCard>
</div>
</div>