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

5 files changed, 53 insertions, 32 deletions

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 3e1f3e16..81b148b9 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -11,7 +11,12 @@ import CodeBlock from "./CodeBlock";
 import { RangeInFile } from "../../../src/client";
 import PillButton from "./PillButton";
 import HeaderButtonWithText from "./HeaderButtonWithText";
-import { Trash, LockClosed, LockOpen } from "@styled-icons/heroicons-outline";
+import {
+  Trash,
+  LockClosed,
+  LockOpen,
+  Plus,
+} from "@styled-icons/heroicons-outline";
 
 // #region styled components
 const mainInputFontSize = 16;
@@ -50,7 +55,7 @@ const MainTextInput = styled.textarea`
   }
 `;
 
-const UlMaxHeight = 200;
+const UlMaxHeight = 400;
 const Ul = styled.ul<{
   hidden: boolean;
   showAbove: boolean;
@@ -100,6 +105,8 @@ interface ComboBoxProps {
   highlightedCodeSections: (RangeInFile & { contents: string })[];
   deleteContextItems: (indices: number[]) => void;
   onTogglePin: () => void;
+  onToggleAddContext: () => void;
+  addingHighlightedCode: boolean;
 }
 
 const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
@@ -188,6 +195,11 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
               ) {
                 // Prevent Downshift's default 'Enter' behavior.
                 (event.nativeEvent as any).preventDownshiftDefault = true;
+
+                // cmd+enter to /edit
+                if (event.metaKey) {
+                  event.currentTarget.value = `/edit ${event.currentTarget.value}`;
+                }
                 if (props.onEnter) props.onEnter(event);
                 setInputValue("");
                 const value = event.currentTarget.value;
@@ -249,6 +261,19 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
         </Ul>
       </div>
       <div className="px-2 flex gap-2 items-center flex-wrap">
+        {highlightedCodeSections.length === 0 && (
+          <HeaderButtonWithText
+            text={
+              props.addingHighlightedCode ? "Adding Context" : "Add Context"
+            }
+            onClick={() => {
+              props.onToggleAddContext();
+            }}
+            inverted={props.addingHighlightedCode}
+          >
+            <Plus size="1.6em" />
+          </HeaderButtonWithText>
+        )}
         {highlightedCodeSections.length > 0 && (
           <>
             <HeaderButtonWithText
@@ -304,10 +329,9 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
           />
         ))}
 
-        <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 className="text-trueGray-400 ml-auto mr-4 text-xs text-right">
+          Highlight code to include as context. Currently open file included by
+          default. {highlightedCodeSections.length === 0 && ""}
         </span>
       </div>
       <ContextDropdown
diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
index 3ddac93c..72a653c5 100644
--- a/extension/react-app/src/components/HeaderButtonWithText.tsx
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -8,15 +8,17 @@ interface HeaderButtonWithTextProps {
   children: React.ReactNode;
   disabled?: boolean;
   inverted?: boolean;
+  active?: boolean;
 }
 
 const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
   const [hover, setHover] = useState(false);
+  const paddingLeft = (props.disabled ? (props.active ?  "3px" : "1px"): (hover ? "4px" : "1px"));
   return (
     <HeaderButton
       inverted={props.inverted}
       disabled={props.disabled}
-      style={{ padding: "1px", paddingLeft: hover ? "4px" : "1px" }}
+      style={{ padding: (props.active ?  "3px" : "1px"), paddingLeft, borderRadius: (props.active ?  "50%" : undefined) }}
       onMouseEnter={() => {
         if (!props.disabled) {
           setHover(true);
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index 2352c3ad..5a02c6b2 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -15,6 +15,8 @@ const Button = styled.button`
     background-color: white;
     color: black;
   }
+
+  cursor: pointer;
 `;
 
 interface PillButtonProps {
@@ -39,26 +41,13 @@ const PillButton = (props: PillButtonProps) => {
           props.onHover(false);
         }
       }}
+      onClick={() => {
+        if (props.onDelete) {
+          props.onDelete();
+        }
+      }}
     >
-      <div
-        style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: "4px" }}
-      >
-        <span
-          style={{
-            cursor: "pointer",
-            color: "red",
-            borderRight: "1px solid black",
-            paddingRight: "4px",
-          }}
-          onClick={() => {
-            props.onDelete?.();
-            props.onHover?.(false);
-          }}
-        >
-          <XMark style={{ padding: "0px" }} size="1.2em" strokeWidth="2px" />
-        </span>
-        <span>{props.title}</span>
-      </div>
+      {props.title}
     </Button>
   );
 };
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 35d34976..2aed2e72 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -10,9 +10,10 @@ import {
 import {
   ChevronDown,
   ChevronRight,
-  XMark,
   ArrowPath,
+  XMark,
 } from "@styled-icons/heroicons-outline";
+import { Stop } from "@styled-icons/heroicons-solid";
 import { HistoryNode } from "../../../schema/HistoryNode";
 import ReactMarkdown from "react-markdown";
 import HeaderButtonWithText from "./HeaderButtonWithText";
@@ -207,9 +208,14 @@ function StepContainer(props: StepContainerProps) {
                   e.stopPropagation();
                   props.onDelete();
                 }}
-                text="Delete"
+                text={props.historyNode.active ? "Stop" : "Delete"}
+                active={props.historyNode.active}
               >
-                <XMark size="1.6em" onClick={props.onDelete} />
+                {props.historyNode.active ? (
+                  <Stop size="1.2em" onClick={props.onDelete} />
+                ) : (
+                  <XMark size="1.6em" onClick={props.onDelete} />
+                )}
               </HeaderButtonWithText>
               {props.historyNode.observation?.error ? (
                 <HeaderButtonWithText
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index 44fdba38..28437d35 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -15,7 +15,7 @@ interface UserInputContainerProps {
 }
 
 const StyledDiv = styled.div`
-  background-color: rgb(50 50 50);
+  background-color: rgb(45 45 45);
   padding: 8px;
   padding-left: 16px;
   padding-right: 16px;
@@ -28,8 +28,8 @@ const StyledDiv = styled.div`
 
 const UserInputContainer = (props: UserInputContainerProps) => {
   return (
-    <StyledDiv hidden={props.historyNode.step.hide as any}>
-      {props.children}
+    <StyledDiv>
+      <b>{props.children}</b>
       <div style={{ marginLeft: "auto" }}>
         <HeaderButtonWithText
           onClick={(e) => {