merge Daniel Avila's commit

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

feat(client): add ModelDropDown component to OpenAIOptions component

client/src/components/Endpoints/EditPresetDialog.jsx

@@ -53,7 +53,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset }) => {
   };
 
   const defaultTextProps =
-    'rounded-md border border-gray-200 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 focus:dark:bg-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
+    'rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 focus:dark:bg-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
 
   const submitPreset = () => {
     axios({

client/src/components/Endpoints/OpenAI/Settings.jsx

@@ -8,7 +8,7 @@ import OptionHover from './OptionHover';
 import { HoverCard, HoverCardTrigger } from '~/components/ui/HoverCard.tsx';
 import { cn } from '~/utils/';
 const defaultTextProps =
-  'rounded-md border border-gray-200 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 focus:dark:bg-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
+  'rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 focus:dark:bg-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
 
 const optionText =
   'p-0 shadow-none text-right pr-1 h-8 border-transparent focus:ring-[#10a37f] focus:ring-offset-0 focus:ring-opacity-100 hover:bg-gray-800/10 dark:hover:bg-white/10 focus:bg-gray-800/10 dark:focus:bg-white/10 transition-colors';

client/src/components/Input/BingAIOptions/index.jsx

@@ -19,7 +19,7 @@ function BingAIOptions() {
   const { toneStyle } = conversation;
 
   const cardStyle =
-    'shadow-md rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';
+    'transition-colors shadow-md rounded-md min-w-[75px] font-normal bg-white border-black/10 hover:border-black/10 focus:border-black/10 dark:border-black/10 dark:hover:border-black/10 dark:focus:border-black/10 border dark:bg-gray-700 text-black dark:text-white';
   const defaultClasses =
     'p-2 rounded-md min-w-[75px] font-normal bg-white/[.60] dark:bg-gray-700 text-black text-xs';
   const defaultSelected = cn(defaultClasses, 'font-medium data-[state=active]:text-white text-xs text-white');

client/src/components/Input/OpenAIOptions/index.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Settings2 } from 'lucide-react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import ModelSelect from '../../ui/ModelSelect';
+import ModelDropDown from '../../ui/ModelDropDown';
 import EndpointOptionsPopover from '../../Endpoints/EndpointOptionsPopover';
 import SaveAsPresetDialog from '../../Endpoints/SaveAsPresetDialog';
 import { Button } from '../../ui/Button.tsx';
@@ -14,9 +15,6 @@ function OpenAIOptions() {
   const [advancedMode, setAdvancedMode] = useState(false);
   const [saveAsDialogShow, setSaveAsDialogShow] = useState(false);
 
-  const endpointsConfig = useRecoilValue(store.endpointsConfig);
-  const availableModels = endpointsConfig?.['openAI']?.['availableModels'] || [];
-
   const [conversation, setConversation] = useRecoilState(store.conversation) || {};
   const { endpoint, conversationId } = conversation;
   const { model, chatGptLabel, promptPrefix, temperature, top_p, presence_penalty, frequency_penalty } =
@@ -68,7 +66,7 @@ function OpenAIOptions() {
   };
 
   const cardStyle =
-    'shadow-md rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';
+    'transition-colors shadow-md rounded-md min-w-[75px] font-normal bg-white border-black/10 hover:border-black/10 focus:border-black/10 dark:border-black/10 dark:hover:border-black/10 dark:focus:border-black/10 border dark:bg-gray-700 text-black dark:text-white';
 
   return (
     <>
@@ -78,7 +76,7 @@ function OpenAIOptions() {
           (!advancedMode ? ' show' : '')
         }
       >
-        <ModelSelect
+        {/* <ModelSelect
           model={model}
           availableModels={availableModels}
           onChange={setOption('model')}
@@ -87,12 +85,23 @@ 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={cn(
+            cardStyle,
+            'min-w-48 z-50 flex h-[40px] w-48 items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 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}
         >

client/src/components/ui/ModelDropDown.jsx

@@ -1,11 +1,19 @@
 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, containerClassName, className }) {
+function ModelDropDown({
+  model,
+  setModel,
+  endpoint,
+  showAbove = false,
+  showLabel = true,
+  containerClassName,
+  className
+}) {
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
   const models = endpointsConfig?.[endpoint]?.['availableModels'] || [];
 
@@ -16,6 +24,101 @@ function ModelDropDown({ model, setModel, endpoint, containerClassName, classNam
           value={model}
           onChange={setModel}
         >
+          {({ 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:"
+                    data-headlessui-state=""
+                  >
+                    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>
+                </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"
+                    style={showAbove ? { transform: 'scaleY(-1)' } : {}}
+                  >
+                    <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-3' : 'top-full mt-3'}
+              >
+                <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.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',
@@ -75,7 +178,7 @@ function ModelDropDown({ model, setModel, endpoint, containerClassName, classNam
                 </span>
               </Listbox.Option>
             ))}
-          </Listbox.Options>
+          </Listbox.Options> */}
         </Listbox>
       </div>
     </div>