From a544611a5690db6610e938fb0a6f2c45e0e00a38 Mon Sep 17 00:00:00 2001 From: ali00209 Date: Tue, 29 Oct 2024 08:19:30 +0500 Subject: [PATCH] fix: working --- app/components/chat/BaseChat.tsx | 35 ++++++++++++++++++++++------- app/components/chat/Chat.client.tsx | 13 +++++++++++ app/lib/.server/llm/api-key.ts | 8 ++++++- app/lib/.server/llm/model.ts | 4 ++-- app/lib/.server/llm/stream-text.ts | 9 ++++++-- app/routes/api.chat.ts | 15 +++++++++++-- app/utils/constants.ts | 8 +++---- package.json | 4 +++- pnpm-lock.yaml | 17 ++++++++++++++ 9 files changed, 93 insertions(+), 20 deletions(-) diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx index e3be27bb3..5fd4cd033 100644 --- a/app/components/chat/BaseChat.tsx +++ b/app/components/chat/BaseChat.tsx @@ -12,6 +12,7 @@ import { Messages } from './Messages.client'; import { SendButton } from './SendButton.client'; import { useState } from 'react'; import { APIKeyManager } from './APIKeyManager'; +import Cookies from 'js-cookie'; import styles from './BaseChat.module.scss'; @@ -112,18 +113,36 @@ export const BaseChat = React.forwardRef( const [apiKeys, setApiKeys] = useState>({}); useEffect(() => { - // Load API keys from localStorage on component mount - const storedApiKeys = localStorage.getItem('apiKeys'); - if (storedApiKeys) { - setApiKeys(JSON.parse(storedApiKeys)); + // Load API keys from cookies on component mount + try { + const storedApiKeys = Cookies.get('apiKeys'); + if (storedApiKeys) { + const parsedKeys = JSON.parse(storedApiKeys); + if (typeof parsedKeys === 'object' && parsedKeys !== null) { + setApiKeys(parsedKeys); + } + } + } catch (error) { + console.error('Error loading API keys from cookies:', error); + // Clear invalid cookie data + Cookies.remove('apiKeys'); } }, []); const updateApiKey = (provider: string, key: string) => { - const updatedApiKeys = { ...apiKeys, [provider]: key }; - setApiKeys(updatedApiKeys); - // Save updated API keys to localStorage - localStorage.setItem('apiKeys', JSON.stringify(updatedApiKeys)); + try { + const updatedApiKeys = { ...apiKeys, [provider]: key }; + setApiKeys(updatedApiKeys); + // Save updated API keys to cookies with 30 day expiry and secure settings + Cookies.set('apiKeys', JSON.stringify(updatedApiKeys), { + expires: 30, // 30 days + secure: true, // Only send over HTTPS + sameSite: 'strict', // Protect against CSRF + path: '/' // Accessible across the site + }); + } catch (error) { + console.error('Error saving API keys to cookies:', error); + } }; return ( diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx index 458bd8364..e1adca021 100644 --- a/app/components/chat/Chat.client.tsx +++ b/app/components/chat/Chat.client.tsx @@ -15,6 +15,7 @@ import { DEFAULT_MODEL } from '~/utils/constants'; import { cubicEasingFn } from '~/utils/easings'; import { createScopedLogger, renderLogger } from '~/utils/logger'; import { BaseChat } from './BaseChat'; +import Cookies from 'js-cookie'; const toastAnimation = cssTransition({ enter: 'animated fadeInRight', @@ -79,8 +80,13 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp const [animationScope, animate] = useAnimate(); + const [apiKeys, setApiKeys] = useState>({}); + const { messages, isLoading, input, handleInputChange, setInput, stop, append } = useChat({ api: '/api/chat', + body: { + apiKeys + }, onError: (error) => { logger.error('Request failed\n\n', error); toast.error('There was an error processing your request'); @@ -202,6 +208,13 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp const [messageRef, scrollRef] = useSnapScroll(); + useEffect(() => { + const storedApiKeys = Cookies.get('apiKeys'); + if (storedApiKeys) { + setApiKeys(JSON.parse(storedApiKeys)); + } + }, []); + return ( ) { /** * The `cloudflareEnv` is only used when deployed or when previewing locally. * In development the environment variables are available through `env`. */ + // First check user-provided API keys + if (userApiKeys?.[provider]) { + return userApiKeys[provider]; + } + + // Fall back to environment variables switch (provider) { case 'Anthropic': return env.ANTHROPIC_API_KEY || cloudflareEnv.ANTHROPIC_API_KEY; diff --git a/app/lib/.server/llm/model.ts b/app/lib/.server/llm/model.ts index 390d57aeb..b56ad1026 100644 --- a/app/lib/.server/llm/model.ts +++ b/app/lib/.server/llm/model.ts @@ -80,8 +80,8 @@ export function getOpenRouterModel(apiKey: string, model: string) { return openRouter.chat(model); } -export function getModel(provider: string, model: string, env: Env) { - const apiKey = getAPIKey(env, provider); +export function getModel(provider: string, model: string, env: Env, apiKeys?: Record) { + const apiKey = getAPIKey(env, provider, apiKeys); const baseURL = getBaseURL(env, provider); switch (provider) { diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts index de3d5bfa8..ba951038a 100644 --- a/app/lib/.server/llm/stream-text.ts +++ b/app/lib/.server/llm/stream-text.ts @@ -38,7 +38,12 @@ function extractModelFromMessage(message: Message): { model: string; content: st return { model: DEFAULT_MODEL, content: message.content }; } -export function streamText(messages: Messages, env: Env, options?: StreamingOptions) { +export function streamText( + messages: Messages, + env: Env, + options?: StreamingOptions, + apiKeys?: Record +) { let currentModel = DEFAULT_MODEL; const processedMessages = messages.map((message) => { if (message.role === 'user') { @@ -54,7 +59,7 @@ export function streamText(messages: Messages, env: Env, options?: StreamingOpti const provider = MODEL_LIST.find((model) => model.name === currentModel)?.provider || DEFAULT_PROVIDER; return _streamText({ - model: getModel(provider, currentModel, env), + model: getModel(provider, currentModel, env, apiKeys), system: getSystemPrompt(), maxTokens: MAX_TOKENS, // headers: { diff --git a/app/routes/api.chat.ts b/app/routes/api.chat.ts index c455c193d..473f8c161 100644 --- a/app/routes/api.chat.ts +++ b/app/routes/api.chat.ts @@ -11,13 +11,17 @@ export async function action(args: ActionFunctionArgs) { } async function chatAction({ context, request }: ActionFunctionArgs) { - const { messages } = await request.json<{ messages: Messages }>(); + const { messages, apiKeys } = await request.json<{ + messages: Messages, + apiKeys: Record + }>(); const stream = new SwitchableStream(); try { const options: StreamingOptions = { toolChoice: 'none', + apiKeys, onFinish: async ({ text: content, finishReason }) => { if (finishReason !== 'length') { return stream.close(); @@ -40,7 +44,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) { }, }; - const result = await streamText(messages, context.cloudflare.env, options); + const result = await streamText(messages, context.cloudflare.env, options, apiKeys); stream.switchSource(result.toAIStream()); @@ -52,6 +56,13 @@ async function chatAction({ context, request }: ActionFunctionArgs) { }); } catch (error) { console.log(error); + + if (error.message?.includes('API key')) { + throw new Response('Invalid or missing API key', { + status: 401, + statusText: 'Unauthorized' + }); + } throw new Response(null, { status: 500, diff --git a/app/utils/constants.ts b/app/utils/constants.ts index b48cb3442..5f24b1097 100644 --- a/app/utils/constants.ts +++ b/app/utils/constants.ts @@ -4,8 +4,8 @@ export const WORK_DIR_NAME = 'project'; export const WORK_DIR = `/home/${WORK_DIR_NAME}`; export const MODIFICATIONS_TAG_NAME = 'bolt_file_modifications'; export const MODEL_REGEX = /^\[Model: (.*?)\]\n\n/; -export const DEFAULT_MODEL = 'claude-3-5-sonnet-20240620'; -export const DEFAULT_PROVIDER = 'Anthropic'; +export const DEFAULT_MODEL = 'google/gemini-flash-1.5-exp'; +export const DEFAULT_PROVIDER = 'OpenRouter'; const staticModels: ModelInfo[] = [ { name: 'claude-3-5-sonnet-20240620', label: 'Claude 3.5 Sonnet', provider: 'Anthropic' }, @@ -13,8 +13,8 @@ const staticModels: ModelInfo[] = [ { name: 'anthropic/claude-3.5-sonnet', label: 'Anthropic: Claude 3.5 Sonnet (OpenRouter)', provider: 'OpenRouter' }, { name: 'anthropic/claude-3-haiku', label: 'Anthropic: Claude 3 Haiku (OpenRouter)', provider: 'OpenRouter' }, { name: 'deepseek/deepseek-coder', label: 'Deepseek-Coder V2 236B (OpenRouter)', provider: 'OpenRouter' }, - { name: 'google/gemini-flash-1.5', label: 'Google Gemini Flash 1.5 (OpenRouter)', provider: 'OpenRouter' }, - { name: 'google/gemini-pro-1.5', label: 'Google Gemini Pro 1.5 (OpenRouter)', provider: 'OpenRouter' }, + { name: 'google/gemini-flash-1.5-exp', label: 'Google Gemini Flash 1.5 Exp (OpenRouter)', provider: 'OpenRouter' }, + { name: 'google/gemini-pro-1.5-exp', label: 'Google Gemini Pro 1.5 Exp (OpenRouter)', provider: 'OpenRouter' }, { name: 'mistralai/mistral-nemo', label: 'OpenRouter Mistral Nemo (OpenRouter)', provider: 'OpenRouter' }, { name: 'qwen/qwen-110b-chat', label: 'OpenRouter Qwen 110b Chat (OpenRouter)', provider: 'OpenRouter' }, { name: 'cohere/command', label: 'Cohere Command (OpenRouter)', provider: 'OpenRouter' }, diff --git a/package.json b/package.json index edb2b8dad..5e3bb7342 100644 --- a/package.json +++ b/package.json @@ -24,8 +24,8 @@ "dependencies": { "@ai-sdk/anthropic": "^0.0.39", "@ai-sdk/google": "^0.0.52", - "@ai-sdk/openai": "^0.0.66", "@ai-sdk/mistral": "^0.0.43", + "@ai-sdk/openai": "^0.0.66", "@codemirror/autocomplete": "^6.17.0", "@codemirror/commands": "^6.6.0", "@codemirror/lang-cpp": "^6.0.2", @@ -67,6 +67,7 @@ "isbot": "^4.1.0", "istextorbinary": "^9.5.0", "jose": "^5.6.3", + "js-cookie": "^3.0.5", "jszip": "^3.10.1", "nanostores": "^0.10.3", "ollama-ai-provider": "^0.15.2", @@ -90,6 +91,7 @@ "@remix-run/dev": "^2.10.0", "@types/diff": "^5.2.1", "@types/file-saver": "^2.0.7", + "@types/js-cookie": "^3.0.6", "@types/react": "^18.2.20", "@types/react-dom": "^18.2.7", "fast-glob": "^3.3.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f56c5ca78..82e14c1ed 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -146,6 +146,9 @@ importers: jose: specifier: ^5.6.3 version: 5.6.3 + js-cookie: + specifier: ^3.0.5 + version: 3.0.5 jszip: specifier: ^3.10.1 version: 3.10.1 @@ -210,6 +213,9 @@ importers: '@types/file-saver': specifier: ^2.0.7 version: 2.0.7 + '@types/js-cookie': + specifier: ^3.0.6 + version: 3.0.6 '@types/react': specifier: ^18.2.20 version: 18.3.3 @@ -1872,6 +1878,9 @@ packages: '@types/hast@3.0.4': resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==} + '@types/js-cookie@3.0.6': + resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==} + '@types/json-schema@7.0.15': resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} @@ -3455,6 +3464,10 @@ packages: jose@5.6.3: resolution: {integrity: sha512-1Jh//hEEwMhNYPDDLwXHa2ePWgWiFNNUadVmguAAw2IJ6sj9mNxV5tGXJNqlMkJAybF6Lgw1mISDxTePP/187g==} + js-cookie@3.0.5: + resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==} + engines: {node: '>=14'} + js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} @@ -7248,6 +7261,8 @@ snapshots: dependencies: '@types/unist': 3.0.2 + '@types/js-cookie@3.0.6': {} + '@types/json-schema@7.0.15': {} '@types/mdast@3.0.15': @@ -9211,6 +9226,8 @@ snapshots: jose@5.6.3: {} + js-cookie@3.0.5: {} + js-tokens@4.0.0: {} js-yaml@4.1.0: