From 512ac568b719bec6ba0811bc5100ec5af849edfa Mon Sep 17 00:00:00 2001 From: Nate Sesti Date: Thu, 15 Jun 2023 16:59:28 -0700 Subject: At last, we are rid of corner squares --- extension/react-app/src/components/StepContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'extension/react-app/src/components') diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx index 48f970d7..b0116e92 100644 --- a/extension/react-app/src/components/StepContainer.tsx +++ b/extension/react-app/src/components/StepContainer.tsx @@ -193,7 +193,7 @@ function StepContainer(props: StepContainerProps) { ) : ( { -- cgit v1.2.3-70-g09d2 From 0da3647105a8098f9218e0d6c8105b9d60c1cb28 Mon Sep 17 00:00:00 2001 From: Nate Sesti Date: Thu, 15 Jun 2023 18:15:11 -0700 Subject: footer sticks to bottom --- extension/react-app/src/components/DebugPanel.tsx | 85 ++++----- extension/react-app/src/index.css | 3 +- extension/react-app/src/tabs/gui.tsx | 201 +++++++++++----------- 3 files changed, 129 insertions(+), 160 deletions(-) (limited to 'extension/react-app/src/components') diff --git a/extension/react-app/src/components/DebugPanel.tsx b/extension/react-app/src/components/DebugPanel.tsx index 11ec2fe2..30f38779 100644 --- a/extension/react-app/src/components/DebugPanel.tsx +++ b/extension/react-app/src/components/DebugPanel.tsx @@ -17,39 +17,15 @@ interface DebugPanelProps { }[]; } -const GradientContainer = styled.div` - // Uncomment to get gradient border - /* background: linear-gradient( - 101.79deg, - #12887a 0%, - #87245c 37.64%, - #e12637 65.98%, - #ffb215 110.45% - ); */ - /* padding: 10px; */ - background-color: ${secondaryDark}; - margin: 0; - height: 100%; - /* border: 1px solid white; */ - border-radius: ${defaultBorderRadius}; -`; - -const MainDiv = styled.div` - height: 100%; - border-radius: ${defaultBorderRadius}; - scrollbar-base-color: transparent; - background-color: ${vscBackground}; -`; - const TabBar = styled.div<{ numTabs: number }>` display: grid; grid-template-columns: repeat(${(props) => props.numTabs}, 1fr); `; const TabsAndBodyDiv = styled.div` - display: grid; - grid-template-rows: auto 1fr; height: 100%; + border-radius: ${defaultBorderRadius}; + scrollbar-base-color: transparent; `; function DebugPanel(props: DebugPanelProps) { @@ -76,42 +52,43 @@ function DebugPanel(props: DebugPanelProps) { const [currentTab, setCurrentTab] = useState(0); return ( - - - - {props.tabs.length > 1 && ( - - {props.tabs.map((tab, index) => { - return ( -
setCurrentTab(index)} - > - {tab.title} -
- ); - })} - - )} + + {props.tabs.length > 1 && ( + {props.tabs.map((tab, index) => { return ( ); })} - - - + + )} + {props.tabs.map((tab, index) => { + return ( + + ); + })} + ); } diff --git a/extension/react-app/src/index.css b/extension/react-app/src/index.css index 20599d30..32a92d0e 100644 --- a/extension/react-app/src/index.css +++ b/extension/react-app/src/index.css @@ -21,7 +21,7 @@ html, body, #root { - height: calc(100%); + height: 100%; } body { @@ -31,4 +31,5 @@ body { font-family: "Mona Sans", "Arial", sans-serif; padding: 0px; margin: 0px; + height: 100%; } diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx index 5316f42b..05795cdf 100644 --- a/extension/react-app/src/tabs/gui.tsx +++ b/extension/react-app/src/tabs/gui.tsx @@ -21,18 +21,11 @@ import { import ComboBox from "../components/ComboBox"; import TextDialog from "../components/TextDialog"; -const MainDiv = styled.div` - display: grid; - grid-template-rows: 1fr auto; +const TopGUIDiv = styled.div` + overflow: hidden; `; -let TopGUIDiv = styled.div` - display: grid; - grid-template-columns: 1fr; - background-color: ${vscBackground}; -`; - -let UserInputQueueItem = styled.div` +const UserInputQueueItem = styled.div` border-radius: ${defaultBorderRadius}; color: gray; padding: 8px; @@ -40,7 +33,7 @@ let UserInputQueueItem = styled.div` text-align: center; `; -const TopBar = styled.div` +const Footer = styled.footer` display: flex; flex-direction: row; gap: 8px; @@ -303,103 +296,101 @@ function GUI(props: GUIProps) { setShowFeedbackDialog(false); }} > - - { - if (e.key === "Enter" && e.ctrlKey) { - onMainTextInput(); - } - }} - > - {typeof client === "undefined" && ( - <> - -

- Trying to reconnect with server... -

- - )} - {history?.timeline.map((node: HistoryNode, index: number) => { - return ( - { - onStepUserInput(input, index); - }} - inFuture={index > history?.current_index} - historyNode={node} - onRefinement={(input: string) => { - client?.sendRefinementInput(input, index); - }} - onReverse={() => { - client?.reverseToIndex(index); - }} - onRetry={() => { - client?.retryAtIndex(index); - setWaitingForSteps(true); - }} - onDelete={() => { - client?.deleteAtIndex(index); - }} - /> - ); - })} - {waitingForSteps && } -
- {userInputQueue.map((input) => { - return {input}; - })} -
- - { - onMainTextInput(); - e.stopPropagation(); - e.preventDefault(); - }} - onInputValueChange={() => {}} - items={availableSlashCommands} - /> - - - - - - Continue Docs - - - - { - // Set dialog open - setShowFeedbackDialog(true); + { + if (e.key === "Enter" && e.ctrlKey) { + onMainTextInput(); + } + }} + > + {typeof client === "undefined" && ( + <> + +

+ Trying to reconnect with server... +

+ + )} + {history?.timeline.map((node: HistoryNode, index: number) => { + return ( + { + onStepUserInput(input, index); + }} + inFuture={index > history?.current_index} + historyNode={node} + onRefinement={(input: string) => { + client?.sendRefinementInput(input, index); + }} + onReverse={() => { + client?.reverseToIndex(index); }} - > - Feedback - - - { - client?.sendClear(); + onRetry={() => { + client?.retryAtIndex(index); + setWaitingForSteps(true); }} - style={{ padding: "3px" }} - > - Clear History - - - - - + onDelete={() => { + client?.deleteAtIndex(index); + }} + /> + ); + })} + {waitingForSteps && } + +
+ {userInputQueue.map((input) => { + return {input}; + })} +
+ + { + onMainTextInput(); + e.stopPropagation(); + e.preventDefault(); + }} + onInputValueChange={() => {}} + items={availableSlashCommands} + /> + + +
+ + + Continue Docs + + + + { + // Set dialog open + setShowFeedbackDialog(true); + }} + > + Feedback + + + { + client?.sendClear(); + }} + style={{ padding: "3px" }} + > + Clear History + + +
); } -- cgit v1.2.3-70-g09d2 From a328d3671529935929ade8c0ca28ccb465699f8e Mon Sep 17 00:00:00 2001 From: Nate Sesti Date: Thu, 15 Jun 2023 18:22:35 -0700 Subject: hover icons for description --- .../src/components/HeaderButtonWithText.tsx | 26 ++++++++++++++++++++++ .../react-app/src/components/StepContainer.tsx | 14 ++++++------ extension/react-app/src/tabs/gui.tsx | 21 ++++++++--------- 3 files changed, 42 insertions(+), 19 deletions(-) create mode 100644 extension/react-app/src/components/HeaderButtonWithText.tsx (limited to 'extension/react-app/src/components') diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx new file mode 100644 index 00000000..d70a3d70 --- /dev/null +++ b/extension/react-app/src/components/HeaderButtonWithText.tsx @@ -0,0 +1,26 @@ +import React, { useState } from "react"; + +import { HeaderButton } from "."; + +interface HeaderButtonWithTextProps { + text: string; + onClick?: (e: any) => void; + children: React.ReactNode; +} + +const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => { + const [hover, setHover] = useState(false); + return ( + setHover(true)} + onMouseLeave={() => setHover(false)} + onClick={props.onClick} + > + + {props.children} + + ); +}; + +export default HeaderButtonWithText; diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx index b0116e92..480f517f 100644 --- a/extension/react-app/src/components/StepContainer.tsx +++ b/extension/react-app/src/components/StepContainer.tsx @@ -21,9 +21,7 @@ import { } from "@styled-icons/heroicons-outline"; import { HistoryNode } from "../../../schema/HistoryNode"; import ReactMarkdown from "react-markdown"; -import ContinueButton from "./ContinueButton"; -import InputAndButton from "./InputAndButton"; -import ToggleErrorDiv from "./ToggleErrorDiv"; +import HeaderButtonWithText from "./HeaderButtonWithText"; interface StepContainerProps { historyNode: HistoryNode; @@ -152,23 +150,25 @@ function StepContainer(props: StepContainerProps) { */} <> - { e.stopPropagation(); props.onDelete(); }} + text="Delete" > - + {props.historyNode.observation?.error ? ( - { e.stopPropagation(); props.onRetry(); }} > - + ) : ( <> )} diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx index 05795cdf..279d052b 100644 --- a/extension/react-app/src/tabs/gui.tsx +++ b/extension/react-app/src/tabs/gui.tsx @@ -14,12 +14,12 @@ import StepContainer from "../components/StepContainer"; import useContinueGUIProtocol from "../hooks/useWebsocket"; import { BookOpen, - ChatBubbleOvalLeft, ChatBubbleOvalLeftEllipsis, Trash, } from "@styled-icons/heroicons-outline"; import ComboBox from "../components/ComboBox"; import TextDialog from "../components/TextDialog"; +import HeaderButtonWithText from "../components/HeaderButtonWithText"; const TopGUIDiv = styled.div` overflow: hidden; @@ -366,30 +366,27 @@ function GUI(props: GUIProps) {
- - Continue Docs + - + - { // Set dialog open setShowFeedbackDialog(true); }} + text="Feedback" > - Feedback - - + { client?.sendClear(); }} - style={{ padding: "3px" }} + text="Clear History" > - Clear History - +
); -- cgit v1.2.3-70-g09d2 From ccca93eb18ceac9769ebac380bca47f21a691d99 Mon Sep 17 00:00:00 2001 From: Nate Sesti Date: Thu, 15 Jun 2023 20:50:52 -0700 Subject: tab autocomplete for slash commands --- extension/react-app/src/components/ComboBox.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'extension/react-app/src/components') diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx index ace0605e..2b140567 100644 --- a/extension/react-app/src/components/ComboBox.tsx +++ b/extension/react-app/src/components/ComboBox.tsx @@ -113,6 +113,9 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { (event.nativeEvent as any).preventDownshiftDefault = true; if (props.onEnter) props.onEnter(event); setInputValue(""); + } else if (event.key === "Tab" && items.length > 0) { + setInputValue(items[0].name); + event.preventDefault(); } }, ref: ref as any, -- cgit v1.2.3-70-g09d2 From 472984ab63461b90cf41b645e49bcc95bdf2ef1e Mon Sep 17 00:00:00 2001 From: Nate Sesti Date: Fri, 16 Jun 2023 15:17:36 -0700 Subject: fixes --- continuedev/src/continuedev/libs/llm/proxy_server.py | 7 +++++-- continuedev/src/continuedev/server/ide.py | 2 +- extension/react-app/src/components/HeaderButtonWithText.tsx | 6 +++++- extension/react-app/src/components/index.ts | 2 +- 4 files changed, 12 insertions(+), 5 deletions(-) (limited to 'extension/react-app/src/components') diff --git a/continuedev/src/continuedev/libs/llm/proxy_server.py b/continuedev/src/continuedev/libs/llm/proxy_server.py index 4227042f..93f2d48a 100644 --- a/continuedev/src/continuedev/libs/llm/proxy_server.py +++ b/continuedev/src/continuedev/libs/llm/proxy_server.py @@ -17,7 +17,7 @@ CHAT_MODELS = { "gpt-3.5-turbo", "gpt-4" } -# SERVER_URL = "http://127.0.0.1:8002" +# SERVER_URL = "http://127.0.0.1:8080" SERVER_URL = "https://proxy-server-l6vsfbzhba-uc.a.run.app" @@ -87,4 +87,7 @@ class ProxyServer(LLM): }) as resp: async for line in resp.content: if line: - yield line.decode("utf-8") + try: + yield line.decode("utf-8") + except json.JSONDecodeError: + raise Exception(str(line)) diff --git a/continuedev/src/continuedev/server/ide.py b/continuedev/src/continuedev/server/ide.py index c66cc142..c83fbc8a 100644 --- a/continuedev/src/continuedev/server/ide.py +++ b/continuedev/src/continuedev/server/ide.py @@ -230,7 +230,7 @@ class IdeProtocolServer(AbstractIdeProtocolServer): resp = await self._send_and_receive_json({}, UniqueIdResponse, "uniqueId") return resp.uniqueId - @cached_property + @property def workspace_directory(self) -> str: return asyncio.run(self.getWorkspaceDirectory()) diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx index d70a3d70..c4f22211 100644 --- a/extension/react-app/src/components/HeaderButtonWithText.tsx +++ b/extension/react-app/src/components/HeaderButtonWithText.tsx @@ -14,7 +14,11 @@ const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => { setHover(true)} - onMouseLeave={() => setHover(false)} + onMouseLeave={() => { + setTimeout(() => { + setHover(false); + }, 100); + }} onClick={props.onClick} > diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts index 525989af..d99b4d96 100644 --- a/extension/react-app/src/components/index.ts +++ b/extension/react-app/src/components/index.ts @@ -48,7 +48,7 @@ export const Pre = styled.pre` max-height: 150px; overflow-y: scroll; margin: 0; - background-color: ${secondaryDark}; + background-color: ${vscBackground}; border: none; /* text wrapping */ -- cgit v1.2.3-70-g09d2