From 894a197892fc4e3a6a5af7d47b7702ea895e20b7 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Sun, 2 Jul 2023 20:14:27 -0700
Subject: finishing up explicit context
---
extension/react-app/src/components/ComboBox.tsx | 83 ++++++++++++----------
.../react-app/src/components/ContinueButton.tsx | 1 +
extension/react-app/src/components/PillButton.tsx | 66 +++++++++++++++++
3 files changed, 111 insertions(+), 39 deletions(-)
create mode 100644 extension/react-app/src/components/PillButton.tsx
(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 34027a42..f299c3a2 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -9,6 +9,7 @@ import {
} from ".";
import CodeBlock from "./CodeBlock";
import { RangeInFile } from "../../../src/client";
+import PillButton from "./PillButton";
const mainInputFontSize = 16;
@@ -22,27 +23,9 @@ const ContextDropdown = styled.div`
border-bottom-left-radius: ${defaultBorderRadius};
/* border: 1px solid white; */
border-top: none;
- margin-left: 8px;
- margin-right: 8px;
- margin-top: -12px;
+ margin: 8px;
outline: 1px solid orange;
-`;
-
-const PillButton = styled.button`
- display: flex;
- justify-content: space-between;
- align-items: center;
- border: none;
- color: white;
- background-color: gray;
- border-radius: 50px;
- padding: 5px 10px;
- margin: 5px 0;
- cursor: pointer;
-
- &:hover {
- background-color: ${buttonColor};
- }
+ z-index: 5;
`;
const MainTextInput = styled.textarea`
@@ -118,7 +101,9 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
// The position of the current command you are typing now, so the one that will be appended to history once you press enter
const [positionInHistory, setPositionInHistory] = React.useState<number>(0);
const [items, setItems] = React.useState(props.items);
- const [showContextDropdown, setShowContextDropdown] = React.useState(false);
+ const [hoveringButton, setHoveringButton] = React.useState(false);
+ const [hoveringContextDropdown, setHoveringContextDropdown] =
+ React.useState(false);
const [highlightedCodeSections, setHighlightedCodeSections] = React.useState(
props.highlightedCodeSections || [
{
@@ -184,7 +169,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
300
).toString()}px`;
- setShowContextDropdown(target.value.endsWith("@"));
+ // setShowContextDropdown(target.value.endsWith("@"));
},
onKeyDown: (event) => {
if (event.key === "Enter" && event.shiftKey) {
@@ -256,22 +241,11 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
))}
</Ul>
</div>
- <ContextDropdown hidden={!showContextDropdown}>
- <p>Highlight code to include as context:</p>
- {highlightedCodeSections.map((section, idx) => (
- <>
- <p>{section.filepath}</p>
- <CodeBlock showCopy={false} key={idx}>
- {section.contents}
- </CodeBlock>
- </>
- ))}
- </ContextDropdown>
- <div className="px-2">
+ <div className="px-2 flex gap-2 items-center flex-wrap">
{highlightedCodeSections.map((section, idx) => (
<PillButton
- onClick={() => {
- console.log("delete context item", idx);
+ title={section.filepath}
+ onDelete={() => {
if (props.deleteContextItem) {
props.deleteContextItem(idx);
}
@@ -281,11 +255,42 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
return newSections;
});
}}
- >
- {section.filepath}
- </PillButton>
+ onHover={(val: boolean) => {
+ if (val) {
+ setHoveringButton(val);
+ } else {
+ setTimeout(() => {
+ setHoveringButton(val);
+ }, 100);
+ }
+ }}
+ />
))}
+
+ <span className="text-trueGray-400 ml-auto mr-4 text-xs">
+ Highlight code to include as context.{" "}
+ {highlightedCodeSections.length > 0 &&
+ "Otherwise using entire currently open file."}
+ </span>
</div>
+ <ContextDropdown
+ onMouseEnter={() => {
+ setHoveringContextDropdown(true);
+ }}
+ onMouseLeave={() => {
+ setHoveringContextDropdown(false);
+ }}
+ hidden={!hoveringContextDropdown && !hoveringButton}
+ >
+ {highlightedCodeSections.map((section, idx) => (
+ <>
+ <p>{section.filepath}</p>
+ <CodeBlock showCopy={false} key={idx}>
+ {section.contents}
+ </CodeBlock>
+ </>
+ ))}
+ </ContextDropdown>
</>
);
});
diff --git a/extension/react-app/src/components/ContinueButton.tsx b/extension/react-app/src/components/ContinueButton.tsx
index ef6719b7..5295799a 100644
--- a/extension/react-app/src/components/ContinueButton.tsx
+++ b/extension/react-app/src/components/ContinueButton.tsx
@@ -6,6 +6,7 @@ import { RootStore } from "../redux/store";
let StyledButton = styled(Button)`
margin: auto;
+ margin-top: 8px;
display: grid;
grid-template-columns: 30px 1fr;
align-items: center;
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
new file mode 100644
index 00000000..33451db5
--- /dev/null
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -0,0 +1,66 @@
+import { useState } from "react";
+import styled from "styled-components";
+import { defaultBorderRadius } from ".";
+
+const Button = styled.button`
+ border: none;
+ color: white;
+ background-color: transparent;
+ border: 1px solid white;
+ border-radius: ${defaultBorderRadius};
+ padding: 3px 6px;
+
+ &:hover {
+ background-color: white;
+ color: black;
+ }
+`;
+
+interface PillButtonProps {
+ onHover?: (arg0: boolean) => void;
+ onDelete?: () => void;
+ title: string;
+}
+
+const PillButton = (props: PillButtonProps) => {
+ const [isHovered, setIsHovered] = useState(false);
+ return (
+ <Button
+ onMouseEnter={() => {
+ setIsHovered(true);
+ if (props.onHover) {
+ props.onHover(true);
+ }
+ }}
+ onMouseLeave={() => {
+ setIsHovered(false);
+ if (props.onHover) {
+ props.onHover(false);
+ }
+ }}
+ >
+ <div
+ style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: "4px" }}
+ >
+ <span>{props.title}</span>
+ <span
+ style={{
+ cursor: "pointer",
+ color: "red",
+ borderLeft: "1px solid black",
+ paddingLeft: "4px",
+ }}
+ hidden={!isHovered}
+ onClick={() => {
+ props.onDelete?.();
+ props.onHover?.(false);
+ }}
+ >
+ X
+ </span>
+ </div>
+ </Button>
+ );
+};
+
+export default PillButton;
--
cgit v1.2.3-70-g09d2