Skip to content

Commit a196cf5

Browse files
chrismahoneychrismahoney
authored
Merge pull request stackblitz-labs#251 from wonderwhy-er/addGetKeyLinks
feat: refactor/standardise model providers code + add "get provider key"
2 parents ade5295 + 53d7c04 commit a196cf5

File tree

8 files changed

+259
-101
lines changed

8 files changed

+259
-101
lines changed

‎app/components/chat/APIKeyManager.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
import React, { useState } from 'react';
22
import { IconButton } from '~/components/ui/IconButton';
3+
import type { ProviderInfo } from '~/types/model';
34

45
interface APIKeyManagerProps {
5-
provider: string;
6+
provider: ProviderInfo;
67
apiKey: string;
78
setApiKey: (key: string) => void;
9+
getApiKeyLink?: string;
10+
labelForGetApiKey?: string;
811
}
912

10-
export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey, setApiKey }) => {
13+
export const APIKeyManager: React.FC<APIKeyManagerProps> = ({
14+
provider,
15+
apiKey,
16+
setApiKey,
17+
}) => {
1118
const [isEditing, setIsEditing] = useState(false);
1219
const [tempKey, setTempKey] = useState(apiKey);
1320

@@ -18,7 +25,7 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
1825

1926
return (
2027
<div className="flex items-center gap-2 mt-2 mb-2">
21-
<span className="text-sm text-bolt-elements-textSecondary">{provider} API Key:</span>
28+
<span className="text-sm text-bolt-elements-textSecondary">{provider?.name} API Key:</span>
2229
{isEditing ? (
2330
<>
2431
<input
@@ -42,6 +49,11 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
4249
<IconButton onClick={() => setIsEditing(true)} title="Edit API Key">
4350
<div className="i-ph:pencil-simple" />
4451
</IconButton>
52+
53+
{provider?.getApiKeyLink && <IconButton onClick={() => window.open(provider?.getApiKeyLink)} title="Edit API Key">
54+
<span className="mr-2">{provider?.labelForGetApiKey || 'Get API Key'}</span>
55+
<div className={provider?.icon || "i-ph:key"} />
56+
</IconButton>}
4557
</>
4658
)}
4759
</div>

‎app/components/chat/BaseChat.tsx‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@ import { Menu } from '~/components/sidebar/Menu.client';
77
import { IconButton } from '~/components/ui/IconButton';
88
import { Workbench } from '~/components/workbench/Workbench.client';
99
import { classNames } from '~/utils/classNames';
10-
import { MODEL_LIST, DEFAULT_PROVIDER } from '~/utils/constants';
10+
import { MODEL_LIST, DEFAULT_PROVIDER, PROVIDER_LIST, initializeModelList } from '~/utils/constants';
1111
import { Messages } from './Messages.client';
1212
import { SendButton } from './SendButton.client';
1313
import { useState } from 'react';
1414
import { APIKeyManager } from './APIKeyManager';
1515
import Cookies from 'js-cookie';
1616

1717
import styles from './BaseChat.module.scss';
18+
import type { ProviderInfo } from '~/utils/types';
1819

1920
const EXAMPLE_PROMPTS = [
2021
{ text: 'Build a todo app in React using Tailwind' },
@@ -24,42 +25,35 @@ const EXAMPLE_PROMPTS = [
2425
{ text: 'How do I center a div?' },
2526
];
2627

27-
const providerList = [...new Set(MODEL_LIST.map((model) => model.provider))];
28+
const providerList = PROVIDER_LIST;
2829

2930
const ModelSelector = ({ model, setModel, provider, setProvider, modelList, providerList }) => {
3031
return (
3132
<div className="mb-2 flex gap-2">
3233
<select
33-
value={provider}
34+
value={provider?.name}
3435
onChange={(e) => {
35-
setProvider(e.target.value);
36+
setProvider(providerList.find(p => p.name === e.target.value));
3637
const firstModel = [...modelList].find((m) => m.provider == e.target.value);
3738
setModel(firstModel ? firstModel.name : '');
3839
}}
3940
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"
4041
>
4142
{providerList.map((provider) => (
42-
<option key={provider} value={provider}>
43-
{provider}
43+
<option key={provider.name} value={provider.name}>
44+
{provider.name}
4445
</option>
4546
))}
46-
<option key="Ollama" value="Ollama">
47-
Ollama
48-
</option>
49-
<option key="OpenAILike" value="OpenAILike">
50-
OpenAILike
51-
</option>
52-
<option key="LMStudio" value="LMStudio">
53-
LMStudio
54-
</option>
5547
</select>
5648
<select
49+
key={provider?.name}
5750
value={model}
5851
onChange={(e) => setModel(e.target.value)}
52+
style={{maxWidth: "70%"}}
5953
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"
6054
>
6155
{[...modelList]
62-
.filter((e) => e.provider == provider && e.name)
56+
.filter((e) => e.provider == provider?.name && e.name)
6357
.map((modelOption) => (
6458
<option key={modelOption.name} value={modelOption.name}>
6559
{modelOption.label}
@@ -85,8 +79,8 @@ interface BaseChatProps {
8579
input?: string;
8680
model?: string;
8781
setModel?: (model: string) => void;
88-
provider?: string;
89-
setProvider?: (provider: string) => void;
82+
provider?: ProviderInfo;
83+
setProvider?: (provider: ProviderInfo) => void;
9084
handleStop?: () => void;
9185
sendMessage?: (event: React.UIEvent, messageInput?: string) => void;
9286
handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
@@ -117,8 +111,11 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
117111
},
118112
ref,
119113
) => {
114+
console.log(provider);
120115
const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
121116
const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
117+
const [modelList, setModelList] = useState(MODEL_LIST);
118+
122119

123120
useEffect(() => {
124121
// Load API keys from cookies on component mount
@@ -135,6 +132,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
135132
// Clear invalid cookie data
136133
Cookies.remove('apiKeys');
137134
}
135+
136+
initializeModelList().then(modelList => {
137+
setModelList(modelList);
138+
});
138139
}, []);
139140

140141
const updateApiKey = (provider: string, key: string) => {
@@ -198,18 +199,20 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
198199
})}
199200
>
200201
<ModelSelector
202+
key={provider?.name + ':' + modelList.length}
201203
model={model}
202204
setModel={setModel}
203-
modelList={MODEL_LIST}
205+
modelList={modelList}
204206
provider={provider}
205207
setProvider={setProvider}
206-
providerList={providerList}
207-
/>
208-
<APIKeyManager
209-
provider={provider}
210-
apiKey={apiKeys[provider] || ''}
211-
setApiKey={(key) => updateApiKey(provider, key)}
208+
providerList={PROVIDER_LIST}
212209
/>
210+
{provider &&
211+
<APIKeyManager
212+
provider={provider}
213+
apiKey={apiKeys[provider.name] || ''}
214+
setApiKey={(key) => updateApiKey(provider.name, key)}
215+
/>}
213216
<div
214217
className={classNames(
215218
'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all',

‎app/components/chat/Chat.client.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,12 @@ import { useChatHistory } from '~/lib/persistence';
1111
import { chatStore } from '~/lib/stores/chat';
1212
import { workbenchStore } from '~/lib/stores/workbench';
1313
import { fileModificationsToHTML } from '~/utils/diff';
14-
import { DEFAULT_MODEL, DEFAULT_PROVIDER } from '~/utils/constants';
14+
import { DEFAULT_MODEL, DEFAULT_PROVIDER, PROVIDER_LIST } from '~/utils/constants';
1515
import { cubicEasingFn } from '~/utils/easings';
1616
import { createScopedLogger, renderLogger } from '~/utils/logger';
1717
import { BaseChat } from './BaseChat';
1818
import Cookies from 'js-cookie';
19+
import type { ProviderInfo } from '~/utils/types';
1920

2021
const toastAnimation = cssTransition({
2122
enter: 'animated fadeInRight',
@@ -80,7 +81,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
8081
});
8182
const [provider, setProvider] = useState(() => {
8283
const savedProvider = Cookies.get('selectedProvider');
83-
return savedProvider || DEFAULT_PROVIDER;
84+
return PROVIDER_LIST.find(p => p.name === savedProvider) || DEFAULT_PROVIDER;
8485
});
8586

8687
const { showChat } = useStore(chatStore);
@@ -96,7 +97,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
9697
},
9798
onError: (error) => {
9899
logger.error('Request failed\n\n', error);
99-
toast.error('There was an error processing your request');
100+
toast.error('There was an error processing your request: ' + (error.message ? error.message : "No details were returned"));
100101
},
101102
onFinish: () => {
102103
logger.debug('Finished streaming');
@@ -195,15 +196,15 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
195196
* manually reset the input and we'd have to manually pass in file attachments. However, those
196197
* aren't relevant here.
197198
*/
198-
append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider}]\n\n${diff}\n\n${_input}` });
199+
append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${diff}\n\n${_input}` });
199200

200201
/**
201202
* After sending a new message we reset all modifications since the model
202203
* should now be aware of all the changes.
203204
*/
204205
workbenchStore.resetAllFileModifications();
205206
} else {
206-
append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider}]\n\n${_input}` });
207+
append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}` });
207208
}
208209

209210
setInput('');
@@ -227,9 +228,9 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
227228
Cookies.set('selectedModel', newModel, { expires: 30 });
228229
};
229230

230-
const handleProviderChange = (newProvider: string) => {
231+
const handleProviderChange = (newProvider: ProviderInfo) => {
231232
setProvider(newProvider);
232-
Cookies.set('selectedProvider', newProvider, { expires: 30 });
233+
Cookies.set('selectedProvider', newProvider.name, { expires: 30 });
233234
};
234235

235236
return (
@@ -263,7 +264,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
263264
})}
264265
enhancePrompt={() => {
265266
enhancePrompt(
266-
input,
267+
input,
267268
(input) => {
268269
setInput(input);
269270
scrollTextArea();

‎app/lib/.server/llm/model.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { createOpenAI } from '@ai-sdk/openai';
66
import { createGoogleGenerativeAI } from '@ai-sdk/google';
77
import { ollama } from 'ollama-ai-provider';
88
import { createOpenRouter } from "@openrouter/ai-sdk-provider";
9-
import { mistral } from '@ai-sdk/mistral';
109
import { createMistral } from '@ai-sdk/mistral';
1110

1211
export function getAnthropicModel(apiKey: string, model: string) {
@@ -41,9 +40,9 @@ export function getMistralModel(apiKey: string, model: string) {
4140
}
4241

4342
export function getGoogleModel(apiKey: string, model: string) {
44-
const google = createGoogleGenerativeAI(
43+
const google = createGoogleGenerativeAI({
4544
apiKey,
46-
);
45+
});
4746

4847
return google(model);
4948
}

‎app/routes/api.chat.ts‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,35 @@ export async function action(args: ActionFunctionArgs) {
1010
return chatAction(args);
1111
}
1212

13+
function parseCookies(cookieHeader) {
14+
const cookies = {};
15+
16+
// Split the cookie string by semicolons and spaces
17+
const items = cookieHeader.split(";").map(cookie => cookie.trim());
18+
19+
items.forEach(item => {
20+
const [name, ...rest] = item.split("=");
21+
if (name && rest) {
22+
// Decode the name and value, and join value parts in case it contains '='
23+
const decodedName = decodeURIComponent(name.trim());
24+
const decodedValue = decodeURIComponent(rest.join("=").trim());
25+
cookies[decodedName] = decodedValue;
26+
}
27+
});
28+
29+
return cookies;
30+
}
31+
1332
async function chatAction({ context, request }: ActionFunctionArgs) {
14-
const { messages, apiKeys } = await request.json<{
15-
messages: Messages,
16-
apiKeys: Record<string, string>
33+
const { messages } = await request.json<{
34+
messages: Messages
1735
}>();
1836

37+
const cookieHeader = request.headers.get("Cookie");
38+
39+
// Parse the cookie's value (returns an object or null if no cookie exists)
40+
const apiKeys = JSON.parse(parseCookies(cookieHeader).apiKeys || "{}");
41+
1942
const stream = new SwitchableStream();
2043

2144
try {
@@ -56,7 +79,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
5679
});
5780
} catch (error) {
5881
console.log(error);
59-
82+
6083
if (error.message?.includes('API key')) {
6184
throw new Response('Invalid or missing API key', {
6285
status: 401,

‎app/types/model.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { ModelInfo } from '~/utils/types';
2+
3+
export type ProviderInfo = {
4+
staticModels: ModelInfo[],
5+
name: string,
6+
getDynamicModels?: () => Promise<ModelInfo[]>,
7+
getApiKeyLink?: string,
8+
labelForGetApiKey?: string,
9+
icon?:string,
10+
};

0 commit comments

Comments
 (0)