1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
"use client"
import { useOnboardingStorage } from "@hooks/use-onboarding-storage"
import { useOrgOnboarding } from "@hooks/use-org-onboarding"
import { useAuth } from "@lib/auth-context"
import { ChevronsDown, LoaderIcon } from "lucide-react"
import { useRouter } from "next/navigation"
import { useEffect, useMemo } from "react"
import { InstallPrompt } from "@/components/install-prompt"
import { ChromeExtensionButton } from "@/components/chrome-extension-button"
import { ChatInput } from "@/components/chat-input"
import { BackgroundPlus } from "@ui/components/grid-plus"
import { Memories } from "@/components/memories"
import { useFeatureFlagEnabled } from "posthog-js/react"
export default function Page() {
const { user, session } = useAuth()
const router = useRouter()
const flagEnabled = useFeatureFlagEnabled("nova-alpha-access")
// TODO: remove this flow after the feature flag is removed
// Old app: localStorage-backed onboarding
const {
shouldShowOnboarding: shouldShowOldOnboarding,
isLoading: oldOnboardingLoading,
} = useOnboardingStorage()
// New app: DB-backed onboarding (org.metadata.isOnboarded)
const {
shouldShowOnboarding: shouldShowNewOnboarding,
isLoading: newOnboardingLoading,
} = useOrgOnboarding()
// Select the appropriate onboarding state based on feature flag
const isOnboardingLoading = useMemo(() => {
if (flagEnabled) {
return newOnboardingLoading
}
return oldOnboardingLoading
}, [flagEnabled, newOnboardingLoading, oldOnboardingLoading])
const shouldShowOnboarding = useMemo(() => {
if (flagEnabled) {
return shouldShowNewOnboarding()
}
return shouldShowOldOnboarding()
}, [flagEnabled, shouldShowNewOnboarding, shouldShowOldOnboarding])
useEffect(() => {
const url = new URL(window.location.href)
const authenticateChromeExtension = url.searchParams.get(
"extension-auth-success",
)
if (authenticateChromeExtension) {
const sessionToken = session?.token
const userData = {
email: user?.email,
name: user?.name,
userId: user?.id,
}
if (sessionToken && userData?.email) {
const encodedToken = encodeURIComponent(sessionToken)
window.postMessage(
{ token: encodedToken, userData },
window.location.origin,
)
url.searchParams.delete("extension-auth-success")
window.history.replaceState({}, "", url.toString())
}
}
}, [user, session])
useEffect(() => {
if (user && !isOnboardingLoading && shouldShowOnboarding) {
if (flagEnabled) {
router.push("/new/onboarding?step=input&flow=welcome")
} else {
router.push("/onboarding")
}
}
}, [user, shouldShowOnboarding, isOnboardingLoading, router, flagEnabled])
if (!user || isOnboardingLoading) {
return (
<div className="min-h-screen flex items-center justify-center bg-[#0f1419]">
<div className="flex flex-col items-center gap-4">
<LoaderIcon className="w-8 h-8 text-orange-500 animate-spin" />
<p className="text-white/60">Loading...</p>
</div>
</div>
)
}
if (shouldShowOnboarding) {
return null
}
return (
<div>
<div className="flex flex-col h-[80vh] rounded-lg overflow-hidden relative">
<BackgroundPlus />
<div className="p-4 flex-1 flex items-center justify-center">
<ChatInput />
</div>
<div className="flex items-center gap-2 text-xs text-muted-foreground justify-center py-2 opacity-75">
<ChevronsDown className="size-4" />
<p>Scroll down to see memories</p>
</div>
</div>
<Memories />
<InstallPrompt />
<ChromeExtensionButton />
</div>
)
}
|