Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Member onboarding video #2123

Merged
merged 1 commit into from
Oct 17, 2023
Merged

Member onboarding video #2123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion front/components/sparkle/OnboardingLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default function OnboardingLayout({
</div>

<div className="s-dark text-slate-200">
<main className="z-10 mx-auto max-w-4xl px-6 pt-24">{children}</main>
<main className="z-10 mx-auto max-w-4xl px-6 pt-48">{children}</main>
</div>
<>
<Script
Expand Down
198 changes: 125 additions & 73 deletions front/pages/w/[wId]/welcome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export default function Welcome({
const [lastName, setLastName] = useState<string>(user.name.split(" ")[1]);
const [expertise, setExpertise] = useState<string>(defaultExpertise);
const [isFormValid, setIsFormValid] = useState<boolean>(false);
const [isFormProcessed, setIsFormProcessed] = useState<boolean>(false);

useEffect(() => {
setIsFormValid(
Expand All @@ -91,83 +92,134 @@ export default function Welcome({
});
}
// We don't block the user if it fails here.
if (conversationId) {
await router.push(`/w/${owner.sId}/assistant/${conversationId}`);
} else {
await router.push(`/w/${owner.sId}/assistant/new`);
}
setIsFormProcessed(true);
};

return (
<OnboardingLayout owner={owner} gaTrackingId={gaTrackingId}>
<div className="flex flex-col gap-6">
<div>
<p className="mt-16 font-objektiv text-2xl font-bold tracking-tighter">
<span className="text-red-400 sm:font-objektiv md:font-objektiv">
Hello {firstName}
</span>
<br />
Let's check a few things.
</p>
</div>
<div>
<p>
Your email is <span className="font-bold">{user.email}</span>.
</p>
</div>
<div>
<p className="pb-2">Your name is:</p>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<Input
name="firstName"
placeholder=""
value={firstName}
onChange={setFirstName}
/>
<Input
name="lastName"
placeholder=""
value={lastName}
onChange={setLastName}
if (!isFormProcessed) {
return (
<OnboardingLayout owner={owner} gaTrackingId={gaTrackingId}>
<div className="flex flex-col gap-6">
<div>
<p className="font-objektiv text-2xl font-bold tracking-tighter">
<span className="text-red-400 sm:font-objektiv md:font-objektiv">
Hello {firstName}
</span>
<br />
Let's check a few things.
</p>
</div>
<div>
<p>
Your email is <span className="font-bold">{user.email}</span>.
</p>
</div>
<div>
<p className="pb-2">Your name is:</p>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<Input
name="firstName"
placeholder=""
value={firstName}
onChange={setFirstName}
/>
<Input
name="lastName"
placeholder=""
value={lastName}
onChange={setLastName}
/>
</div>
</div>
<div>
<p className="pb-2">
How often do you use ChatGPT or other AI assistants?
</p>
<RadioButton
name="expertise"
className="flex-col sm:flex-row"
choices={[
{
label: "Never!",
value: "beginner",
disabled: false,
},
{
label: "Occasionally",
value: "intermediate",
disabled: false,
},
{
label: "Daily",
value: "advanced",
disabled: false,
},
]}
value={expertise}
onChange={setExpertise}
/>
</div>
<div className="flex justify-center pt-6">
<Button label="Ok" disabled={!isFormValid} onClick={handleSubmit} />
</div>
</div>
<div>
<p className="pb-2">
How often do you use ChatGPT or other AI assistants?
</p>
<RadioButton
name="expertise"
className="flex-col sm:flex-row"
choices={[
{
label: "Never!",
value: "beginner",
disabled: false,
},
{
label: "Occasionally",
value: "intermediate",
disabled: false,
},
{
label: "Daily",
value: "advanced",
disabled: false,
},
]}
value={expertise}
onChange={setExpertise}
/>
</div>
<div className="flex justify-center pt-6">
<Button
label="Start with Dust!"
disabled={!isFormValid}
onClick={handleSubmit}
/>
</OnboardingLayout>
);
} else {
return (
<OnboardingLayout owner={owner} gaTrackingId={gaTrackingId}>
<div className="flex flex-col gap-6">
<div>
<p className="font-objektiv text-2xl font-bold tracking-tighter text-green-400 sm:font-objektiv md:font-objektiv">
You're ready to go!
</p>
<p>Here is a 3 minutes video to get you started with Dust.</p>
</div>
<div>
<YoutubeIframe youtubeId="NVIbCvfkO3E" />
</div>
<div className="flex justify-center">
<Button
label="Start with Dust!"
disabled={!isFormValid}
onClick={async () => {
if (conversationId) {
await router.push(
`/w/${owner.sId}/assistant/${conversationId}`
);
} else {
await router.push(`/w/${owner.sId}/assistant/new`);
}
}}
/>
</div>
</div>
</div>
</OnboardingLayout>
);
</OnboardingLayout>
);
}
}

const YoutubeIframe = ({ youtubeId }: { youtubeId: string }) => {
return (
<div
className="video"
style={{
position: "relative",
paddingBottom: "56.25%" /* 16:9 */,
paddingTop: 25,
height: 0,
}}
>
<iframe
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
}}
src={`https://www.youtube.com/embed/${youtubeId}`}
frameBorder="0"
/>
</div>
);
};