summaryrefslogtreecommitdiff
path: root/extension/react-app
diff options
context:
space:
mode:
Diffstat (limited to 'extension/react-app')
-rw-r--r--extension/react-app/package-lock.json21
-rw-r--r--extension/react-app/package.json1
-rw-r--r--extension/react-app/src/components/HeaderButtonWithText.tsx2
-rw-r--r--extension/react-app/src/tabs/gui.tsx68
4 files changed, 82 insertions, 10 deletions
diff --git a/extension/react-app/package-lock.json b/extension/react-app/package-lock.json
index 64440da6..db15fd2b 100644
--- a/extension/react-app/package-lock.json
+++ b/extension/react-app/package-lock.json
@@ -16,6 +16,7 @@
"react-dom": "^18.2.0",
"react-markdown": "^8.0.5",
"react-redux": "^8.0.5",
+ "react-switch": "^7.0.0",
"styled-components": "^5.3.6",
"vscode-webview": "^1.0.1-beta.1"
},
@@ -2721,6 +2722,18 @@
}
}
},
+ "node_modules/react-switch": {
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz",
+ "integrity": "sha512-KkDeW+cozZXI6knDPyUt3KBN1rmhoVYgAdCJqAh7st7tk8YE6N0iR89zjCWO8T8dUTeJGTR0KU+5CHCRMRffiA==",
+ "dependencies": {
+ "prop-types": "^15.7.2"
+ },
+ "peerDependencies": {
+ "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4983,6 +4996,14 @@
"use-sync-external-store": "^1.0.0"
}
},
+ "react-switch": {
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz",
+ "integrity": "sha512-KkDeW+cozZXI6knDPyUt3KBN1rmhoVYgAdCJqAh7st7tk8YE6N0iR89zjCWO8T8dUTeJGTR0KU+5CHCRMRffiA==",
+ "requires": {
+ "prop-types": "^15.7.2"
+ }
+ },
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/extension/react-app/package.json b/extension/react-app/package.json
index a53fbec8..230bd5b9 100644
--- a/extension/react-app/package.json
+++ b/extension/react-app/package.json
@@ -17,6 +17,7 @@
"react-dom": "^18.2.0",
"react-markdown": "^8.0.5",
"react-redux": "^8.0.5",
+ "react-switch": "^7.0.0",
"styled-components": "^5.3.6",
"vscode-webview": "^1.0.1-beta.1"
},
diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
index f9483f0f..acaca9ce 100644
--- a/extension/react-app/src/components/HeaderButtonWithText.tsx
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -12,7 +12,7 @@ const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
const [hover, setHover] = useState(false);
return (
<HeaderButton
- style={{ padding: "3px" }}
+ style={{ padding: "1px", paddingLeft: hover ? "4px" : "1px" }}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => {
setHover(false);
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index 624d22d5..52318dca 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -1,11 +1,5 @@
import styled from "styled-components";
-import {
- defaultBorderRadius,
- vscBackground,
- Loader,
- MainTextInput,
- HeaderButton,
-} from "../components";
+import { defaultBorderRadius, Loader } from "../components";
import ContinueButton from "../components/ContinueButton";
import { useCallback, useEffect, useRef, useState } from "react";
import { History } from "../../../schema/History";
@@ -20,6 +14,7 @@ import {
import ComboBox from "../components/ComboBox";
import TextDialog from "../components/TextDialog";
import HeaderButtonWithText from "../components/HeaderButtonWithText";
+import ReactSwitch from "react-switch";
const TopGUIDiv = styled.div`
overflow: hidden;
@@ -33,7 +28,7 @@ const UserInputQueueItem = styled.div`
text-align: center;
`;
-const Footer = styled.footer`
+const Footer = styled.footer<{ dataSwitchChecked: boolean }>`
display: flex;
flex-direction: row;
gap: 8px;
@@ -42,6 +37,8 @@ const Footer = styled.footer`
align-items: center;
margin-top: 8px;
border-top: 0.1px solid gray;
+ background-color: ${(props) =>
+ props.dataSwitchChecked ? "#12887a33" : "transparent"};
`;
interface GUIProps {
@@ -54,6 +51,8 @@ function GUI(props: GUIProps) {
const [availableSlashCommands, setAvailableSlashCommands] = useState<
{ name: string; description: string }[]
>([]);
+ const [dataSwitchChecked, setDataSwitchChecked] = useState(false);
+ const [showDataSharingInfo, setShowDataSharingInfo] = useState(false);
const [stepsOpen, setStepsOpen] = useState<boolean[]>([]);
const [history, setHistory] = useState<History | undefined>();
// {
@@ -390,7 +389,58 @@ function GUI(props: GUIProps) {
/>
<ContinueButton onClick={onMainTextInput} />
</TopGUIDiv>
- <Footer>
+ <div
+ style={{
+ position: "fixed",
+ bottom: "50px",
+ backgroundColor: "white",
+ color: "black",
+ borderRadius: defaultBorderRadius,
+ padding: "16px",
+ margin: "16px",
+ }}
+ hidden={!showDataSharingInfo}
+ >
+ By turning on the switch, you will anonymously contribute your Continue
+ history to an open-source dataset used to train LLMs to use tools just
+ like a developer in their IDE.
+ <br />
+ <br />
+ <b>
+ {dataSwitchChecked
+ ? "You are currently contributing data."
+ : "Your data is not being shared."}
+ </b>
+ </div>
+ <Footer dataSwitchChecked={dataSwitchChecked}>
+ <div
+ style={{
+ display: "flex",
+ gap: "4px",
+ marginRight: "auto",
+ alignItems: "center",
+ }}
+ onMouseEnter={() => {
+ setShowDataSharingInfo(true);
+ }}
+ onMouseLeave={() => {
+ setShowDataSharingInfo(false);
+ }}
+ >
+ <ReactSwitch
+ height={20}
+ handleDiameter={20}
+ width={40}
+ onChange={() => {
+ setDataSwitchChecked((prev) => !prev);
+ }}
+ onColor="#12887a"
+ checked={dataSwitchChecked}
+ />
+ <span style={{ cursor: "help", fontSize: "16px" }}>
+ Contribute Data
+ </span>
+ </div>
<HeaderButtonWithText
onClick={() => {
client?.sendClear();
generated by cgit v1.2.3-70-g09d2 (git 2.48.1) at 2025-10-31 09:17:35 +0000