Upload src/context/ApiKeyContext.tsx with huggingface_hub

src/context/ApiKeyContext.tsx

@@ -0,0 +1,93 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from "react";
+
+interface ApiKey {
+  id: string;
+  name: string;
+  key: string;
+  createdAt: string;
+}
+
+interface ApiKeyContextType {
+  apiKeys: ApiKey[];
+  activeKeyId: string | null;
+  activeKey: string | null;
+  addApiKey: (name: string, key: string) => void;
+  removeApiKey: (id: string) => void;
+  renameApiKey: (id: string, newName: string) => void;
+  setActiveKeyId: (id: string) => void;
+}
+
+const ApiKeyContext = createContext<ApiKeyContextType | undefined>(undefined);
+
+export function ApiKeyProvider({ children }: { children: ReactNode }) {
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>(() => {
+    const saved = localStorage.getItem("smartlead_api_keys");
+    return saved ? JSON.parse(saved) : [];
+  });
+  
+  const [activeKeyId, setActiveKeyIdState] = useState<string | null>(() => {
+    return localStorage.getItem("smartlead_active_key_id");
+  });
+
+  useEffect(() => {
+    localStorage.setItem("smartlead_api_keys", JSON.stringify(apiKeys));
+  }, [apiKeys]);
+
+  useEffect(() => {
+    if (activeKeyId) {
+      localStorage.setItem("smartlead_active_key_id", activeKeyId);
+    } else {
+      localStorage.removeItem("smartlead_active_key_id");
+    }
+  }, [activeKeyId]);
+
+  const addApiKey = (name: string, key: string) => {
+    const newKey: ApiKey = {
+      id: Math.random().toString(36).substring(7),
+      name,
+      key,
+      createdAt: new Date().toISOString()
+    };
+    setApiKeys((prev) => [...prev, newKey]);
+    if (!activeKeyId) {
+      setActiveKeyIdState(newKey.id);
+    }
+  };
+
+  const removeApiKey = (id: string) => {
+    setApiKeys((prev) => prev.filter((k) => k.id !== id));
+    if (activeKeyId === id) {
+      setActiveKeyIdState(null);
+    }
+  };
+
+  const renameApiKey = (id: string, newName: string) => {
+    setApiKeys((prev) => prev.map((k) => k.id === id ? { ...k, name: newName } : k));
+  };
+
+  const activeKey = apiKeys.find((k) => k.id === activeKeyId)?.key || null;
+
+  return (
+    <ApiKeyContext.Provider
+      value={{
+        apiKeys,
+        activeKeyId,
+        activeKey,
+        addApiKey,
+        removeApiKey,
+        renameApiKey,
+        setActiveKeyId: setActiveKeyIdState,
+      }}
+    >
+      {children}
+    </ApiKeyContext.Provider>
+  );
+}
+
+export function useApiKey() {
+  const context = useContext(ApiKeyContext);
+  if (context === undefined) {
+    throw new Error("useApiKey must be used within an ApiKeyProvider");
+  }
+  return context;
+}