mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-22 19:30:15 +01:00
feat(ModelDropDown.jsx): add optional props to customize component appearance and behavior
feat(client): add ModelDropDown component to OpenAIOptions component
This commit is contained in:
Daniel Avila
parent
7487b59de7
commit
2157eb8f30
2 changed files with 103 additions and 53 deletions
|
|
@ -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,59 +18,98 @@ 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">
|
||||
<Listbox.Label
|
||||
className="block text-xs text-gray-700 dark:text-gray-500"
|
||||
id="headlessui-listbox-label-:r1:"
|
||||
data-headlessui-state=""
|
||||
>
|
||||
Model
|
||||
</Listbox.Label>
|
||||
<span className="inline-flex w-full truncate">
|
||||
<span className="flex h-6 items-center gap-1 truncate text-sm">{model}</span>
|
||||
</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4 text-gray-400"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{({ 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
|
||||
)}
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
<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
|
||||
key={i}
|
||||
value={modelOption}
|
||||
className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-[#ECECF1] dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
|
||||
>
|
||||
<span className="flex items-center gap-1.5 truncate">
|
||||
<span
|
||||
className={cn(
|
||||
'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-100',
|
||||
modelOption === model ? 'font-semibold' : ''
|
||||
)}
|
||||
{showLabel && (
|
||||
<Listbox.Label
|
||||
className="block text-xs text-gray-700 dark:text-gray-500"
|
||||
id="headlessui-listbox-label-:r1:"
|
||||
data-headlessui-state=""
|
||||
>
|
||||
{modelOption}
|
||||
Model
|
||||
</Listbox.Label>
|
||||
)}
|
||||
<span className="inline-flex w-full truncate">
|
||||
{/* {!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>
|
||||
{modelOption === model && (
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-100">
|
||||
<CheckMark />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4 text-gray-400"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</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
|
||||
key={i}
|
||||
value={modelOption}
|
||||
className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-[#ECECF1] dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
|
||||
>
|
||||
<span className="flex items-center gap-1.5 truncate">
|
||||
<span
|
||||
className={cn(
|
||||
'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-100',
|
||||
modelOption === model ? 'font-semibold' : ''
|
||||
)}
|
||||
>
|
||||
{modelOption}
|
||||
</span>
|
||||
{modelOption === model && (
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-100">
|
||||
<CheckMark />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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,12 +89,20 @@ 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"
|
||||
className={cn(
|
||||
cardStyle,
|
||||
' min-w-4 z-50 flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600'
|
||||
'min-w-4 z-50 flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600'
|
||||
)}
|
||||
onClick={triggerAdvancedMode}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue