Feature/new onboarding step1 (#1733)

This PR includes:
- Creation of a separate onboarding from the existing one (which is currently disabled)
- Creation of the step 1 of the new onboarding, guarded under a feature flag
- The new onboarding now starts when cloning an agent, and uses it as part of the tutorial
- EXTRA - Fix broken "email us" link in the login page

Author: learningbizz

apps/web/src/app/(actions)/actions/[actionType]/_lib/cloneAgent.tsx

@@ -11,9 +11,13 @@ export const CloneAgentActionSpecification = {
 }
 
 async function execute({
-  parameters: { projectId, commitUuid },
+  parameters: { projectId, commitUuid, hasCompletedOnboarding },
   router,
 }: ActionExecuteArgs<ActionType.CloneAgent>) {
+  if (!hasCompletedOnboarding) {
+    return router.push(ROUTES.onboarding.root)
+  }
+
   return router.push(
     ROUTES.projects
       .detail({ id: projectId })

apps/web/src/app/(onboarding)/onboarding/_components/OnboardingClient/ExperimentStep/ExperimentVariants/index.tsx renamed to apps/web/src/app/(onboarding)/onboarding-devs/_components/OnboardingClient/ExperimentStep/ExperimentVariants/index.tsx

@@ -3,7 +3,7 @@ import { Text } from '@latitude-data/web-ui/atoms/Text'
 import { MessageList } from '$/components/ChatWrapper'
 import { cn } from '@latitude-data/web-ui/utils'
 import { Button } from '@latitude-data/web-ui/atoms/Button'
-import { OnboardingStep } from '$/app/(onboarding)/onboarding/_components/OnboardingClient'
+import { OnboardingStep } from '$/app/(onboarding)/onboarding-devs/_components/OnboardingClient'
 import { Message } from '@latitude-data/constants/legacyCompiler'
 import { ParameterTable } from './ParameterTable'
 import { ExperimentVariants } from './ExperimentVariants'

apps/web/src/app/(onboarding)/onboarding/_components/OnboardingClient/ExperimentStep/ParameterTable/index.tsx renamed to apps/web/src/app/(onboarding)/onboarding-devs/_components/OnboardingClient/ExperimentStep/ParameterTable/index.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { Text } from '@latitude-data/web-ui/atoms/Text'
+import {
+  DocumentVersion,
+  Project,
+  Commit,
+  Dataset,
+} from '@latitude-data/core/browser'
+import { useCallback, useState } from 'react'
+import { ROUTES } from '$/services/routes'
+import useLatitudeAction from '$/hooks/useLatitudeAction'
+import { useNavigate } from '$/hooks/useNavigate'
+import { completeOnboardingAction } from '$/actions/workspaceOnboarding/complete'
+import { useToast } from '@latitude-data/web-ui/atoms/Toast'
+import { useRunOnboardingPrompt } from '$/app/(onboarding)/onboarding-devs/_components/OnboardingClient/useRunPrompt'
+import { OnboardingPromptStep } from '$/app/(onboarding)/onboarding-devs/_components/OnboardingClient/PromptStep'
+import { ExperimentStep } from '$/app/(onboarding)/onboarding-devs/_components/OnboardingClient/ExperimentStep'
+
+type OnboardingStep1ContentProps = {
+  workspaceName: string
+  document: DocumentVersion
+  project: Project
+  commit: Commit
+  dataset: Dataset
+}
+
+export enum OnboardingStep {
+  ShowPrompt = 1,
+  ShowResultsAndExperiment = 2,
+}
+
+export function OnboardingClient({
+  workspaceName,
+  document,
+  project,
+  commit,
+  dataset,
+}: OnboardingStep1ContentProps) {
+  const [currentStep, setCurrentStep] = useState<OnboardingStep>(
+    OnboardingStep.ShowPrompt,
+  )
+  const navigate = useNavigate()
+  const { toast } = useToast()
+  const { start, messages, activeStream } = useRunOnboardingPrompt({
+    project,
+    commit,
+    document,
+    setCurrentStep,
+  })
+
+  const { execute: completeOnboarding } = useLatitudeAction(
+    completeOnboardingAction,
+  )
+  const onCompleteOnboarding = useCallback(
+    async ({ experimentUuids }: { experimentUuids: string[] }) => {
+      await completeOnboarding()
+      toast({
+        title: 'Experiment started!',
+        description:
+          "Welcome onboard! Let's check out the results of your experiment",
+      })
+      setTimeout(async () => {
+        navigate.push(
+          ROUTES.projects
+            .detail({ id: project.id })
+            .commits.detail({ uuid: commit.uuid })
+            .documents.detail({ uuid: document.documentUuid })
+            .experiments.withSelected(experimentUuids),
+        )
+      }, 1000)
+    },
+    [
+      completeOnboarding,
+      navigate,
+      project.id,
+      commit.uuid,
+      document.documentUuid,
+      toast,
+    ],
+  )
+
+  return (
+    <div className='space-y-16'>
+      <div className='space-y-2'>
+        <Text.H2B centered display='block'>
+          Welcome to Latitude!
+        </Text.H2B>
+        <Text.H5 centered display='block' color='foregroundMuted'>
+          Hello {workspaceName || 'there'}! Let's cover some Latitude basics.
+        </Text.H5>
+      </div>
+
+      <div className='space-y-6'>
+        <div className='relative min-h-[450px]'>
+          <OnboardingPromptStep
+            document={document}
+            start={start}
+            activeStream={activeStream}
+            currentStep={currentStep}
+            messages={messages}
+          />
+
+          <ExperimentStep
+            document={document}
+            project={project}
+            commit={commit}
+            dataset={dataset}
+            currentStep={currentStep}
+            messages={messages}
+            onCompleteOnboarding={onCompleteOnboarding}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

apps/web/src/app/(onboarding)/onboarding/_components/OnboardingClient/ExperimentStep/index.tsx renamed to apps/web/src/app/(onboarding)/onboarding-devs/_components/OnboardingClient/ExperimentStep/index.tsx

@@ -5,7 +5,7 @@ import { ROUTES } from '$/services/routes'
 import { useStreamHandler } from '$/hooks/playgrounds/useStreamHandler'
 import { usePlaygroundChat } from '$/hooks/playgroundChat/usePlaygroundChat'
 import { ReactStateDispatch } from '@latitude-data/web-ui/commonTypes'
-import { OnboardingStep } from '$/app/(onboarding)/onboarding/_components/OnboardingClient'
+import { OnboardingStep } from '$/app/(onboarding)/onboarding-devs/_components/OnboardingClient'
 
 const SECONDS_BEFORE_HIDING_PROMPT_IN_SECONDS = 2000
 export const DOCUMENT_PARAMETERS: OnboardingParameters = {

apps/web/src/app/(onboarding)/onboarding/_components/OnboardingClient/PromptStep/index.tsx renamed to apps/web/src/app/(onboarding)/onboarding-devs/_components/OnboardingClient/PromptStep/index.tsx

@@ -0,0 +1,34 @@
+'use server'
+
+import buildMetatags from '$/app/_lib/buildMetatags'
+import { CSPostHogProvider, IdentifyUser } from '$/app/providers'
+import { getCurrentUserOrRedirect } from '$/services/auth/getCurrentUser'
+import { Icon } from '@latitude-data/web-ui/atoms/Icons'
+import { ReactNode } from 'react'
+
+export async function generateMetadata() {
+  return buildMetatags({
+    title: 'Onboarding',
+  })
+}
+
+export default async function OnboardingLayout({
+  children,
+}: {
+  children: ReactNode
+}) {
+  const { workspace, user } = await getCurrentUserOrRedirect()
+
+  return (
+    <CSPostHogProvider>
+      <IdentifyUser user={user} workspace={workspace}>
+        <div className='flex min-h-screen flex-col max-w-[768px] pt-12 pb-4 m-auto'>
+          <div className='flex items-center justify-center'>
+            <Icon name='logo' size='large' />
+          </div>
+          {children}
+        </div>
+      </IdentifyUser>
+    </CSPostHogProvider>
+  )
+}

apps/web/src/app/(onboarding)/onboarding-devs/_components/OnboardingClient/index.tsx

@@ -0,0 +1,42 @@
+import { redirect } from 'next/navigation'
+import { isOnboardingCompleted } from '$/data-access/workspaceOnboarding'
+import { getCurrentUserOrRedirect } from '$/services/auth/getCurrentUser'
+import { OnboardingClient } from './_components/OnboardingClient'
+import { findOnboardingDocument } from '@latitude-data/core/services/documents/findOnboardingDocument'
+import { findOnboardingDataset } from '@latitude-data/core/services/datasets/findOnboardingDataset'
+import { ROUTES } from '$/services/routes'
+import { PageNotFoundError } from 'next/dist/shared/lib/utils'
+
+export default async function OnboardingRedirect() {
+  const isCompleted = await isOnboardingCompleted()
+  if (isCompleted) {
+    redirect(ROUTES.dashboard.root)
+  }
+
+  const { workspace } = await getCurrentUserOrRedirect()
+  if (!workspace?.id) {
+    throw new PageNotFoundError('Workspace ID is required')
+  }
+
+  const documentResult = await findOnboardingDocument(workspace.id)
+  if (documentResult.error) {
+    throw new PageNotFoundError('No document found')
+  }
+  const { documents, project, commit } = documentResult.value
+
+  const datasetResult = await findOnboardingDataset(workspace.id)
+  if (datasetResult.error) {
+    throw datasetResult.error
+  }
+  const dataset = datasetResult.value
+
+  return (
+    <OnboardingClient
+      workspaceName={workspace?.name}
+      document={documents[0]} // TODO(onboarding): change this later once we have a new onboarding
+      project={project}
+      commit={commit}
+      dataset={dataset}
+    />
+  )
+}