feat(frontend): vault webui and api integration

Agenta-AI · Dec 17, 2024 · b633450 · b633450
1 parent 86f4291
commit b633450
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 8 deletions.
diff --git a/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx b/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx
@@ -1,12 +1,13 @@
 import {useVaultSecret} from "@/hooks/useVaultSecret"
-import {getLlmProviderKey, type LlmProvider} from "@/lib/helpers/llmProviders"
+import {type LlmProvider} from "@/lib/helpers/llmProviders"
 import {Button, Input, Space, Typography, message} from "antd"
 import {useEffect, useState} from "react"
 
 const {Title, Text} = Typography
 
 export default function Secrets() {
-    const {secrets, handleModifyVaultSecret, handleDeleteVaultSecret} = useVaultSecret()
+    const {secrets, handleModifyVaultSecret, handleDeleteVaultSecret, findVaultSecret} =
+        useVaultSecret()
     const [llmProviderKeys, setLlmProviderKeys] = useState<LlmProvider[]>([])
     const [messageAPI, contextHolder] = message.useMessage()
 
@@ -48,7 +49,7 @@ export default function Secrets() {
                                 <Button
                                     data-cy="openai-api-save"
                                     type="primary"
-                                    disabled={key === getLlmProviderKey(title) || !key}
+                                    disabled={key === findVaultSecret(title) || !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()) {
@@ -110,9 +139,13 @@ export const useVaultSecret = () => {
         }
     }
 
+    const findVaultSecret = (providerName: string) =>
+        secrets.find((item: LlmProvider) => item.title === providerName)?.key
+
     return {
         secrets,
         handleModifyVaultSecret,
         handleDeleteVaultSecret,
+        findVaultSecret,
     }
 }
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 {