Merge branch 'main' of https://github.com/continuedev/continue into anthropic

1 files changed, 13 insertions, 52 deletions

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index f11e07af..f327e3a3 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -6,6 +6,7 @@ import {
   lightGray,
   secondaryDark,
   vscBackground,
+  vscForeground,
 } from ".";
 import CodeBlock from "./CodeBlock";
 import PillButton from "./PillButton";
@@ -37,21 +38,6 @@ const EmptyPillDiv = styled.div`
   }
 `;
 
-const ContextDropdown = styled.div`
-  position: absolute;
-  padding: 4px;
-  width: calc(100% - 16px - 8px);
-  background-color: ${secondaryDark};
-  color: white;
-  border-bottom-right-radius: ${defaultBorderRadius};
-  border-bottom-left-radius: ${defaultBorderRadius};
-  /* border: 1px solid white; */
-  border-top: none;
-  margin: 8px;
-  outline: 1px solid orange;
-  z-index: 5;
-`;
-
 const MainTextInput = styled.textarea`
   resize: none;
 
@@ -63,7 +49,7 @@ const MainTextInput = styled.textarea`
   height: auto;
   width: 100%;
   background-color: ${secondaryDark};
-  color: white;
+  color: ${vscForeground};
   z-index: 1;
   border: 1px solid transparent;
 
@@ -86,14 +72,15 @@ const Ul = styled.ul<{
   position: absolute;
   background: ${vscBackground};
   background-color: ${secondaryDark};
-  color: white;
+  color: ${vscForeground};
   max-height: ${UlMaxHeight}px;
+  width: calc(100% - 16px);
   overflow-y: scroll;
   overflow-x: hidden;
   padding: 0;
   ${({ hidden }) => hidden && "display: none;"}
   border-radius: ${defaultBorderRadius};
-  border: 0.5px solid gray;
+  outline: 0.5px solid gray;
   z-index: 2;
   // Get rid of scrollbar and its padding
   scrollbar-width: none;
@@ -109,6 +96,7 @@ const Li = styled.li<{
   selected: boolean;
   isLastItem: boolean;
 }>`
+  background-color: ${secondaryDark};
   ${({ highlighted }) => highlighted && "background: #ff000066;"}
   ${({ selected }) => selected && "font-weight: bold;"}
     padding: 0.5rem 0.75rem;
@@ -138,10 +126,6 @@ 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 [hoveringButton, setHoveringButton] = React.useState(false);
-  const [hoveringContextDropdown, setHoveringContextDropdown] =
-    React.useState(false);
-  const [pinned, setPinned] = useState(false);
   const [highlightedCodeSections, setHighlightedCodeSections] = React.useState(
     props.highlightedCodeSections || []
   );
@@ -236,6 +220,9 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 ? "Editing such a large range may be slow"
                 : undefined
             }
+            onlyShowDelete={
+              highlightedCodeSections.length <= 1 || section.editing
+            }
             editing={section.editing}
             pinned={section.pinned}
             index={idx}
@@ -253,15 +240,6 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 return newSections;
               });
             }}
-            onHover={(val: boolean) => {
-              if (val) {
-                setHoveringButton(val);
-              } else {
-                setTimeout(() => {
-                  setHoveringButton(val);
-                }, 100);
-              }
-            }}
           />
         ))}
         {props.highlightedCodeSections.length > 0 &&
@@ -271,11 +249,11 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 props.onToggleAddContext();
               }}
             >
-              Highlight to Add Context
+              Highlight code section
             </EmptyPillDiv>
           ) : (
             <HeaderButtonWithText
-              text="Add to Context"
+              text="Add more code to context"
               onClick={() => {
                 props.onToggleAddContext();
               }}
@@ -287,7 +265,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
       <div className="flex px-2" ref={divRef} hidden={!downshiftProps.isOpen}>
         <MainTextInput
           disabled={props.disabled}
-          placeholder={`Ask a question, give instructions, or type '/' to see slash commands. ${getMetaKeyLabel()}⏎ to edit.`}
+          placeholder={`Ask a question, give instructions, or type '/' to see slash commands`}
           {...getInputProps({
             onChange: (e) => {
               const target = e.target as HTMLTextAreaElement;
@@ -361,6 +339,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
           })}
           showAbove={showAbove()}
           ulHeightPixels={ulRef.current?.getBoundingClientRect().height || 0}
+          hidden={!downshiftProps.isOpen || items.length === 0}
         >
           {downshiftProps.isOpen &&
             items.map((item, index) => (
@@ -387,24 +366,6 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
             Inserting at cursor
           </div>
         )}
-      <ContextDropdown
-        onMouseEnter={() => {
-          setHoveringContextDropdown(true);
-        }}
-        onMouseLeave={() => {
-          setHoveringContextDropdown(false);
-        }}
-        hidden={true || (!hoveringContextDropdown && !hoveringButton)}
-      >
-        {highlightedCodeSections.map((section, idx) => (
-          <>
-            <p>{section.display_name}</p>
-            <CodeBlock showCopy={false} key={idx}>
-              {section.range.contents}
-            </CodeBlock>
-          </>
-        ))}
-      </ContextDropdown>
     </>
   );
 });