Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 08:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

update more button and misc. styling

Browse source
This commit is contained in:
Daniel Avila 2023-03-31 18:38:58 -04:00
parent 92dbdcaaa2
commit 404566c1fb
2 changed files with 213 additions and 226 deletions
Download patch file Download diff file Expand all files Collapse all files

23
client/src/components/Input/OpenAIOptions/Settings.jsx
View file

@ -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,21 +25,10 @@ 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">
Note: important instructions are often better placed in your message rather than the prefix.{' '}
<a
href="https://platform.openai.com/docs/guides/chat/instructing-chat-models"
target="_blank"
rel="noopener noreferrer"
>
<u>More info here</u>
</a>
</DialogDescription> */}
<> <>
<div className="grid gap-4 py-4"> <div className="grid gap-4 py-4 px-5">
<div className="grid grid-cols-4 items-center gap-4"> <div className="grid grid-cols-4 items-center gap-4">
<Label <Label
htmlFor="chatGptLabel" htmlFor="chatGptLabel"
@ -85,7 +73,6 @@ function Settings() {
<div className="flex justify-around"> <div className="flex justify-around">
<HoverCard> <HoverCard>
<HoverCardTrigger className="group/temp mr-4 flex w-full items-center justify-end gap-4"> <HoverCardTrigger className="group/temp mr-4 flex w-full items-center justify-end gap-4">
{/* <div className="mr-4 flex w-full items-center justify-end gap-4"> */}
<Label <Label
htmlFor="temperature" htmlFor="temperature"
className="mr-2 text-right" className="mr-2 text-right"
@ -98,14 +85,12 @@ function Settings() {
onChange={e => setTemperature(e.target.value)} onChange={e => setTemperature(e.target.value)}
className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/temp:border-gray-200'))} className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/temp:border-gray-200'))}
/> />
{/* </div> */}
</HoverCardTrigger> </HoverCardTrigger>
<OptionHover <OptionHover
type="temp" type="temp"
side="right" side="right"
/> />
</HoverCard> </HoverCard>
{/* <div className="mr-4 flex w-full items-center justify-end gap-4"> */}
<HoverCard> <HoverCard>
<HoverCardTrigger className="group/max mr-4 flex w-full items-center justify-end gap-4"> <HoverCardTrigger className="group/max mr-4 flex w-full items-center justify-end gap-4">
<Label <Label
@ -126,7 +111,6 @@ function Settings() {
side="left" side="left"
/> />
</HoverCard> </HoverCard>
{/* </div> */}
</div> </div>
<div className="grid grid-cols-2 items-center gap-5"> <div className="grid grid-cols-2 items-center gap-5">
@ -249,7 +233,6 @@ function Settings() {
</div> </div>
</div> </div>
</> </>
</div>
); );
} }

24
client/src/components/Input/OpenAIOptions/index.jsx
View file

@ -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>
</> </>