From 489e3d43b9836ff1faed4aa2b8b1eac9b6bf9a9c Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Wed, 18 Dec 2024 16:57:19 +0600 Subject: [PATCH 01/19] refactor(frontend) removed src/_app.tsx file --- agenta-web/src/_app.tsx | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 agenta-web/src/_app.tsx diff --git a/agenta-web/src/_app.tsx b/agenta-web/src/_app.tsx deleted file mode 100644 index e03e20b16c..0000000000 --- a/agenta-web/src/_app.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import "@/styles/globals.css" -import type {AppProps} from "next/app" -import Layout from "@/components/Layout/Layout" -import ThemeContextProvider from "@/components/Layout/ThemeContextProvider" - -export default function App({Component, pageProps}: AppProps) { - return ( - - - - - - ) -} From f88c8faa7af2c14559bfe49d7d892035b9a9a2bd Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Wed, 18 Dec 2024 17:04:24 +0600 Subject: [PATCH 02/19] refactor(frontend): removed observability index file from oss --- agenta-web/src/services/observability/api/index.ts | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 agenta-web/src/services/observability/api/index.ts diff --git a/agenta-web/src/services/observability/api/index.ts b/agenta-web/src/services/observability/api/index.ts deleted file mode 100644 index 30a1282c03..0000000000 --- a/agenta-web/src/services/observability/api/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -//Prefix convention: -// - fetch: GET single entity from server -// - fetchAll: GET all entities from server -// - create: POST data to server -// - update: PUT data to server -// - delete: DELETE data from server From aed3775e44d76b1efd3e7373154ea4d1b860a763 Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Mon, 23 Dec 2024 19:06:39 +0600 Subject: [PATCH 03/19] refactor(frontend): moved auth init code from _app.tsx to a component --- .../src/lib/helpers/auth/AuthProvider.tsx | 38 +++++++++++++++++++ agenta-web/src/lib/helpers/auth/types.d.ts | 5 +++ 2 files changed, 43 insertions(+) create mode 100644 agenta-web/src/lib/helpers/auth/AuthProvider.tsx create mode 100644 agenta-web/src/lib/helpers/auth/types.d.ts diff --git a/agenta-web/src/lib/helpers/auth/AuthProvider.tsx b/agenta-web/src/lib/helpers/auth/AuthProvider.tsx new file mode 100644 index 0000000000..c0c3d776ca --- /dev/null +++ b/agenta-web/src/lib/helpers/auth/AuthProvider.tsx @@ -0,0 +1,38 @@ +import {useEffect, useCallback} from "react" +import SuperTokensReact, {SuperTokensWrapper} from "supertokens-auth-react" +import {AuthProviderType} from "./types" +import {isDemo} from "../utils" +;(async () => { + if (typeof window !== "undefined" && isDemo()) { + const {frontendConfig} = await import("@/config/frontendConfig") + SuperTokensReact.init(frontendConfig()) + } +})() + +const AuthProvider: AuthProviderType = ({children, pageProps}) => { + const doRefresh = useCallback(async () => { + if (!isDemo()) return + + if (pageProps.fromSupertokens === "needs-refresh") { + const session = await import("supertokens-auth-react/recipe/session") + + if (await session.attemptRefreshingSession()) { + location.reload() + } else { + SuperTokensReact.redirectToAuth() + } + } + }, [pageProps.fromSupertokens]) + + useEffect(() => { + doRefresh() + }, [doRefresh]) + + if (isDemo() && pageProps.fromSupertokens === "needs-refresh") { + return null + } + + return isDemo() ? {children} : <>{children} +} + +export default AuthProvider diff --git a/agenta-web/src/lib/helpers/auth/types.d.ts b/agenta-web/src/lib/helpers/auth/types.d.ts new file mode 100644 index 0000000000..65ab18f7a3 --- /dev/null +++ b/agenta-web/src/lib/helpers/auth/types.d.ts @@ -0,0 +1,5 @@ +export interface AuthProviderType + extends React.FC<{ + children: React.ReactNode + pageProps: any + }> {} From b8b5d290429b8293607a3e4066f017c6aaf9937d Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Mon, 23 Dec 2024 20:04:22 +0600 Subject: [PATCH 04/19] enhance(frontend): conditionally rendering the OrgProvided --- .../src/components/OrgWrapper/OrgWrapper.tsx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 agenta-web/src/components/OrgWrapper/OrgWrapper.tsx diff --git a/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx b/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx new file mode 100644 index 0000000000..28fa6aa206 --- /dev/null +++ b/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx @@ -0,0 +1,25 @@ +import {useState, useEffect, useCallback} from "react" +import {isDemo} from "@/lib/helpers/utils" + +const OrgWrapper = ({children}: {children: React.ReactNode}) => { + const [Wrapper, setWrapper] = useState(null) + + const initilizeOrgProvider = useCallback(async () => { + const OrgProvider = (await import("@/contexts/org.context")).default + setWrapper(() => OrgProvider) + }, []) + + useEffect(() => { + if (isDemo()) { + initilizeOrgProvider() + } + }, [initilizeOrgProvider]) + + if (isDemo()) { + return Wrapper ? {children} : null + } + + return <>{children} +} + +export default OrgWrapper From 602c425a80e6a744083f27ea7ddf890baa7f73fa Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Mon, 23 Dec 2024 21:23:26 +0600 Subject: [PATCH 05/19] refactor(frontend): noved scripts from _app.tsx --- .../src/components/OrgWrapper/OrgWrapper.tsx | 12 +++---- .../src/components/Scripts/GlobalScripts.tsx | 32 +++++++++++++++++++ 2 files changed, 38 insertions(+), 6 deletions(-) create mode 100644 agenta-web/src/components/Scripts/GlobalScripts.tsx diff --git a/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx b/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx index 28fa6aa206..f86eaee448 100644 --- a/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx +++ b/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx @@ -4,16 +4,16 @@ import {isDemo} from "@/lib/helpers/utils" const OrgWrapper = ({children}: {children: React.ReactNode}) => { const [Wrapper, setWrapper] = useState(null) - const initilizeOrgProvider = useCallback(async () => { - const OrgProvider = (await import("@/contexts/org.context")).default - setWrapper(() => OrgProvider) - }, []) - useEffect(() => { if (isDemo()) { + const initilizeOrgProvider = async () => { + const OrgProvider = (await import("@/contexts/org.context")).default + setWrapper(() => OrgProvider) + } + initilizeOrgProvider() } - }, [initilizeOrgProvider]) + }, []) if (isDemo()) { return Wrapper ? {children} : null diff --git a/agenta-web/src/components/Scripts/GlobalScripts.tsx b/agenta-web/src/components/Scripts/GlobalScripts.tsx new file mode 100644 index 0000000000..e4af9401ff --- /dev/null +++ b/agenta-web/src/components/Scripts/GlobalScripts.tsx @@ -0,0 +1,32 @@ +import {useState, useEffect} from "react" +import Head from "next/head" +import {isDemo} from "@/lib/helpers/utils" + +const GlobalScripts = () => { + const [CloudScripts, setCloudScripts] = useState(null) + + useEffect(() => { + if (isDemo()) { + const loadCloudScripts = async () => { + const module = await import("./assets/CloudScripts") + setCloudScripts(() => module.default) + } + loadCloudScripts() + } + }, []) + + if (isDemo() && CloudScripts) { + return + } + + return ( + <> + + Agenta: The LLMOps platform. + + + + ) +} + +export default GlobalScripts From 785d4c15e4deda8c76cb9232c9bcbfbb269caa41 Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Mon, 23 Dec 2024 21:53:03 +0600 Subject: [PATCH 06/19] fix(frontend): import cloud component error --- .../src/components/OrgWrapper/OrgWrapper.tsx | 13 +++++++------ .../src/components/Scripts/GlobalScripts.tsx | 16 +++++++++------- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx b/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx index f86eaee448..86db83447a 100644 --- a/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx +++ b/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx @@ -4,16 +4,17 @@ import {isDemo} from "@/lib/helpers/utils" const OrgWrapper = ({children}: {children: React.ReactNode}) => { const [Wrapper, setWrapper] = useState(null) + const initilizeOrgProvider = useCallback(async () => { + // @ts-ignore + const OrgProvider = (await import("@/contexts/org.context")).default + setWrapper(() => OrgProvider) + }, []) + useEffect(() => { if (isDemo()) { - const initilizeOrgProvider = async () => { - const OrgProvider = (await import("@/contexts/org.context")).default - setWrapper(() => OrgProvider) - } - initilizeOrgProvider() } - }, []) + }, [initilizeOrgProvider]) if (isDemo()) { return Wrapper ? {children} : null diff --git a/agenta-web/src/components/Scripts/GlobalScripts.tsx b/agenta-web/src/components/Scripts/GlobalScripts.tsx index e4af9401ff..8c9106d50e 100644 --- a/agenta-web/src/components/Scripts/GlobalScripts.tsx +++ b/agenta-web/src/components/Scripts/GlobalScripts.tsx @@ -1,19 +1,21 @@ -import {useState, useEffect} from "react" +import {useState, useEffect, useCallback} from "react" import Head from "next/head" import {isDemo} from "@/lib/helpers/utils" const GlobalScripts = () => { const [CloudScripts, setCloudScripts] = useState(null) + const initilizeScripts = useCallback(async () => { + // @ts-ignore + const Scripts = (await import("./assets/CloudScripts")).default + setCloudScripts(() => Scripts) + }, []) + useEffect(() => { if (isDemo()) { - const loadCloudScripts = async () => { - const module = await import("./assets/CloudScripts") - setCloudScripts(() => module.default) - } - loadCloudScripts() + initilizeScripts() } - }, []) + }, [initilizeScripts]) if (isDemo() && CloudScripts) { return From 27140a1f21381f7d98418f4b2b1dd0a4e8a217b4 Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Mon, 23 Dec 2024 22:13:38 +0600 Subject: [PATCH 07/19] enhanc(frontend): updated _app.tsx file with new providers --- .../src/lib/helpers/auth/AuthProvider.tsx | 1 + agenta-web/src/pages/_app.tsx | 38 ++++++++++--------- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/agenta-web/src/lib/helpers/auth/AuthProvider.tsx b/agenta-web/src/lib/helpers/auth/AuthProvider.tsx index c0c3d776ca..95dedf453d 100644 --- a/agenta-web/src/lib/helpers/auth/AuthProvider.tsx +++ b/agenta-web/src/lib/helpers/auth/AuthProvider.tsx @@ -4,6 +4,7 @@ import {AuthProviderType} from "./types" import {isDemo} from "../utils" ;(async () => { if (typeof window !== "undefined" && isDemo()) { + // @ts-ignore const {frontendConfig} = await import("@/config/frontendConfig") SuperTokensReact.init(frontendConfig()) } diff --git a/agenta-web/src/pages/_app.tsx b/agenta-web/src/pages/_app.tsx index d47ae0bf67..aae00848c8 100644 --- a/agenta-web/src/pages/_app.tsx +++ b/agenta-web/src/pages/_app.tsx @@ -1,5 +1,4 @@ import type {AppProps} from "next/app" -import Head from "next/head" import dynamic from "next/dynamic" import "@/styles/globals.css" @@ -9,6 +8,9 @@ import ThemeContextProvider from "@/components/Layout/ThemeContextProvider" import AppContextProvider from "@/contexts/app.context" import ProfileContextProvider from "@/contexts/profile.context" import ProjectContextProvider from "@/contexts/project.context" +import AuthProvider from "@/lib/helpers/auth/AuthProvider" +import OrgWrapper from "@/components/OrgWrapper/OrgWrapper" +import GlobalScripts from "@/components/Scripts/GlobalScripts" import {Inter} from "next/font/google" import AgSWRConfig from "@/lib/api/SWRConfig" @@ -23,10 +25,8 @@ const inter = Inter({ export default function App({Component, pageProps}: AppProps) { return ( <> - - Agenta: The LLMOps platform. - - + +
- - - - - - - - - - - - + + + + + + + + + + + + + + + +
From 23822794477d0468a03f38fa9e51a4d23733efeb Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Tue, 24 Dec 2024 00:46:41 +0600 Subject: [PATCH 08/19] fix(frontend): import cloud components error --- agenta-web/src/components/OrgWrapper/OrgWrapper.tsx | 6 +++--- agenta-web/src/components/Scripts/GlobalScripts.tsx | 4 ++-- agenta-web/src/lib/helpers/auth/AuthProvider.tsx | 7 ++++--- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx b/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx index 86db83447a..83c1198867 100644 --- a/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx +++ b/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx @@ -1,13 +1,13 @@ import {useState, useEffect, useCallback} from "react" import {isDemo} from "@/lib/helpers/utils" +import {dynamicContext} from "@/lib/helpers/dynamic" const OrgWrapper = ({children}: {children: React.ReactNode}) => { const [Wrapper, setWrapper] = useState(null) const initilizeOrgProvider = useCallback(async () => { - // @ts-ignore - const OrgProvider = (await import("@/contexts/org.context")).default - setWrapper(() => OrgProvider) + const OrgContextProvider = await dynamicContext("org.context", Wrapper) + setWrapper(() => OrgContextProvider.default) }, []) useEffect(() => { diff --git a/agenta-web/src/components/Scripts/GlobalScripts.tsx b/agenta-web/src/components/Scripts/GlobalScripts.tsx index 8c9106d50e..d89cf2eb7d 100644 --- a/agenta-web/src/components/Scripts/GlobalScripts.tsx +++ b/agenta-web/src/components/Scripts/GlobalScripts.tsx @@ -1,13 +1,13 @@ import {useState, useEffect, useCallback} from "react" import Head from "next/head" import {isDemo} from "@/lib/helpers/utils" +import {dynamicComponent} from "@/lib/helpers/dynamic" const GlobalScripts = () => { const [CloudScripts, setCloudScripts] = useState(null) const initilizeScripts = useCallback(async () => { - // @ts-ignore - const Scripts = (await import("./assets/CloudScripts")).default + const Scripts = dynamicComponent("Scripts/assets/CloudScripts") setCloudScripts(() => Scripts) }, []) diff --git a/agenta-web/src/lib/helpers/auth/AuthProvider.tsx b/agenta-web/src/lib/helpers/auth/AuthProvider.tsx index 95dedf453d..8e56e05d34 100644 --- a/agenta-web/src/lib/helpers/auth/AuthProvider.tsx +++ b/agenta-web/src/lib/helpers/auth/AuthProvider.tsx @@ -4,9 +4,10 @@ import {AuthProviderType} from "./types" import {isDemo} from "../utils" ;(async () => { if (typeof window !== "undefined" && isDemo()) { - // @ts-ignore - const {frontendConfig} = await import("@/config/frontendConfig") - SuperTokensReact.init(frontendConfig()) + try { + const {frontendConfig} = await import("@/config/frontendConfig") + SuperTokensReact.init(frontendConfig()) + } catch (error) {} } })() From 05b3aa5665eeb5ef9bcb574494b9be1725172a0e Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Tue, 24 Dec 2024 12:02:27 +0600 Subject: [PATCH 09/19] fix(frontend): auth condif error by adding ts-ignore --- agenta-web/src/lib/helpers/auth/AuthProvider.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/agenta-web/src/lib/helpers/auth/AuthProvider.tsx b/agenta-web/src/lib/helpers/auth/AuthProvider.tsx index 8e56e05d34..5820275cdd 100644 --- a/agenta-web/src/lib/helpers/auth/AuthProvider.tsx +++ b/agenta-web/src/lib/helpers/auth/AuthProvider.tsx @@ -5,6 +5,7 @@ import {isDemo} from "../utils" ;(async () => { if (typeof window !== "undefined" && isDemo()) { try { + // @ts-ignore const {frontendConfig} = await import("@/config/frontendConfig") SuperTokensReact.init(frontendConfig()) } catch (error) {} From 5fb8ac468603cf0480ba82995337f846cd36be37 Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Tue, 24 Dec 2024 13:27:23 +0600 Subject: [PATCH 10/19] enhance(frontend): senntry initilization --- .../src/lib/helpers/auth/AuthProvider.tsx | 8 +++---- agenta-web/src/lib/helpers/dynamic.ts | 8 +++++++ .../sentry/hook/useSentryIntegrations.ts | 21 +++++++++++++++++++ agenta-web/src/pages/_app.tsx | 3 +++ 4 files changed, 35 insertions(+), 5 deletions(-) create mode 100644 agenta-web/src/lib/helpers/sentry/hook/useSentryIntegrations.ts diff --git a/agenta-web/src/lib/helpers/auth/AuthProvider.tsx b/agenta-web/src/lib/helpers/auth/AuthProvider.tsx index 5820275cdd..8bd1ae76fa 100644 --- a/agenta-web/src/lib/helpers/auth/AuthProvider.tsx +++ b/agenta-web/src/lib/helpers/auth/AuthProvider.tsx @@ -2,13 +2,11 @@ import {useEffect, useCallback} from "react" import SuperTokensReact, {SuperTokensWrapper} from "supertokens-auth-react" import {AuthProviderType} from "./types" import {isDemo} from "../utils" +import {dynamicConfig} from "../dynamic" ;(async () => { if (typeof window !== "undefined" && isDemo()) { - try { - // @ts-ignore - const {frontendConfig} = await import("@/config/frontendConfig") - SuperTokensReact.init(frontendConfig()) - } catch (error) {} + const {frontendConfig} = await dynamicConfig("frontendConfig") + SuperTokensReact.init(frontendConfig()) } })() diff --git a/agenta-web/src/lib/helpers/dynamic.ts b/agenta-web/src/lib/helpers/dynamic.ts index effbc89eaa..18018e44fa 100644 --- a/agenta-web/src/lib/helpers/dynamic.ts +++ b/agenta-web/src/lib/helpers/dynamic.ts @@ -38,3 +38,11 @@ export async function dynamicLib(path: string, fallback?: any) { return fallback } } + +export async function dynamicConfig(path: string, fallback?: any) { + try { + return await import(`@/config/${path}`) + } catch (error) { + return fallback + } +} diff --git a/agenta-web/src/lib/helpers/sentry/hook/useSentryIntegrations.ts b/agenta-web/src/lib/helpers/sentry/hook/useSentryIntegrations.ts new file mode 100644 index 0000000000..0c9012a30a --- /dev/null +++ b/agenta-web/src/lib/helpers/sentry/hook/useSentryIntegrations.ts @@ -0,0 +1,21 @@ +import {useEffect, useRef} from "react" +import {dynamicLib} from "../../dynamic" +import {isDemo} from "../../utils" + +export const useSentryIntegrations = () => { + const isLoading = useRef(false) + + const initilizeSentryIntegrations = async () => { + const {lazyLoadSentryIntegrations} = await dynamicLib( + "helpers/sentry/lazyLoadSentryIntegrations", + ) + lazyLoadSentryIntegrations() + } + + useEffect(() => { + if (isLoading.current && isDemo()) return + isLoading.current = true + + initilizeSentryIntegrations() + }, []) +} diff --git a/agenta-web/src/pages/_app.tsx b/agenta-web/src/pages/_app.tsx index aae00848c8..560effa635 100644 --- a/agenta-web/src/pages/_app.tsx +++ b/agenta-web/src/pages/_app.tsx @@ -13,6 +13,7 @@ import OrgWrapper from "@/components/OrgWrapper/OrgWrapper" import GlobalScripts from "@/components/Scripts/GlobalScripts" import {Inter} from "next/font/google" import AgSWRConfig from "@/lib/api/SWRConfig" +import {useSentryIntegrations} from "@/lib/helpers/sentry/hook/useSentryIntegrations" const NoMobilePageWrapper = dynamicComponent("NoMobilePageWrapper/NoMobilePageWrapper") const CustomPosthogProvider = dynamic(() => import("@/lib/helpers/analytics/AgPosthogProvider")) @@ -23,6 +24,8 @@ const inter = Inter({ }) export default function App({Component, pageProps}: AppProps) { + useSentryIntegrations() + return ( <> From 4a99aabcc930c7cfc57b9e0a1a9cffed0332b5af Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Tue, 24 Dec 2024 14:16:55 +0600 Subject: [PATCH 11/19] fix(frontend): sentry initlization hook --- .../helpers/sentry/hook/useSentryIntegrations.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/agenta-web/src/lib/helpers/sentry/hook/useSentryIntegrations.ts b/agenta-web/src/lib/helpers/sentry/hook/useSentryIntegrations.ts index 0c9012a30a..bf50341af3 100644 --- a/agenta-web/src/lib/helpers/sentry/hook/useSentryIntegrations.ts +++ b/agenta-web/src/lib/helpers/sentry/hook/useSentryIntegrations.ts @@ -6,16 +6,15 @@ export const useSentryIntegrations = () => { const isLoading = useRef(false) const initilizeSentryIntegrations = async () => { - const {lazyLoadSentryIntegrations} = await dynamicLib( - "helpers/sentry/lazyLoadSentryIntegrations", - ) - lazyLoadSentryIntegrations() + const initSentry = await dynamicLib("helpers/sentry/lazyLoadSentryIntegrations") + initSentry?.lazyLoadSentryIntegrations() } useEffect(() => { - if (isLoading.current && isDemo()) return - isLoading.current = true + if (!isLoading.current && isDemo()) { + isLoading.current = true - initilizeSentryIntegrations() + initilizeSentryIntegrations() + } }, []) } From f5e86962c61fa20d57d6986332d7f27242fa131e Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Tue, 24 Dec 2024 14:53:10 +0600 Subject: [PATCH 12/19] refactor(frontend: moved posthog configs --- .../lib/helpers/analytics/AgPosthogProvider.tsx | 17 ++++++++++++++--- agenta-web/src/lib/helpers/analytics/types.d.ts | 1 - agenta-web/src/pages/_app.tsx | 6 +----- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx index 747f99134c..52e4144011 100644 --- a/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx +++ b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx @@ -3,8 +3,9 @@ import {useRouter} from "next/router" import {useAtom} from "jotai" import {posthogAtom, type PostHogConfig} from "./store/atoms" import {CustomPosthogProviderType} from "./types" +import {isDemo} from "../utils" -const CustomPosthogProvider: CustomPosthogProviderType = ({children, config}) => { +const CustomPosthogProvider: CustomPosthogProviderType = ({children}) => { const router = useRouter() const [loadingPosthog, setLoadingPosthog] = useState(false) const [posthogClient, setPosthogClient] = useAtom(posthogAtom) @@ -26,12 +27,22 @@ const CustomPosthogProvider: CustomPosthogProviderType = ({children, config}) => if (process.env.NODE_ENV === "development") posthog.debug() }, capture_pageview: false, - ...config, + ...(isDemo() + ? { + session_recording: { + maskAllInputs: false, + maskInputOptions: { + password: true, + email: true, + }, + }, + } + : {persistence: "localStorage+cookie"}), }) } finally { setLoadingPosthog(false) } - }, [loadingPosthog, config, posthogClient, setPosthogClient]) + }, [loadingPosthog, posthogClient, setPosthogClient]) useEffect(() => { initPosthog() diff --git a/agenta-web/src/lib/helpers/analytics/types.d.ts b/agenta-web/src/lib/helpers/analytics/types.d.ts index d55cc0d99c..15a6c5b63a 100644 --- a/agenta-web/src/lib/helpers/analytics/types.d.ts +++ b/agenta-web/src/lib/helpers/analytics/types.d.ts @@ -3,5 +3,4 @@ import {type PostHogConfig} from "./store/atoms" export interface CustomPosthogProviderType extends React.FC<{ children: React.ReactNode - config: Partial }> {} diff --git a/agenta-web/src/pages/_app.tsx b/agenta-web/src/pages/_app.tsx index 560effa635..7f99cda146 100644 --- a/agenta-web/src/pages/_app.tsx +++ b/agenta-web/src/pages/_app.tsx @@ -32,11 +32,7 @@ export default function App({Component, pageProps}: AppProps) {
- + From eac97ac0cfa779d8644ca000e30aba14dee03cd7 Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Tue, 24 Dec 2024 15:09:41 +0600 Subject: [PATCH 13/19] enhance(frontend): .eslintrc.json file --- agenta-web/.eslintrc.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/agenta-web/.eslintrc.json b/agenta-web/.eslintrc.json index 188940439e..fb31c1c1e3 100644 --- a/agenta-web/.eslintrc.json +++ b/agenta-web/.eslintrc.json @@ -2,6 +2,8 @@ "extends": ["next/core-web-vitals"], "rules": { "react/no-unescaped-entities": 0, - "react/display-name": 0 + "react/display-name": 0, + "@next/next/no-sync-scripts": 0, + "react/no-children-prop": 0 } } From 5bb9475529e1517624f758770e3abf273086744d Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Tue, 24 Dec 2024 15:57:35 +0600 Subject: [PATCH 14/19] enhance(frontend): avoid overwriting next.config.js file --- agenta-web/next.config.js | 59 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 57 insertions(+), 2 deletions(-) diff --git a/agenta-web/next.config.js b/agenta-web/next.config.js index 28a2e7311f..19f9495156 100644 --- a/agenta-web/next.config.js +++ b/agenta-web/next.config.js @@ -6,7 +6,7 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({ const nextConfig = { output: "standalone", reactStrictMode: true, - pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"], + pageExtensions: ["ts", "tsx", "js", "jsx"], productionBrowserSourceMaps: true, transpilePackages: [ "@lobehub/ui", @@ -26,6 +26,11 @@ const nextConfig = { images: { remotePatterns: [{hostname: "fps.cdnpk.net"}], }, + ...(process.env.NEXT_PUBLIC_FF === "cloud" && { + experimental: { + instrumentationHook: true, + }, + }), async redirects() { return [ @@ -54,8 +59,58 @@ const nextConfig = { ) } + if (process.env.NEXT_PUBLIC_FF === "cloud") { + config.plugins.push( + new webpack.DefinePlugin({ + __SENTRY_DEBUG__: false, + __SENTRY_TRACING__: true, + __RRWEB_EXCLUDE_IFRAME__: true, + __RRWEB_EXCLUDE_SHADOW_DOM__: true, + __SENTRY_EXCLUDE_REPLAY_WORKER__: true, + }), + ) + } + return config }, } -module.exports = withBundleAnalyzer(nextConfig) +if (process.env.NEXT_PUBLIC_FF === "cloud") { + const {withSentryConfig} = require("@sentry/nextjs") + + module.exports = withBundleAnalyzer( + withSentryConfig( + nextConfig, + { + // For all available options, see: + // https://github.com/getsentry/sentry-webpack-plugin#options + + // Suppresses source map uploading logs during build + silent: true, + org: "agenta-ai", + project: "javascript-nextjs", + }, + { + // For all available options, see: + // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/ + + // Upload a larger set of source maps for prettier stack traces (increases build time) + widenClientFileUpload: true, + + // Transpiles SDK to be compatible with IE11 (increases bundle size) + transpileClientSDK: true, + + // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load) + tunnelRoute: "/monitoring", + + // Hides source maps from generated client bundles + hideSourceMaps: true, + + // Automatically tree-shake Sentry logger statements to reduce bundle size + disableLogger: true, + }, + ), + ) +} else { + module.exports = withBundleAnalyzer(nextConfig) +} From 13ab7820082b9e2f4f8f312f127ac9e4ca90b636 Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Tue, 24 Dec 2024 16:40:58 +0600 Subject: [PATCH 15/19] cleanup(frontend): fix types and made the code consistent --- .../src/components/OrgWrapper/OrgWrapper.tsx | 23 +++++++++++-------- .../src/components/Scripts/GlobalScripts.tsx | 10 ++++---- .../src/lib/helpers/auth/AuthProvider.tsx | 4 +--- .../sentry/hook/useSentryIntegrations.ts | 8 +++---- 4 files changed, 23 insertions(+), 22 deletions(-) diff --git a/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx b/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx index 83c1198867..2cfbc210ae 100644 --- a/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx +++ b/agenta-web/src/components/OrgWrapper/OrgWrapper.tsx @@ -1,23 +1,26 @@ -import {useState, useEffect, useCallback} from "react" +import {useState, useEffect, useCallback, ComponentType, FC} from "react" import {isDemo} from "@/lib/helpers/utils" import {dynamicContext} from "@/lib/helpers/dynamic" -const OrgWrapper = ({children}: {children: React.ReactNode}) => { - const [Wrapper, setWrapper] = useState(null) +type OrgWrapperProps = {children: React.ReactNode} - const initilizeOrgProvider = useCallback(async () => { - const OrgContextProvider = await dynamicContext("org.context", Wrapper) - setWrapper(() => OrgContextProvider.default) +const OrgWrapper: FC = ({children}) => { + const [OrgContextProvider, setOrgContextProvider] = + useState | null>(null) + + const initializeOrgProvider = useCallback(async () => { + const Provider = await dynamicContext("org.context") + setOrgContextProvider(() => Provider.default) }, []) useEffect(() => { if (isDemo()) { - initilizeOrgProvider() + initializeOrgProvider() } - }, [initilizeOrgProvider]) + }, [initializeOrgProvider]) - if (isDemo()) { - return Wrapper ? {children} : null + if (isDemo() && OrgContextProvider) { + return {children} } return <>{children} diff --git a/agenta-web/src/components/Scripts/GlobalScripts.tsx b/agenta-web/src/components/Scripts/GlobalScripts.tsx index d89cf2eb7d..8a8c943ce5 100644 --- a/agenta-web/src/components/Scripts/GlobalScripts.tsx +++ b/agenta-web/src/components/Scripts/GlobalScripts.tsx @@ -1,21 +1,21 @@ -import {useState, useEffect, useCallback} from "react" +import {useState, useEffect, useCallback, ComponentType} from "react" import Head from "next/head" import {isDemo} from "@/lib/helpers/utils" import {dynamicComponent} from "@/lib/helpers/dynamic" const GlobalScripts = () => { - const [CloudScripts, setCloudScripts] = useState(null) + const [CloudScripts, setCloudScripts] = useState(null) - const initilizeScripts = useCallback(async () => { + const initializeScripts = useCallback(() => { const Scripts = dynamicComponent("Scripts/assets/CloudScripts") setCloudScripts(() => Scripts) }, []) useEffect(() => { if (isDemo()) { - initilizeScripts() + initializeScripts() } - }, [initilizeScripts]) + }, [initializeScripts]) if (isDemo() && CloudScripts) { return diff --git a/agenta-web/src/lib/helpers/auth/AuthProvider.tsx b/agenta-web/src/lib/helpers/auth/AuthProvider.tsx index 8bd1ae76fa..92f100a22a 100644 --- a/agenta-web/src/lib/helpers/auth/AuthProvider.tsx +++ b/agenta-web/src/lib/helpers/auth/AuthProvider.tsx @@ -12,9 +12,7 @@ import {dynamicConfig} from "../dynamic" const AuthProvider: AuthProviderType = ({children, pageProps}) => { const doRefresh = useCallback(async () => { - if (!isDemo()) return - - if (pageProps.fromSupertokens === "needs-refresh") { + if (isDemo() && pageProps.fromSupertokens === "needs-refresh") { const session = await import("supertokens-auth-react/recipe/session") if (await session.attemptRefreshingSession()) { diff --git a/agenta-web/src/lib/helpers/sentry/hook/useSentryIntegrations.ts b/agenta-web/src/lib/helpers/sentry/hook/useSentryIntegrations.ts index bf50341af3..e5e1df0b02 100644 --- a/agenta-web/src/lib/helpers/sentry/hook/useSentryIntegrations.ts +++ b/agenta-web/src/lib/helpers/sentry/hook/useSentryIntegrations.ts @@ -1,20 +1,20 @@ -import {useEffect, useRef} from "react" +import {useCallback, useEffect, useRef} from "react" import {dynamicLib} from "../../dynamic" import {isDemo} from "../../utils" export const useSentryIntegrations = () => { const isLoading = useRef(false) - const initilizeSentryIntegrations = async () => { + const initializeSentryIntegrations = useCallback(async () => { const initSentry = await dynamicLib("helpers/sentry/lazyLoadSentryIntegrations") initSentry?.lazyLoadSentryIntegrations() - } + }, []) useEffect(() => { if (!isLoading.current && isDemo()) { isLoading.current = true - initilizeSentryIntegrations() + initializeSentryIntegrations() } }, []) } From 7c4477cc2948d40777020696524bd22053e2346e Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Tue, 24 Dec 2024 17:25:33 +0600 Subject: [PATCH 16/19] fix(frontend): failure cypress test --- agenta-web/cypress/support/commands/evaluations.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/agenta-web/cypress/support/commands/evaluations.ts b/agenta-web/cypress/support/commands/evaluations.ts index 57004db6d5..1747649de4 100644 --- a/agenta-web/cypress/support/commands/evaluations.ts +++ b/agenta-web/cypress/support/commands/evaluations.ts @@ -50,7 +50,8 @@ Cypress.Commands.add("createVariantsAndTestsets", () => { cy.wrap(testsetName).as("testsetName") cy.get(".ag-row").should("have.length", 1) - cy.get('[data-cy="testset-header-column-edit-button"]').eq(0).click() + cy.wait(2000) + cy.get('[data-cy="testset-header-column-edit-button"]').eq(0).should("exist").click() cy.get('[data-cy="testset-header-column-edit-input"]').clear() cy.get('[data-cy="testset-header-column-edit-input"]').type("country") cy.get('[data-cy="testset-header-column-save-button"]').click() From 1fe630365aca3b8c0e3a989735994901e75195f1 Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Tue, 24 Dec 2024 18:12:21 +0600 Subject: [PATCH 17/19] enhance(frontend): improve the code structure --- agenta-web/src/components/Scripts/GlobalScripts.tsx | 7 +++++-- .../src/lib/helpers/analytics/AgPosthogProvider.tsx | 13 ++----------- .../src/lib/helpers/analytics/assets/constants.ts | 12 ++++++++++++ 3 files changed, 19 insertions(+), 13 deletions(-) create mode 100644 agenta-web/src/lib/helpers/analytics/assets/constants.ts diff --git a/agenta-web/src/components/Scripts/GlobalScripts.tsx b/agenta-web/src/components/Scripts/GlobalScripts.tsx index 8a8c943ce5..58822327d1 100644 --- a/agenta-web/src/components/Scripts/GlobalScripts.tsx +++ b/agenta-web/src/components/Scripts/GlobalScripts.tsx @@ -1,10 +1,11 @@ -import {useState, useEffect, useCallback, ComponentType} from "react" +import {useState, useEffect, useCallback, ComponentType, useRef} from "react" import Head from "next/head" import {isDemo} from "@/lib/helpers/utils" import {dynamicComponent} from "@/lib/helpers/dynamic" const GlobalScripts = () => { const [CloudScripts, setCloudScripts] = useState(null) + const isLoading = useRef(false) const initializeScripts = useCallback(() => { const Scripts = dynamicComponent("Scripts/assets/CloudScripts") @@ -12,7 +13,9 @@ const GlobalScripts = () => { }, []) useEffect(() => { - if (isDemo()) { + if (!isLoading.current && isDemo()) { + isLoading.current = true + initializeScripts() } }, [initializeScripts]) diff --git a/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx index 52e4144011..9e9fb4252b 100644 --- a/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx +++ b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx @@ -3,6 +3,7 @@ import {useRouter} from "next/router" import {useAtom} from "jotai" import {posthogAtom, type PostHogConfig} from "./store/atoms" import {CustomPosthogProviderType} from "./types" +import {CLOUD_CONFIG, OSS_CONFIG} from "./assets/constants" import {isDemo} from "../utils" const CustomPosthogProvider: CustomPosthogProviderType = ({children}) => { @@ -27,17 +28,7 @@ const CustomPosthogProvider: CustomPosthogProviderType = ({children}) => { if (process.env.NODE_ENV === "development") posthog.debug() }, capture_pageview: false, - ...(isDemo() - ? { - session_recording: { - maskAllInputs: false, - maskInputOptions: { - password: true, - email: true, - }, - }, - } - : {persistence: "localStorage+cookie"}), + ...((isDemo() ? CLOUD_CONFIG : OSS_CONFIG) as Partial), }) } finally { setLoadingPosthog(false) diff --git a/agenta-web/src/lib/helpers/analytics/assets/constants.ts b/agenta-web/src/lib/helpers/analytics/assets/constants.ts new file mode 100644 index 0000000000..1f416c7d1f --- /dev/null +++ b/agenta-web/src/lib/helpers/analytics/assets/constants.ts @@ -0,0 +1,12 @@ +export const CLOUD_CONFIG = { + session_recording: { + maskAllInputs: false, + maskInputOptions: { + password: true, + email: true, + }, + }, +} +export const OSS_CONFIG = { + persistence: "localStorage+cookie", +} From c534d93dfc961590be0bf80048231610b13b541a Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Tue, 24 Dec 2024 18:43:39 +0600 Subject: [PATCH 18/19] fix(frontend): improved the GlobalScript code --- agenta-web/src/components/Scripts/GlobalScripts.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/agenta-web/src/components/Scripts/GlobalScripts.tsx b/agenta-web/src/components/Scripts/GlobalScripts.tsx index 58822327d1..f6538bbbd1 100644 --- a/agenta-web/src/components/Scripts/GlobalScripts.tsx +++ b/agenta-web/src/components/Scripts/GlobalScripts.tsx @@ -1,24 +1,24 @@ -import {useState, useEffect, useCallback, ComponentType, useRef} from "react" +import {useState, useEffect, useCallback, ComponentType} from "react" import Head from "next/head" import {isDemo} from "@/lib/helpers/utils" import {dynamicComponent} from "@/lib/helpers/dynamic" const GlobalScripts = () => { const [CloudScripts, setCloudScripts] = useState(null) - const isLoading = useRef(false) + const [isLoading, setIsLoading] = useState(false) const initializeScripts = useCallback(() => { const Scripts = dynamicComponent("Scripts/assets/CloudScripts") - setCloudScripts(() => Scripts) + setCloudScripts((prev: any) => prev || Scripts) }, []) useEffect(() => { - if (!isLoading.current && isDemo()) { - isLoading.current = true + if (!isLoading && isDemo()) { + setIsLoading(true) initializeScripts() } - }, [initializeScripts]) + }, [initializeScripts, isLoading]) if (isDemo() && CloudScripts) { return From 3fa3edeb3c27eb9f7e3fab2759ca2e151944ba00 Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Tue, 24 Dec 2024 19:00:33 +0600 Subject: [PATCH 19/19] refactor(frontend): removed isLoading to utilize the existing state --- agenta-web/src/components/Scripts/GlobalScripts.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/agenta-web/src/components/Scripts/GlobalScripts.tsx b/agenta-web/src/components/Scripts/GlobalScripts.tsx index f6538bbbd1..e491d3722b 100644 --- a/agenta-web/src/components/Scripts/GlobalScripts.tsx +++ b/agenta-web/src/components/Scripts/GlobalScripts.tsx @@ -5,20 +5,17 @@ import {dynamicComponent} from "@/lib/helpers/dynamic" const GlobalScripts = () => { const [CloudScripts, setCloudScripts] = useState(null) - const [isLoading, setIsLoading] = useState(false) const initializeScripts = useCallback(() => { const Scripts = dynamicComponent("Scripts/assets/CloudScripts") - setCloudScripts((prev: any) => prev || Scripts) + setCloudScripts((prev: any) => prev ?? Scripts) }, []) useEffect(() => { - if (!isLoading && isDemo()) { - setIsLoading(true) - + if (!CloudScripts && isDemo()) { initializeScripts() } - }, [initializeScripts, isLoading]) + }, [initializeScripts, CloudScripts]) if (isDemo() && CloudScripts) { return