From b9525d5f0851d13b3d4936868f064810f3376dbd 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/src/components/Onboarding.tsx | 51 +++++++++++++++++++++++
 extension/react-app/src/tabs/gui.tsx              |  2 +
 2 files changed, 53 insertions(+)
 create mode 100644 extension/react-app/src/components/Onboarding.tsx

(limited to 'extension/react-app/src')

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


From 0455baea6c88cd7ffa301d67805a29dce2c5ba3c Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Mon, 10 Jul 2023 17:31:38 -0700
Subject: sprucing up onboarding

---
 extension/react-app/src/components/Onboarding.tsx | 146 ++++++++++++++++------
 1 file changed, 105 insertions(+), 41 deletions(-)

(limited to 'extension/react-app/src')

diff --git a/extension/react-app/src/components/Onboarding.tsx b/extension/react-app/src/components/Onboarding.tsx
index 373f7bea..0e188e7a 100644
--- a/extension/react-app/src/components/Onboarding.tsx
+++ b/extension/react-app/src/components/Onboarding.tsx
@@ -1,51 +1,115 @@
 import { useSelector } from "react-redux";
 import { RootStore } from "../redux/store";
-import React, { useState } from 'react';
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import { ArrowLeft, ArrowRight } from "@styled-icons/heroicons-outline";
+import { defaultBorderRadius } from ".";
 
+const StyledDiv = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #1e1e1e;
+  z-index: 200;
+`;
+
+const StyledSpan = styled.span`
+  padding: 8px;
+  border-radius: ${defaultBorderRadius};
+  &:hover {
+    background-color: #ffffff33;
+  }
+`;
 
 const Onboarding = () => {
-    const [counter, setCounter] = useState(0);
+  const [counter, setCounter] = useState(4);
+  const gifs = ["intro", "explain", "edit", "generate"];
+  const topMessages = [
+    "Welcome to Continue!",
+    "Answer coding questions",
+    "Edit in natural language",
+    "Generate files from scratch",
+  ];
+  const bottomMessages = [
+    "",
+    "Ask Continue about a part of your code to get another perspective",
+    "Highlight a section of code and instruct Continue to refactor it",
+    "Let Continue build the scaffolding of Python scripts, React components, and more",
+  ];
 
-    const handleClick = () => {
-        setCounter(counter + 1);
-    }
+  const vscMediaUrl = useSelector(
+    (state: RootStore) => state.config.vscMediaUrl
+  );
 
-    const vscMediaUrl = useSelector(
-        (state: RootStore) => state.config.vscMediaUrl
-      );
+  useEffect(() => {
+    const hasVisited = localStorage.getItem("hasVisited");
+    if (hasVisited) {
+      setCounter(4);
+    } else {
+      setCounter(0);
+      localStorage.setItem("hasVisited", "true");
+    }
+  }, []);
 
-    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>
-    );
-}
+  return (
+    <StyledDiv hidden={counter >= 4}>
+      <div
+        style={{
+          display: "grid",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100%",
+          textAlign: "center",
+          background: `linear-gradient(
+            101.79deg,
+            #12887a66 0%,
+            #87245c66 32%,
+            #e1263766 63%,
+            #ffb21566 100%
+          )`,
+          paddingLeft: "16px",
+          paddingRight: "16px",
+        }}
+      >
+        <h1>{topMessages[counter]}</h1>
+        <div style={{ display: "flex", justifyContent: "center" }}>
+          <img
+            src={`${vscMediaUrl}/${gifs[counter]}.gif`}
+            alt={topMessages[counter]}
+          />
+        </div>
+        <p>{bottomMessages[counter]}</p>
+        <p
+          style={{
+            paddingLeft: "50px",
+            paddingRight: "50px",
+            paddingBottom: "50px",
+            textAlign: "center",
+          }}
+        >
+          <div
+            style={{
+              cursor: "pointer",
+            }}
+          >
+            <StyledSpan
+              hidden={counter === 0}
+              onClick={() => setCounter((prev) => Math.max(prev - 1, 0))}
+            >
+              <ArrowLeft width="18px" strokeWidth="2px" /> Previous
+            </StyledSpan>
+            <span hidden={counter === 0}>{" | "}</span>
+            <StyledSpan onClick={() => setCounter((prev) => prev + 1)}>
+              Click to {counter === 3 || "learn how to"} use Continue{" "}
+              <ArrowRight width="18px" strokeWidth="2px" />
+            </StyledSpan>
+          </div>
+        </p>
+      </div>
+    </StyledDiv>
+  );
+};
 
 export default Onboarding;
-- 
cgit v1.2.3-70-g09d2


From a8c91ffaccd181a0f6c28e3d218c3c7eeb0282c3 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Mon, 10 Jul 2023 20:08:04 -0700
Subject: gifs in outside media folder

---
 extension/package-lock.json                       |   4 ++--
 extension/package.json                            |   2 +-
 extension/react-app/public/edit.gif               | Bin 41667733 -> 0 bytes
 extension/react-app/public/explain.gif            | Bin 56475028 -> 0 bytes
 extension/react-app/public/generate.gif           | Bin 32532380 -> 0 bytes
 extension/react-app/public/intro.gif              | Bin 3976676 -> 0 bytes
 extension/react-app/src/components/Onboarding.tsx |   2 +-
 media/edit.gif                                    | Bin 0 -> 41667733 bytes
 media/explain.gif                                 | Bin 0 -> 56475028 bytes
 media/generate.gif                                | Bin 0 -> 32532380 bytes
 media/intro.gif                                   | Bin 0 -> 3976676 bytes
 11 files changed, 4 insertions(+), 4 deletions(-)
 delete mode 100644 extension/react-app/public/edit.gif
 delete mode 100644 extension/react-app/public/explain.gif
 delete mode 100644 extension/react-app/public/generate.gif
 delete mode 100644 extension/react-app/public/intro.gif
 create mode 100644 media/edit.gif
 create mode 100644 media/explain.gif
 create mode 100644 media/generate.gif
 create mode 100644 media/intro.gif

(limited to 'extension/react-app/src')

diff --git a/extension/package-lock.json b/extension/package-lock.json
index 5733c2dd..52b2e7b9 100644
--- a/extension/package-lock.json
+++ b/extension/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "continue",
-  "version": "0.0.143",
+  "version": "0.0.146",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "continue",
-      "version": "0.0.143",
+      "version": "0.0.146",
       "license": "Apache-2.0",
       "dependencies": {
         "@electron/rebuild": "^3.2.10",
diff --git a/extension/package.json b/extension/package.json
index 0477a450..393c5d70 100644
--- a/extension/package.json
+++ b/extension/package.json
@@ -14,7 +14,7 @@
   "displayName": "Continue",
   "pricing": "Free",
   "description": "The open-source coding autopilot",
-  "version": "0.0.143",
+  "version": "0.0.146",
   "publisher": "Continue",
   "engines": {
     "vscode": "^1.67.0"
diff --git a/extension/react-app/public/edit.gif b/extension/react-app/public/edit.gif
deleted file mode 100644
index 6780cdf7..00000000
Binary files a/extension/react-app/public/edit.gif and /dev/null differ
diff --git a/extension/react-app/public/explain.gif b/extension/react-app/public/explain.gif
deleted file mode 100644
index e74803dc..00000000
Binary files a/extension/react-app/public/explain.gif and /dev/null differ
diff --git a/extension/react-app/public/generate.gif b/extension/react-app/public/generate.gif
deleted file mode 100644
index 5c1d112b..00000000
Binary files a/extension/react-app/public/generate.gif and /dev/null differ
diff --git a/extension/react-app/public/intro.gif b/extension/react-app/public/intro.gif
deleted file mode 100644
index f872dc91..00000000
Binary files a/extension/react-app/public/intro.gif and /dev/null differ
diff --git a/extension/react-app/src/components/Onboarding.tsx b/extension/react-app/src/components/Onboarding.tsx
index 0e188e7a..1cbe61ec 100644
--- a/extension/react-app/src/components/Onboarding.tsx
+++ b/extension/react-app/src/components/Onboarding.tsx
@@ -76,7 +76,7 @@ const Onboarding = () => {
         <h1>{topMessages[counter]}</h1>
         <div style={{ display: "flex", justifyContent: "center" }}>
           <img
-            src={`${vscMediaUrl}/${gifs[counter]}.gif`}
+            src={`https://github.com/continuedev/continue/blob/main/${gifs[counter]}.gif?raw=true`}
             alt={topMessages[counter]}
           />
         </div>
diff --git a/media/edit.gif b/media/edit.gif
new file mode 100644
index 00000000..6780cdf7
Binary files /dev/null and b/media/edit.gif differ
diff --git a/media/explain.gif b/media/explain.gif
new file mode 100644
index 00000000..e74803dc
Binary files /dev/null and b/media/explain.gif differ
diff --git a/media/generate.gif b/media/generate.gif
new file mode 100644
index 00000000..5c1d112b
Binary files /dev/null and b/media/generate.gif differ
diff --git a/media/intro.gif b/media/intro.gif
new file mode 100644
index 00000000..f872dc91
Binary files /dev/null and b/media/intro.gif differ
-- 
cgit v1.2.3-70-g09d2


From b8a19ce1b8f4a37dfbbb438ce0fac4ae4aa4358b Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Mon, 10 Jul 2023 23:07:23 -0700
Subject: fixed gif link

---
 extension/react-app/src/components/Onboarding.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'extension/react-app/src')

diff --git a/extension/react-app/src/components/Onboarding.tsx b/extension/react-app/src/components/Onboarding.tsx
index 1cbe61ec..061faba5 100644
--- a/extension/react-app/src/components/Onboarding.tsx
+++ b/extension/react-app/src/components/Onboarding.tsx
@@ -76,7 +76,7 @@ const Onboarding = () => {
         <h1>{topMessages[counter]}</h1>
         <div style={{ display: "flex", justifyContent: "center" }}>
           <img
-            src={`https://github.com/continuedev/continue/blob/main/${gifs[counter]}.gif?raw=true`}
+            src={`https://github.com/continuedev/continue/blob/main/media/${gifs[counter]}.gif?raw=true`}
             alt={topMessages[counter]}
           />
         </div>
-- 
cgit v1.2.3-70-g09d2