mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 00:40:14 +01:00
update more button and misc. styling
This commit is contained in:
Daniel Avila
parent
92dbdcaaa2
commit
404566c1fb
2 changed files with 213 additions and 226 deletions
|
|
@ -6,8 +6,7 @@ import { Slider } from '~/components/ui/Slider.tsx';
|
||||||
import OptionHover from './OptionHover';
|
import OptionHover from './OptionHover';
|
||||||
import {
|
import {
|
||||||
HoverCard,
|
HoverCard,
|
||||||
HoverCardTrigger
|
HoverCardTrigger,
|
||||||
// HoverCardContent,
|
|
||||||
} from '~/components/ui/HoverCard.tsx';
|
} from '~/components/ui/HoverCard.tsx';
|
||||||
import { cn } from '~/utils/';
|
import { cn } from '~/utils/';
|
||||||
const defaultTextProps =
|
const defaultTextProps =
|
||||||
|
|
@ -26,230 +25,214 @@ function Settings() {
|
||||||
const [presP, setPresP] = useState(0);
|
const [presP, setPresP] = useState(0);
|
||||||
const textareaRef = useRef(null);
|
const textareaRef = useRef(null);
|
||||||
const inputRef = useRef(null);
|
const inputRef = useRef(null);
|
||||||
//
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
{/* <DialogDescription className="text-gray-600 dark:text-gray-300">
|
<div className="grid gap-4 py-4 px-5">
|
||||||
Note: important instructions are often better placed in your message rather than the prefix.{' '}
|
<div className="grid grid-cols-4 items-center gap-4">
|
||||||
<a
|
<Label
|
||||||
href="https://platform.openai.com/docs/guides/chat/instructing-chat-models"
|
htmlFor="chatGptLabel"
|
||||||
target="_blank"
|
className="text-right"
|
||||||
rel="noopener noreferrer"
|
>
|
||||||
>
|
Custom Name
|
||||||
<u>More info here</u>
|
</Label>
|
||||||
</a>
|
<Input
|
||||||
</DialogDescription> */}
|
id="chatGptLabel"
|
||||||
<>
|
value={chatGptLabel}
|
||||||
<div className="grid gap-4 py-4">
|
ref={inputRef}
|
||||||
<div className="grid grid-cols-4 items-center gap-4">
|
onChange={e => setChatGptLabel(e.target.value)}
|
||||||
<Label
|
placeholder="Set a custom name for ChatGPT"
|
||||||
htmlFor="chatGptLabel"
|
className=" col-span-3 shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 dark:bg-gray-700
|
||||||
className="text-right"
|
|
||||||
>
|
|
||||||
Custom Name
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="chatGptLabel"
|
|
||||||
value={chatGptLabel}
|
|
||||||
ref={inputRef}
|
|
||||||
onChange={e => setChatGptLabel(e.target.value)}
|
|
||||||
placeholder="Set a custom name for ChatGPT"
|
|
||||||
className=" col-span-3 shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 dark:bg-gray-700
|
|
||||||
dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]"
|
dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label
|
||||||
|
htmlFor="promptPrefix"
|
||||||
|
className="text-right"
|
||||||
|
>
|
||||||
|
Prompt Prefix
|
||||||
|
</Label>
|
||||||
|
<TextareaAutosize
|
||||||
|
id="promptPrefix"
|
||||||
|
value={promptPrefix}
|
||||||
|
onChange={e => setPromptPrefix(e.target.value)}
|
||||||
|
placeholder="Set custom instructions. Defaults to: 'You are ChatGPT, a large language model trained by OpenAI.'"
|
||||||
|
className={cn(defaultTextProps, 'col-span-3 flex h-10 max-h-10 w-full resize-none px-3 py-2 ')}
|
||||||
|
onFocus={() => {
|
||||||
|
textareaRef.current.classList.remove('max-h-10');
|
||||||
|
textareaRef.current.classList.add('max-h-52');
|
||||||
|
}}
|
||||||
|
onBlur={() => {
|
||||||
|
textareaRef.current.classList.remove('max-h-52');
|
||||||
|
textareaRef.current.classList.add('max-h-10');
|
||||||
|
}}
|
||||||
|
ref={textareaRef}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-around">
|
||||||
|
<HoverCard>
|
||||||
|
<HoverCardTrigger className="group/temp mr-4 flex w-full items-center justify-end gap-4">
|
||||||
|
<Label
|
||||||
|
htmlFor="temperature"
|
||||||
|
className="mr-2 text-right"
|
||||||
|
>
|
||||||
|
Temperature
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="temp-int"
|
||||||
|
value={temperature}
|
||||||
|
onChange={e => setTemperature(e.target.value)}
|
||||||
|
className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/temp:border-gray-200'))}
|
||||||
|
/>
|
||||||
|
</HoverCardTrigger>
|
||||||
|
<OptionHover
|
||||||
|
type="temp"
|
||||||
|
side="right"
|
||||||
/>
|
/>
|
||||||
</div>
|
</HoverCard>
|
||||||
<div className="grid grid-cols-4 items-center gap-4">
|
<HoverCard>
|
||||||
<Label
|
<HoverCardTrigger className="group/max mr-4 flex w-full items-center justify-end gap-4">
|
||||||
htmlFor="promptPrefix"
|
<Label
|
||||||
className="text-right"
|
htmlFor="max-tokens"
|
||||||
>
|
className="mr-2 w-full text-right"
|
||||||
Prompt Prefix
|
>
|
||||||
</Label>
|
Max tokens
|
||||||
<TextareaAutosize
|
</Label>
|
||||||
id="promptPrefix"
|
<Input
|
||||||
value={promptPrefix}
|
id="max-tokens-int"
|
||||||
onChange={e => setPromptPrefix(e.target.value)}
|
value={maxTokens}
|
||||||
placeholder="Set custom instructions. Defaults to: 'You are ChatGPT, a large language model trained by OpenAI.'"
|
onChange={e => setMaxTokens(e.target.value)}
|
||||||
className={cn(defaultTextProps, 'col-span-3 flex h-10 max-h-10 w-full resize-none px-3 py-2 ')}
|
className={cn(defaultTextProps, cn(optionText, 'w-11 group-hover/max:border-gray-200'))}
|
||||||
onFocus={() => {
|
/>
|
||||||
textareaRef.current.classList.remove('max-h-10');
|
</HoverCardTrigger>
|
||||||
textareaRef.current.classList.add('max-h-52');
|
<OptionHover
|
||||||
}}
|
type="max"
|
||||||
onBlur={() => {
|
side="left"
|
||||||
textareaRef.current.classList.remove('max-h-52');
|
|
||||||
textareaRef.current.classList.add('max-h-10');
|
|
||||||
}}
|
|
||||||
ref={textareaRef}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</HoverCard>
|
||||||
<div className="flex justify-around">
|
</div>
|
||||||
<HoverCard>
|
|
||||||
<HoverCardTrigger className="group/temp mr-4 flex w-full items-center justify-end gap-4">
|
<div className="grid grid-cols-2 items-center gap-5">
|
||||||
{/* <div className="mr-4 flex w-full items-center justify-end gap-4"> */}
|
<Slider
|
||||||
<Label
|
value={[temperature]}
|
||||||
htmlFor="temperature"
|
onValueChange={value => setTemperature(value)}
|
||||||
className="mr-2 text-right"
|
max={2}
|
||||||
>
|
min={0}
|
||||||
Temperature
|
step={0.01}
|
||||||
</Label>
|
className="w-full"
|
||||||
<Input
|
/>
|
||||||
id="temp-int"
|
<Slider
|
||||||
value={temperature}
|
value={[maxTokens]}
|
||||||
onChange={e => setTemperature(e.target.value)}
|
onValueChange={value => setMaxTokens(value)}
|
||||||
className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/temp:border-gray-200'))}
|
max={2048} // should be dynamic to the currently selected model
|
||||||
/>
|
min={1}
|
||||||
{/* </div> */}
|
step={1}
|
||||||
</HoverCardTrigger>
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-around">
|
||||||
|
<HoverCard>
|
||||||
|
<HoverCardTrigger className="group/top mr-4 flex w-full items-center justify-end gap-4">
|
||||||
|
<Label
|
||||||
|
htmlFor="top-p"
|
||||||
|
className="mr-2 text-right"
|
||||||
|
>
|
||||||
|
Top P
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="top-p-int"
|
||||||
|
value={topP}
|
||||||
|
onChange={e => setTopP(e.target.value)}
|
||||||
|
className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/top:border-gray-200'))}
|
||||||
|
/>
|
||||||
<OptionHover
|
<OptionHover
|
||||||
type="temp"
|
type="top-p"
|
||||||
side="right"
|
side="right"
|
||||||
/>
|
/>
|
||||||
</HoverCard>
|
</HoverCardTrigger>
|
||||||
{/* <div className="mr-4 flex w-full items-center justify-end gap-4"> */}
|
</HoverCard>
|
||||||
<HoverCard>
|
<HoverCard>
|
||||||
<HoverCardTrigger className="group/max mr-4 flex w-full items-center justify-end gap-4">
|
<HoverCardTrigger className="group/freq mr-4 flex w-full items-center justify-end gap-4">
|
||||||
<Label
|
<Label
|
||||||
htmlFor="max-tokens"
|
htmlFor="freq-penalty"
|
||||||
className="mr-2 w-full text-right"
|
className="mr-2 w-full text-right"
|
||||||
>
|
>
|
||||||
Max tokens
|
Frequency Penalty
|
||||||
</Label>
|
</Label>
|
||||||
<Input
|
<Input
|
||||||
id="max-tokens-int"
|
id="freq-penalty-int"
|
||||||
value={maxTokens}
|
value={freqP}
|
||||||
onChange={e => setMaxTokens(e.target.value)}
|
onChange={e => setFreqP(e.target.value)}
|
||||||
className={cn(defaultTextProps, cn(optionText, 'w-11 group-hover/max:border-gray-200'))}
|
className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/freq:border-gray-200'))}
|
||||||
/>
|
|
||||||
</HoverCardTrigger>
|
|
||||||
<OptionHover
|
|
||||||
type="max"
|
|
||||||
side="left"
|
|
||||||
/>
|
/>
|
||||||
</HoverCard>
|
</HoverCardTrigger>
|
||||||
{/* </div> */}
|
<OptionHover
|
||||||
</div>
|
type="freq"
|
||||||
|
side="left"
|
||||||
<div className="grid grid-cols-2 items-center gap-5">
|
|
||||||
<Slider
|
|
||||||
value={[temperature]}
|
|
||||||
onValueChange={value => setTemperature(value)}
|
|
||||||
max={2}
|
|
||||||
min={0}
|
|
||||||
step={0.01}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
/>
|
||||||
<Slider
|
</HoverCard>
|
||||||
value={[maxTokens]}
|
|
||||||
onValueChange={value => setMaxTokens(value)}
|
|
||||||
max={2048} // should be dynamic to the currently selected model
|
|
||||||
min={1}
|
|
||||||
step={1}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-around">
|
|
||||||
<HoverCard>
|
|
||||||
<HoverCardTrigger className="group/top mr-4 flex w-full items-center justify-end gap-4">
|
|
||||||
<Label
|
|
||||||
htmlFor="top-p"
|
|
||||||
className="mr-2 text-right"
|
|
||||||
>
|
|
||||||
Top P
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="top-p-int"
|
|
||||||
value={topP}
|
|
||||||
onChange={e => setTopP(e.target.value)}
|
|
||||||
className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/top:border-gray-200'))}
|
|
||||||
/>
|
|
||||||
<OptionHover
|
|
||||||
type="top-p"
|
|
||||||
side="right"
|
|
||||||
/>
|
|
||||||
</HoverCardTrigger>
|
|
||||||
</HoverCard>
|
|
||||||
<HoverCard>
|
|
||||||
<HoverCardTrigger className="group/freq mr-4 flex w-full items-center justify-end gap-4">
|
|
||||||
<Label
|
|
||||||
htmlFor="freq-penalty"
|
|
||||||
className="mr-2 w-full text-right"
|
|
||||||
>
|
|
||||||
Frequency Penalty
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="freq-penalty-int"
|
|
||||||
value={freqP}
|
|
||||||
onChange={e => setFreqP(e.target.value)}
|
|
||||||
className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/freq:border-gray-200'))}
|
|
||||||
/>
|
|
||||||
</HoverCardTrigger>
|
|
||||||
<OptionHover
|
|
||||||
type="freq"
|
|
||||||
side="left"
|
|
||||||
/>
|
|
||||||
</HoverCard>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-2 items-center gap-5">
|
|
||||||
<Slider
|
|
||||||
value={[topP]}
|
|
||||||
onValueChange={value => setTopP(value)}
|
|
||||||
max={1}
|
|
||||||
min={0}
|
|
||||||
step={0.01}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
<Slider
|
|
||||||
value={[freqP]}
|
|
||||||
onValueChange={value => setFreqP(value)}
|
|
||||||
max={2}
|
|
||||||
min={-2}
|
|
||||||
step={0.01}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<HoverCard>
|
|
||||||
<HoverCardTrigger className="group/pres mr-4 flex items-center justify-end gap-4">
|
|
||||||
<Label
|
|
||||||
htmlFor="pres-penalty"
|
|
||||||
className="mr-2 text-right"
|
|
||||||
>
|
|
||||||
Presence Penalty
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="pres-penalty-int"
|
|
||||||
value={presP}
|
|
||||||
onChange={e => setPresP(e.target.value)}
|
|
||||||
className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/pres:border-gray-200'))}
|
|
||||||
/>
|
|
||||||
</HoverCardTrigger>
|
|
||||||
<OptionHover
|
|
||||||
type="pres"
|
|
||||||
side="left"
|
|
||||||
/>
|
|
||||||
</HoverCard>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-2 items-center gap-5">
|
|
||||||
<Slider
|
|
||||||
value={[presP]}
|
|
||||||
onValueChange={value => setPresP(value)}
|
|
||||||
max={2}
|
|
||||||
min={0}
|
|
||||||
step={0.01}
|
|
||||||
className="w-full opacity-0"
|
|
||||||
/>
|
|
||||||
<Slider
|
|
||||||
value={[0]}
|
|
||||||
onValueChange={value => setPresP(value)}
|
|
||||||
max={2}
|
|
||||||
min={-2}
|
|
||||||
step={0.01}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
<div className="grid grid-cols-2 items-center gap-5">
|
||||||
</div>
|
<Slider
|
||||||
|
value={[topP]}
|
||||||
|
onValueChange={value => setTopP(value)}
|
||||||
|
max={1}
|
||||||
|
min={0}
|
||||||
|
step={0.01}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
<Slider
|
||||||
|
value={[freqP]}
|
||||||
|
onValueChange={value => setFreqP(value)}
|
||||||
|
max={2}
|
||||||
|
min={-2}
|
||||||
|
step={0.01}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<HoverCard>
|
||||||
|
<HoverCardTrigger className="group/pres mr-4 flex items-center justify-end gap-4">
|
||||||
|
<Label
|
||||||
|
htmlFor="pres-penalty"
|
||||||
|
className="mr-2 text-right"
|
||||||
|
>
|
||||||
|
Presence Penalty
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="pres-penalty-int"
|
||||||
|
value={presP}
|
||||||
|
onChange={e => setPresP(e.target.value)}
|
||||||
|
className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/pres:border-gray-200'))}
|
||||||
|
/>
|
||||||
|
</HoverCardTrigger>
|
||||||
|
<OptionHover
|
||||||
|
type="pres"
|
||||||
|
side="left"
|
||||||
|
/>
|
||||||
|
</HoverCard>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 items-center gap-5">
|
||||||
|
<Slider
|
||||||
|
value={[presP]}
|
||||||
|
onValueChange={value => setPresP(value)}
|
||||||
|
max={2}
|
||||||
|
min={0}
|
||||||
|
step={0.01}
|
||||||
|
className="w-full opacity-0"
|
||||||
|
/>
|
||||||
|
<Slider
|
||||||
|
value={[0]}
|
||||||
|
onValueChange={value => setPresP(value)}
|
||||||
|
max={2}
|
||||||
|
min={-2}
|
||||||
|
step={0.01}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { Settings2 } from 'lucide-react';
|
||||||
import { useRecoilState } from 'recoil';
|
import { useRecoilState } from 'recoil';
|
||||||
import ModelSelect from './ModelSelect';
|
import ModelSelect from './ModelSelect';
|
||||||
import { Button } from '../../ui/Button.tsx';
|
import { Button } from '../../ui/Button.tsx';
|
||||||
import Settings from './Settings.jsx';
|
import Settings from './Settings.jsx';
|
||||||
|
import { cn } from '~/utils/';
|
||||||
|
|
||||||
import store from '~/store';
|
import store from '~/store';
|
||||||
|
|
||||||
|
|
@ -67,20 +69,20 @@ function OpenAIOptions() {
|
||||||
model={model}
|
model={model}
|
||||||
onChange={setModel}
|
onChange={setModel}
|
||||||
type="button"
|
type="button"
|
||||||
className={
|
className={cn(
|
||||||
cardStyle +
|
cardStyle,
|
||||||
' flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 data-[state=open]:bg-slate-50 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
|
' z-50 flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 data-[state=open]:bg-slate-50 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
|
||||||
}
|
)}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
className={
|
className={cn(
|
||||||
cardStyle +
|
cardStyle,
|
||||||
' flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 dark:hover:bg-gray-600'
|
' min-w-4 z-50 flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 dark:hover:bg-gray-600'
|
||||||
}
|
)}
|
||||||
onClick={triggerAdvancedMode}
|
onClick={triggerAdvancedMode}
|
||||||
>
|
>
|
||||||
<span className="w-full text-center text-xs font-medium font-normal">More</span>
|
<Settings2 className="w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
@ -105,7 +107,9 @@ function OpenAIOptions() {
|
||||||
Switch to simple mode
|
Switch to simple mode
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="h-[375px] p-5"><Settings/></div>
|
<div className="h-[375px] p-5">
|
||||||
|
<Settings />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue