remi/Perplexica
1
0
Fork 0
mirror of https://github.com/ItzCrazyKns/Perplexica.git synced 2025-10-24 07:58:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(app): show "add model" button

Browse Source
This commit is contained in:
ItzCrazyKns
2025-10-21 16:32:40 +05:30
parent 88ae67065b
commit ce78b4ff62
2 changed files with 88 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/components/Settings/Sections/Models/ModelProvider.tsx
View File

@@ -112,100 +112,96 @@ const ModelProvider = ({
> >
<div className="border-t border-light-200 dark:border-dark-200" /> <div className="border-t border-light-200 dark:border-dark-200" />
<div className="flex flex-col gap-y-4 px-5 py-4"> <div className="flex flex-col gap-y-4 px-5 py-4">
{modelProvider.chatModels.length > 0 && ( <div className="flex flex-col gap-y-2">
<div className="flex flex-col gap-y-2"> <div className="flex flex-row w-full justify-between items-center">
<div className="flex flex-row w-full justify-between items-center"> <p className="text-[11px] lg:text-xs text-black/70 dark:text-white/70">
<p className="text-[11px] lg:text-xs text-black/70 dark:text-white/70"> Chat models
Chat models </p>
</p> <AddModel
<AddModel providerId={modelProvider.id}
providerId={modelProvider.id} setProviders={setProviders}
setProviders={setProviders} type="chat"
type="chat" />
/>
</div>
<div className="flex flex-col gap-2">
{modelProvider.chatModels.some((m) => m.key === 'error') ? (
<div className="flex flex-row items-center gap-2 text-xs lg:text-sm text-red-500 dark:text-red-400 rounded-lg bg-red-50 dark:bg-red-950/20 px-3 py-2 border border-red-200 dark:border-red-900/30">
<AlertCircle size={16} className="shrink-0" />
<span className="break-words">
{
modelProvider.chatModels.find(
(m) => m.key === 'error',
)?.name
}
</span>
</div>
) : (
<div className="flex flex-row flex-wrap gap-2">
{modelProvider.chatModels.map((model, index) => (
<div
key={`${modelProvider.id}-chat-${model.key}-${index}`}
className="flex flex-row items-center space-x-1 text-xs lg:text-sm text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5"
>
<span>{model.name}</span>
<button
onClick={() => {
handleModelDelete('chat', model.key);
}}
>
<X size={12} />
</button>
</div>
))}
</div>
)}
</div>
</div> </div>
)} <div className="flex flex-col gap-2">
{modelProvider.embeddingModels.length > 0 && ( {modelProvider.chatModels.some((m) => m.key === 'error') ? (
<div className="flex flex-col gap-y-2"> <div className="flex flex-row items-center gap-2 text-xs lg:text-sm text-red-500 dark:text-red-400 rounded-lg bg-red-50 dark:bg-red-950/20 px-3 py-2 border border-red-200 dark:border-red-900/30">
<div className="flex flex-row w-full justify-between items-center"> <AlertCircle size={16} className="shrink-0" />
<p className="text-[11px] lg:text-xs text-black/70 dark:text-white/70"> <span className="break-words">
Embedding models {
</p> modelProvider.chatModels.find(
<AddModel (m) => m.key === 'error',
providerId={modelProvider.id} )?.name
setProviders={setProviders} }
type="embedding" </span>
/> </div>
</div> ) : (
<div className="flex flex-col gap-2"> <div className="flex flex-row flex-wrap gap-2">
{modelProvider.embeddingModels.some( {modelProvider.chatModels.map((model, index) => (
(m) => m.key === 'error', <div
) ? ( key={`${modelProvider.id}-chat-${model.key}-${index}`}
<div className="flex flex-row items-center gap-2 text-xs lg:text-sm text-red-500 dark:text-red-400 rounded-lg bg-red-50 dark:bg-red-950/20 px-3 py-2 border border-red-200 dark:border-red-900/30"> className="flex flex-row items-center space-x-1 text-xs lg:text-sm text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5"
<AlertCircle size={16} className="shrink-0" /> >
<span className="break-words"> <span>{model.name}</span>
{ <button
modelProvider.embeddingModels.find( onClick={() => {
(m) => m.key === 'error', handleModelDelete('chat', model.key);
)?.name }}
}
</span>
</div>
) : (
<div className="flex flex-row flex-wrap gap-2">
{modelProvider.embeddingModels.map((model, index) => (
<div
key={`${modelProvider.id}-embedding-${model.key}-${index}`}
className="flex flex-row items-center space-x-1 text-xs lg:text-sm text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5"
> >
<span>{model.name}</span> <X size={12} />
<button </button>
onClick={() => { </div>
handleModelDelete('embedding', model.key); ))}
}} </div>
> )}
<X size={12} />
</button>
</div>
))}
</div>
)}
</div>
</div> </div>
)} </div>
<div className="flex flex-col gap-y-2">
<div className="flex flex-row w-full justify-between items-center">
<p className="text-[11px] lg:text-xs text-black/70 dark:text-white/70">
Embedding models
</p>
<AddModel
providerId={modelProvider.id}
setProviders={setProviders}
type="embedding"
/>
</div>
<div className="flex flex-col gap-2">
{modelProvider.embeddingModels.some(
(m) => m.key === 'error',
) ? (
<div className="flex flex-row items-center gap-2 text-xs lg:text-sm text-red-500 dark:text-red-400 rounded-lg bg-red-50 dark:bg-red-950/20 px-3 py-2 border border-red-200 dark:border-red-900/30">
<AlertCircle size={16} className="shrink-0" />
<span className="break-words">
{
modelProvider.embeddingModels.find(
(m) => m.key === 'error',
)?.name
}
</span>
</div>
) : (
<div className="flex flex-row flex-wrap gap-2">
{modelProvider.embeddingModels.map((model, index) => (
<div
key={`${modelProvider.id}-embedding-${model.key}-${index}`}
className="flex flex-row items-center space-x-1 text-xs lg:text-sm text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5"
>
<span>{model.name}</span>
<button
onClick={() => {
handleModelDelete('embedding', model.key);
}}
>
<X size={12} />
</button>
</div>
))}
</div>
)}
</div>
</div>
</div> </div>
</motion.div> </motion.div>
)} )}

3
src/components/Setup/SetupConfig.tsx
View File

@@ -63,8 +63,7 @@ const SetupConfig = ({
} }
}; };
const hasProviders = const hasProviders = providers.length > 0;
providers.filter((p) => p.chatModels.length > 0).length > 0;
return ( return (
<div className="w-[95vw] md:w-[80vw] lg:w-[65vw] mx-auto px-2 sm:px-4 md:px-6 flex flex-col space-y-6"> <div className="w-[95vw] md:w-[80vw] lg:w-[65vw] mx-auto px-2 sm:px-4 md:px-6 flex flex-col space-y-6">