Spaces:
Runtime error
Runtime error
| 'use client'; | |
| import * as React from 'react'; | |
| import { type ImageProvider, PROVIDER_CONFIGS } from '@/lib/api-config'; | |
| // Storage key for localStorage | |
| const STORAGE_KEY = 'imageforge-api-keys'; | |
| // Map provider to their storage key names | |
| const PROVIDER_STORAGE_KEYS: Record<ImageProvider, string> = { | |
| openai: 'openai', | |
| google: 'google', | |
| qwen: 'qwen', | |
| }; | |
| export interface ApiKeysState { | |
| openai: string; | |
| google: string; | |
| qwen: string; | |
| } | |
| interface ApiKeysContextType { | |
| apiKeys: ApiKeysState; | |
| setApiKey: (provider: ImageProvider, key: string) => void; | |
| getApiKey: (provider: ImageProvider) => string; | |
| clearApiKey: (provider: ImageProvider) => void; | |
| clearAllKeys: () => void; | |
| hasKey: (provider: ImageProvider) => boolean; | |
| isOpen: boolean; | |
| setIsOpen: (open: boolean) => void; | |
| } | |
| const defaultState: ApiKeysState = { | |
| openai: '', | |
| google: '', | |
| qwen: '', | |
| }; | |
| const ApiKeysContext = React.createContext<ApiKeysContextType | undefined>(undefined); | |
| export function ApiKeysProvider({ children }: { children: React.ReactNode }) { | |
| const [apiKeys, setApiKeys] = React.useState<ApiKeysState>(defaultState); | |
| const [isOpen, setIsOpen] = React.useState(false); | |
| const [isInitialized, setIsInitialized] = React.useState(false); | |
| // Load keys from localStorage on mount | |
| React.useEffect(() => { | |
| try { | |
| const stored = localStorage.getItem(STORAGE_KEY); | |
| if (stored) { | |
| const parsed = JSON.parse(stored) as Partial<ApiKeysState>; | |
| setApiKeys({ | |
| openai: parsed.openai || '', | |
| google: parsed.google || '', | |
| qwen: parsed.qwen || '', | |
| }); | |
| } | |
| } catch (error) { | |
| console.error('Failed to load API keys from localStorage:', error); | |
| } | |
| setIsInitialized(true); | |
| }, []); | |
| // Save keys to localStorage whenever they change | |
| React.useEffect(() => { | |
| if (isInitialized) { | |
| try { | |
| localStorage.setItem(STORAGE_KEY, JSON.stringify(apiKeys)); | |
| } catch (error) { | |
| console.error('Failed to save API keys to localStorage:', error); | |
| } | |
| } | |
| }, [apiKeys, isInitialized]); | |
| const setApiKey = React.useCallback((provider: ImageProvider, key: string) => { | |
| const storageKey = PROVIDER_STORAGE_KEYS[provider]; | |
| setApiKeys(prev => ({ | |
| ...prev, | |
| [storageKey]: key, | |
| })); | |
| }, []); | |
| const getApiKey = React.useCallback((provider: ImageProvider) => { | |
| const storageKey = PROVIDER_STORAGE_KEYS[provider]; | |
| return apiKeys[storageKey as keyof ApiKeysState] || ''; | |
| }, [apiKeys]); | |
| const clearApiKey = React.useCallback((provider: ImageProvider) => { | |
| const storageKey = PROVIDER_STORAGE_KEYS[provider]; | |
| setApiKeys(prev => ({ | |
| ...prev, | |
| [storageKey]: '', | |
| })); | |
| }, []); | |
| const clearAllKeys = React.useCallback(() => { | |
| setApiKeys(defaultState); | |
| }, []); | |
| const hasKey = React.useCallback((provider: ImageProvider) => { | |
| const key = getApiKey(provider); | |
| return key.trim().length > 0; | |
| }, [getApiKey]); | |
| const value = React.useMemo(() => ({ | |
| apiKeys, | |
| setApiKey, | |
| getApiKey, | |
| clearApiKey, | |
| clearAllKeys, | |
| hasKey, | |
| isOpen, | |
| setIsOpen, | |
| }), [apiKeys, setApiKey, getApiKey, clearApiKey, clearAllKeys, hasKey, isOpen]); | |
| return ( | |
| <ApiKeysContext.Provider value={value}> | |
| {children} | |
| </ApiKeysContext.Provider> | |
| ); | |
| } | |
| export function useApiKeys() { | |
| const context = React.useContext(ApiKeysContext); | |
| if (context === undefined) { | |
| throw new Error('useApiKeys must be used within an ApiKeysProvider'); | |
| } | |
| return context; | |
| } | |