Merge pull request #1623 from Agenta-AI/issue-1622/-Refactor-API-Endpoints-into-Services-Folder

Refactor API Endpoints into Services Folder

Author: aakrem

agenta-web/src/components/AppSelector/AppCard.tsx

@@ -1,11 +1,10 @@
 import {Modal, Card, Avatar} from "antd"
 import {DeleteOutlined} from "@ant-design/icons"
-import {removeApp} from "@/lib/services/api"
+import {deleteApp} from "@/services/app-selector/api"
 import {useState} from "react"
 import Link from "next/link"
 import {renameVariablesCapitalizeAll} from "@/lib/helpers/utils"
 import {createUseStyles} from "react-jss"
-import {getGradientFromStr} from "@/lib/helpers/colors"
 import {ListAppsItem} from "@/lib/Types"
 import {useAppsData} from "@/contexts/app.context"
 
@@ -87,7 +86,7 @@ const AppCard: React.FC<{
     const handleDeleteOk = async () => {
         setConfirmLoading(true)
         try {
-            await removeApp(app.app_id)
+            await deleteApp(app.app_id)
             mutate()
         } catch (error) {
             console.error(error)

agenta-web/src/components/AppSelector/AppSelector.tsx

@@ -7,12 +7,8 @@ import {useAppTheme} from "../Layout/ThemeContextProvider"
 import TipsAndFeatures from "./TipsAndFeatures"
 import Welcome from "./Welcome"
 import {isAppNameInputValid, isDemo, redirectIfNoLLMKeys} from "@/lib/helpers/utils"
-import {
-    createAndStartTemplate,
-    getTemplates,
-    removeApp,
-    waitForAppToStart,
-} from "@/lib/services/api"
+import {createAndStartTemplate, fetchAllTemplates, deleteApp} from "@/services/app-selector/api"
+import {waitForAppToStart} from "@/services/api"
 import AddNewAppModal from "./modals/AddNewAppModal"
 import AddAppFromTemplatedModal from "./modals/AddAppFromTemplateModal"
 import MaxAppModal from "./modals/MaxAppModal"
@@ -22,7 +18,7 @@ import {useAppsData} from "@/contexts/app.context"
 import {useProfileData} from "@/contexts/profile.context"
 import CreateAppStatusModal from "./modals/CreateAppStatusModal"
 import {usePostHogAg} from "@/hooks/usePostHogAg"
-import {LlmProvider, getAllProviderLlmKeys, getApikeys} from "@/lib/helpers/llmProviders"
+import {LlmProvider, getAllProviderLlmKeys} from "@/lib/helpers/llmProviders"
 import ResultComponent from "../ResultComponent/ResultComponent"
 import {dynamicContext} from "@/lib/helpers/dynamic"
 
@@ -175,7 +171,7 @@ const AppSelector: React.FC = () => {
     useEffect(() => {
         if (!isLoading) mutate()
         const fetchTemplates = async () => {
-            const data = await getTemplates()
+            const data = await fetchAllTemplates()
             if (typeof data == "object") {
                 setTemplates(data)
             } else {
@@ -226,7 +222,7 @@ const AppSelector: React.FC = () => {
     const onErrorRetry = async () => {
         if (statusData.appId) {
             setStatusData((prev) => ({...prev, status: "cleanup", details: undefined}))
-            await removeApp(statusData.appId).catch(console.error)
+            await deleteApp(statusData.appId).catch(console.error)
             mutate()
         }
         handleTemplateCardClick(templateId as string)

agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx

@@ -15,10 +15,10 @@ import {
 } from "antd"
 import {
     updateEvaluationScenario,
-    callVariant,
     fetchEvaluationResults,
     updateEvaluation,
-} from "@/lib/services/api"
+} from "@/services/human-evaluations/api"
+import {callVariant} from "@/services/api"
 import {useVariants} from "@/lib/hooks/useVariant"
 import {useRouter} from "next/router"
 import {EvaluationFlow} from "@/lib/enums"

agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx

@@ -1,4 +1,4 @@
-import {useState, useEffect, useCallback, useMemo} from "react"
+import {useState, useEffect, useCallback} from "react"
 import type {ColumnType} from "antd/es/table"
 import {CaretRightOutlined} from "@ant-design/icons"
 import {
@@ -15,7 +15,8 @@ import {
     Typography,
     message,
 } from "antd"
-import {updateEvaluationScenario, callVariant, updateEvaluation} from "@/lib/services/api"
+import {callVariant} from "@/services/api"
+import {updateEvaluationScenario, updateEvaluation} from "@/services/human-evaluations/api"
 import {useVariants} from "@/lib/hooks/useVariant"
 import {useRouter} from "next/router"
 import {EvaluationFlow} from "@/lib/enums"

agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx

@@ -1,4 +1,8 @@
-import {deleteEvaluations, fetchEvaluationResults, loadEvaluations} from "@/lib/services/api"
+import {
+    deleteEvaluations,
+    fetchEvaluationResults,
+    fetchAllLoadEvaluations,
+} from "@/services/human-evaluations/api"
 import {Button, Spin, Statistic, Table, Typography} from "antd"
 import {useRouter} from "next/router"
 import {useEffect, useState} from "react"
@@ -101,7 +105,7 @@ export default function AutomaticEvaluationResult({
         const fetchEvaluations = async () => {
             try {
                 setFetchingEvaluations(true)
-                const evals: Evaluation[] = (await loadEvaluations(app_id)).map(
+                const evals: Evaluation[] = (await fetchAllLoadEvaluations(app_id)).map(
                     fromEvaluationResponseToEvaluation,
                 )
                 const results = await Promise.all(evals.map((e) => fetchEvaluationResults(e.id)))

agenta-web/src/components/Evaluations/HumanEvaluationResult.tsx

@@ -1,4 +1,5 @@
-import {deleteEvaluations, fetchData} from "@/lib/services/api"
+import {fetchData} from "@/services/api"
+import {deleteEvaluations} from "@/services/human-evaluations/api"
 import {Button, Spin, Statistic, Table, Typography} from "antd"
 import {useRouter} from "next/router"
 import {useEffect, useState} from "react"

agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from "react"
 import {GenericObject, JSSTheme, Parameter, Variant} from "@/lib/Types"
-import {createNewEvaluation, fetchVariants, useLoadTestsetsList} from "@/lib/services/api"
+import {fetchVariants} from "@/services/api"
+import {createNewEvaluation} from "@/services/human-evaluations/api"
 import {isDemo} from "@/lib/helpers/utils"
 import {Button, Col, Dropdown, MenuProps, Modal, ModalProps, Row, Spin, message} from "antd"
 import {getErrorMessage} from "@/lib/helpers/errorHandler"
@@ -11,9 +12,9 @@ import {getAllVariantParameters} from "@/lib/helpers/variantHelper"
 import {useRouter} from "next/router"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
 import {createUseStyles} from "react-jss"
-import {getApikeys} from "@/lib/helpers/llmProviders"
 import EvaluationErrorModal from "../Evaluations/EvaluationErrorModal"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
+import {useLoadTestsetsList} from "@/services/testsets/api"
 
 type StyleProps = {
     themeMode: "dark" | "light"

agenta-web/src/components/Layout/Layout.tsx

@@ -20,7 +20,7 @@ import {createUseStyles} from "react-jss"
 import NoSSRWrapper from "../NoSSRWrapper/NoSSRWrapper"
 import {ErrorBoundary} from "react-error-boundary"
 import ErrorFallback from "./ErrorFallback"
-import {fetchData} from "@/lib/services/api"
+import {fetchData} from "@/services/api"
 import {useAppsData} from "@/contexts/app.context"
 import {useRouter} from "next/router"
 import Image from "next/image"

agenta-web/src/components/Playground/AddToTestSetDrawer/AddToTestSetDrawer.tsx

@@ -2,7 +2,12 @@ import AlertPopup from "@/components/AlertPopup/AlertPopup"
 import {useAppTheme} from "../../Layout/ThemeContextProvider"
 import {ChatMessage, ChatRole, GenericObject, testset} from "@/lib/Types"
 import {removeKeys, renameVariables} from "@/lib/helpers/utils"
-import {createNewTestset, loadTestset, updateTestset, useLoadTestsetsList} from "@/lib/services/api"
+import {
+    createNewTestset,
+    fetchTestset,
+    updateTestset,
+    useLoadTestsetsList,
+} from "@/services/testsets/api"
 import {
     Button,
     Divider,
@@ -193,7 +198,7 @@ const AddToTestSetDrawer: React.FC<Props> = ({params, isChatVariant, ...props})
             if (isNew) {
                 setNewTestsetModalOpen(true)
             } else {
-                loadTestset(selectedTestset!).then((data) => {
+                fetchTestset(selectedTestset!).then((data) => {
                     const testsetCols = Object.keys(data.csvdata?.[0] || {})
                     const playgroundCols = Object.keys(values[0])
                     const missingColsTestset = testsetCols.filter(

agenta-web/src/components/Playground/LoadTestsModal.tsx

@@ -1,5 +1,5 @@
-import {loadTestset, useLoadTestsetsList} from "@/lib/services/api"
-import {Button, Divider, Dropdown, Modal, Select, Space} from "antd"
+import {fetchTestset, useLoadTestsetsList} from "@/services/testsets/api"
+import {Button, Divider, Modal, Select} from "antd"
 import {useRouter} from "next/router"
 import {PropsWithChildren, useState} from "react"
 import {createUseStyles} from "react-jss"
@@ -38,7 +38,7 @@ const LoadTestsModal: React.FC<Props> = (props) => {
     }))
 
     const handleClick = (shouldReplace: boolean) => {
-        loadTestset(selectedSet).then((data) => {
+        fetchTestset(selectedSet).then((data) => {
             onLoad(data.csvdata, shouldReplace)
         })
         setIsOpen(false)

agenta-web/src/components/Playground/Playground.tsx

@@ -2,7 +2,8 @@ import React, {useState, useEffect, useRef} from "react"
 import {Button, Tabs, message} from "antd"
 import ViewNavigation from "./ViewNavigation"
 import NewVariantModal from "./NewVariantModal"
-import {fetchEnvironments, fetchVariants, saveNewVariant} from "@/lib/services/api"
+import {fetchVariants} from "@/services/api"
+import {fetchEnvironments} from "@/services/deployment/api"
 import {Variant, PlaygroundTabsItem, Environment} from "@/lib/Types"
 import {AppstoreOutlined, SyncOutlined} from "@ant-design/icons"
 import {useRouter} from "next/router"
@@ -17,6 +18,7 @@ import {useLocalStorage} from "usehooks-ts"
 import TestContextProvider from "./TestContextProvider"
 import {checkIfResourceValidForDeletion} from "@/lib/helpers/evaluate"
 import ResultComponent from "../ResultComponent/ResultComponent"
+import {createNewVariant} from "@/services/playground/api"
 
 const Playground: React.FC = () => {
     const router = useRouter()
@@ -78,7 +80,7 @@ const Playground: React.FC = () => {
         }
 
         try {
-            await saveNewVariant(
+            await createNewVariant(
                 newVariant.baseId!,
                 newVariant.variantName!,
                 newVariant.configName!,

agenta-web/src/components/Playground/ViewNavigation.tsx

@@ -8,16 +8,16 @@ import {useRouter} from "next/router"
 import {useState} from "react"
 import axios from "axios"
 import {createUseStyles} from "react-jss"
-import {
-    fetchVariantLogs,
-    getAppContainerURL,
-    removeVariant,
-    restartAppVariantContainer,
-    waitForAppToStart,
-} from "@/lib/services/api"
+
+import {fetchAppContainerURL, waitForAppToStart} from "@/services/api"
 import {useAppsData} from "@/contexts/app.context"
 import {isDemo} from "@/lib/helpers/utils"
 import ResultComponent from "../ResultComponent/ResultComponent"
+import {
+    deleteSingleVariant,
+    fetchVariantLogs,
+    restartAppVariantContainer,
+} from "@/services/playground/api"
 
 const {Text} = Typography
 
@@ -141,7 +141,7 @@ const ViewNavigation: React.FC<Props> = ({
         }
 
         const variantContainerPath = async () => {
-            const url = await getAppContainerURL(appId, variant.variantId, variant.baseId)
+            const url = await fetchAppContainerURL(appId, variant.variantId, variant.baseId)
             setContainerURI(url)
         }
         if (!containerURI) {
@@ -231,7 +231,7 @@ const ViewNavigation: React.FC<Props> = ({
                             type="primary"
                             danger
                             onClick={() => {
-                                deleteVariant(() => removeVariant(variant.variantId))
+                                deleteVariant(() => deleteSingleVariant(variant.variantId))
                             }}
                         >
                             <Tooltip placement="bottom" title="Delete the variant permanently">

agenta-web/src/components/Playground/Views/ParametersView.tsx

@@ -5,16 +5,17 @@ import React, {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 import {ModelParameters, ObjectParameters, StringParameters} from "./ParametersCards"
 import PublishVariantModal from "./PublishVariantModal"
-import {promptVersioning, removeVariant} from "@/lib/services/api"
+import {deleteSingleVariant} from "@/services/playground/api"
 import {CloudUploadOutlined, DeleteOutlined, HistoryOutlined, SaveOutlined} from "@ant-design/icons"
 import {usePostHogAg} from "@/hooks/usePostHogAg"
 import {isDemo} from "@/lib/helpers/utils"
 import {useQueryParam} from "@/hooks/useQuery"
-import {dynamicComponent} from "@/lib/helpers/dynamic"
+import {dynamicComponent, dynamicService} from "@/lib/helpers/dynamic"
 
 const PromptVersioningDrawer: any = dynamicComponent(
     `PromptVersioningDrawer/PromptVersioningDrawer`,
 )
+const promptVersioning: any = dynamicService("promptVersioning/api")
 
 interface Props {
     variant: Variant
@@ -133,7 +134,7 @@ const ParametersView: React.FC<Props> = ({
     const handleDelete = () => {
         deleteVariant(() => {
             if (variant.persistent) {
-                return removeVariant(variant.variantId).then(() => {
+                return deleteSingleVariant(variant.variantId).then(() => {
                     onStateChange(false)
                 })
             }
@@ -151,10 +152,13 @@ const ParametersView: React.FC<Props> = ({
         setHistoryStatus({loading: true, error: false})
         setIsDrawerOpen(true)
         try {
-            if (variant.variantId && isDemo()) {
-                const revisions = await promptVersioning(variant.variantId)
-                setPromptRevisions(revisions)
-            }
+            await promptVersioning.then(async (module: any) => {
+                if (!module) return
+                if (variant.variantId && isDemo()) {
+                    const revisions = await module.fetchAllPromptVersioning(variant.variantId)
+                    setPromptRevisions(revisions)
+                }
+            })
             setHistoryStatus({loading: false, error: false})
         } catch (error) {
             setHistoryStatus({loading: false, error: true})

agenta-web/src/components/Playground/Views/PublishVariantModal.tsx

@@ -1,7 +1,7 @@
 import {usePostHogAg} from "@/hooks/usePostHogAg"
 import {Environment, Variant} from "@/lib/Types"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
-import {fetchEnvironments, publishVariant} from "@/lib/services/api"
+import {fetchEnvironments, createPublishVariant} from "@/services/deployment/api"
 import {Button, Checkbox, Modal, Space, Typography, message} from "antd"
 import type {CheckboxChangeEvent} from "antd/es/checkbox"
 import {useRouter} from "next/router"
@@ -54,7 +54,7 @@ const PublishVariantModal: React.FC<Props> = ({
 
     const publishVariants = async () => {
         selectedEnvs.forEach(async (envName) => {
-            await publishVariant(variant.variantId, envName)
+            await createPublishVariant(variant.variantId, envName)
             closeModal()
             await loadEnvironments()
             message.success(`Published ${variant.variantName} to ${envName}`)