From 05f3a1f35f1d0f85df15ac78f2f285d54ab45118 Mon Sep 17 00:00:00 2001
From: Ty Dunn <ty@tydunn.com>
Date: Mon, 10 Jul 2023 15:25:29 -0700
Subject: adding onboarding
---
extension/react-app/public/edit.gif | Bin 0 -> 41667733 bytes
extension/react-app/public/explain.gif | Bin 0 -> 56475028 bytes
extension/react-app/public/generate.gif | Bin 0 -> 32532380 bytes
extension/react-app/public/intro.gif | Bin 0 -> 3976676 bytes
extension/react-app/src/components/Onboarding.tsx | 51 ++++++++++++++++++++++
extension/react-app/src/tabs/gui.tsx | 2 +
6 files changed, 53 insertions(+)
create mode 100644 extension/react-app/public/edit.gif
create mode 100644 extension/react-app/public/explain.gif
create mode 100644 extension/react-app/public/generate.gif
create mode 100644 extension/react-app/public/intro.gif
create mode 100644 extension/react-app/src/components/Onboarding.tsx
(limited to 'extension/react-app')
diff --git a/extension/react-app/public/edit.gif b/extension/react-app/public/edit.gif
new file mode 100644
index 00000000..6780cdf7
Binary files /dev/null and b/extension/react-app/public/edit.gif differ
diff --git a/extension/react-app/public/explain.gif b/extension/react-app/public/explain.gif
new file mode 100644
index 00000000..e74803dc
Binary files /dev/null and b/extension/react-app/public/explain.gif differ
diff --git a/extension/react-app/public/generate.gif b/extension/react-app/public/generate.gif
new file mode 100644
index 00000000..5c1d112b
Binary files /dev/null and b/extension/react-app/public/generate.gif differ
diff --git a/extension/react-app/public/intro.gif b/extension/react-app/public/intro.gif
new file mode 100644
index 00000000..f872dc91
Binary files /dev/null and b/extension/react-app/public/intro.gif differ
diff --git a/extension/react-app/src/components/Onboarding.tsx b/extension/react-app/src/components/Onboarding.tsx
new file mode 100644
index 00000000..373f7bea
--- /dev/null
+++ b/extension/react-app/src/components/Onboarding.tsx
@@ -0,0 +1,51 @@
+import { useSelector } from "react-redux";
+import { RootStore } from "../redux/store";
+import React, { useState } from 'react';
+
+
+const Onboarding = () => {
+ const [counter, setCounter] = useState(0);
+
+ const handleClick = () => {
+ setCounter(counter + 1);
+ }
+
+ const vscMediaUrl = useSelector(
+ (state: RootStore) => state.config.vscMediaUrl
+ );
+
+ return (
+ <div style={{position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', backgroundColor: '#1E1E1E', zIndex: 200 }} onClick={handleClick}>
+ {counter === 0 && (
+ <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
+ <h1>Welcome to Continue!</h1>
+ <img src={`${vscMediaUrl}/intro.gif`} alt="Intro" />
+ </div>
+ )}
+ {counter === 1 && (
+ <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
+ <h1>Answer coding questions</h1>
+ <img src={`${vscMediaUrl}/explain.gif`} alt="Explain" />
+ <p style={{ fontSize: '16px', paddingLeft: '50px', paddingRight: '50px', textAlign: 'center' }}>Ask Continue about a part of your code to get another perspective</p>
+ </div>
+ )}
+ {counter === 2 && (
+ <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
+ <h1>Edit in natural language</h1>
+ <img src={`${vscMediaUrl}/edit.gif`} alt="Edit" />
+ <p style={{ fontSize: '16px', paddingLeft: '50px', paddingRight: '50px', textAlign: 'center' }}>Highlight a section of code and instruct Continue to refactor it</p>
+ </div>
+ )}
+ {counter === 3 && (
+ <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
+ <h1>Generate files from scratch</h1>
+ <img src={`${vscMediaUrl}/generate.gif`} alt="Generate" />
+ <p style={{ fontSize: '16px', paddingLeft: '50px', paddingRight: '50px', textAlign: 'center' }}>Let Continue build the scaffolding of Python scripts, React components, and more</p>
+ </div>
+ )}
+ <p style={{ paddingLeft: '50px', paddingRight: '50px', paddingBottom: '50px', textAlign: 'center' }}>Click to learn how to use Continue...</p>
+ </div>
+ );
+}
+
+export default Onboarding;
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index e1ecec9e..14556829 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -23,6 +23,7 @@ import { RootStore } from "../redux/store";
import LoadingCover from "../components/LoadingCover";
import { postVscMessage } from "../vscode";
import UserInputContainer from "../components/UserInputContainer";
+import Onboarding from "../components/Onboarding";
const TopGUIDiv = styled.div`
overflow: hidden;
@@ -267,6 +268,7 @@ function GUI(props: GUIProps) {
// const iterations = useSelector(selectIterations);
return (
<>
+ <Onboarding></Onboarding>
<LoadingCover hidden={true} message="Downloading local model..." />
<TextDialog
showDialog={showFeedbackDialog}
--
cgit v1.2.3-70-g09d2