UniqAI/bolt.new
1
0
Fork 0
mirror of https://github.com/stackblitz/bolt.new synced 2025-02-05 20:46:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #684 from thecodacus/fix-auto-select-model

Browse Source 
fix: auto select model on provider disabled
This commit is contained in:
Anirban Kar 2024-12-13 20:04:22 +05:30 committed by GitHub
commit 8f15c81f37
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 16 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
app/components/chat/ModelSelector.tsx
View File

@ -1,7 +1,6 @@
import type { ProviderInfo } from '~/types/model'; import type { ProviderInfo } from '~/types/model';
import type { ModelInfo } from '~/utils/types'; import type { ModelInfo } from '~/utils/types';
import { useEffect, useState } from 'react'; import { useEffect } from 'react';
import Cookies from 'js-cookie';
interface ModelSelectorProps { interface ModelSelectorProps {
model?: string; model?: string;
@ -22,62 +21,28 @@ export const ModelSelector = ({
providerList, providerList,
}: ModelSelectorProps) => { }: ModelSelectorProps) => {
// Load enabled providers from cookies // Load enabled providers from cookies
const [enabledProviders, setEnabledProviders] = useState(() => {
const savedProviders = Cookies.get('providers');
if (savedProviders) {
try {
const parsedProviders = JSON.parse(savedProviders);
return providerList.filter((p) => parsedProviders[p.name]);
} catch (error) {
console.error('Failed to parse providers from cookies:', error);
return providerList;
}
}
return providerList;
});
// Update enabled providers when cookies change // Update enabled providers when cookies change
useEffect(() => { useEffect(() => {
// Function to update providers from cookies // If current provider is disabled, switch to first enabled provider
const updateProvidersFromCookies = () => { if (providerList.length == 0) {
const savedProviders = Cookies.get('providers'); return;
}
if (savedProviders) { if (provider && !providerList.map((p) => p.name).includes(provider.name)) {
try { const firstEnabledProvider = providerList[0];
const parsedProviders = JSON.parse(savedProviders); setProvider?.(firstEnabledProvider);
const newEnabledProviders = providerList.filter((p) => parsedProviders[p.name]);
setEnabledProviders(newEnabledProviders);
// If current provider is disabled, switch to first enabled provider // Also update the model to the first available one for the new provider
if (provider && !parsedProviders[provider.name] && newEnabledProviders.length > 0) { const firstModel = modelList.find((m) => m.provider === firstEnabledProvider.name);
const firstEnabledProvider = newEnabledProviders[0];
setProvider?.(firstEnabledProvider);
// Also update the model to the first available one for the new provider if (firstModel) {
const firstModel = modelList.find((m) => m.provider === firstEnabledProvider.name); setModel?.(firstModel.name);
if (firstModel) {
setModel?.(firstModel.name);
}
}
} catch (error) {
console.error('Failed to parse providers from cookies:', error);
}
} }
}; }
// Initial update
updateProvidersFromCookies();
// Set up an interval to check for cookie changes
const interval = setInterval(updateProvidersFromCookies, 1000);
return () => clearInterval(interval);
}, [providerList, provider, setProvider, modelList, setModel]); }, [providerList, provider, setProvider, modelList, setModel]);
if (enabledProviders.length === 0) { if (providerList.length === 0) {
return ( return (
<div className="mb-2 p-4 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary"> <div className="mb-2 p-4 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary">
<p className="text-center"> <p className="text-center">
@ -93,7 +58,7 @@ export const ModelSelector = ({
<select <select
value={provider?.name ?? ''} value={provider?.name ?? ''}
onChange={(e) => { onChange={(e) => {
const newProvider = enabledProviders.find((p: ProviderInfo) => p.name === e.target.value); const newProvider = providerList.find((p: ProviderInfo) => p.name === e.target.value);
if (newProvider && setProvider) { if (newProvider && setProvider) {
setProvider(newProvider); setProvider(newProvider);
@ -107,7 +72,7 @@ export const ModelSelector = ({
}} }}
className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all" className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
> >
{enabledProviders.map((provider: ProviderInfo) => ( {providerList.map((provider: ProviderInfo) => (
<option key={provider.name} value={provider.name}> <option key={provider.name} value={provider.name}>
{provider.name} {provider.name}
</option> </option>