Merge branch 'checkpoint-2-vault-webui-and-api-integration' of https:…

…//github.com/Agenta-AI/agenta into checkpoint-2-vault-webui-and-api-integration
Agenta-AI · Dec 17, 2024 · bff72ab · bff72ab
2 parents 6108cba + ddfcd02
commit bff72ab
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 11 deletions.
diff --git a/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx b/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx
@@ -1,6 +1,5 @@
 import {useVaultSecret} from "@/hooks/useVaultSecret"
-import {getLlmProviderKey, type LlmProvider} from "@/lib/helpers/llmProviders"
-import {isDemo} from "@/lib/helpers/utils"
+import {type LlmProvider} from "@/lib/helpers/llmProviders"
 import {Button, Input, Space, Typography, message} from "antd"
 import {useEffect, useState} from "react"
 
@@ -12,9 +11,7 @@ export default function Secrets() {
     const [messageAPI, contextHolder] = message.useMessage()
 
     useEffect(() => {
-        if (isDemo()) {
-            setLlmProviderKeys(secrets)
-        }
+        setLlmProviderKeys(secrets)
     }, [secrets])
 
     return (
@@ -51,7 +48,7 @@ export default function Secrets() {
                                 <Button
                                     data-cy="openai-api-save"
                                     type="primary"
-                                    disabled={key === getLlmProviderKey(title) || !key}
+                                    disabled={!key}
                                     onClick={async () => {
                                         await handleModifyVaultSecret({
                                             name,

diff --git a/agenta-web/src/hooks/useVaultSecret.ts b/agenta-web/src/hooks/useVaultSecret.ts
@@ -1,7 +1,8 @@
-import {useEffect, useState} from "react"
+import {useEffect, useRef, useState} from "react"
 import {
     getAllProviderLlmKeys,
     llmAvailableProviders,
+    llmAvailableProvidersToken,
     LlmProvider,
     removeSingleLlmProviderKey,
     saveLlmProviderKey,
@@ -11,6 +12,7 @@ import {dynamicLib, dynamicService} from "@/lib/helpers/dynamic"
 
 export const useVaultSecret = () => {
     const [secrets, setSecrets] = useState<LlmProvider[]>(llmAvailableProviders)
+    const shouldRunMigration = useRef(true)
 
     const getVaultSecrets = async () => {
         try {
@@ -44,6 +46,33 @@ export const useVaultSecret = () => {
         getVaultSecrets()
     }, [])
 
+    const migrateProviderKeys = async () => {
+        try {
+            const localStorageProviders = localStorage.getItem(llmAvailableProvidersToken)
+
+            if (localStorageProviders) {
+                const providers = JSON.parse(localStorageProviders)
+
+                for (const provider of providers) {
+                    if (provider.key) {
+                        await handleModifyVaultSecret(provider as LlmProvider)
+                    }
+                }
+
+                localStorage.removeItem(llmAvailableProvidersToken)
+            }
+        } catch (error) {
+            console.error(error)
+        }
+    }
+
+    useEffect(() => {
+        if (shouldRunMigration.current) {
+            shouldRunMigration.current = false
+            migrateProviderKeys()
+        }
+    }, [])
+
     const handleModifyVaultSecret = async (provider: LlmProvider) => {
         try {
             if (isDemo()) {

diff --git a/agenta-web/src/lib/helpers/llmProviders.ts b/agenta-web/src/lib/helpers/llmProviders.ts
@@ -1,6 +1,6 @@
 import cloneDeep from "lodash/cloneDeep"
 
-const llmAvailableProvidersToken = "llmAvailableProvidersToken"
+export const llmAvailableProvidersToken = "llmAvailableProvidersToken"
 
 export type LlmProvider = {
     title: string
@@ -55,9 +55,6 @@ export const saveLlmProviderKey = (providerName: string, keyValue: string) => {
     localStorage.setItem(llmAvailableProvidersToken, JSON.stringify(keys))
 }
 
-export const getLlmProviderKey = (providerName: string) =>
-    getAllProviderLlmKeys().find((item: LlmProvider) => item.title === providerName)?.key
-
 export const getAllProviderLlmKeys = () => {
     const providers = cloneDeep(llmAvailableProviders)
     try {