mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-09-22 06:00:56 +02:00
feat: range number input in options.
This commit is contained in:
Wentao Lyu
parent
0bc2db08c7
commit
4b373ebc0e
4 changed files with 97 additions and 63 deletions
|
|
@ -43,6 +43,7 @@
|
|||
"export-from-json": "^1.7.2",
|
||||
"lodash": "^4.17.21",
|
||||
"lucide-react": "^0.113.0",
|
||||
"rc-input-number": "^7.4.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-lazy-load": "^4.0.1",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import SelectDropdown from '../../ui/SelectDropdown';
|
|||
import { Input } from '~/components/ui/Input.tsx';
|
||||
import { Label } from '~/components/ui/Label.tsx';
|
||||
import { Slider } from '~/components/ui/Slider.tsx';
|
||||
import { InputNumber } from '~/components/ui/InputNumber.tsx';
|
||||
// import { InputNumber } from '../../ui/InputNumber';
|
||||
import OptionHover from './OptionHover';
|
||||
import { HoverCard, HoverCardTrigger } from '~/components/ui/HoverCard.tsx';
|
||||
|
|
@ -19,7 +20,7 @@ import store from '~/store';
|
|||
|
||||
function Settings(props) {
|
||||
const { readonly, model, chatGptLabel, promptPrefix, temperature, topP, freqP, presP, setOption } = props;
|
||||
|
||||
console.log(props);
|
||||
const endpointsConfig = useRecoilValue(store.endpointsConfig);
|
||||
|
||||
const setModel = setOption('model');
|
||||
|
|
@ -120,19 +121,26 @@ function Settings(props) {
|
|||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="flex justify-between">
|
||||
<Label
|
||||
htmlFor="chatGptLabel"
|
||||
htmlFor="temp-int"
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
Temperature <small className="opacity-40">(default: 1)</small>
|
||||
</Label>
|
||||
<Input
|
||||
<InputNumber
|
||||
id="temp-int"
|
||||
disabled
|
||||
disabled={readonly}
|
||||
value={temperature}
|
||||
onChange={e => setTemperature(e.target.value)}
|
||||
onChange={value => setTemperature(value)}
|
||||
max={2}
|
||||
min={0}
|
||||
step={0.01}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(optionText, 'h-auto w-12 border-0 group-hover/temp:border-gray-200')
|
||||
cn(
|
||||
optionText,
|
||||
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
|
||||
)
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -192,19 +200,26 @@ function Settings(props) {
|
|||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="flex justify-between">
|
||||
<Label
|
||||
htmlFor="chatGptLabel"
|
||||
htmlFor="top-p-int"
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
Top P <small className="opacity-40">(default: 1)</small>
|
||||
</Label>
|
||||
<Input
|
||||
<InputNumber
|
||||
id="top-p-int"
|
||||
disabled
|
||||
disabled={readonly}
|
||||
value={topP}
|
||||
onChange={e => setTopP(e.target.value)}
|
||||
onChange={value => setTopP(value)}
|
||||
max={1}
|
||||
min={0}
|
||||
step={0.01}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(optionText, 'h-auto w-12 border-0 group-hover/temp:border-gray-200')
|
||||
cn(
|
||||
optionText,
|
||||
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
|
||||
)
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -228,19 +243,26 @@ function Settings(props) {
|
|||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="flex justify-between">
|
||||
<Label
|
||||
htmlFor="chatGptLabel"
|
||||
htmlFor="freq-penalty-int"
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
Frequency Penalty <small className="opacity-40">(default: 0)</small>
|
||||
</Label>
|
||||
<Input
|
||||
<InputNumber
|
||||
id="freq-penalty-int"
|
||||
disabled
|
||||
disabled={readonly}
|
||||
value={freqP}
|
||||
onChange={e => setFreqP(e.target.value)}
|
||||
onChange={value => setFreqP(value)}
|
||||
max={2}
|
||||
min={-2}
|
||||
step={0.01}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(optionText, 'h-auto w-12 border-0 group-hover/temp:border-gray-200')
|
||||
cn(
|
||||
optionText,
|
||||
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
|
||||
)
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -264,19 +286,26 @@ function Settings(props) {
|
|||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="flex justify-between">
|
||||
<Label
|
||||
htmlFor="chatGptLabel"
|
||||
htmlFor="pres-penalty-int"
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
Presence Penalty <small className="opacity-40">(default: 0)</small>
|
||||
</Label>
|
||||
<Input
|
||||
<InputNumber
|
||||
id="pres-penalty-int"
|
||||
disabled
|
||||
disabled={readonly}
|
||||
value={presP}
|
||||
onChange={e => setPresP(e.target.value)}
|
||||
max={2}
|
||||
min={-2}
|
||||
step={0.01}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(optionText, 'h-auto w-12 border-0 group-hover/temp:border-gray-200')
|
||||
cn(
|
||||
optionText,
|
||||
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
|
||||
)
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
|
||||
// import * as InputNumberPrimitive from 'rc-input-number';
|
||||
|
||||
import { cn } from '../../utils/index.jsx';
|
||||
|
||||
// TODO help needed
|
||||
// const _InputNumber = React.forwardRef< React.ElementRef<typeof InputNumber>, InputNumberPrimitive.InputNumberProps>(
|
||||
// ({ className, ...props }, ref) => {
|
||||
// return (
|
||||
// <InputNumber
|
||||
// className={cn(
|
||||
// "flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
|
||||
// className
|
||||
// )}
|
||||
// ref={ref}
|
||||
// {...props}
|
||||
// />
|
||||
// )
|
||||
// }
|
||||
// )
|
||||
// _InputNumber.displayName = "Input"
|
||||
|
||||
// console.log(_InputNumber);
|
||||
|
||||
const InputNumber = React.forwardRef(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<NumericFormat
|
||||
className={cn(
|
||||
'flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900',
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
export { InputNumber };
|
||||
47
client/src/components/ui/InputNumber.tsx
Normal file
47
client/src/components/ui/InputNumber.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
// import { NumericFormat } from 'react-number-format';
|
||||
|
||||
import RCInputNumber from 'rc-input-number';
|
||||
import * as InputNumberPrimitive from 'rc-input-number';
|
||||
|
||||
import { cn } from '../../utils/index.jsx';
|
||||
|
||||
// TODO help needed
|
||||
// React.ElementRef<typeof LabelPrimitive.Root>,
|
||||
// React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
|
||||
|
||||
const InputNumber = React.forwardRef< React.ElementRef<typeof RCInputNumber>, InputNumberPrimitive.InputNumberProps>(
|
||||
({ className, ...props }, ref) => {
|
||||
return (
|
||||
<RCInputNumber
|
||||
className={cn(
|
||||
"flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
InputNumber.displayName = "Input"
|
||||
|
||||
// console.log(_InputNumber);
|
||||
|
||||
// const InputNumber = React.forwardRef(({ className, ...props }, ref) => {
|
||||
// return (
|
||||
// <NumericFormat
|
||||
// className={cn(
|
||||
// 'flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900',
|
||||
// className
|
||||
// )}
|
||||
// ref={ref}
|
||||
// {...props}
|
||||
// />
|
||||
// );
|
||||
// });
|
||||
|
||||
export { InputNumber };
|
||||
Loading…
Add table
Add a link
Reference in a new issue