Skip to content

Commit 631000b

Browse files
author
Calvinn Ng
committed
Revert "Delete gui/src/pages/onboarding/Onboarding.tsx"
This reverts commit 1c4920e.
1 parent 1c4920e commit 631000b

File tree

1 file changed

+213
-0
lines changed

1 file changed

+213
-0
lines changed

‎gui/src/pages/onboarding/Onboarding.tsx‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
import {
2+
CheckBadgeIcon,
3+
Cog6ToothIcon,
4+
ComputerDesktopIcon,
5+
GiftIcon,
6+
} from "@heroicons/react/24/outline";
7+
import { ToCoreFromIdeOrWebviewProtocol } from "core/protocol/core";
8+
import { useContext, useState } from "react";
9+
import { useDispatch } from "react-redux";
10+
import { useNavigate } from "react-router-dom";
11+
import { lightGray } from "../../components";
12+
import ConfirmationDialog from "../../components/dialogs/ConfirmationDialog";
13+
import GitHubSignInButton from "../../components/modelSelection/quickSetup/GitHubSignInButton";
14+
import { IdeMessengerContext } from "../../context/IdeMessenger";
15+
import {
16+
setDialogMessage,
17+
setShowDialog,
18+
} from "../../redux/slices/uiStateSlice";
19+
import { isJetBrains } from "../../util";
20+
import { FREE_TRIAL_LIMIT_REQUESTS, hasPassedFTL } from "../../util/freeTrial";
21+
import { Div, StyledButton } from "./components";
22+
import { useOnboarding } from "./utils";
23+
24+
type OnboardingMode =
25+
ToCoreFromIdeOrWebviewProtocol["completeOnboarding"][0]["mode"];
26+
27+
function Onboarding() {
28+
const navigate = useNavigate();
29+
const dispatch = useDispatch();
30+
const ideMessenger = useContext(IdeMessengerContext);
31+
32+
const [hasSignedIntoGh, setHasSignedIntoGh] = useState(false);
33+
const [selectedOnboardingMode, setSlectedOnboardingMode] = useState<
34+
OnboardingMode | undefined
35+
>(undefined);
36+
37+
const { completeOnboarding } = useOnboarding();
38+
39+
function onSubmit() {
40+
ideMessenger.post("completeOnboarding", {
41+
mode: selectedOnboardingMode,
42+
});
43+
44+
/**
45+
* "completeOnboarding" above will update the config with our
46+
* new embeddings provider. If it's not the default local provider,
47+
* we need to re-index the codebase.
48+
*/
49+
if (selectedOnboardingMode !== "local") {
50+
ideMessenger.post("index/forceReIndex", undefined);
51+
}
52+
53+
switch (selectedOnboardingMode) {
54+
case "local":
55+
navigate("/localOnboarding");
56+
break;
57+
58+
case "apiKeys":
59+
navigate("/apiKeysOnboarding");
60+
break;
61+
62+
case "freeTrial":
63+
completeOnboarding();
64+
break;
65+
66+
default:
67+
break;
68+
}
69+
}
70+
71+
return (
72+
<div className="max-w-96 mx-auto leading-normal">
73+
<div className="leading-relaxed">
74+
<h1 className="text-center">Welcome to Continue</h1>
75+
<p className="text-center ">
76+
Let's find the setup that works best for you. You can update your
77+
configuration after onboarding by clicking the
78+
<Cog6ToothIcon className="inline-block h-5 w-5 align-middle px-1" />
79+
icon in the bottom-right corner of Continue.
80+
</p>
81+
</div>
82+
83+
<div className="flex flex-col gap-6 pb-8 pt-4">
84+
{(!hasPassedFTL() || isJetBrains()) && (
85+
<Div
86+
selected={selectedOnboardingMode === "freeTrial"}
87+
onClick={() => setSlectedOnboardingMode("freeTrial")}
88+
>
89+
<h3>
90+
<GiftIcon
91+
width="1.4em"
92+
height="1.4em"
93+
className="align-middle pr-2"
94+
/>
95+
Free trial
96+
</h3>
97+
<p>
98+
Start your free trial of {FREE_TRIAL_LIMIT_REQUESTS} requests by
99+
signing into GitHub.
100+
</p>
101+
102+
<ul className="pl-4 mb-0">
103+
<li>
104+
<b>Chat:</b> Llama 3 with Ollama, LM Studio, etc.
105+
</li>
106+
<li>
107+
<b>Embeddings:</b> Nomic Embed
108+
</li>
109+
<li>
110+
<b>Autocomplete:</b> Starcoder2 3B
111+
</li>
112+
</ul>
113+
114+
{!hasSignedIntoGh && (
115+
<div className="flex justify-center py-3">
116+
<GitHubSignInButton
117+
onComplete={() => setHasSignedIntoGh(true)}
118+
></GitHubSignInButton>
119+
</div>
120+
)}
121+
</Div>
122+
)}
123+
<Div
124+
selected={selectedOnboardingMode === "local"}
125+
onClick={() => setSlectedOnboardingMode("local")}
126+
>
127+
<h3>
128+
<ComputerDesktopIcon
129+
width="1.4em"
130+
height="1.4em"
131+
className="align-middle pr-2"
132+
/>
133+
Local models
134+
</h3>
135+
<p>
136+
No code will leave your computer, but less powerful models are used.
137+
</p>
138+
139+
<ul className="pl-4 ">
140+
<li>
141+
<b>Chat:</b> Llama 3 with Ollama, LM Studio, etc.
142+
</li>
143+
<li>
144+
<b>Embeddings:</b> Nomic Embed
145+
</li>
146+
<li>
147+
<b>Autocomplete:</b> Starcoder2 3B
148+
</li>
149+
</ul>
150+
</Div>
151+
152+
<Div
153+
selected={selectedOnboardingMode === "apiKeys"}
154+
onClick={() => setSlectedOnboardingMode("apiKeys")}
155+
>
156+
<h3>
157+
<CheckBadgeIcon
158+
width="1.4em"
159+
height="1.4em"
160+
className="align-middle pr-2"
161+
/>
162+
Best experience
163+
</h3>
164+
<p>
165+
Start with the most powerful models available, or customize your own
166+
configuration.
167+
</p>
168+
169+
<ul className="pl-4 ">
170+
<li>
171+
<b>Chat:</b> Claude 3.5 Sonnet
172+
</li>
173+
<li>
174+
<b>Embeddings:</b> Voyage Code 2
175+
</li>
176+
<li>
177+
<b>Autocomplete:</b> Codestral
178+
</li>
179+
</ul>
180+
</Div>
181+
</div>
182+
183+
<div className="flex justify-end">
184+
<div className="flex items-center gap-4 ml-auto">
185+
<div
186+
className="cursor-pointer"
187+
style={{ color: lightGray }}
188+
onClick={(e) => {
189+
dispatch(setShowDialog(true));
190+
dispatch(
191+
setDialogMessage(
192+
<ConfirmationDialog
193+
text="Are you sure you want to skip onboarding? Unless you are an existing user or already have a config.json we don't recommend this."
194+
onConfirm={() => {
195+
completeOnboarding();
196+
}}
197+
/>,
198+
),
199+
);
200+
}}
201+
>
202+
Skip
203+
</div>
204+
<StyledButton disabled={!selectedOnboardingMode} onClick={onSubmit}>
205+
Continue
206+
</StyledButton>
207+
</div>
208+
</div>
209+
</div>
210+
);
211+
}
212+
213+
export default Onboarding;

0 commit comments

Comments
 (0)