diff options
Diffstat (limited to 'extension/react-app/src')
| -rw-r--r-- | extension/react-app/src/components/HeaderButtonWithText.tsx | 6 | ||||
| -rw-r--r-- | extension/react-app/src/components/index.ts | 2 | ||||
| -rw-r--r-- | extension/react-app/src/index.css | 1 | ||||
| -rw-r--r-- | extension/react-app/src/tabs/gui.tsx | 34 |
4 files changed, 25 insertions, 18 deletions
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) => { <HeaderButton style={{ padding: "3px" }} onMouseEnter={() => setHover(true)} - onMouseLeave={() => setHover(false)} + onMouseLeave={() => { + setTimeout(() => { + setHover(false); + }, 100); + }} onClick={props.onClick} > <span hidden={!hover}>{props.text}</span> 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 */ diff --git a/extension/react-app/src/index.css b/extension/react-app/src/index.css index 32a92d0e..db8afab9 100644 --- a/extension/react-app/src/index.css +++ b/extension/react-app/src/index.css @@ -22,6 +22,7 @@ html, body, #root { height: 100%; + background-color: var(--vsc-background); } body { diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx index 279d052b..994cb896 100644 --- a/extension/react-app/src/tabs/gui.tsx +++ b/extension/react-app/src/tabs/gui.tsx @@ -194,7 +194,7 @@ function GUI(props: GUIProps) { if (topGuiDivRef.current) { const timeout = setTimeout(() => { window.scrollTo({ - top: window.outerHeight, + top: topGuiDivRef.current!.offsetHeight, behavior: "smooth", }); }, 200); @@ -206,7 +206,9 @@ function GUI(props: GUIProps) { console.log("CLIENT ON STATE UPDATE: ", client, client?.onStateUpdate); client?.onStateUpdate((state) => { // Scroll only if user is at very bottom of the window. - const shouldScrollToBottom = window.outerHeight - window.scrollY < 200; + const shouldScrollToBottom = + topGuiDivRef.current && + topGuiDivRef.current?.offsetHeight - window.scrollY < 100; setWaitingForSteps(state.active); setHistory(state.history); setUserInputQueue(state.user_input_queue); @@ -347,12 +349,12 @@ function GUI(props: GUIProps) { </div> <ComboBox - disabled={ - history?.timeline.length - ? history.timeline[history.current_index].step.name === - "Waiting for user confirmation" - : false - } + // disabled={ + // history?.timeline.length + // ? history.timeline[history.current_index].step.name === + // "Waiting for user confirmation" + // : false + // } ref={mainTextInputRef} onEnter={(e) => { onMainTextInput(); @@ -365,6 +367,14 @@ function GUI(props: GUIProps) { <ContinueButton onClick={onMainTextInput} /> </TopGUIDiv> <Footer> + <HeaderButtonWithText + onClick={() => { + client?.sendClear(); + }} + text="Clear History" + > + <Trash size="1.6em" /> + </HeaderButtonWithText> <a href="https://continue.dev/docs" className="no-underline"> <HeaderButtonWithText text="Continue Docs"> <BookOpen size="1.6em" /> @@ -379,14 +389,6 @@ function GUI(props: GUIProps) { > <ChatBubbleOvalLeftEllipsis size="1.6em" /> </HeaderButtonWithText> - <HeaderButtonWithText - onClick={() => { - client?.sendClear(); - }} - text="Clear History" - > - <Trash size="1.6em" /> - </HeaderButtonWithText> </Footer> </> ); |