UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-01-22 19:06:12 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add provider filtering on model list

Browse Source
This commit is contained in:
JasonM 2024-10-15 21:15:02 +07:00
parent 4f7a06f56a
commit 3e47275df2
1 changed files with 41 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
app/components/chat/BaseChat.tsx
View File

@ -10,6 +10,7 @@ import { classNames } from '~/utils/classNames';
import { MODEL_LIST } from '~/utils/constants';
import { Messages } from './Messages.client';
import { SendButton } from './SendButton.client';
import { useState } from 'react';
import styles from './BaseChat.module.scss';
@ -21,6 +22,40 @@ const EXAMPLE_PROMPTS = [
{ text: 'How do I center a div?' },
];
const providerList = [...new Set(MODEL_LIST.map((model) => model.provider))]
const ModelSelector = ({ model, setModel, modelList, providerList }) => {
const [provider, setProvider] = useState(null);
return (
<div className="mb-2">
<select
value={provider}
onChange={(e) => setProvider(e.target.value)}
className="w-full p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none"
>
{providerList.map((provider) => (
<option key={provider} value={provider}>
{provider}
</option>
))}
</select>
<select
value={model}
provider={provider}
onChange={(e) => setModel(e.target.value)}
className="w-full p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none"
>
{[...modelList].filter( e => e.provider == provider ).map((modelOption) => (
<option key={modelOption.name} value={modelOption.name}>
{modelOption.label}
</option>
))}
</select>
</div>
)
}
const TEXTAREA_MIN_HEIGHT = 76;
interface BaseChatProps {
@ -110,20 +145,12 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
'sticky bottom-0': chatStarted,
})}
>
{/* Model selection dropdown */}
<div className="mb-2">
<select
value={model}
onChange={(e) => setModel(e.target.value)}
className="w-full p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none"
>
{MODEL_LIST.map((modelOption) => (
<option key={modelOption.name} value={modelOption.name}>
{modelOption.label}
</option>
))}
</select>
</div>
<ModelSelector
model={model}
setModel={setModel}
modelList={MODEL_LIST}
providerList={providerList}
/>
<div
className={classNames(
'shadow-sm border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden',