diff options
Diffstat (limited to 'extension/react-app')
| -rw-r--r-- | extension/react-app/package-lock.json | 16 | ||||
| -rw-r--r-- | extension/react-app/src/components/TextDialog.tsx | 11 | ||||
| -rw-r--r-- | extension/react-app/src/pages/gui.tsx | 75 |
3 files changed, 97 insertions, 5 deletions
diff --git a/extension/react-app/package-lock.json b/extension/react-app/package-lock.json index fa7834f1..325ea240 100644 --- a/extension/react-app/package-lock.json +++ b/extension/react-app/package-lock.json @@ -964,6 +964,14 @@ "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz", "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==" }, + "node_modules/@types/node": { + "version": "14.18.54", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.54.tgz", + "integrity": "sha512-uq7O52wvo2Lggsx1x21tKZgqkJpvwCseBBPtX/nKQfpVlEsLOb11zZ1CRsWUKvJF0+lzuA9jwvA7Pr2Wt7i3xw==", + "dev": true, + "optional": true, + "peer": true + }, "node_modules/@types/parse5": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz", @@ -5043,6 +5051,14 @@ "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz", "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==" }, + "@types/node": { + "version": "14.18.54", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.54.tgz", + "integrity": "sha512-uq7O52wvo2Lggsx1x21tKZgqkJpvwCseBBPtX/nKQfpVlEsLOb11zZ1CRsWUKvJF0+lzuA9jwvA7Pr2Wt7i3xw==", + "dev": true, + "optional": true, + "peer": true + }, "@types/parse5": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz", diff --git a/extension/react-app/src/components/TextDialog.tsx b/extension/react-app/src/components/TextDialog.tsx index 43051a04..41f811e8 100644 --- a/extension/react-app/src/components/TextDialog.tsx +++ b/extension/react-app/src/components/TextDialog.tsx @@ -29,8 +29,8 @@ const Dialog = styled.div` display: flex; flex-direction: column; box-shadow: 0 0 10px 0 ${vscForeground}; - width: fit-content; margin: auto; + word-wrap: break-word; `; const TextArea = styled.textarea` @@ -56,7 +56,7 @@ const TextDialog = (props: { showDialog: boolean; onEnter: (text: string) => void; onClose: () => void; - message?: string; + message?: string | JSX.Element; entryOn?: boolean; }) => { const [text, setText] = useState(""); @@ -81,7 +81,8 @@ const TextDialog = (props: { }} > <Dialog> - {props.message?.includes("Continue uses GPT-4") ? ( + {typeof props.message === "string" && + props.message.includes("Continue uses GPT-4") ? ( <div> <p> Continue uses GPT-4 by default, but works with any model. If @@ -114,8 +115,10 @@ const TextDialog = (props: { or would like to do so, please contact us at hi@continue.dev. </p> </div> - ) : ( + ) : typeof props.message === "string" ? ( <ReactMarkdown>{props.message || ""}</ReactMarkdown> + ) : ( + props.message )} {props.entryOn && ( <> diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx index 72b2e139..bf8d8281 100644 --- a/extension/react-app/src/pages/gui.tsx +++ b/extension/react-app/src/pages/gui.tsx @@ -65,6 +65,7 @@ interface GUIProps { function GUI(props: GUIProps) { const client = useContext(GUIClientContext); const posthog = usePostHog(); + const vscMachineId = useSelector( (state: RootStore) => state.config.vscMachineId ); @@ -120,7 +121,9 @@ function GUI(props: GUIProps) { (state: RootStore) => state.config.vscMediaUrl ); const [showFeedbackDialog, setShowFeedbackDialog] = useState(false); - const [feedbackDialogMessage, setFeedbackDialogMessage] = useState(""); + const [feedbackDialogMessage, setFeedbackDialogMessage] = useState< + string | JSX.Element + >(""); const [feedbackEntryOn, setFeedbackEntryOn] = useState(true); const dispatch = useDispatch(); @@ -276,6 +279,76 @@ function GUI(props: GUIProps) { setUserInputQueue((queue) => { return [...queue, input]; }); + + // Increment localstorage counter + const counter = localStorage.getItem("mainTextEntryCounter"); + if (counter) { + let currentCount = parseInt(counter); + localStorage.setItem( + "mainTextEntryCounter", + (currentCount + 1).toString() + ); + if (currentCount === 25) { + setFeedbackDialogMessage( + <div className="text-center"> + 👋 Thanks for using Continue. We are a beta product and love + working closely with our first users. If you're interested in + speaking, enter your name and email. We won't use this information + for anything other than reaching out. + <br /> + <br /> + <form + onSubmit={(e: any) => { + e.preventDefault(); + posthog?.capture("user_interest_form", { + name: e.target.elements[0].value, + email: e.target.elements[1].value, + }); + setFeedbackDialogMessage( + <div className="text-center"> + Thanks! We'll be in touch soon. + </div> + ); + }} + style={{ + display: "flex", + flexDirection: "column", + gap: "10px", + }} + > + <input + style={{ padding: "10px", borderRadius: "5px" }} + type="text" + name="name" + placeholder="Name" + required + /> + <input + style={{ padding: "10px", borderRadius: "5px" }} + type="email" + name="email" + placeholder="Email" + required + /> + <button + style={{ + padding: "10px", + borderRadius: "5px", + cursor: "pointer", + }} + type="submit" + > + Submit + </button> + </form> + </div> + ); + setFeedbackEntryOn(false); + setShowFeedbackDialog(true); + } + } else { + localStorage.setItem("mainTextEntryCounter", "1"); + } } }; |