From d27c95686efb52182ce8cb24f48d197ba42510ab Mon Sep 17 00:00:00 2001 From: Nate Sesti Date: Wed, 12 Jul 2023 13:22:40 -0700 Subject: purging unecessary files --- extension/react-app/src/tabs/additionalContext.tsx | 18 - extension/react-app/src/tabs/chat/MessageDiv.tsx | 75 ---- extension/react-app/src/tabs/chat/index.tsx | 267 ----------- extension/react-app/src/tabs/gui.tsx | 486 --------------------- extension/react-app/src/tabs/main.tsx | 189 -------- extension/react-app/src/tabs/welcome.tsx | 22 - 6 files changed, 1057 deletions(-) delete mode 100644 extension/react-app/src/tabs/additionalContext.tsx delete mode 100644 extension/react-app/src/tabs/chat/MessageDiv.tsx delete mode 100644 extension/react-app/src/tabs/chat/index.tsx delete mode 100644 extension/react-app/src/tabs/gui.tsx delete mode 100644 extension/react-app/src/tabs/main.tsx delete mode 100644 extension/react-app/src/tabs/welcome.tsx (limited to 'extension/react-app/src/tabs') diff --git a/extension/react-app/src/tabs/additionalContext.tsx b/extension/react-app/src/tabs/additionalContext.tsx deleted file mode 100644 index 98fce9f1..00000000 --- a/extension/react-app/src/tabs/additionalContext.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react"; -import { H3, TextArea } from "../components"; - -function AdditionalContextTab() { - return ( -
-

Additional Context

- -

-
- ); -} - -export default AdditionalContextTab; diff --git a/extension/react-app/src/tabs/chat/MessageDiv.tsx b/extension/react-app/src/tabs/chat/MessageDiv.tsx deleted file mode 100644 index 3543dd93..00000000 --- a/extension/react-app/src/tabs/chat/MessageDiv.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React, { useEffect } from "react"; -import { ChatMessage } from "../../redux/store"; -import styled from "styled-components"; -import { - buttonColor, - defaultBorderRadius, - secondaryDark, -} from "../../components"; -import VSCodeFileLink from "../../components/VSCodeFileLink"; -import ReactMarkdown from "react-markdown"; -import "../../highlight/dark.min.css"; -import hljs from "highlight.js"; -import { useSelector } from "react-redux"; -import { selectIsStreaming } from "../../redux/selectors/chatSelectors"; - -const Container = styled.div` - padding-left: 8px; - padding-right: 8px; - border-radius: 8px; - margin: 3px; - width: fit-content; - max-width: 75%; - overflow-y: scroll; - word-wrap: break-word; - -ms-word-wrap: break-word; - height: fit-content; - overflow: hidden; - background-color: ${(props) => { - if (props.role === "user") { - return buttonColor; - } else { - return secondaryDark; - } - }}; - float: ${(props) => { - if (props.role === "user") { - return "right"; - } else { - return "left"; - } - }}; - display: block; - - & pre { - border: 1px solid gray; - border-radius: ${defaultBorderRadius}; - } -`; - -function MessageDiv(props: ChatMessage) { - const [richContent, setRichContent] = React.useState([]); - const isStreaming = useSelector(selectIsStreaming); - - useEffect(() => { - if (!isStreaming) { - hljs.highlightAll(); - } - }, [richContent, isStreaming]); - - useEffect(() => { - setRichContent([ - , - ]); - }, [props.content]); - - return ( - <> -
- {richContent} -
- - ); -} - -export default MessageDiv; diff --git a/extension/react-app/src/tabs/chat/index.tsx b/extension/react-app/src/tabs/chat/index.tsx deleted file mode 100644 index a93ad4f9..00000000 --- a/extension/react-app/src/tabs/chat/index.tsx +++ /dev/null @@ -1,267 +0,0 @@ -import React, { useCallback, useEffect, useRef, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { selectChatMessages } from "../../redux/selectors/chatSelectors"; -import MessageDiv from "./MessageDiv"; -import styled from "styled-components"; -import { addMessage, setIsStreaming } from "../../redux/slices/chatSlice"; -import { AnyAction, Dispatch } from "@reduxjs/toolkit"; -import { closeStream, streamUpdate } from "../../redux/slices/chatSlice"; -import { ChatMessage, RootStore } from "../../redux/store"; -import { postVscMessage, vscRequest } from "../../vscode"; -import { defaultBorderRadius, Loader } from "../../components"; -import { selectHighlightedCode } from "../../redux/selectors/miscSelectors"; -import { readRangeInVirtualFileSystem } from "../../util"; -import { selectDebugContext } from "../../redux/selectors/debugContextSelectors"; - -let textEntryBarHeight = "30px"; - -const ChatContainer = styled.div` - display: grid; - grid-template-rows: 1fr auto; - height: 100%; -`; - -const BottomDiv = styled.div` - display: grid; - grid-template-rows: auto auto; -`; - -const BottomButton = styled.button( - (props: { active: boolean }) => ` - font-size: 10px; - border: none; - color: white; - margin-right: 4px; - cursor: pointer; - background-color: ${props.active ? "black" : "gray"}; - border-radius: ${defaultBorderRadius}; - padding: 8px; -` -); - -const TextEntryBar = styled.input` - height: ${textEntryBarHeight}; - border-bottom-left-radius: ${defaultBorderRadius}; - border-bottom-right-radius: ${defaultBorderRadius}; - padding: 8px; - border: 1px solid white; - background-color: black; - color: white; - outline: none; -`; - -function ChatTab() { - const dispatch = useDispatch(); - const chatMessages = useSelector(selectChatMessages); - const isStreaming = useSelector((state: RootStore) => state.chat.isStreaming); - const baseUrl = useSelector((state: RootStore) => state.config.apiUrl); - const debugContext = useSelector(selectDebugContext); - - const [includeHighlightedCode, setIncludeHighlightedCode] = useState(true); - const [writeToEditor, setWriteToEditor] = useState(false); - const [waitingForResponse, setWaitingForResponse] = useState(false); - - const highlightedCode = useSelector(selectHighlightedCode); - - const streamToStateThunk = useCallback( - (dispatch: Dispatch, getResponse: () => Promise) => { - let streamToCursor = writeToEditor; - getResponse().then((resp) => { - setWaitingForResponse(false); - if (resp.body) { - resp.body.pipeTo( - new WritableStream({ - write(chunk) { - let update = new TextDecoder("utf-8").decode(chunk); - dispatch(streamUpdate(update)); - if (streamToCursor) { - postVscMessage("streamUpdate", { update }); - } - }, - close() { - dispatch(closeStream()); - if (streamToCursor) { - postVscMessage("closeStream", null); - } - }, - }) - ); - } - }); - }, - [writeToEditor] - ); - - const compileHiddenChatMessages = useCallback(async () => { - let messages: ChatMessage[] = []; - if ( - includeHighlightedCode && - highlightedCode?.filepath !== undefined && - highlightedCode?.range !== undefined && - debugContext.filesystem[highlightedCode.filepath] !== undefined - ) { - let fileContents = readRangeInVirtualFileSystem( - highlightedCode, - debugContext.filesystem - ); - if (fileContents) { - messages.push({ - role: "user", - content: fileContents, - }); - } - } else { - // Similarity search over workspace - let data = await vscRequest("queryEmbeddings", { - query: chatMessages[chatMessages.length - 1].content, - }); - let codeContextMessages = data.results.map( - (result: { id: string; document: string }) => { - let msg: ChatMessage = { - role: "user", - content: `File: ${result.id} \n ${result.document}`, - }; - return msg; - } - ); - codeContextMessages.push({ - role: "user", - content: - "Use the above code to help you answer the question below. Answer in asterisk bullet points, and give the full path whenever you reference files.", - }); - messages.push(...codeContextMessages); - } - - let systemMsgContent = writeToEditor - ? "Respond only with the exact code requested, no additional text." - : "Use the above code to help you answer the question below. Respond in markdown if using bullets or other special formatting, being sure to specify language for code blocks."; - - messages.push({ - role: "system", - content: systemMsgContent, - }); - return messages; - }, [highlightedCode, chatMessages, includeHighlightedCode, writeToEditor]); - - useEffect(() => { - if ( - chatMessages.length > 0 && - chatMessages[chatMessages.length - 1].role === "user" && - !isStreaming - ) { - dispatch(setIsStreaming(true)); - streamToStateThunk(dispatch, async () => { - if (chatMessages.length === 0) { - return new Promise((resolve, _) => resolve(new Response())); - } - let hiddenChatMessages = await compileHiddenChatMessages(); - let augmentedMessages = [ - ...chatMessages.slice(0, -1), - ...hiddenChatMessages, - chatMessages[chatMessages.length - 1], - ]; - console.log(augmentedMessages); - // The autogenerated client can't handle streams, so have to go raw - return fetch(`${baseUrl}/chat/complete`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - messages: augmentedMessages, - }), - }); - }); - } - }, [chatMessages, dispatch, isStreaming, highlightedCode]); - - const chatMessagesDiv = useRef(null); - useEffect(() => { - // Scroll to bottom - let interval = setInterval(() => { - if (chatMessagesDiv.current && !waitingForResponse) { - chatMessagesDiv.current.scrollTop += Math.max( - 4, - 0.05 * chatMessagesDiv.current.scrollHeight - - chatMessagesDiv.current.clientHeight - - chatMessagesDiv.current.scrollTop - ); - if ( - chatMessagesDiv.current.scrollTop >= - chatMessagesDiv.current.scrollHeight - - chatMessagesDiv.current.clientHeight - ) { - clearInterval(interval); - } - } - }, 10); - }, [chatMessages, chatMessagesDiv, waitingForResponse]); - - return ( - -
-

Chat

-
-
- {chatMessages.length > 0 ? ( - chatMessages.map((message, idx) => { - return ; - }) - ) : ( -

- You can ask questions about your codebase or ask for code written - directly in the editor. -

- )} - {waitingForResponse && } -
-
- - -
-
- {/*

- Highlighted code is automatically included in your chat message. -

*/} - { - setWriteToEditor(!writeToEditor); - }} - > - {writeToEditor ? "Writing to editor" : "Write to editor"} - - - { - setIncludeHighlightedCode(!includeHighlightedCode); - }} - > - {includeHighlightedCode - ? "Including highlighted code" - : "Automatically finding relevant code"} - -
-
- { - if (e.key === "Enter" && e.currentTarget.value !== "") { - console.log("Sending message", e.currentTarget.value); - dispatch( - addMessage({ content: e.currentTarget.value, role: "user" }) - ); - (e.target as any).value = ""; - setWaitingForResponse(true); - } - }} - > - - - ); -} - -export default ChatTab; diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx deleted file mode 100644 index b6a18dc8..00000000 --- a/extension/react-app/src/tabs/gui.tsx +++ /dev/null @@ -1,486 +0,0 @@ -import styled from "styled-components"; -import { defaultBorderRadius } from "../components"; -import Loader from "../components/Loader"; -import ContinueButton from "../components/ContinueButton"; -import { FullState, HighlightedRangeContext } from "../../../schema/FullState"; -import { useCallback, useEffect, useRef, useState, useContext } from "react"; -import { History } from "../../../schema/History"; -import { HistoryNode } from "../../../schema/HistoryNode"; -import StepContainer from "../components/StepContainer"; -import { GUIClientContext } from "../App"; -import { - BookOpen, - ChatBubbleOvalLeftEllipsis, - Trash, -} from "@styled-icons/heroicons-outline"; -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"; -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; -`; - -const UserInputQueueItem = styled.div` - border-radius: ${defaultBorderRadius}; - color: gray; - padding: 8px; - margin: 8px; - text-align: center; -`; - -const Footer = styled.footer<{ dataSwitchChecked: boolean }>` - display: flex; - flex-direction: row; - gap: 8px; - justify-content: right; - padding: 8px; - align-items: center; - margin-top: 8px; - border-top: 0.1px solid gray; - background-color: ${(props) => - props.dataSwitchChecked ? "#12887a33" : "transparent"}; -`; - -interface GUIProps { - firstObservation?: any; -} - -function GUI(props: GUIProps) { - const client = useContext(GUIClientContext); - const posthog = usePostHog(); - const vscMachineId = useSelector( - (state: RootStore) => state.config.vscMachineId - ); - const [dataSwitchChecked, setDataSwitchChecked] = useState(false); - const dataSwitchOn = useSelector( - (state: RootStore) => state.config.dataSwitchOn - ); - - useEffect(() => { - if (typeof dataSwitchOn !== "undefined") { - setDataSwitchChecked(dataSwitchOn); - } - }, [dataSwitchOn]); - - const [usingFastModel, setUsingFastModel] = useState(false); - const [waitingForSteps, setWaitingForSteps] = useState(false); - const [userInputQueue, setUserInputQueue] = useState([]); - const [highlightedRanges, setHighlightedRanges] = useState< - HighlightedRangeContext[] - >([]); - const [addingHighlightedCode, setAddingHighlightedCode] = useState(false); - const [availableSlashCommands, setAvailableSlashCommands] = useState< - { name: string; description: string }[] - >([]); - const [pinned, setPinned] = useState(false); - const [showDataSharingInfo, setShowDataSharingInfo] = useState(false); - const [stepsOpen, setStepsOpen] = useState([ - true, - true, - true, - true, - ]); - const [history, setHistory] = useState({ - timeline: [ - { - step: { - name: "Welcome to Continue", - hide: false, - description: `- Highlight code and ask a question or give instructions -- Use \`cmd+k\` (Mac) / \`ctrl+k\` (Windows) to open Continue -- Use \`cmd+shift+e\` / \`ctrl+shift+e\` to open file Explorer -- Add your own OpenAI API key to VS Code Settings with \`cmd+,\` -- Use slash commands when you want fine-grained control -- Past steps are included as part of the context by default`, - system_message: null, - chat_context: [], - manage_own_chat_context: false, - message: "", - }, - depth: 0, - deleted: false, - active: false, - }, - ], - current_index: 3, - } as any); - - const [showFeedbackDialog, setShowFeedbackDialog] = useState(false); - const [feedbackDialogMessage, setFeedbackDialogMessage] = useState(""); - - const topGuiDivRef = useRef(null); - - const [scrollTimeout, setScrollTimeout] = useState( - null - ); - const scrollToBottom = useCallback(() => { - if (scrollTimeout) { - clearTimeout(scrollTimeout); - } - // Debounced smooth scroll to bottom of screen - if (topGuiDivRef.current) { - const timeout = setTimeout(() => { - window.scrollTo({ - top: topGuiDivRef.current!.offsetHeight, - behavior: "smooth", - }); - }, 200); - setScrollTimeout(timeout); - } - }, [topGuiDivRef.current, scrollTimeout]); - - useEffect(() => { - const listener = (e: any) => { - // Cmd + i to toggle fast model - if (e.key === "i" && e.metaKey && e.shiftKey) { - setUsingFastModel((prev) => !prev); - // Cmd + backspace to stop currently running step - } else if ( - e.key === "Backspace" && - e.metaKey && - typeof history?.current_index !== "undefined" && - history.timeline[history.current_index]?.active - ) { - client?.deleteAtIndex(history.current_index); - } - }; - window.addEventListener("keydown", listener); - - return () => { - window.removeEventListener("keydown", listener); - }; - }, [client, history]); - - 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; - - const waitingForSteps = - state.active && - state.history.current_index < state.history.timeline.length && - state.history.timeline[state.history.current_index] && - state.history.timeline[ - state.history.current_index - ].step.description?.trim() === ""; - - setWaitingForSteps(waitingForSteps); - setHistory(state.history); - setHighlightedRanges(state.highlighted_ranges); - setUserInputQueue(state.user_input_queue); - setAddingHighlightedCode(state.adding_highlighted_code); - setAvailableSlashCommands( - state.slash_commands.map((c: any) => { - return { - name: `/${c.name}`, - description: c.description, - }; - }) - ); - setStepsOpen((prev) => { - const nextStepsOpen = [...prev]; - for ( - let i = nextStepsOpen.length; - i < state.history.timeline.length; - i++ - ) { - nextStepsOpen.push(true); - } - return nextStepsOpen; - }); - - if (shouldScrollToBottom) { - scrollToBottom(); - } - }); - }, [client]); - - useEffect(() => { - scrollToBottom(); - }, [waitingForSteps]); - - const mainTextInputRef = useRef(null); - - const deleteContextItems = useCallback( - (indices: number[]) => { - client?.deleteContextAtIndices(indices); - }, - [client] - ); - - const onMainTextInput = (event?: any) => { - if (mainTextInputRef.current) { - let input = (mainTextInputRef.current as any).inputValue; - // cmd+enter to /edit - if (event?.metaKey) { - input = `/edit ${input}`; - } - (mainTextInputRef.current as any).setInputValue(""); - if (!client) return; - - setWaitingForSteps(true); - - if ( - history && - history.current_index >= 0 && - history.current_index < history.timeline.length - ) { - if ( - history.timeline[history.current_index]?.step.name === - "Waiting for user input" - ) { - if (input.trim() === "") return; - onStepUserInput(input, history!.current_index); - return; - } else if ( - history.timeline[history.current_index]?.step.name === - "Waiting for user confirmation" - ) { - onStepUserInput("ok", history!.current_index); - return; - } - } - if (input.trim() === "") return; - - client.sendMainInput(input); - setUserInputQueue((queue) => { - return [...queue, input]; - }); - } - }; - - const onStepUserInput = (input: string, index: number) => { - if (!client) return; - console.log("Sending step user input", input, index); - client.sendStepUserInput(input, index); - }; - - // const iterations = useSelector(selectIterations); - return ( - <> - -