summaryrefslogtreecommitdiff
path: root/extension/react-app/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'extension/react-app/src/components')
-rw-r--r--extension/react-app/src/components/ComboBox.tsx8
-rw-r--r--extension/react-app/src/components/PillButton.tsx4
-rw-r--r--extension/react-app/src/components/StepContainer.tsx12
-rw-r--r--extension/react-app/src/components/UserInputContainer.tsx4
4 files changed, 23 insertions, 5 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>