diff options
Diffstat (limited to 'extension/react-app/src')
| -rw-r--r-- | extension/react-app/src/components/ComboBox.tsx | 8 | ||||
| -rw-r--r-- | extension/react-app/src/components/PillButton.tsx | 4 | ||||
| -rw-r--r-- | extension/react-app/src/components/StepContainer.tsx | 12 | ||||
| -rw-r--r-- | extension/react-app/src/components/UserInputContainer.tsx | 4 | ||||
| -rw-r--r-- | extension/react-app/src/pages/gui.tsx | 42 |
5 files changed, 45 insertions, 25 deletions
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx index 982c42d1..5eada708 100644 --- a/extension/react-app/src/components/ComboBox.tsx +++ b/extension/react-app/src/components/ComboBox.tsx @@ -379,6 +379,14 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { Math.min(prev + 1, history.length) ); setCurrentlyInContextQuery(false); + } else if (event.key === "Escape") { + setCurrentlyInContextQuery(false); + if (downshiftProps.isOpen) { + downshiftProps.closeMenu(); + } else { + // Move cursor back over to the editor + postVscMessage("focusEditor", {}); + } } }, onClick: () => { diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx index 586c49f0..edef808e 100644 --- a/extension/react-app/src/components/PillButton.tsx +++ b/extension/react-app/src/components/PillButton.tsx @@ -103,8 +103,8 @@ const PillButton = (props: PillButtonProps) => { <pre> <code style={{ - fontSize: "11px", - backgroundColor: vscBackground, + fontSize: "12px", + backgroundColor: "transparent", color: vscForeground, whiteSpace: "pre-wrap", wordWrap: "break-word", diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx index d9280c75..1f999892 100644 --- a/extension/react-app/src/components/StepContainer.tsx +++ b/extension/react-app/src/components/StepContainer.tsx @@ -63,6 +63,14 @@ const HeaderDiv = styled.div<{ error: boolean; loading: boolean }>` padding-right: 8px; `; +const LeftHeaderSubDiv = styled.div` + margin: 8px; + display: grid; + grid-template-columns: auto 1fr; + align-items: center; + grid-gap: 2px; +`; + const ContentDiv = styled.div<{ isUserInput: boolean }>` padding: 8px; background-color: ${(props) => @@ -167,7 +175,7 @@ function StepContainer(props: StepContainerProps) { loading={(props.historyNode.active as boolean) || false} error={props.historyNode.observation?.error ? true : false} > - <div className="m-2 flex items-center"> + <LeftHeaderSubDiv> {!isUserInput && (props.open ? ( <ChevronDownIcon width="1.4em" height="1.4em" /> @@ -176,7 +184,7 @@ function StepContainer(props: StepContainerProps) { ))} {props.historyNode.observation?.title || (props.historyNode.step.name as any)} - </div> + </LeftHeaderSubDiv> {/* <HeaderButton onClick={(e) => { e.stopPropagation(); diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx index ae054947..7e964ad9 100644 --- a/extension/react-app/src/components/UserInputContainer.tsx +++ b/extension/react-app/src/components/UserInputContainer.tsx @@ -21,6 +21,8 @@ const StyledDiv = styled.div` align-items: center; border-bottom: 1px solid ${vscBackground}; padding: 8px; + padding-top: 4px; + padding-bottom: 4px; `; const DeleteButtonDiv = styled.div` @@ -35,7 +37,7 @@ const UserInputContainer = (props: UserInputContainerProps) => { <StyledMarkdownPreview light={true} source={props.children} - className="mr-5" + className="mr-6" /> {/* <ReactMarkdown children={props.children} className="w-fit mr-10" /> */} <DeleteButtonDiv> diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx index d3a8f566..54897944 100644 --- a/extension/react-app/src/pages/gui.tsx +++ b/extension/react-app/src/pages/gui.tsx @@ -1,7 +1,7 @@ import styled from "styled-components"; import { defaultBorderRadius, - vscBackground, + secondaryDark, vscForeground, } from "../components"; import Loader from "../components/Loader"; @@ -37,6 +37,24 @@ const TopGUIDiv = styled.div` overflow: hidden; `; +const BottomMessageDiv = styled.div<{ displayOnBottom: boolean }>` + position: fixed; + bottom: ${(props) => (props.displayOnBottom ? "50px" : undefined)}; + top: ${(props) => (props.displayOnBottom ? undefined : "50px")}; + left: 0; + right: 0; + margin: 8px; + margin-top: 0; + background-color: ${secondaryDark}; + color: ${vscForeground}; + border-radius: ${defaultBorderRadius}; + padding: 12px; + z-index: 100; + box-shadow: 0px 0px 2px 0px ${vscForeground}; + max-height: 50vh; + overflow: scroll; +`; + const UserInputQueueItem = styled.div` border-radius: ${defaultBorderRadius}; color: gray; @@ -463,7 +481,8 @@ function GUI(props: GUIProps) { /> <ContinueButton onClick={onMainTextInput} /> </TopGUIDiv> - <div + <BottomMessageDiv + displayOnBottom={displayBottomMessageOnBottom} onMouseEnter={() => { dispatch(setBottomMessageCloseTimeout(undefined)); }} @@ -472,27 +491,10 @@ function GUI(props: GUIProps) { dispatch(setBottomMessage(undefined)); } }} - style={{ - position: "fixed", - bottom: displayBottomMessageOnBottom ? "50px" : undefined, - top: displayBottomMessageOnBottom ? undefined : "50px", - left: "0", - right: "0", - margin: "8px", - marginTop: "0px", - backgroundColor: vscBackground, - color: vscForeground, - borderRadius: defaultBorderRadius, - padding: "12px", - zIndex: 100, - boxShadow: `0px 0px 4px 0px ${vscForeground}`, - maxHeight: "50vh", - overflow: "scroll", - }} hidden={!bottomMessage} > {bottomMessage} - </div> + </BottomMessageDiv> <Footer dataSwitchChecked={dataSwitchChecked}> {vscMediaUrl && ( <a |