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

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 { useRecoilValue, useRecoilState } from 'recoil';
import EditPresetDialog from '../../Endpoints/EditPresetDialog';
@ -19,12 +19,14 @@ import {
} from '../../ui/DropdownMenu.tsx';
import { Dialog, DialogTrigger } from '../../ui/Dialog.tsx';
import DialogTemplate from '../../ui/DialogTemplate';
import { cn } from '~/utils/';
import store from '~/store';
export default function NewConversationMenu() {
const [menuOpen, setMenuOpen] = useState(false);
const [showPresets, setShowPresets] = useState(true);
const [showEndpoints, setShowEndpoints] = useState(true);
const [presetModelVisible, setPresetModelVisible] = useState(false);
const [preset, setPreset] = useState(false);
@ -137,35 +139,40 @@ export default function NewConversationMenu() {
className="min-w-[300px] dark:bg-gray-700"
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 />
<DropdownMenuRadioGroup
value={endpoint}
onValueChange={onSelectEndpoint}
className="overflow-y-auto"
>
{availableEndpoints.length ? (
<EndpointItems endpoints={availableEndpoints} onSelect={onSelectEndpoint} />
) : (
<DropdownMenuLabel className="dark:text-gray-300">
No endpoint available.
</DropdownMenuLabel>
)}
{showEndpoints &&
(availableEndpoints.length ? (
<EndpointItems endpoints={availableEndpoints} onSelect={onSelectEndpoint} />
) : (
<DropdownMenuLabel className="dark:text-gray-300">
No endpoint available.
</DropdownMenuLabel>
))}
</DropdownMenuRadioGroup>
<div className="mt-6 w-full" />
<div className="mt-2 w-full" />
<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
</span>
<div className="flex-1" />
<FileUpload onFileSelected={onFileSelected} />
<Dialog>
<DialogTrigger asChild>
<label
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
type="button"
@ -190,7 +197,7 @@ export default function NewConversationMenu() {
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
onValueChange={onSelectPreset}
className="max-h-[150px] overflow-y-auto"
className={cn('overflow-y-auto', showEndpoints ? 'max-h-[180px]' : 'max-h-[315px]')}
>
{showPresets &&
(presets.length ? (