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:
@@ -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"
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user