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

feat (presets): hide/show endpoints, increase preset menu size in general and dynamic to endpoints (#320)

Browse source
This commit is contained in:
Danny Avila 2023-05-18 16:01:16 -04:00 • committed by GitHub
parent f4d995be4c
commit 92eee52c52
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

35
client/src/components/Input/NewConversationMenu/index.jsx
View file

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import cleanupPreset from '~/utils/cleanupPreset.js'; import cleanupPreset from '~/utils/cleanupPreset.js';
import { useRecoilValue, useRecoilState } from 'recoil'; import { useRecoilValue, useRecoilState } from 'recoil';
import EditPresetDialog from '../../Endpoints/EditPresetDialog'; import EditPresetDialog from '../../Endpoints/EditPresetDialog';
@ -19,12 +19,14 @@ import {
} from '../../ui/DropdownMenu.tsx'; } from '../../ui/DropdownMenu.tsx';
import { Dialog, DialogTrigger } from '../../ui/Dialog.tsx'; import { Dialog, DialogTrigger } from '../../ui/Dialog.tsx';
import DialogTemplate from '../../ui/DialogTemplate'; import DialogTemplate from '../../ui/DialogTemplate';
import { cn } from '~/utils/';
import store from '~/store'; import store from '~/store';
export default function NewConversationMenu() { export default function NewConversationMenu() {
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
const [showPresets, setShowPresets] = useState(true); const [showPresets, setShowPresets] = useState(true);
const [showEndpoints, setShowEndpoints] = useState(true);
const [presetModelVisible, setPresetModelVisible] = useState(false); const [presetModelVisible, setPresetModelVisible] = useState(false);
const [preset, setPreset] = useState(false); const [preset, setPreset] = useState(false);
@ -137,35 +139,40 @@ export default function NewConversationMenu() {
className="min-w-[300px] dark:bg-gray-700" className="min-w-[300px] dark:bg-gray-700"
onCloseAutoFocus={(event) => event.preventDefault()} onCloseAutoFocus={(event) => event.preventDefault()}
> >
<DropdownMenuLabel className="dark:text-gray-300">Select an Endpoint</DropdownMenuLabel> <DropdownMenuLabel
className="cursor-pointer dark:text-gray-300"
onClick={() => setShowEndpoints((prev) => !prev)}
>
{showEndpoints ? 'Hide ' : 'Show '} Endpoints
</DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuRadioGroup <DropdownMenuRadioGroup
value={endpoint} value={endpoint}
onValueChange={onSelectEndpoint} onValueChange={onSelectEndpoint}
className="overflow-y-auto" className="overflow-y-auto"
> >
{availableEndpoints.length ? ( {showEndpoints &&
<EndpointItems endpoints={availableEndpoints} onSelect={onSelectEndpoint} /> (availableEndpoints.length ? (
) : ( <EndpointItems endpoints={availableEndpoints} onSelect={onSelectEndpoint} />
<DropdownMenuLabel className="dark:text-gray-300"> ) : (
No endpoint available. <DropdownMenuLabel className="dark:text-gray-300">
</DropdownMenuLabel> No endpoint available.
)} </DropdownMenuLabel>
))}
</DropdownMenuRadioGroup> </DropdownMenuRadioGroup>
<div className="mt-6 w-full" /> <div className="mt-2 w-full" />
<DropdownMenuLabel className="flex items-center dark:text-gray-300"> <DropdownMenuLabel className="flex items-center dark:text-gray-300">
<span className="cursor-pointer" onClick={() => setShowPresets((prev) => !prev)}> <span className="cursor-pointer mr-auto " onClick={() => setShowPresets((prev) => !prev)}>
{showPresets ? 'Hide ' : 'Show '} Presets {showPresets ? 'Hide ' : 'Show '} Presets
</span> </span>
<div className="flex-1" />
<FileUpload onFileSelected={onFileSelected} /> <FileUpload onFileSelected={onFileSelected} />
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<label <label
htmlFor="file-upload" htmlFor="file-upload"
className=" mr-1 flex h-[32px] h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500" className="mr-1 flex h-[32px] h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
> >
{/* <Button {/* <Button
type="button" type="button"
@ -190,7 +197,7 @@ export default function NewConversationMenu() {
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuRadioGroup <DropdownMenuRadioGroup
onValueChange={onSelectPreset} onValueChange={onSelectPreset}
className="max-h-[150px] overflow-y-auto" className={cn('overflow-y-auto', showEndpoints ? 'max-h-[180px]' : 'max-h-[315px]')}
> >
{showPresets && {showPresets &&
(presets.length ? ( (presets.length ? (