diff options
Diffstat (limited to 'extension')
| -rw-r--r-- | extension/react-app/package-lock.json | 21 | ||||
| -rw-r--r-- | extension/react-app/package.json | 1 | ||||
| -rw-r--r-- | extension/react-app/src/components/CodeBlock.tsx | 7 | ||||
| -rw-r--r-- | extension/react-app/src/components/ComboBox.tsx | 9 | ||||
| -rw-r--r-- | extension/react-app/src/components/HeaderButtonWithText.tsx | 2 | ||||
| -rw-r--r-- | extension/react-app/src/tabs/gui.tsx | 80 | ||||
| -rw-r--r-- | extension/src/commands.ts | 4 | 
7 files changed, 109 insertions, 15 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/CodeBlock.tsx b/extension/react-app/src/components/CodeBlock.tsx index c4524a51..0aae0bbb 100644 --- a/extension/react-app/src/components/CodeBlock.tsx +++ b/extension/react-app/src/components/CodeBlock.tsx @@ -22,7 +22,7 @@ const StyledCopyButton = styled.button<{ visible: boolean }>`    /* position: relative; */    float: right;    border: none; -  background-color: transparent; +  background-color: ${secondaryDark};    cursor: pointer;    padding: 0;    /* margin: 4px; */ @@ -77,7 +77,10 @@ function CodeBlock(props: { language?: string; children: string }) {          setHovered(false);        }}      > -      <CopyButton visible={hovered} textToCopy={props.children} /> +      <CopyButton +        visible={hovered} +        textToCopy={(props.children as any).props.children[0]} +      />        <StyledCode>{props.children}</StyledCode>      </StyledPre>    ); diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx index ddc9d5dc..8c1f80e0 100644 --- a/extension/react-app/src/components/ComboBox.tsx +++ b/extension/react-app/src/components/ComboBox.tsx @@ -116,6 +116,15 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {          disabled={props.disabled}          placeholder="Type '/' to see available slash commands."          {...getInputProps({ +          onChange: (e) => { +            const target = e.target as HTMLTextAreaElement; +            // Update the height of the textarea to match the content, up to a max of 200px. +            target.style.height = "auto"; +            target.style.height = `${Math.min( +              target.scrollHeight, +              200 +            ).toString()}px`; +          },            onKeyDown: (event) => {              if (event.key === "Enter" && event.shiftKey) {                // Prevent Downshift's default 'Enter' behavior. 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..eee2b1a0 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,10 @@ import {  import ComboBox from "../components/ComboBox";  import TextDialog from "../components/TextDialog";  import HeaderButtonWithText from "../components/HeaderButtonWithText"; +import ReactSwitch from "react-switch"; +import { usePostHog } from "posthog-js/react"; +import { useSelector } from "react-redux"; +import { RootStore } from "../redux/store";  const TopGUIDiv = styled.div`    overflow: hidden; @@ -33,7 +31,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 +40,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 { @@ -49,11 +49,18 @@ interface GUIProps {  }  function GUI(props: GUIProps) { +  const posthog = usePostHog(); +  const vscMachineId = useSelector( +    (state: RootStore) => state.config.vscMachineId +  ); +    const [waitingForSteps, setWaitingForSteps] = useState(false);    const [userInputQueue, setUserInputQueue] = useState<string[]>([]);    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 +397,62 @@ 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={() => { +              posthog?.capture("data_switch_toggled", { +                vscMachineId: vscMachineId, +                dataSwitchChecked: !dataSwitchChecked, +              }); +              setDataSwitchChecked((prev) => !prev); +            }} +            onColor="#12887a" +            checked={dataSwitchChecked} +          /> +          <span style={{ cursor: "help", fontSize: "16px" }}> +            Contribute Data +          </span> +        </div>          <HeaderButtonWithText            onClick={() => {              client?.sendClear(); diff --git a/extension/src/commands.ts b/extension/src/commands.ts index 5392a7a3..22e15c43 100644 --- a/extension/src/commands.ts +++ b/extension/src/commands.ts @@ -62,9 +62,7 @@ const commandsMap: { [command: string]: (...args: any) => any } = {    "continue.acceptSuggestion": acceptSuggestionCommand,    "continue.rejectSuggestion": rejectSuggestionCommand,    "continue.focusContinueInput": async () => { -    if (!debugPanelWebview) { -      vscode.commands.executeCommand("continue.continueGUIView.focus"); -    } +    vscode.commands.executeCommand("continue.continueGUIView.focus");      debugPanelWebview?.postMessage({        type: "focusContinueInput",      }); | 
