fix: api-key manager cleanup and log error on llm call (#1077)

* fix: api-key manager cleanup and log error on llm call

* log improved
This commit is contained in:
Anirban Kar
2025-01-13 04:21:29 +05:30
committed by GitHub
parent 3a298f1586
commit fad41973e2
6 changed files with 65 additions and 44 deletions

View File

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useCallback } from 'react';
import { IconButton } from '~/components/ui/IconButton';
import type { ProviderInfo } from '~/types/model';
import Cookies from 'js-cookie';
import { providerBaseUrlEnvKeys } from '~/utils/constants';
interface APIKeyManagerProps {
provider: ProviderInfo;
@@ -93,18 +92,16 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
<span className="text-sm font-medium text-bolt-elements-textSecondary">{provider?.name} API Key:</span>
{!isEditing && (
<div className="flex items-center gap-2">
{isEnvKeySet ? (
<>
<div className="i-ph:check-circle-fill text-green-500 w-4 h-4" />
<span className="text-xs text-green-500">
Set via {providerBaseUrlEnvKeys[provider.name].apiTokenKey} environment variable
</span>
</>
) : apiKey ? (
{apiKey ? (
<>
<div className="i-ph:check-circle-fill text-green-500 w-4 h-4" />
<span className="text-xs text-green-500">Set via UI</span>
</>
) : isEnvKeySet ? (
<>
<div className="i-ph:check-circle-fill text-green-500 w-4 h-4" />
<span className="text-xs text-green-500">Set via environment variable</span>
</>
) : (
<>
<div className="i-ph:x-circle-fill text-red-500 w-4 h-4" />
@@ -117,7 +114,7 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
</div>
<div className="flex items-center gap-2 shrink-0">
{isEditing && !isEnvKeySet ? (
{isEditing ? (
<div className="flex items-center gap-2">
<input
type="password"
@@ -145,7 +142,7 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
</div>
) : (
<>
{!isEnvKeySet && (
{
<IconButton
onClick={() => setIsEditing(true)}
title="Edit API Key"
@@ -153,8 +150,8 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
>
<div className="i-ph:pencil-simple w-4 h-4" />
</IconButton>
)}
{provider?.getApiKeyLink && !isEnvKeySet && (
}
{provider?.getApiKeyLink && !apiKey && (
<IconButton
onClick={() => window.open(provider?.getApiKeyLink)}
title="Get API Key"

View File

@@ -137,35 +137,36 @@ export const ChatImpl = memo(
const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
const { messages, isLoading, input, handleInputChange, setInput, stop, append, setMessages, reload } = useChat({
api: '/api/chat',
body: {
apiKeys,
files,
promptId,
contextOptimization: contextOptimizationEnabled,
},
sendExtraMessageFields: true,
onError: (error) => {
logger.error('Request failed\n\n', error);
toast.error(
'There was an error processing your request: ' + (error.message ? error.message : 'No details were returned'),
);
},
onFinish: (message, response) => {
const usage = response.usage;
const { messages, isLoading, input, handleInputChange, setInput, stop, append, setMessages, reload, error } =
useChat({
api: '/api/chat',
body: {
apiKeys,
files,
promptId,
contextOptimization: contextOptimizationEnabled,
},
sendExtraMessageFields: true,
onError: (e) => {
logger.error('Request failed\n\n', e, error);
toast.error(
'There was an error processing your request: ' + (e.message ? e.message : 'No details were returned'),
);
},
onFinish: (message, response) => {
const usage = response.usage;
if (usage) {
console.log('Token usage:', usage);
if (usage) {
console.log('Token usage:', usage);
// You can now use the usage data as needed
}
// You can now use the usage data as needed
}
logger.debug('Finished streaming');
},
initialMessages,
initialInput: Cookies.get(PROMPT_COOKIE_KEY) || '',
});
logger.debug('Finished streaming');
},
initialMessages,
initialInput: Cookies.get(PROMPT_COOKIE_KEY) || '',
});
useEffect(() => {
const prompt = searchParams.get('prompt');
@@ -263,6 +264,10 @@ export const ChatImpl = memo(
*/
await workbenchStore.saveAllFiles();
if (error != null) {
setMessages(messages.slice(0, -1));
}
const fileModifications = workbenchStore.getFileModifcations();
chatStore.setKey('aborted', false);