Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-27 12:46:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

adds shadcn-ui components, and model button to switch chat models

Browse source
This commit is contained in:
Danny Avila 2023-02-13 15:58:35 -05:00
parent acaef39d12
commit 583fd56ca5
14 changed files with 1700 additions and 196 deletions
Download patch file Download diff file Expand all files Collapse all files

69
src/components/main/ModelMenu.jsx Normal file
View file

@ -0,0 +1,69 @@
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setConversation, setError } from '~/store/convoSlice';
import GPTIcon from '../svg/GPTIcon';
import { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
import { Button } from '../ui/Button.tsx';
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '../ui/DropdownMenu.tsx';
export default function ModelMenu() {
const [model, setModel] = useState('chatgpt');
const defaultColorProps = [
'text-gray-500',
'hover:bg-gray-100',
'disabled:hover:bg-transparent',
'dark:hover:bg-gray-900',
'dark:hover:text-gray-400',
'dark:disabled:hover:bg-transparent'
];
const chatgptColorProps = [
'text-green-700',
// 'dark:text-green-400',
'hover:bg-green-100',
'disabled:hover:bg-transparent',
'dark:hover:bg-opacity-50',
'dark:hover:bg-green-900',
'dark:hover:text-gray-100',
'dark:disabled:hover:bg-transparent'
];
const colorProps = model === 'chatgpt' ? chatgptColorProps : defaultColorProps;
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
// style={{backgroundColor: 'rgb(16, 163, 127)'}}
className={`absolute bottom-0.5 rounded-md border-0 p-1 pl-2 outline-none ${colorProps.join(' ')} focus:ring-0 focus:ring-offset-0 disabled:bottom-0.5 md:pl-1 md:bottom-1 md:left-2 md:disabled:bottom-1`}
>
<GPTIcon button={true} />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuLabel>Select a Model</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={model}
onValueChange={setModel}
>
<DropdownMenuRadioItem value="chatgpt">ChatGPT</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="davinci">Davinci</DropdownMenuRadioItem>
{/* <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem> */}
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
);
}

6
src/components/main/TextChat.jsx
View file

@ -1,6 +1,7 @@
import React, { useState } from 'react';
import SubmitButton from './SubmitButton';
import Regenerate from './Regenerate';
import ModelMenu from './ModelMenu';
import Footer from './Footer';
import TextareaAutosize from 'react-textarea-autosize';
import handleSubmit from '~/utils/handleSubmit';
@ -45,7 +46,6 @@ export default function TextChat({ messages }) {
console.log('convo after dispatch', convo);
}
// reloadConvos();
dispatch(setSubmitState(false));
};
@ -105,7 +105,6 @@ export default function TextChat({ messages }) {
<form className="stretch mx-2 flex flex-row gap-3 pt-2 last:mb-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
<div className="relative flex h-full flex-1 md:flex-col">
<div className="ml-1 mt-1.5 flex justify-center gap-0 md:m-auto md:mb-2 md:w-full md:gap-2" />
{/* removed this prop shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] */}
{!!error ? (
<Regenerate
submitMessage={submitMessage}
@ -114,6 +113,7 @@ export default function TextChat({ messages }) {
/>
) : (
<div className="relative flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-gray-700 dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4">
<ModelMenu />
<TextareaAutosize
tabIndex="0"
// style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
@ -123,7 +123,7 @@ export default function TextChat({ messages }) {
onKeyDown={handleKeyDown}
onChange={changeHandler}
placeholder=""
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-2 pr-7 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-0"
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-7 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-7"
/>
<SubmitButton submitMessage={submitMessage} />
</div>