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

feat(ModelDropDown.jsx): add optional props to customize component appearance and behavior

Browse source 
feat(client): add ModelDropDown component to OpenAIOptions component
This commit is contained in:
Daniel Avila 2023-04-01 15:29:38 -04:00
parent 7487b59de7
commit 2157eb8f30
2 changed files with 103 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

49
client/src/components/Input/OpenAIOptions/ModelDropDown.jsx
View file

@ -1,14 +1,16 @@
import React from 'react';
import CheckMark from '../../svg/CheckMark';
import { Listbox } from '@headlessui/react';
import { Listbox, Transition } from '@headlessui/react';
import { useRecoilValue } from 'recoil';
import { cn } from '~/utils/';
import store from '~/store';
function ModelDropDown({ model, setModel, endpoint }) {
function ModelDropDown({ model, setModel, endpoint, showAbove = false, showLabel = true, className = '' }) {
const endpointsConfig = useRecoilValue(store.endpointsConfig);
const models = endpointsConfig?.[endpoint]?.['availableModels'] || [];
console.log('className', className);
return (
<div className="flex items-center justify-center gap-2">
<div className="relative w-full">
@ -16,7 +18,15 @@ function ModelDropDown({ model, setModel, endpoint }) {
value={model}
onChange={setModel}
>
<Listbox.Button className="relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-green-600 focus:outline-none focus:ring-1 focus:ring-green-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm">
{({ open }) => (
<>
<Listbox.Button
className={cn(
'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-green-600 focus:outline-none focus:ring-1 focus:ring-green-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
className
)}
>
{showLabel && (
<Listbox.Label
className="block text-xs text-gray-700 dark:text-gray-500"
id="headlessui-listbox-label-:r1:"
@ -24,8 +34,28 @@ function ModelDropDown({ model, setModel, endpoint }) {
>
Model
</Listbox.Label>
)}
<span className="inline-flex w-full truncate">
<span className="flex h-6 items-center gap-1 truncate text-sm">{model}</span>
{/* {!showLabel && (
<Listbox.Label
className="text-xs text-gray-700 dark:text-gray-500 mr-3"
id="headlessui-listbox-label-:r1:"
data-headlessui-state=""
>
Model
</Listbox.Label>
)} */}
<span className={cn("flex h-6 items-center gap-1 truncate text-sm text-gray-900 dark:text-white", !showLabel ? 'text-xs' : '')}>
{!showLabel && (
<span
className="text-xs text-gray-700 dark:text-gray-500"
>
Model:
</span>
)}
{`${!showLabel ? '' : ''} ${model}`}
{/* {`${!showLabel ? 'Model: ' : ''} ${model}`} */}
</span>
</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<svg
@ -44,6 +74,14 @@ function ModelDropDown({ model, setModel, endpoint }) {
</svg>
</span>
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
className={showAbove ? 'bottom-full mb-1' : 'top-full mt-1'}
>
<Listbox.Options className="absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs ring-1 ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]">
{models.map((modelOption, i) => (
<Listbox.Option
@ -69,6 +107,9 @@ function ModelDropDown({ model, setModel, endpoint }) {
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</>
)}
</Listbox>
</div>
</div>

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

@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
import { Settings2 } from 'lucide-react';
import { useRecoilState, useRecoilValue } from 'recoil';
import ModelSelect from './ModelSelect';
import ModelDropDown from './ModelDropDown';
import EndpointOptionsPopover from '../../ui/EndpointOptionsPopover';
import DialogTemplate from '../../ui/DialogTemplate';
import { Button } from '../../ui/Button.tsx';
@ -79,7 +80,7 @@ function OpenAIOptions() {
(!advancedMode ? ' show' : '')
}
>
<ModelSelect
{/* <ModelSelect
model={model}
availableModels={availableModels}
onChange={setOption('model')}
@ -88,6 +89,14 @@ function OpenAIOptions() {
cardStyle,
' 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'
)}
/> */}
<ModelDropDown
model={model}
setModel={setOption('model')}
endpoint="openAI"
showAbove={true}
showLabel={false}
className="z-50 flex h-[40px] w-48 min-w-48 items-center justify-center px-4 hover:bg-slate-50 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600"
/>
<Button
type="button"