3 files changed, 111 insertions, 39 deletions

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;