WIP - Step 1 of Onboarding v3

apps/web/src/actions/datasets/generateDataset.ts

@@ -3,82 +3,50 @@
 import { z } from 'zod'
 import { BadRequestError } from '@latitude-data/constants/errors'
 import { env } from '@latitude-data/env'
-import { createSdk } from '$/app/(private)/_lib/createSdk'
-import { getCurrentUserOrRedirect } from '$/services/auth/getCurrentUser'
 import { authProcedure } from '$/actions/procedures'
-import { createDatasetFromJson } from '@latitude-data/core/services/datasets/createFromJson'
-import {
-  ChainStepResponse,
-  CLOUD_MESSAGES,
-  LogSources,
-} from '@latitude-data/core/constants'
+import { CLOUD_MESSAGES } from '@latitude-data/core/constants'
+import { generateDatasetWithCopilot } from '@latitude-data/core/services/datasets/generateWithCopilot'
+import { redirect } from 'next/navigation'
+import { ROUTES } from '$/services/routes'
+import { getWorkspaceOnboarding } from '@latitude-data/core/services/workspaceOnboarding/get'
+import { markWorkspaceOnboardingComplete } from '@latitude-data/core/services/workspaceOnboarding/update'
 
 export const generateDatasetAction = authProcedure
   .inputSchema(
     z.object({
       parameters: z.string(),
-      description: z.string(),
+      description: z.string().optional(),
+      prompt: z.string().optional(),
       rowCount: z.number(),
       name: z.string(),
+      fromCloud: z.boolean(),
     }),
   )
-  .action(async ({ parsedInput }) => {
-    if (!env.LATITUDE_CLOUD) {
+  .action(async ({ parsedInput, ctx }) => {
+    const { parameters, description, prompt, rowCount, name, fromCloud } =
+      parsedInput
+
+    if (fromCloud && !env.LATITUDE_CLOUD) {
       throw new BadRequestError(CLOUD_MESSAGES.generateDatasets)
-    }
-    if (!env.COPILOT_PROJECT_ID) {
-      throw new BadRequestError('COPILOT_PROJECT_ID is not set')
-    }
-    if (!env.COPILOT_PROMPT_DATASET_GENERATOR_PATH) {
-      throw new BadRequestError(
-        'COPILOT_PROMPT_DATASET_GENERATOR_PATH is not set',
-      )
-    }
-    if (!env.COPILOT_WORKSPACE_API_KEY) {
-      throw new BadRequestError('COPILOT_WORKSPACE_API_KEY is not set')
+    } else if (!fromCloud && !env.LATITUDE_CLOUD) {
+      // If user is self-hosted and they're in the new dataset onboarding, we complete the onboarding and redirect to the dashboard as they cannot generate the dataset with copilot
+      const onboarding = await getWorkspaceOnboarding({
+        workspace: ctx.workspace,
+      }).then((r) => r.unwrap())
+
+      await markWorkspaceOnboardingComplete({
+        onboarding,
+      }).then((r) => r.unwrap())
+      return redirect(ROUTES.dashboard.root)
     }
 
-    const { user, workspace } = await getCurrentUserOrRedirect()
-    const sdk = await createSdk({
-      workspace,
-      apiKey: env.COPILOT_WORKSPACE_API_KEY,
-      projectId: env.COPILOT_PROJECT_ID,
-      __internal: { source: LogSources.Playground },
+    return await generateDatasetWithCopilot({
+      workspace: ctx.workspace,
+      user: ctx.user,
+      parameters,
+      description,
+      prompt,
+      rowCount,
+      name,
     }).then((r) => r.unwrap())
-
-    const sdkResponse = await sdk.prompts.run<{}>(
-      env.COPILOT_PROMPT_DATASET_GENERATOR_PATH,
-      {
-        stream: false,
-        parameters: {
-          row_count: parsedInput.rowCount,
-          parameters: parsedInput.parameters,
-          user_message: parsedInput.description,
-        },
-      },
-    )
-    const sdkResult = sdkResponse
-
-    if (!sdkResult) {
-      throw new BadRequestError(
-        'Something went wrong generating the Dataset preview',
-      )
-    }
-
-    const response = sdkResult.response as ChainStepResponse<'object'>
-    const name = parsedInput.name
-    const result = await createDatasetFromJson({
-      author: user,
-      workspace,
-      data: {
-        name,
-        rows: response.object.rows,
-      },
-    })
-
-    if (result.error) {
-      throw result.error
-    }
-
-    return result.value
   })

apps/web/src/app/(onboarding)/onboarding-agents/start/lib/OnboardingStep.tsx → apps/web/src/app/(onboarding)/_lib/OnboardingStep.tsx

@@ -25,3 +25,15 @@ export const OnboardingStep = {
   Body: OnboardingStepBody,
   Header: OnboardingStepHeader,
 }
+
+export const DatasetOnboardingStepRoot = ({
+  children,
+}: {
+  children: ReactNode
+}) => {
+  return (
+    <div className='flex flex-col h-full w-full items-center gap-18 p-20'>
+      {children}
+    </div>
+  )
+}

apps/web/src/app/(onboarding)/onboarding-agents/start/_components/OnboardingClient/ConfigureTriggers/index.tsx

@@ -14,7 +14,7 @@ import {
 import { ConfiguredTriggers } from './_components/ConfiguredTriggers'
 import { IsLoadingOnboardingItem } from '../../../lib/IsLoadingOnboardingItem'
 import { OnboardingStepKey } from '@latitude-data/constants/onboardingSteps'
-import { OnboardingStep } from '../../../lib/OnboardingStep'
+import { OnboardingStep } from '../../../../../_lib/OnboardingStep'
 
 export function ConfigureTriggersHeader() {
   const { project } = useCurrentProject()

apps/web/src/app/(onboarding)/onboarding-agents/start/_components/OnboardingClient/RunAgent/index.tsx

@@ -7,7 +7,7 @@ import { useCurrentCommit } from '$/app/providers/CommitProvider'
 import { useCurrentProject } from '$/app/providers/ProjectProvider'
 import { useAutoScroll } from '@latitude-data/web-ui/hooks/useAutoScroll'
 import { StatusIndicator } from '$/components/PlaygroundCommon/StatusIndicator'
-import { OnboardingStep } from '../../../lib/OnboardingStep'
+import { OnboardingStep } from '../../../../../_lib/OnboardingStep'
 import { usePlayground } from '../../../lib/PlaygroundProvider'
 import { IsLoadingOnboardingItem } from '../../../lib/IsLoadingOnboardingItem'
 import { useCurrentWorkspace } from '$/app/providers/WorkspaceProvider'

apps/web/src/app/(onboarding)/onboarding-agents/start/_components/OnboardingClient/SetupIntegrations/index.tsx

@@ -10,7 +10,7 @@ import {
 import { ConfiguredIntegrations } from '$/components/Integrations/ConfiguredIntegrations'
 import { IsLoadingOnboardingItem } from '../../../lib/IsLoadingOnboardingItem'
 import { OnboardingStepKey } from '@latitude-data/constants/onboardingSteps'
-import { OnboardingStep } from '../../../lib/OnboardingStep'
+import { OnboardingStep } from '../../../../../_lib/OnboardingStep'
 
 export function SetupIntegrationsHeader() {
   const { data: integrations } = useIntegrations()

apps/web/src/app/(onboarding)/onboarding-agents/start/_components/OnboardingClient/TriggerAgent/index.tsx

@@ -10,7 +10,7 @@ import { RunTrigger } from './_components/RunTrigger'
 import useIntegrations from '$/stores/integrations'
 import { IsLoadingOnboardingItem } from '../../../lib/IsLoadingOnboardingItem'
 import { OnboardingStepKey } from '@latitude-data/constants/onboardingSteps'
-import { OnboardingStep } from '../../../lib/OnboardingStep'
+import { OnboardingStep } from '../../../../../_lib/OnboardingStep'
 import { usePlayground } from '../../../lib/PlaygroundProvider'
 import { RunDocumentProps } from '$/components/TriggersManagement/types'
 import { AgentInput } from '$/components/Agent/AgentInput'

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

@@ -14,7 +14,7 @@ import {
 import { TriggerAgentHeader, TriggerAgentBody } from './TriggerAgent'
 import { useState } from 'react'
 import { RunAgentHeader, RunAgentBody } from './RunAgent'
-import { OnboardingStep } from '$/app/(onboarding)/onboarding-agents/start/lib/OnboardingStep'
+import { OnboardingStep } from '$/app/(onboarding)/_lib/OnboardingStep'
 import { PlaygroundProvider } from '../../lib/PlaygroundProvider'
 import { MetadataProvider } from '$/components/MetadataProvider'
 import { User } from '@latitude-data/core/schema/models/types/User'

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

@@ -0,0 +1,94 @@
+import { DatasetOnboardingStepKey } from '@latitude-data/constants/onboardingSteps'
+import { useMetadata } from '$/hooks/useMetadata'
+import { Badge } from '@latitude-data/web-ui/atoms/Badge'
+import { Text } from '@latitude-data/web-ui/atoms/Text'
+import { Button } from '@latitude-data/web-ui/atoms/Button'
+import { Suspense, useCallback } from 'react'
+import { useDocumentValue } from '$/hooks/useDocumentValueContext'
+import { BlocksEditorPlaceholder } from '$/components/BlocksEditor'
+import { fromAstToBlocks } from '$/components/BlocksEditor/Editor/state/promptlToLexical/fromAstToBlocks'
+import { emptyRootBlock } from '$/components/BlocksEditor/Editor/state/promptlToLexical'
+import { OnboardingEditor } from '../_components/OnboardingEditor'
+import SimpleDatasetTable from '../_components/SimpleDatasetTable'
+
+export function GenerateDatasetBody({
+  setCurrentOnboardingStep,
+}: {
+  setCurrentOnboardingStep: (step: DatasetOnboardingStepKey) => void
+}) {
+  const { value } = useDocumentValue()
+  const { metadata } = useMetadata()
+
+  const moveNextStep = useCallback(() => {
+    setCurrentOnboardingStep(DatasetOnboardingStepKey.RunExperiment)
+  }, [setCurrentOnboardingStep])
+
+  return (
+    <div className='flex flex-row items-center gap-10 h-full w-full'>
+      <div className='flex flex-col items-end w-full h-full'>
+        <div className='relative flex-1 w-full max-h-[350px] max-w-[600px]'>
+          <Suspense fallback={<BlocksEditorPlaceholder />}>
+            <div className='relative p-4'>
+              <OnboardingEditor
+                initialValue={
+                  metadata?.ast
+                    ? fromAstToBlocks({
+                        ast: metadata.ast,
+                        prompt: value,
+                      })
+                    : emptyRootBlock
+                }
+                readOnly={true}
+              />
+              <div
+                aria-hidden
+                className='pointer-events-none absolute inset-0 bg-background/60 backdrop-saturate-50'
+              />
+              <div className='pointer-events-none absolute inset-x-0 bottom-0 h-full bg-gradient-to-t from-background via-background to-transparent' />
+            </div>
+            <SimpleDatasetTable numberOfRows={4} onlyShowSkeleton={true} />
+          </Suspense>
+        </div>
+      </div>
+      <div className='flex flex-col items-start gap-8 w-full h-full'>
+        <div className='flex flex-col items-start gap-6'>
+          <div className='flex flex-col gap-4 w-full'>
+            <Badge
+              variant='accent'
+              shape='rounded'
+              className='w-fit font-medium'
+            >
+              Step 2 of 3
+            </Badge>
+            <Text.H4M>Use a dataset</Text.H4M>
+          </div>
+          <div className='flex flex-col gap-4 max-w-[300px]'>
+            <Text.H5 color='foregroundMuted'>
+              Next, we need to use some data to
+              <br />
+              populate your prompt.
+            </Text.H5>
+            <Text.H5 color='foregroundMuted'>
+              Later, you can upload your own dataset or
+              <br />
+              integrate our SDK to use production data.
+            </Text.H5>
+            <Text.H5 color='foregroundMuted'>
+              For now, we'll generate some synthetic
+              <br />
+              data based on your prompt.
+            </Text.H5>
+          </div>
+        </div>
+        <Button
+          fancy
+          className='w-full'
+          iconProps={{ placement: 'right', name: 'arrowRight' }}
+          onClick={moveNextStep}
+        >
+          Generate Dataset
+        </Button>
+      </div>
+    </div>
+  )
+}