From b9525d5f0851d13b3d4936868f064810f3376dbd Mon Sep 17 00:00:00 2001 From: Ty Dunn Date: Mon, 10 Jul 2023 15:25:29 -0700 Subject: adding onboarding --- extension/react-app/src/components/Onboarding.tsx | 51 +++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 extension/react-app/src/components/Onboarding.tsx (limited to 'extension/react-app/src/components/Onboarding.tsx') 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 ( +
+ {counter === 0 && ( +
+

Welcome to Continue!

+ Intro +
+ )} + {counter === 1 && ( +
+

Answer coding questions

+ Explain +

Ask Continue about a part of your code to get another perspective

+
+ )} + {counter === 2 && ( +
+

Edit in natural language

+ Edit +

Highlight a section of code and instruct Continue to refactor it

+
+ )} + {counter === 3 && ( +
+

Generate files from scratch

+ Generate +

Let Continue build the scaffolding of Python scripts, React components, and more

+
+ )} +

Click to learn how to use Continue...

+
+ ); +} + +export default Onboarding; -- cgit v1.2.3-70-g09d2 From 0455baea6c88cd7ffa301d67805a29dce2c5ba3c Mon Sep 17 00:00:00 2001 From: Nate Sesti 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/components/Onboarding.tsx') 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 ( -
- {counter === 0 && ( -
-

Welcome to Continue!

- Intro -
- )} - {counter === 1 && ( -
-

Answer coding questions

- Explain -

Ask Continue about a part of your code to get another perspective

-
- )} - {counter === 2 && ( -
-

Edit in natural language

- Edit -

Highlight a section of code and instruct Continue to refactor it

-
- )} - {counter === 3 && ( -
-

Generate files from scratch

- Generate -

Let Continue build the scaffolding of Python scripts, React components, and more

-
- )} -

Click to learn how to use Continue...

-
- ); -} + return ( + + ); +}; export default Onboarding; -- cgit v1.2.3-70-g09d2 From a8c91ffaccd181a0f6c28e3d218c3c7eeb0282c3 Mon Sep 17 00:00:00 2001 From: Nate Sesti 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/components/Onboarding.tsx') 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 = () => {

{topMessages[counter]}

{topMessages[counter]}
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 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/components/Onboarding.tsx') 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 = () => {

{topMessages[counter]}

{topMessages[counter]}
-- cgit v1.2.3-70-g09d2 From 4d7b530fb453383bc4082a4d946cb6a9d76178d3 Mon Sep 17 00:00:00 2001 From: Nate Sesti Date: Tue, 11 Jul 2023 18:25:48 -0700 Subject: onboarding fix --- extension/react-app/src/components/Onboarding.tsx | 27 +++++++++-------------- 1 file changed, 11 insertions(+), 16 deletions(-) (limited to 'extension/react-app/src/components/Onboarding.tsx') diff --git a/extension/react-app/src/components/Onboarding.tsx b/extension/react-app/src/components/Onboarding.tsx index 061faba5..1b37acc4 100644 --- a/extension/react-app/src/components/Onboarding.tsx +++ b/extension/react-app/src/components/Onboarding.tsx @@ -87,25 +87,20 @@ const Onboarding = () => { paddingRight: "50px", paddingBottom: "50px", textAlign: "center", + cursor: "pointer", }} > - + Previous + + + setCounter((prev) => prev + 1)}> + Click to {counter === 3 || "learn how to"} use Continue{" "} + +

-- cgit v1.2.3-70-g09d2 From 5ed9aff7b888f849f1c7b0d7c150f44b56ffc67f Mon Sep 17 00:00:00 2001 From: Nate Sesti Date: Wed, 12 Jul 2023 10:03:11 -0700 Subject: better onboarding --- extension/package-lock.json | 4 +- extension/package.json | 2 +- extension/react-app/src/components/Onboarding.tsx | 51 ++++++++++++++++++----- extension/src/activation/activate.ts | 2 +- 4 files changed, 45 insertions(+), 14 deletions(-) (limited to 'extension/react-app/src/components/Onboarding.tsx') diff --git a/extension/package-lock.json b/extension/package-lock.json index d310643b..5d1cf395 100644 --- a/extension/package-lock.json +++ b/extension/package-lock.json @@ -1,12 +1,12 @@ { "name": "continue", - "version": "0.0.153", + "version": "0.0.154", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "continue", - "version": "0.0.153", + "version": "0.0.154", "license": "Apache-2.0", "dependencies": { "@electron/rebuild": "^3.2.10", diff --git a/extension/package.json b/extension/package.json index 61eee205..ab23b0b0 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.153", + "version": "0.0.154", "publisher": "Continue", "engines": { "vscode": "^1.67.0" diff --git a/extension/react-app/src/components/Onboarding.tsx b/extension/react-app/src/components/Onboarding.tsx index 1b37acc4..776ad460 100644 --- a/extension/react-app/src/components/Onboarding.tsx +++ b/extension/react-app/src/components/Onboarding.tsx @@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react"; import styled from "styled-components"; import { ArrowLeft, ArrowRight } from "@styled-icons/heroicons-outline"; import { defaultBorderRadius } from "."; +import Loader from "./Loader"; const StyledDiv = styled.div` position: absolute; @@ -39,13 +40,9 @@ const Onboarding = () => { "Let Continue build the scaffolding of Python scripts, React components, and more", ]; - const vscMediaUrl = useSelector( - (state: RootStore) => state.config.vscMediaUrl - ); - useEffect(() => { const hasVisited = localStorage.getItem("hasVisited"); - if (hasVisited) { + if (hasVisited && false) { setCounter(4); } else { setCounter(0); @@ -53,6 +50,12 @@ const Onboarding = () => { } }, []); + const [loading, setLoading] = useState(true); + + useEffect(() => { + setLoading(true); + }, [counter]); + return (