Skip to content

Commit ead9e11

Browse files
berry-13berry-13
authored
🎨 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
1 parent 2a77c98 commit ead9e11

File tree

17 files changed

+79
-174
lines changed

17 files changed

+79
-174
lines changed

‎client/src/components/Endpoints/Settings/Advanced.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ export default function Settings({
146146
disabled={readonly}
147147
value={[(temperatureValue as number) ?? 1]}
148148
onValueChange={(value) => setTemperature(value[0])}
149-
doubleClickHandler={() => setTemperature(1)}
149+
onDoubleClick={() => setTemperature(1)}
150150
max={2}
151151
min={0}
152152
step={0.01}
@@ -184,7 +184,7 @@ export default function Settings({
184184
disabled={readonly}
185185
value={[(topPValue as number) ?? 1]}
186186
onValueChange={(value) => setTopP(value[0])}
187-
doubleClickHandler={() => setTopP(1)}
187+
onDoubleClick={() => setTopP(1)}
188188
max={1}
189189
min={0}
190190
step={0.01}
@@ -223,7 +223,7 @@ export default function Settings({
223223
disabled={readonly}
224224
value={[(freqPValue as number) ?? 0]}
225225
onValueChange={(value) => setFreqP(value[0])}
226-
doubleClickHandler={() => setFreqP(0)}
226+
onDoubleClick={() => setFreqP(0)}
227227
max={2}
228228
min={-2}
229229
step={0.01}
@@ -262,7 +262,7 @@ export default function Settings({
262262
disabled={readonly}
263263
value={[(presPValue as number) ?? 0]}
264264
onValueChange={(value) => setPresP(value[0])}
265-
doubleClickHandler={() => setPresP(0)}
265+
onDoubleClick={() => setPresP(0)}
266266
max={2}
267267
min={-2}
268268
step={0.01}
@@ -319,7 +319,7 @@ export default function Settings({
319319
imageDetailNumeric[imageDetail ?? ''] ?? imageDetailNumeric[ImageDetail.auto],
320320
]}
321321
onValueChange={(value) => setImageDetail(imageDetailValue[value[0]])}
322-
doubleClickHandler={() => setImageDetail(ImageDetail.auto)}
322+
onDoubleClick={() => setImageDetail(ImageDetail.auto)}
323323
max={2}
324324
min={0}
325325
step={1}

‎client/src/components/Endpoints/Settings/AgentSettings.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
7777
disabled={readonly}
7878
value={[temperature ?? 0]}
7979
onValueChange={(value: number[]) => setTemperature(value[0])}
80-
doubleClickHandler={() => setTemperature(1)}
80+
onDoubleClick={() => setTemperature(1)}
8181
max={2}
8282
min={0}
8383
step={0.01}

‎client/src/components/Endpoints/Settings/Google.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -165,14 +165,14 @@ export default function Settings({ conversation, setOption, models, readonly }:
165165
disabled={readonly}
166166
value={[temperature ?? google.temperature.default]}
167167
onValueChange={(value) => setTemperature(value[0])}
168-
doubleClickHandler={() => setTemperature(google.temperature.default)}
168+
onDoubleClick={() => setTemperature(google.temperature.default)}
169169
max={google.temperature.max}
170170
min={google.temperature.min}
171171
step={google.temperature.step}
172172
className="flex h-4 w-full"
173173
/>
174174
</HoverCardTrigger>
175-
<OptionHover endpoint={conversation?.endpoint ?? ''} type="temp" side={ESide.Left} />
175+
<OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
176176
</HoverCard>
177177
<HoverCard openDelay={300}>
178178
<HoverCardTrigger className="grid w-full items-center gap-2">
@@ -205,14 +205,14 @@ export default function Settings({ conversation, setOption, models, readonly }:
205205
disabled={readonly}
206206
value={[topP ?? google.topP.default]}
207207
onValueChange={(value) => setTopP(value[0])}
208-
doubleClickHandler={() => setTopP(google.topP.default)}
208+
onDoubleClick={() => setTopP(google.topP.default)}
209209
max={google.topP.max}
210210
min={google.topP.min}
211211
step={google.topP.step}
212212
className="flex h-4 w-full"
213213
/>
214214
</HoverCardTrigger>
215-
<OptionHover endpoint={conversation?.endpoint ?? ''} type="topp" side={ESide.Left} />
215+
<OptionHover endpoint={conversation.endpoint ?? ''} type="topp" side={ESide.Left} />
216216
</HoverCard>
217217

218218
<HoverCard openDelay={300}>
@@ -246,14 +246,14 @@ export default function Settings({ conversation, setOption, models, readonly }:
246246
disabled={readonly}
247247
value={[topK ?? google.topK.default]}
248248
onValueChange={(value) => setTopK(value[0])}
249-
doubleClickHandler={() => setTopK(google.topK.default)}
249+
onDoubleClick={() => setTopK(google.topK.default)}
250250
max={google.topK.max}
251251
min={google.topK.min}
252252
step={google.topK.step}
253253
className="flex h-4 w-full"
254254
/>
255255
</HoverCardTrigger>
256-
<OptionHover endpoint={conversation?.endpoint ?? ''} type="topk" side={ESide.Left} />
256+
<OptionHover endpoint={conversation.endpoint ?? ''} type="topk" side={ESide.Left} />
257257
</HoverCard>
258258
<HoverCard openDelay={300}>
259259
<HoverCardTrigger className="grid w-full items-center gap-2">
@@ -286,15 +286,15 @@ export default function Settings({ conversation, setOption, models, readonly }:
286286
disabled={readonly}
287287
value={[maxOutputTokens ?? google.maxOutputTokens.default]}
288288
onValueChange={(value) => setMaxOutputTokens(value[0])}
289-
doubleClickHandler={() => setMaxOutputTokens(google.maxOutputTokens.default)}
289+
onDoubleClick={() => setMaxOutputTokens(google.maxOutputTokens.default)}
290290
max={google.maxOutputTokens.max}
291291
min={google.maxOutputTokens.min}
292292
step={google.maxOutputTokens.step}
293293
className="flex h-4 w-full"
294294
/>
295295
</HoverCardTrigger>
296296
<OptionHover
297-
endpoint={conversation?.endpoint ?? ''}
297+
endpoint={conversation.endpoint ?? ''}
298298
type="maxoutputtokens"
299299
side={ESide.Left}
300300
/>

‎client/src/components/Endpoints/Settings/Plugins.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -251,14 +251,14 @@ export default function Settings({
251251
disabled={readonly}
252252
value={[temperatureValue ?? 0.8]}
253253
onValueChange={(value) => setTemperature(value[0])}
254-
doubleClickHandler={() => setTemperature(0.8)}
254+
onDoubleClick={() => setTemperature(0.8)}
255255
max={2}
256256
min={0}
257257
step={0.01}
258258
className="flex h-4 w-full"
259259
/>
260260
</HoverCardTrigger>
261-
<OptionHover endpoint={conversation?.endpoint ?? ''} type="temp" side={ESide.Left} />
261+
<OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
262262
</HoverCard>
263263
<HoverCard openDelay={300}>
264264
<HoverCardTrigger className="grid w-full items-center gap-2">
@@ -291,14 +291,14 @@ export default function Settings({
291291
disabled={readonly}
292292
value={[topPValue ?? 1]}
293293
onValueChange={(value) => setTopP(value[0])}
294-
doubleClickHandler={() => setTopP(1)}
294+
onDoubleClick={() => setTopP(1)}
295295
max={1}
296296
min={0}
297297
step={0.01}
298298
className="flex h-4 w-full"
299299
/>
300300
</HoverCardTrigger>
301-
<OptionHover endpoint={conversation?.endpoint ?? ''} type="topp" side={ESide.Left} />
301+
<OptionHover endpoint={conversation.endpoint ?? ''} type="topp" side={ESide.Left} />
302302
</HoverCard>
303303

304304
<HoverCard openDelay={300}>
@@ -332,14 +332,14 @@ export default function Settings({
332332
disabled={readonly}
333333
value={[freqPValue ?? 0]}
334334
onValueChange={(value) => setFreqP(value[0])}
335-
doubleClickHandler={() => setFreqP(0)}
335+
onDoubleClick={() => setFreqP(0)}
336336
max={2}
337337
min={-2}
338338
step={0.01}
339339
className="flex h-4 w-full"
340340
/>
341341
</HoverCardTrigger>
342-
<OptionHover endpoint={conversation?.endpoint ?? ''} type="freq" side={ESide.Left} />
342+
<OptionHover endpoint={conversation.endpoint ?? ''} type="freq" side={ESide.Left} />
343343
</HoverCard>
344344

345345
<HoverCard openDelay={300}>
@@ -373,14 +373,14 @@ export default function Settings({
373373
disabled={readonly}
374374
value={[presPValue ?? 0]}
375375
onValueChange={(value) => setPresP(value[0])}
376-
doubleClickHandler={() => setPresP(0)}
376+
onDoubleClick={() => setPresP(0)}
377377
max={2}
378378
min={-2}
379379
step={0.01}
380380
className="flex h-4 w-full"
381381
/>
382382
</HoverCardTrigger>
383-
<OptionHover endpoint={conversation?.endpoint ?? ''} type="pres" side={ESide.Left} />
383+
<OptionHover endpoint={conversation.endpoint ?? ''} type="pres" side={ESide.Left} />
384384
</HoverCard>
385385
</div>
386386
</div>

‎client/src/components/Nav/SettingsTabs/Speech/STT/AutoSendTextSelector.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function AutoSendTextSelector() {
2222
<Slider
2323
value={[autoSendText ?? -1]}
2424
onValueChange={(value) => setAutoSendText(value[0])}
25-
doubleClickHandler={() => setAutoSendText(-1)}
25+
onDoubleClick={() => setAutoSendText(-1)}
2626
min={-1}
2727
max={60}
2828
step={1}

‎client/src/components/Nav/SettingsTabs/Speech/STT/DecibelSelector.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function DecibelSelector() {
2121
<Slider
2222
value={[decibelValue ?? -45]}
2323
onValueChange={(value) => setDecibelValue(value[0])}
24-
doubleClickHandler={() => setDecibelValue(-45)}
24+
onDoubleClick={() => setDecibelValue(-45)}
2525
min={-100}
2626
max={-30}
2727
step={1}

‎client/src/components/Nav/SettingsTabs/Speech/TTS/PlaybackRate.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function DecibelSelector() {
2121
<Slider
2222
value={[playbackRate ?? 1]}
2323
onValueChange={(value) => setPlaybackRate(value[0])}
24-
doubleClickHandler={() => setPlaybackRate(null)}
24+
onDoubleClick={() => setPlaybackRate(null)}
2525
min={0.1}
2626
max={2}
2727
step={0.1}

‎client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
21
import { useMemo, useState } from 'react';
32
import { OptionTypes } from 'librechat-data-provider';
43
import type { DynamicSettingProps } from 'librechat-data-provider';

‎client/src/components/SidePanel/Parameters/DynamicInput.tsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// client/src/components/SidePanel/Parameters/DynamicInput.tsx
21
import { OptionTypes } from 'librechat-data-provider';
32
import type { DynamicSettingProps } from 'librechat-data-provider';
43
import { useLocalize, useDebouncedInput, useParameterEffects } from '~/hooks';
@@ -13,6 +12,7 @@ function DynamicInput({
1312
settingKey,
1413
defaultValue,
1514
description = '',
15+
type = 'string',
1616
columnSpan,
1717
setOption,
1818
optionType,
@@ -46,6 +46,17 @@ function DynamicInput({
4646
setInputValue: setLocalValue,
4747
});
4848

49+
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
50+
const value = e.target.value;
51+
if (type === 'number') {
52+
if (!isNaN(Number(value))) {
53+
setInputValue(e);
54+
}
55+
} else {
56+
setInputValue(e);
57+
}
58+
};
59+
4960
return (
5061
<div
5162
className={`flex flex-col items-center justify-start gap-6 ${
@@ -75,9 +86,11 @@ function DynamicInput({
7586
id={`${settingKey}-dynamic-input`}
7687
disabled={readonly}
7788
value={inputValue ?? ''}
78-
onChange={setInputValue}
89+
onChange={handleInputChange}
7990
placeholder={placeholderCode ? localize(placeholder) ?? placeholder : placeholder}
80-
className={cn(defaultTextProps, 'flex h-10 max-h-10 w-full resize-none px-3 py-2')}
91+
className={cn(
92+
'flex h-10 max-h-10 w-full resize-none border-none bg-surface-secondary px-3 py-2',
93+
)}
8194
/>
8295
</HoverCardTrigger>
8396
{description && (

‎client/src/components/SidePanel/Parameters/DynamicInputNumber.tsx

Lines changed: 0 additions & 106 deletions
This file was deleted.

0 commit comments

Comments
 (0)