legends810/testingnew

1import React, { useState, useEffect, useCallback } from 'react';2import { IconButton } from '~/components/ui/IconButton';3import { Switch } from '~/components/ui/Switch';4import type { ProviderInfo } from '~/types/model';5import Cookies from 'js-cookie';6interface APIKeyManagerProps {7  provider: ProviderInfo;8  apiKey: string;9  setApiKey: (key: string) => void;10  getApiKeyLink?: string;11  labelForGetApiKey?: string;12}13 14// cache which stores whether the provider's API key is set via environment variable15const providerEnvKeyStatusCache: Record<string, boolean> = {};16 17const apiKeyMemoizeCache: { [k: string]: Record<string, string> } = {};18 19export function getApiKeysFromCookies() {20  const storedApiKeys = Cookies.get('apiKeys');21  let parsedKeys: Record<string, string> = {};22 23  if (storedApiKeys) {24    parsedKeys = apiKeyMemoizeCache[storedApiKeys];25 26    if (!parsedKeys) {27      parsedKeys = apiKeyMemoizeCache[storedApiKeys] = JSON.parse(storedApiKeys);28    }29  }30 31  return parsedKeys;32}33 34// eslint-disable-next-line @typescript-eslint/naming-convention35export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey, setApiKey }) => {36  const [isEditing, setIsEditing] = useState(false);37  const [tempKey, setTempKey] = useState(apiKey);38  const [isPromptCachingEnabled, setIsPromptCachingEnabled] = useState(() => {39    // Read initial state from localStorage, defaulting to true40    const savedState = localStorage.getItem('PROMPT_CACHING_ENABLED');41    return savedState !== null ? JSON.parse(savedState) : true;42  });43  const [isEnvKeySet, setIsEnvKeySet] = useState(false);44 45  useEffect(() => {46    // Update localStorage whenever the prompt caching state changes47    localStorage.setItem('PROMPT_CACHING_ENABLED', JSON.stringify(isPromptCachingEnabled));48  }, [isPromptCachingEnabled]);49 50  // Reset states and load saved key when provider changes51  useEffect(() => {52    // Load saved API key from cookies for this provider53    const savedKeys = getApiKeysFromCookies();54    const savedKey = savedKeys[provider.name] || '';55 56    setTempKey(savedKey);57    setApiKey(savedKey);58    setIsEditing(false);59  }, [provider.name]);60 61  const checkEnvApiKey = useCallback(async () => {62    // Check cache first63    if (providerEnvKeyStatusCache[provider.name] !== undefined) {64      setIsEnvKeySet(providerEnvKeyStatusCache[provider.name]);65      return;66    }67 68    try {69      const response = await fetch(`/api/check-env-key?provider=${encodeURIComponent(provider.name)}`);70      const data = await response.json();71      const isSet = (data as { isSet: boolean }).isSet;72 73      // Cache the result74      providerEnvKeyStatusCache[provider.name] = isSet;75      setIsEnvKeySet(isSet);76    } catch (error) {77      console.error('Failed to check environment API key:', error);78      setIsEnvKeySet(false);79    }80  }, [provider.name]);81 82  useEffect(() => {83    checkEnvApiKey();84  }, [checkEnvApiKey]);85 86  const handleSave = () => {87    // Save to parent state88    setApiKey(tempKey);89 90    // Save to cookies91    const currentKeys = getApiKeysFromCookies();92    const newKeys = { ...currentKeys, [provider.name]: tempKey };93    Cookies.set('apiKeys', JSON.stringify(newKeys));94 95    setIsEditing(false);96  };97 98  return (99    <div className="flex flex-col items-left justify-between py-3 px-1">100      <div className="flex">101        <div className="flex items-center gap-2 flex-1">102          <div className="flex items-center gap-2">103            <span className="text-sm font-medium text-bolt-elements-textSecondary">{provider?.name} API Key:</span>104            {!isEditing && (105              <div className="flex items-center gap-2">106                {apiKey ? (107                  <>108                    <div className="i-ph:check-circle-fill text-green-500 w-4 h-4" />109                    <span className="text-xs text-green-500">Set via UI</span>110                  </>111                ) : isEnvKeySet ? (112                  <>113                    <div className="i-ph:check-circle-fill text-green-500 w-4 h-4" />114                    <span className="text-xs text-green-500">Set via environment variable</span>115                  </>116                ) : (117                  <>118                    <div className="i-ph:x-circle-fill text-red-500 w-4 h-4" />119                    <span className="text-xs text-red-500">Not Set (Please set via UI or ENV_VAR)</span>120                  </>121                )}122              </div>123            )}124          </div>125        </div>126 127        <div className="flex items-center gap-2 shrink-0">128          {isEditing ? (129            <div className="flex items-center gap-2">130              <input131                type="password"132                value={tempKey}133                placeholder="Enter API Key"134                onChange={(e) => setTempKey(e.target.value)}135                className="w-[300px] px-3 py-1.5 text-sm rounded border border-bolt-elements-borderColor 136                          bg-bolt-elements-prompt-background text-bolt-elements-textPrimary 137                          focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus"138              />139              <IconButton140                onClick={handleSave}141                title="Save API Key"142                className="bg-green-500/10 hover:bg-green-500/20 text-green-500"143              >144                <div className="i-ph:check w-4 h-4" />145              </IconButton>146              <IconButton147                onClick={() => setIsEditing(false)}148                title="Cancel"149                className="bg-red-500/10 hover:bg-red-500/20 text-red-500"150              >151                <div className="i-ph:x w-4 h-4" />152              </IconButton>153            </div>154          ) : (155            <>156              {157                <IconButton158                  onClick={() => setIsEditing(true)}159                  title="Edit API Key"160                  className="bg-blue-500/10 hover:bg-blue-500/20 text-blue-500"161                >162                  <div className="i-ph:pencil-simple w-4 h-4" />163                </IconButton>164              }165              {provider?.getApiKeyLink && !apiKey && (166                <IconButton167                  onClick={() => window.open(provider?.getApiKeyLink)}168                  title="Get API Key"169                  className="bg-purple-500/10 hover:bg-purple-500/20 text-purple-500 flex items-center gap-2"170                >171                  <span className="text-xs whitespace-nowrap">{provider?.labelForGetApiKey || 'Get API Key'}</span>172                  <div className={`${provider?.icon || 'i-ph:key'} w-4 h-4`} />173                </IconButton>174              )}175            </>176          )}177        </div>178      </div>179 180      {provider?.name === 'Anthropic' && (181        <div className="border-t mt-4 pt-4 pb-2 -mt-4">182          <div className="flex items-center space-x-2">183            <Switch checked={isPromptCachingEnabled} onCheckedChange={setIsPromptCachingEnabled} />184            <label htmlFor="prompt-caching" className="text-sm text-bolt-elements-textSecondary">185              Enable Prompt Caching186            </label>187          </div>188          <p className="text-xs text-bolt-elements-textTertiary mt-2">189            When enabled, generates 10x cheaper responses if re-prompted within 5 mins (Recommended)190          </p>191        </div>192      )}193    </div>194  );195};196