diff options
Diffstat (limited to 'extension')
| -rw-r--r-- | extension/README.md | 18 | ||||
| -rw-r--r-- | extension/media/edit.png | bin | 246984 -> 675283 bytes | |||
| -rw-r--r-- | extension/media/explain.png | bin | 464952 -> 897037 bytes | |||
| -rw-r--r-- | extension/media/generate.png | bin | 1049613 -> 411580 bytes | |||
| -rw-r--r-- | extension/package-lock.json | 4 | ||||
| -rw-r--r-- | extension/package.json | 8 | ||||
| -rw-r--r-- | extension/react-app/src/components/Onboarding.tsx | 115 | ||||
| -rw-r--r-- | extension/react-app/src/tabs/gui.tsx | 2 | ||||
| -rw-r--r-- | extension/src/continueIdeClient.ts | 2 |
9 files changed, 133 insertions, 16 deletions
diff --git a/extension/README.md b/extension/README.md index b57aedb7..2d449b92 100644 --- a/extension/README.md +++ b/extension/README.md @@ -7,23 +7,23 @@ ### Get possible explainations Ask Continue about a part of your code to get another perspective -- `what might cause this error?` -- `what is the load_dotenv library name?` -- `how do I find running process on port 8000?` +- “how can I set up a Prisma schema that cascades deletes?” +- “where in the page should I be making this request to the backend?” +- “how can I communicate between these iframes?” ### Edit in natural language Highlight a section of code and instruct Continue to refactor it -- `/edit Make this use more descriptive variable names` -- `/edit Rewrite this API call to grab all pages` -- `/edit Use 'Union' instead of a vertical bar here` +- “/edit migrate this digital ocean terraform file into one that works for GCP” +- “/edit change this plot into a bar chart in this dashboard component” +- “/edit rewrite this function to be async” ### Generate files from scratch Let Continue build the scaffolding of Python scripts, React components, and more -- `Create a shell script to back up my home dir to /tmp/` -- `Write Python in a new file to get Posthog events` -- `Add a React component for syntax highlighted code` +- “/edit here is a connector for postgres, now write one for kafka” +- “/edit make an IAM policy that creates a user with read-only access to S3” +- “/edit use this schema to write me a SQL query that gets recently churned users” ## OpenAI API Key diff --git a/extension/media/edit.png b/extension/media/edit.png Binary files differindex 5e77c0ea..f4ca623c 100644 --- a/extension/media/edit.png +++ b/extension/media/edit.png diff --git a/extension/media/explain.png b/extension/media/explain.png Binary files differindex 196ab914..79e8ccc9 100644 --- a/extension/media/explain.png +++ b/extension/media/explain.png diff --git a/extension/media/generate.png b/extension/media/generate.png Binary files differindex 9d84e4ae..c16d9f9f 100644 --- a/extension/media/generate.png +++ b/extension/media/generate.png diff --git a/extension/package-lock.json b/extension/package-lock.json index a2ac0a04..71f4d974 100644 --- a/extension/package-lock.json +++ b/extension/package-lock.json @@ -1,12 +1,12 @@ { "name": "continue", - "version": "0.0.145", + "version": "0.0.147", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "continue", - "version": "0.0.145", + "version": "0.0.147", "license": "Apache-2.0", "dependencies": { "@electron/rebuild": "^3.2.10", diff --git a/extension/package.json b/extension/package.json index 0464ba55..d9f155df 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.145", + "version": "0.0.147", "publisher": "Continue", "engines": { "vscode": "^1.67.0" @@ -181,7 +181,7 @@ { "id": "edit", "title": "Edit in natural language", - "description": "Highlight a section of code and instruct Continue to refactor it (e.g. `/edit Make this use more descriptive variable names`)", + "description": "Highlight a section of code and instruct Continue to refactor it (e.g. `/edit rewrite this function to be async`)", "media": { "image": "media/edit.png", "altText": "Empty image" @@ -191,7 +191,7 @@ { "id": "explain", "title": "Get possible explanations", - "description": "Ask Continue about a part of your code to get another perspective (e.g. `how do I find running process on port 8000?`)", + "description": "Ask Continue about a part of your code to get another perspective (e.g. `where in the page should I be making this request to the backend?`)", "media": { "image": "media/explain.png", "altText": "Empty image" @@ -201,7 +201,7 @@ { "id": "generate", "title": "Generate files from scratch", - "description": "Let Continue build the scaffolding of Python scripts, React components, and more (e.g. `Create a shell script to back up my home dir to /tmp/`)", + "description": "Let Continue build the scaffolding of Python scripts, React components, and more (e.g. `/edit here is a connector for postgres, now write one for kafka`)", "media": { "image": "media/generate.png", "altText": "Empty image" diff --git a/extension/react-app/src/components/Onboarding.tsx b/extension/react-app/src/components/Onboarding.tsx new file mode 100644 index 00000000..061faba5 --- /dev/null +++ b/extension/react-app/src/components/Onboarding.tsx @@ -0,0 +1,115 @@ +import { useSelector } from "react-redux"; +import { RootStore } from "../redux/store"; +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(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 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 ( + <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={`https://github.com/continuedev/continue/blob/main/media/${gifs[counter]}.gif?raw=true`} + 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; diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx index 646aef50..0e60e05c 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} diff --git a/extension/src/continueIdeClient.ts b/extension/src/continueIdeClient.ts index 679d94ba..304c592b 100644 --- a/extension/src/continueIdeClient.ts +++ b/extension/src/continueIdeClient.ts @@ -300,7 +300,7 @@ class IdeProtocolClient { }); const resp = await this.messenger?.sendAndReceive("openGUI", {}); const sessionId = resp.sessionId; - console.log("New Continue session with ID: ", sessionId); + // console.log("New Continue session with ID: ", sessionId); return sessionId; } |
