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

Bug fixes

Browse Source
This commit is contained in:
eduardruzga 2024-11-12 11:25:58 +02:00
parent a2cca14174
commit 756d3f2b85
4 changed files with 48 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/chat/APIKeyManager.tsx
View File

@ -6,9 +6,15 @@ interface APIKeyManagerProps {
provider: ProviderInfo; provider: ProviderInfo;
apiKey: string; apiKey: string;
setApiKey: (key: string) => void; setApiKey: (key: string) => void;
getApiKeyLink?: string;
labelForGetApiKey?: string;
} }
export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey, setApiKey }) => { export const APIKeyManager: React.FC<APIKeyManagerProps> = ({
provider,
apiKey,
setApiKey,
}) => {
const [isEditing, setIsEditing] = useState(false); const [isEditing, setIsEditing] = useState(false);
const [tempKey, setTempKey] = useState(apiKey); const [tempKey, setTempKey] = useState(apiKey);
@ -43,7 +49,11 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
<IconButton onClick={() => setIsEditing(true)} title="Edit API Key"> <IconButton onClick={() => setIsEditing(true)} title="Edit API Key">
<div className="i-ph:pencil-simple" /> <div className="i-ph:pencil-simple" />
</IconButton> </IconButton>
{!!provider?.getApiKeyLink ? <a href={provider?.getApiKeyLink}>{provider?.labelForGetApiKey || "Get API Key"}</a> : "" }
{provider?.getApiKeyLink && <IconButton onClick={() => window.open(provider?.getApiKeyLink)} title="Edit API Key">
<span className="mr-2">{provider?.labelForGetApiKey || 'Get API Key'}</span>
<div className={provider?.icon || "i-ph:key"} />
</IconButton>}
</> </>
)} )}
</div> </div>

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

@ -7,7 +7,7 @@ import { Menu } from '~/components/sidebar/Menu.client';
import { IconButton } from '~/components/ui/IconButton'; import { IconButton } from '~/components/ui/IconButton';
import { Workbench } from '~/components/workbench/Workbench.client'; import { Workbench } from '~/components/workbench/Workbench.client';
import { classNames } from '~/utils/classNames'; import { classNames } from '~/utils/classNames';
import { MODEL_LIST, DEFAULT_PROVIDER, PROVIDER_LIST } from '~/utils/constants'; import { MODEL_LIST, DEFAULT_PROVIDER, PROVIDER_LIST, ProviderInfo } from '~/utils/constants';
import { Messages } from './Messages.client'; import { Messages } from './Messages.client';
import { SendButton } from './SendButton.client'; import { SendButton } from './SendButton.client';
import { useState } from 'react'; import { useState } from 'react';
@ -30,9 +30,9 @@ const ModelSelector = ({ model, setModel, provider, setProvider, modelList, prov
return ( return (
<div className="mb-2 flex gap-2"> <div className="mb-2 flex gap-2">
<select <select
value={provider} value={provider?.name}
onChange={(e) => { onChange={(e) => {
setProvider(e.target.value); setProvider(providerList.find(p => p.name === e.target.value));
const firstModel = [...modelList].find(m => m.provider == e.target.value); const firstModel = [...modelList].find(m => m.provider == e.target.value);
setModel(firstModel ? firstModel.name : ''); setModel(firstModel ? firstModel.name : '');
}} }}
@ -49,7 +49,7 @@ const ModelSelector = ({ model, setModel, provider, setProvider, modelList, prov
onChange={(e) => setModel(e.target.value)} onChange={(e) => setModel(e.target.value)}
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"
> >
{[...modelList].filter(e => e.provider == provider && e.name).map((modelOption) => ( {[...modelList].filter(e => e.provider == provider?.name && e.name).map((modelOption) => (
<option key={modelOption.name} value={modelOption.name}> <option key={modelOption.name} value={modelOption.name}>
{modelOption.label} {modelOption.label}
</option> </option>
@ -74,8 +74,8 @@ interface BaseChatProps {
input?: string; input?: string;
model: string; model: string;
setModel: (model: string) => void; setModel: (model: string) => void;
provider: string; provider: ProviderInfo;
setProvider: (provider: string) => void; setProvider: (provider: ProviderInfo) => void;
handleStop?: () => void; handleStop?: () => void;
sendMessage?: (event: React.UIEvent, messageInput?: string) => void; sendMessage?: (event: React.UIEvent, messageInput?: string) => void;
handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void; handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
@ -106,6 +106,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
}, },
ref, ref,
) => { ) => {
console.log(provider);
const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200; const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
const [apiKeys, setApiKeys] = useState<Record<string, string>>({}); const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
@ -194,11 +195,12 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
setProvider={setProvider} setProvider={setProvider}
providerList={providerList} providerList={providerList}
/> />
<APIKeyManager {provider &&
provider={provider} <APIKeyManager
apiKey={apiKeys[provider] || ''} provider={provider}
setApiKey={(key) => updateApiKey(provider, key)} apiKey={apiKeys[provider.name] || ''}
/> setApiKey={(key) => updateApiKey(provider.name, key)}
/>}
<div <div
className={classNames( className={classNames(
'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all', 'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all',

4
app/components/chat/Chat.client.tsx
View File

@ -189,7 +189,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
* manually reset the input and we'd have to manually pass in file attachments. However, those * manually reset the input and we'd have to manually pass in file attachments. However, those
* aren't relevant here. * aren't relevant here.
*/ */
append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider}]\n\n${diff}\n\n${_input}` }); append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${diff}\n\n${_input}` });
/** /**
* After sending a new message we reset all modifications since the model * After sending a new message we reset all modifications since the model
@ -197,7 +197,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
*/ */
workbenchStore.resetAllFileModifications(); workbenchStore.resetAllFileModifications();
} else { } else {
append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider}]\n\n${_input}` }); append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}` });
} }
setInput(''); setInput('');

35
app/utils/constants.ts
View File

@ -6,7 +6,7 @@ export const MODIFICATIONS_TAG_NAME = 'bolt_file_modifications';
export const MODEL_REGEX = /^\[Model: (.*?)\]\n\n/; export const MODEL_REGEX = /^\[Model: (.*?)\]\n\n/;
export const PROVIDER_REGEX = /\[Provider: (.*?)\]\n\n/; export const PROVIDER_REGEX = /\[Provider: (.*?)\]\n\n/;
export const DEFAULT_MODEL = 'claude-3-5-sonnet-latest'; export const DEFAULT_MODEL = 'claude-3-5-sonnet-latest';
export const DEFAULT_PROVIDER = 'Anthropic';
export type ProviderInfo = { export type ProviderInfo = {
staticModels: ModelInfo[], staticModels: ModelInfo[],
@ -14,13 +14,29 @@ export type ProviderInfo = {
getDynamicModels?: () => Promise<ModelInfo[]>, getDynamicModels?: () => Promise<ModelInfo[]>,
getApiKeyLink?: string, getApiKeyLink?: string,
labelForGetApiKey?: string, labelForGetApiKey?: string,
icon?:string,
}; };
const PROVIDER_LIST: ProviderInfo[] = [ const PROVIDER_LIST: ProviderInfo[] = [
{
name: 'Anthropic',
staticModels: [
{ name: 'claude-3-5-sonnet-latest', label: 'Claude 3.5 Sonnet (new)', provider: 'Anthropic' },
{ name: 'claude-3-5-sonnet-20240620', label: 'Claude 3.5 Sonnet (old)', provider: 'Anthropic' },
{ name: 'claude-3-5-haiku-latest', label: 'Claude 3.5 Haiku (new)', provider: 'Anthropic' },
{ name: 'claude-3-opus-latest', label: 'Claude 3 Opus', provider: 'Anthropic' },
{ name: 'claude-3-sonnet-20240229', label: 'Claude 3 Sonnet', provider: 'Anthropic' },
{ name: 'claude-3-haiku-20240307', label: 'Claude 3 Haiku', provider: 'Anthropic' }
],
getApiKeyLink: "https://console.anthropic.com/settings/keys",
},
{ {
name: 'Ollama', name: 'Ollama',
staticModels: [], staticModels: [],
getDynamicModels: getOllamaModels getDynamicModels: getOllamaModels,
getApiKeyLink: "https://ollama.com/download",
labelForGetApiKey: "Download Ollama",
icon: "i-ph:cloud-arrow-down",
}, { }, {
name: 'OpenAILike', name: 'OpenAILike',
staticModels: [], staticModels: [],
@ -62,17 +78,6 @@ const PROVIDER_LIST: ProviderInfo[] = [
{ name: 'llama-3.2-1b-preview', label: 'Llama 3.2 1b (Groq)', provider: 'Groq' } { name: 'llama-3.2-1b-preview', label: 'Llama 3.2 1b (Groq)', provider: 'Groq' }
], ],
getApiKeyLink: 'https://console.groq.com/keys' getApiKeyLink: 'https://console.groq.com/keys'
}, {
name: 'Anthropic',
staticModels: [
{ name: 'claude-3-5-sonnet-latest', label: 'Claude 3.5 Sonnet (new)', provider: 'Anthropic' },
{ name: 'claude-3-5-sonnet-20240620', label: 'Claude 3.5 Sonnet (old)', provider: 'Anthropic' },
{ name: 'claude-3-5-haiku-latest', label: 'Claude 3.5 Haiku (new)', provider: 'Anthropic' },
{ name: 'claude-3-opus-latest', label: 'Claude 3 Opus', provider: 'Anthropic' },
{ name: 'claude-3-sonnet-20240229', label: 'Claude 3 Sonnet', provider: 'Anthropic' },
{ name: 'claude-3-haiku-20240307', label: 'Claude 3 Haiku', provider: 'Anthropic' }
],
getApiKeyLink: "https://console.anthropic.com/settings/keys",
}, { }, {
name: 'OpenAI', name: 'OpenAI',
staticModels: [ staticModels: [
@ -114,10 +119,12 @@ const PROVIDER_LIST: ProviderInfo[] = [
staticModels: [], staticModels: [],
getDynamicModels: getLMStudioModels, getDynamicModels: getLMStudioModels,
getApiKeyLink: 'https://lmstudio.ai/', getApiKeyLink: 'https://lmstudio.ai/',
labelForGetApiKey: 'Get LMStudio' labelForGetApiKey: 'Get LMStudio',
icon: "i-ph:cloud-arrow-down",
} }
]; ];
export const DEFAULT_PROVIDER = PROVIDER_LIST[0];
const staticModels: ModelInfo[] = PROVIDER_LIST.map(p => p.staticModels).flat(); const staticModels: ModelInfo[] = PROVIDER_LIST.map(p => p.staticModels).flat();