diff options
Diffstat (limited to 'extension/react-app/src')
| -rw-r--r-- | extension/react-app/src/components/TextDialog.tsx | 60 | ||||
| -rw-r--r-- | extension/react-app/src/pages/gui.tsx | 40 |
2 files changed, 53 insertions, 47 deletions
diff --git a/extension/react-app/src/components/TextDialog.tsx b/extension/react-app/src/components/TextDialog.tsx index cba3852d..9597b578 100644 --- a/extension/react-app/src/components/TextDialog.tsx +++ b/extension/react-app/src/components/TextDialog.tsx @@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react"; import styled from "styled-components"; import { Button, secondaryDark, vscBackground, vscForeground } from "."; import { isMetaEquivalentKeyPressed } from "../util"; +import { ReactMarkdown } from "react-markdown/lib/react-markdown"; const ScreenCover = styled.div` position: absolute; @@ -56,6 +57,7 @@ const TextDialog = (props: { onEnter: (text: string) => void; onClose: () => void; message?: string; + entryOn?: boolean; }) => { const [text, setText] = useState(""); const textAreaRef = React.createRef<HTMLTextAreaElement>(); @@ -79,33 +81,37 @@ const TextDialog = (props: { }} > <Dialog> - <P>{props.message || ""}</P> - <TextArea - rows={10} - ref={textAreaRef} - onKeyDown={(e) => { - if ( - e.key === "Enter" && - isMetaEquivalentKeyPressed(e) && - textAreaRef.current - ) { - props.onEnter(textAreaRef.current.value); - setText(""); - } else if (e.key === "Escape") { - props.onClose(); - } - }} - /> - <Button - onClick={() => { - if (textAreaRef.current) { - props.onEnter(textAreaRef.current.value); - setText(""); - } - }} - > - Enter - </Button> + <ReactMarkdown>{props.message || ""}</ReactMarkdown> + {props.entryOn && ( + <> + <TextArea + rows={10} + ref={textAreaRef} + onKeyDown={(e) => { + if ( + e.key === "Enter" && + isMetaEquivalentKeyPressed(e) && + textAreaRef.current + ) { + props.onEnter(textAreaRef.current.value); + setText(""); + } else if (e.key === "Escape") { + props.onClose(); + } + }} + /> + <Button + onClick={() => { + if (textAreaRef.current) { + props.onEnter(textAreaRef.current.value); + setText(""); + } + }} + > + Enter + </Button> + </> + )} </Dialog> </DialogContainer> </ScreenCover> diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx index fccc9b4b..49f41dcf 100644 --- a/extension/react-app/src/pages/gui.tsx +++ b/extension/react-app/src/pages/gui.tsx @@ -75,7 +75,6 @@ function GUI(props: GUIProps) { } }, [dataSwitchOn]); - const [usingFastModel, setUsingFastModel] = useState(false); const [waitingForSteps, setWaitingForSteps] = useState(false); const [userInputQueue, setUserInputQueue] = useState<string[]>([]); const [highlightedRanges, setHighlightedRanges] = useState< @@ -117,6 +116,7 @@ function GUI(props: GUIProps) { const [showFeedbackDialog, setShowFeedbackDialog] = useState(false); const [feedbackDialogMessage, setFeedbackDialogMessage] = useState(""); + const [feedbackEntryOn, setFeedbackEntryOn] = useState(true); const topGuiDivRef = useRef<HTMLDivElement>(null); @@ -140,12 +140,9 @@ function GUI(props: GUIProps) { }, [topGuiDivRef.current, scrollTimeout]); useEffect(() => { + // Cmd + Backspace to delete current step const listener = (e: any) => { - // Cmd + i to toggle fast model - if (e.key === "i" && isMetaEquivalentKeyPressed(e) && e.shiftKey) { - setUsingFastModel((prev) => !prev); - // Cmd + backspace to stop currently running step - } else if ( + if ( e.key === "Backspace" && isMetaEquivalentKeyPressed(e) && typeof history?.current_index !== "undefined" && @@ -164,7 +161,6 @@ function GUI(props: GUIProps) { useEffect(() => { client?.onStateUpdate((state: FullState) => { // Scroll only if user is at very bottom of the window. - setUsingFastModel(state.default_model === "gpt-3.5-turbo"); const shouldScrollToBottom = topGuiDivRef.current && topGuiDivRef.current?.offsetHeight - window.scrollY < 100; @@ -281,6 +277,7 @@ function GUI(props: GUIProps) { setShowFeedbackDialog(false); }} message={feedbackDialogMessage} + entryOn={feedbackEntryOn} /> <TopGUIDiv @@ -431,24 +428,26 @@ function GUI(props: GUIProps) { </div> <HeaderButtonWithText onClick={() => { - // client?.changeDefaultModel( - // usingFastModel ? "gpt-4" : "gpt-3.5-turbo" - // ); - if (!usingFastModel) { - // Show the dialog - setFeedbackDialogMessage( - "We don't yet support local models, but we're working on it! If privacy is a concern of yours, please write a short note to let us know." - ); - setShowFeedbackDialog(true); - } - setUsingFastModel((prev) => !prev); + // Show the dialog + setFeedbackDialogMessage( + `Continue uses GPT-4 by default, but works with any model. If you'd like to keep your code completely private, there are few options: + +Run a local model with ggml: [5 minute quickstart](https://github.com/continuedev/ggml-server-example) + +Use Azure OpenAI service, which is GDPR and HIPAA compliant: [Tutorial](https://continue.dev/docs/customization#azure-openai-service) + +If you already have an LLM deployed on your own infrastructure, or would like to do so, please contact us at hi@continue.dev. + ` + ); + setFeedbackEntryOn(false); + setShowFeedbackDialog(true); }} - text={usingFastModel ? "local" : "gpt-4"} + text={"Use Private Model"} > <div style={{ fontSize: "18px", marginLeft: "2px", marginRight: "2px" }} > - {usingFastModel ? "🔒" : "🧠"} + 🔒 </div> </HeaderButtonWithText> <HeaderButtonWithText @@ -473,6 +472,7 @@ function GUI(props: GUIProps) { setFeedbackDialogMessage( "Having trouble using Continue? Want a new feature? Let us know! This box is anonymous, but we will promptly address your feedback." ); + setFeedbackEntryOn(true); setShowFeedbackDialog(true); }} text="Feedback" |