diff --git a/apps/opik-frontend/public/images/demo-project.png b/apps/opik-frontend/public/images/demo-project.png deleted file mode 100644 index b5223f954a..0000000000 Binary files a/apps/opik-frontend/public/images/demo-project.png and /dev/null differ diff --git a/apps/opik-frontend/src/components/pages/GetStartedPage/GetStarted.tsx b/apps/opik-frontend/src/components/pages/GetStartedPage/GetStarted.tsx deleted file mode 100644 index 4ef56dd1b2..0000000000 --- a/apps/opik-frontend/src/components/pages/GetStartedPage/GetStarted.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import { MoveRight, SquareArrowOutUpRight } from "lucide-react"; -import { Link } from "@tanstack/react-router"; -import { Button } from "@/components/ui/button"; -import useAppStore from "@/store/AppStore"; -import demoProjectImageUrl from "/images/demo-project.png"; -import langChainLogoUrl from "/images/integrations/langchain.png"; -import liteLLMLogoUrl from "/images/integrations/litellm.png"; -import openAILogoUrl from "/images/integrations/openai.png"; -import pythonLogoUrl from "/images/integrations/python.png"; -import ragasLogoUrl from "/images/integrations/ragas.png"; -import ApiKeyInput from "@/components/shared/ApiKeyInput/ApiKeyInput"; -import React from "react"; - -const LOGO_IMAGES = [ - pythonLogoUrl, - liteLLMLogoUrl, - openAILogoUrl, - ragasLogoUrl, - langChainLogoUrl, -]; - -type GetStartedProps = { - apiKey?: string; - userName: string; -}; - -const GetStarted: React.FunctionComponent = ({ - apiKey, - userName, -}) => { - const workspaceName = useAppStore((state) => state.activeWorkspaceName); - - return ( -
-
-
-
-
-
- Welcome {userName} -
- -

- Get Started with Opik -

-
- - - - -
- -
- Start with one of our integrations or a few lines of code to log, - view and evaluate your LLM traces during both development and - production. -
-
- -
-
-
-
-
- Integrate Opik -
-
- A step by step guide for adding Opik into your existing - application. Includes detailed examples. -
-
- - - -
-
- -
- {LOGO_IMAGES.map((url) => { - return ; - })} -
-
- - {apiKey && ( -
-
-
- Copy your API key -
-
- API keys are used to send traces to the Opik platform. -
-
- - -
- )} -
- -
-
Explore demo project
- - - -
-
-
- SQL query generation -
-
- Perform a text to SQL query generation using LangChain. The - example uses the Chinook database of a music store, with - both employee, customer and invoice data. -
-
-
- Explore project -
-
- -
-
-
-
- ); -}; - -export default GetStarted; diff --git a/apps/opik-frontend/src/components/pages/GetStartedPage/GetStartedPage.tsx b/apps/opik-frontend/src/components/pages/GetStartedPage/GetStartedPage.tsx deleted file mode 100644 index 39e0d34809..0000000000 --- a/apps/opik-frontend/src/components/pages/GetStartedPage/GetStartedPage.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import usePluginsStore from "@/store/PluginsStore"; -import GetStarted from "@/components/pages/GetStartedPage/GetStarted"; - -const GetStartedPage = () => { - const GetStartedPage = usePluginsStore((state) => state.GetStartedPage); - - if (GetStartedPage) { - return ; - } - - return ; -}; - -export default GetStartedPage; diff --git a/apps/opik-frontend/src/components/pages/QuickstartPage/Quickstart.tsx b/apps/opik-frontend/src/components/pages/QuickstartPage/Quickstart.tsx index 06c7df1a39..7e5c4f4ad5 100644 --- a/apps/opik-frontend/src/components/pages/QuickstartPage/Quickstart.tsx +++ b/apps/opik-frontend/src/components/pages/QuickstartPage/Quickstart.tsx @@ -1,5 +1,5 @@ import React, { useMemo, useState } from "react"; -import { Link, useRouter, useSearch } from "@tanstack/react-router"; +import { Link, useRouter } from "@tanstack/react-router"; import { MoveLeft, SquareArrowOutUpRight } from "lucide-react"; import useAppStore from "@/store/AppStore"; @@ -90,9 +90,6 @@ const Quickstart: React.FunctionComponent = ({ ); const router = useRouter(); - const { from }: { from?: string } = useSearch({ strict: false }); - const getBackText = - from === "get-started" ? "Return to ‘Get started’" : "Return back"; const renderMenuItems = () => { return INTEGRATIONS.map((item, index) => { @@ -124,7 +121,7 @@ const Quickstart: React.FunctionComponent = ({ onClick={() => router.history.back()} > - {getBackText} + Return back
diff --git a/apps/opik-frontend/src/plugins/comet/GetStartedPage.tsx b/apps/opik-frontend/src/plugins/comet/GetStartedPage.tsx deleted file mode 100644 index 1da9767f1e..0000000000 --- a/apps/opik-frontend/src/plugins/comet/GetStartedPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import useUser from "./useUser"; -import GetStarted from "@/components/pages/GetStartedPage/GetStarted"; - -const GetStartedPage = () => { - const { data: user } = useUser(); - - if (!user) return; - return ; -}; - -export default GetStartedPage; diff --git a/apps/opik-frontend/src/router.tsx b/apps/opik-frontend/src/router.tsx index 2fc1ffd3d5..8721ca52d0 100644 --- a/apps/opik-frontend/src/router.tsx +++ b/apps/opik-frontend/src/router.tsx @@ -15,7 +15,6 @@ import DatasetsPage from "@/components/pages/DatasetsPage/DatasetsPage"; import ExperimentsPage from "@/components/pages/ExperimentsPage/ExperimentsPage"; import CompareExperimentsPage from "@/components/pages/CompareExperimentsPage/CompareExperimentsPage"; import FeedbackDefinitionsPage from "@/components/pages/FeedbackDefinitionsPage/FeedbackDefinitionsPage"; -import GetStartedPage from "@/components/pages/GetStartedPage/GetStartedPage"; import QuickstartPage from "@/components/pages/QuickstartPage/QuickstartPage"; import HomePage from "@/components/pages/HomePage/HomePage"; import PartialPageLayout from "@/components/layout/PartialPageLayout/PartialPageLayout"; @@ -27,6 +26,7 @@ import PromptsPage from "@/components/pages/PromptsPage/PromptsPage"; import PromptPage from "@/components/pages/PromptPage/PromptPage"; import RedirectProjects from "@/components/redirect/RedirectProjects"; import RedirectDatasets from "@/components/redirect/RedirectDatasets"; +import useAppStore from "@/store/AppStore"; const TanStackRouterDevtools = process.env.NODE_ENV === "production" @@ -60,10 +60,15 @@ const workspaceGuardPartialLayoutRoute = createRoute({ component: () => , }); -const homeRoute = createRoute({ +const baseRoute = createRoute({ path: "/", getParentRoute: () => workspaceGuardRoute, - component: HomePage, + component: () => ( + + ), }); const workspaceRoute = createRoute({ @@ -79,11 +84,24 @@ const quickstartRoute = createRoute({ component: QuickstartPage, }); +// TODO @deprecated, should be deleted after changes in EM app // ----------- get started const getStartedRoute = createRoute({ path: "/$workspaceName/get-started", getParentRoute: () => workspaceGuardPartialLayoutRoute, - component: GetStartedPage, + component: () => ( + + ), +}); + +// ----------- home +const homeRoute = createRoute({ + path: "/$workspaceName/home", + getParentRoute: () => workspaceGuardRoute, + component: HomePage, }); // ----------- projects @@ -239,10 +257,11 @@ const redirectDatasetsRoute = createRoute({ const routeTree = rootRoute.addChildren([ workspaceGuardPartialLayoutRoute.addChildren([ - getStartedRoute, quickstartRoute, + getStartedRoute, ]), workspaceGuardRoute.addChildren([ + baseRoute, homeRoute, workspaceRoute.addChildren([ projectsRoute.addChildren([ diff --git a/apps/opik-frontend/src/store/PluginsStore.ts b/apps/opik-frontend/src/store/PluginsStore.ts index c6fd0465cd..6d887ecf20 100644 --- a/apps/opik-frontend/src/store/PluginsStore.ts +++ b/apps/opik-frontend/src/store/PluginsStore.ts @@ -6,7 +6,6 @@ import WorkspacePreloader from "@/components/shared/WorkspacePreloader/Workspace type PluginStore = { Logo: React.ComponentType<{ expanded: boolean }> | null; UserMenu: React.ComponentType | null; - GetStartedPage: React.ComponentType | null; QuickstartPage: React.ComponentType | null; WorkspacePreloader: React.ComponentType<{ children: React.ReactNode }> | null; init: unknown; @@ -17,7 +16,6 @@ const VALID_PLUGIN_FOLDER_NAMES = ["comet"]; const PLUGIN_NAMES = [ "Logo", "UserMenu", - "GetStartedPage", "QuickstartPage", "WorkspacePreloader", "init", @@ -26,7 +24,6 @@ const PLUGIN_NAMES = [ const usePluginsStore = create((set) => ({ Logo: null, UserMenu: null, - GetStartedPage: null, QuickstartPage: null, WorkspacePreloader: null, init: null,