File size: 3,884 Bytes
b24a0b1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
'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;
}