adding onboarding

6 files changed, 53 insertions, 0 deletions

diff --git a/extension/react-app/public/edit.gif b/extension/react-app/public/edit.gif
new file mode 100644
index 00000000..6780cdf7
--- /dev/null
+++ b/extension/react-app/public/edit.gif
diff --git a/extension/react-app/public/explain.gif b/extension/react-app/public/explain.gif
new file mode 100644
index 00000000..e74803dc
--- /dev/null
+++ b/extension/react-app/public/explain.gif
diff --git a/extension/react-app/public/generate.gif b/extension/react-app/public/generate.gif
new file mode 100644
index 00000000..5c1d112b
--- /dev/null
+++ b/extension/react-app/public/generate.gif
diff --git a/extension/react-app/public/intro.gif b/extension/react-app/public/intro.gif
new file mode 100644
index 00000000..f872dc91
--- /dev/null
+++ b/extension/react-app/public/intro.gif
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}