Skip to content

Commit

Permalink
Refactored ApiMenu.tsx:
Browse files Browse the repository at this point in the history 
- combined some conditional logic
- simplified expressions
  • Loading branch information
@cheeseonamonkey
cheeseonamonkey committed Mar 30, 2024
1 parent 319de2c commit 0cc444e
Showing 1 changed file with 30 additions and 160 deletions.
190 changes: 30 additions & 160 deletions src/components/ApiMenu/ApiMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,82 +127,47 @@ const ApiMenu = ({
setIsModalOpen={setIsModalOpen}
handleConfirm={handleSave}
>
<div
className='p-6 border-b border-custom-white text-custom-white'
onClick={() => {
if (activeDropdown != null) {
setActiveDropdown(null);
}
}}
>
<div className='p-6 border-b border-custom-white text-custom-white' onClick={() => { if (activeDropdown != null) { setActiveDropdown(null); } }}>
<div className='min-w-fit text-custom-white text-sm flex flex-col gap-2 leading-relaxed'>
<p>Deleting an endpoint will delete all asociated models.</p>
<p>Deleting an endpoint will delete all associated models.</p>
<p>Whisper record always uses the first endpoint.</p>
<div className='flex flex-col max-w-full'>
<div className='flex items-center border-b border-neutral-base/50 mb-1 p-1'>
<div className='w-3/4 text-center font-bold p-2'>
Endpoint URL
</div>
<div className='w-3/4 text-center font-bold p-2'>Endpoint URL</div>
<div className='w-1/4 text-center font-bold p-2'>API Key</div>
<div className='p-1 ml-2 h-4 w-4'></div>
</div>
{_apiAuth.map((auth, index) => (
<div
key={'api' + index}
className='flex items-center border-b border-neutral-base/50 mb-1 p-1'
>
<div key={'api' + index} className='flex items-center border-b border-neutral-base/50 mb-1 p-1'>
<div className='w-3/4 pr-2'>
<input
type='text'
className='text-custom-black p-3 text-sm border-none bg-custom-white rounded-md m-0 w-full mr-0 h-8 focus:outline-none'
value={auth.endpoint}
onChange={(e) => {
_setApiAuth((prev) => {
const newApiKeys = [...prev];
newApiKeys[index].endpoint = e.target.value;
return newApiKeys;
});
}}
onChange={(e) => { _setApiAuth((prev) => { const newApiKeys = [...prev]; newApiKeys[index].endpoint = e.target.value; return newApiKeys; }); }}
/>
</div>
<div className='w-1/4 pl-2'>
<input
type='password'
className='text-custom-black p-3 text-sm border-none bg-custom-white rounded-md m-0 w-full mr-0 h-8 focus:outline-none'
value={auth.apiKey}
onChange={(e) => {
_setApiAuth((prev) => {
const newApiKeys = [...prev];
newApiKeys[index].apiKey = e.target.value;
return newApiKeys;
});
}}
onChange={(e) => { _setApiAuth((prev) => { const newApiKeys = [...prev]; newApiKeys[index].apiKey = e.target.value; return newApiKeys; }); }}
/>
</div>
<div
className='p-1 ml-2 hover:text-neutral-dark hover:bg-custom-white hover:rounded'
onClick={() => deleteApi(index)}
>
<CrossIcon
className={`${_apiAuth.length > 1 ? '' : 'invisible'}`}
/>
<div className='p-1 ml-2 hover:text-neutral-dark hover:bg-custom-white hover:rounded' onClick={() => deleteApi(index)}>
<CrossIcon className={`${_apiAuth.length > 1 ? '' : 'invisible'}`} />
</div>
</div>
))}
</div>
<div className='flex justify-center mt-0 mb-8'>
<div
className='cursor-pointer p-2 mt-0 rounded-xl btn btn-neutral'
onClick={addApi}
>
<div className='cursor-pointer p-2 mt-0 rounded-xl btn btn-neutral' onClick={addApi}>
<PlusIcon />
</div>
</div>

<div className='flex flex-col max-w-full'>
<div className='text-center font-bold items-center border-b border-neutral-base/50 mb-1 p-1'>
Models
</div>
<div className='text-center font-bold items-center border-b border-neutral-base/50 mb-1 p-1'>Models</div>
{_modelDefs.map((modelDef, index) => (
<div key={'model' + index} className='mb-4'>
<div className='flex items-center border-b border-neutral-base/50 mb-1 p-1'>
Expand All @@ -212,13 +177,7 @@ const ApiMenu = ({
className='text-custom-black p-3 text-sm border-none bg-custom-white rounded-md m-0 w-full mr-0 h-8 focus:outline-none'
placeholder='Nickname'
value={modelDef.name}
onChange={(e) => {
_setModelDefs((prev) => {
const newModelDefs = [...prev];
newModelDefs[index].name = e.target.value;
return newModelDefs;
});
}}
onChange={(e) => { _setModelDefs((prev) => { const newModelDefs = [...prev]; newModelDefs[index].name = e.target.value; return newModelDefs; }); }}
/>
</div>
<div className='flex-1 px-1'>
Expand All @@ -227,73 +186,24 @@ const ApiMenu = ({
className='text-custom-black p-3 text-sm border-none bg-custom-white rounded-md m-0 w-full mr-0 h-8 focus:outline-none'
placeholder='Model'
value={modelDef.model}
onChange={(e) => {
_setModelDefs((prev) => {
const newModelDefs = [...prev];
newModelDefs[index].model = e.target.value;
return newModelDefs;
});
}}
onChange={(e) => { _setModelDefs((prev) => { const newModelDefs = [...prev]; newModelDefs[index].model = e.target.value; return newModelDefs; }); }}
/>
</div>
<div className='flex-1'>
<button
className='btn bg-custom-white text-custom-black btn-small overflow-clip relative pr-6 w-80'
type='button'
onClick={() => {
if (activeDropdown === index) {
setActiveDropdown(null);
} else {
setActiveDropdown(index);
}
}}
>
<span className='inline-block truncate max-w-full'>
{_apiAuth[modelDef.endpoint]
? _apiAuth[modelDef.endpoint].endpoint.replace(
/^https?:\/\//,
''
)
: 'Endpoint Undefined'}
</span>

<button className='btn bg-custom-white text-custom-black btn-small overflow-clip relative pr-6 w-80' type='button' onClick={() => { if (activeDropdown === index) { setActiveDropdown(null); } else { setActiveDropdown(index); } }}>
<span className='inline-block truncate max-w-full'>{_apiAuth[modelDef.endpoint] ? _apiAuth[modelDef.endpoint].endpoint.replace(/^https?:\/\//, '') : 'Endpoint Undefined'}</span>
<DownChevronArrow className='absolute right-0 mr-1 flex items-center' />
</button>

<div
id='dropdown'
className={`${
activeDropdown != null && activeDropdown == index
? ''
: 'hidden'
} absolute top-100 bottom-100 z-10 w-80 bg-custom-white text-custom-black shadow-xl rounded-lg border border-neutral-base group`}
>
<ul
className='text-sm p-0 m-0 max-h-72 overflow-clip'
aria-labelledby='dropdownDefaultButton'
>
<div id='dropdown' className={`${activeDropdown != null && activeDropdown == index ? '' : 'hidden'} absolute top-100 bottom-100 z-10 w-80 bg-custom-white text-custom-black shadow-xl rounded-lg border border-neutral-base group`}>
<ul className='text-sm p-0 m-0 max-h-72 overflow-clip' aria-labelledby='dropdownDefaultButton'>
{_apiAuth.map((auth, authIndex) => (
<li
className='btn btn-small w-full overflow-clip hover:bg-neutral-light hover:text-custom-white cursor-pointer'
onClick={() => {
setModelEndpoint(index, authIndex);
setActiveDropdown(null);
}}
key={'dropdown' + authIndex}
>
{auth.endpoint.replace(/^https?:\/\//, '')}
</li>
<li className='btn btn-small w-full overflow-clip hover:bg-neutral-light hover:text-custom-white cursor-pointer' onClick={() => { setModelEndpoint(index, authIndex); setActiveDropdown(null); }} key={'dropdown' + authIndex}>{auth.endpoint.replace(/^https?:\/\//, '')}</li>
))}
</ul>
</div>
</div>
<div
className='p-1 ml-2 hover:text-neutral-dark hover:bg-custom-white hover:rounded'
onClick={() => deleteModel(index)}
>
<CrossIcon
className={`${_modelDefs.length > 1 ? '' : 'invisible'}`}
/>
<div className='p-1 ml-2 hover:text-neutral-dark hover:bg-custom-white hover:rounded' onClick={() => deleteModel(index)}>
<CrossIcon className={`${_modelDefs.length > 1 ? '' : 'invisible'}`} />
</div>
</div>
<div className='flex items-center border-b border-neutral-base/50 px-1'>
Expand All @@ -306,14 +216,7 @@ const ApiMenu = ({
value={modelDef.model_max_tokens || ''}
onChange={(e) => {
const value = Number(e.target.value);

if (!isNaN(value)) {
_setModelDefs((prev) => {
const newModelDefs = [...prev];
newModelDefs[index].model_max_tokens = value;
return newModelDefs;
});
}
if (!isNaN(value)) { _setModelDefs((prev) => { const newModelDefs = [...prev]; newModelDefs[index].model_max_tokens = value; return newModelDefs; }); }
}}
/>
</div>
Expand All @@ -326,14 +229,7 @@ const ApiMenu = ({
value={modelDef.model_max_context || ''}
onChange={(e) => {
const value = Number(e.target.value);

if (!isNaN(value)) {
_setModelDefs((prev) => {
const newModelDefs = [...prev];
newModelDefs[index].model_max_context = value;
return newModelDefs;
});
}
if (!isNaN(value)) { _setModelDefs((prev) => { const newModelDefs = [...prev]; newModelDefs[index].model_max_context = value; return newModelDefs; }); }
}}
/>
</div>
Expand All @@ -346,14 +242,7 @@ const ApiMenu = ({
value={modelDef?.prompt_cost_1000 || ''}
onChange={(e) => {
const value = Number(e.target.value);

if (!isNaN(value)) {
_setModelDefs((prev) => {
const newModelDefs = [...prev];
newModelDefs[index].prompt_cost_1000 = value;
return newModelDefs;
});
}
if (!isNaN(value)) { _setModelDefs((prev) => { const newModelDefs = [...prev]; newModelDefs[index].prompt_cost_1000 = value; return newModelDefs; }); }
}}
/>
</div>
Expand All @@ -366,53 +255,31 @@ const ApiMenu = ({
value={modelDef.completion_cost_1000 || ''}
onChange={(e) => {
const value = Number(e.target.value);

if (!isNaN(value)) {
_setModelDefs((prev) => {
const newModelDefs = [...prev];
newModelDefs[index].completion_cost_1000 = value;
return newModelDefs;
});
}
if (!isNaN(value)) { _setModelDefs((prev) => { const newModelDefs = [...prev]; newModelDefs[index].completion_cost_1000 = value; return newModelDefs; }); }
}}
/>
</div>
<div className='p-1 ml-2 hover:text-custom-black hover:bg-custom-white hover:rounded'>
{_modelDefs[index].swap_visible ? (
<VisibleIcon onClick={() => setHideModel(index, false)} />
) : (
<HiddenIcon onClick={() => setHideModel(index, true)} />
)}
{_modelDefs[index].swap_visible ? (<VisibleIcon onClick={() => setHideModel(index, false)} />) : (<HiddenIcon onClick={() => setHideModel(index, true)} />)}
</div>
</div>
</div>
))}
</div>
<div className='flex justify-center mt-0 mb-8'>
<div
className='cursor-pointer p-2 mt-0 rounded-xl btn btn-neutral'
onClick={addModel}
>
<div className='cursor-pointer p-2 mt-0 rounded-xl btn btn-neutral' onClick={addModel}>
<PlusIcon />
</div>
</div>
<p>* Prompt costs are in dollars per 1000 tokens.</p>
<p>Title generation always uses the first model.</p>
<p>
Hiding a model option will only remove it from the top-bar dropdown.
</p>
<p>Hiding a model option will only remove it from the top-bar dropdown.</p>
<p>
<Trans
i18nKey='apiKey.howTo'
ns='api'
components={[
<a
key={null}
href='https://platform.openai.com/account/api-keys'
className='link'
target='_blank'
rel='noreferrer'
/>,
<a key={null} href='https://platform.openai.com/account/api-keys' className='link' target='_blank' rel='noreferrer' />,
]}
/>{' '}
{t('securityMessage', { ns: 'api' })}
Expand All @@ -421,6 +288,9 @@ const ApiMenu = ({
</div>
</PopupModal>
);



};

export default ApiMenu;

0 comments on commit 0cc444e

Please sign in to comment.