highlighted code improvements

1 files changed, 23 insertions, 4 deletions

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 3e1f3e16..97f5b57e 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;
@@ -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) => {
@@ -249,6 +256,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
@@ -305,9 +325,8 @@ 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."}
+          Highlight code to include as context. Currently open file included by
+          default. {highlightedCodeSections.length === 0 && ""}
         </span>
       </div>
       <ContextDropdown