fix: :bug: a handful of bug fixes

keyboard interactions in textarea, multiple file highlighting, zombie process

2 files changed, 39 insertions, 16 deletions

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 4e564000..b189e442 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -137,7 +137,9 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
   const searchClient = new MeiliSearch({ host: "http://127.0.0.1:7700" });
   const client = useContext(GUIClientContext);
   const dispatch = useDispatch();
-  const workspacePaths = useSelector((state: RootStore) => state.config.workspacePaths);
+  const workspacePaths = useSelector(
+    (state: RootStore) => state.config.workspacePaths
+  );
 
   const [history, setHistory] = React.useState<string[]>([]);
   // The position of the current command you are typing now, so the one that will be appended to history once you press enter
@@ -184,10 +186,12 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
           setCurrentlyInContextQuery(true);
           const providerAndQuery = segs[segs.length - 1] || "";
           // Only return context items from the current workspace - the index is currently shared between all sessions
-          const workspaceFilter = 
-            workspacePaths && workspacePaths.length > 0 
-            ? `workspace_dir IN [ ${workspacePaths.map((path) => `"${path}"`).join(", ")} ]` 
-            : undefined;
+          const workspaceFilter =
+            workspacePaths && workspacePaths.length > 0
+              ? `workspace_dir IN [ ${workspacePaths
+                  .map((path) => `"${path}"`)
+                  .join(", ")} ]`
+              : undefined;
           searchClient
             .index(SEARCH_INDEX_NAME)
             .search(providerAndQuery, {
@@ -418,21 +422,30 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 // Prevent Downshift's default 'Enter' behavior.
                 (event.nativeEvent as any).preventDownshiftDefault = true;
 
-                if (props.onEnter) {props.onEnter(event);}
+                if (props.onEnter) {
+                  props.onEnter(event);
+                }
                 setCurrentlyInContextQuery(false);
               } else if (event.key === "Tab" && items.length > 0) {
                 downshiftProps.setInputValue(items[0].name);
                 event.preventDefault();
               } else if (event.key === "Tab") {
                 (event.nativeEvent as any).preventDownshiftDefault = true;
-              } else if (
-                (event.key === "ArrowUp" || event.key === "ArrowDown") &&
-                event.currentTarget.value.split("\n").length > 1
-              ) {
-                (event.nativeEvent as any).preventDownshiftDefault = true;
               } else if (event.key === "ArrowUp") {
-                if (positionInHistory == 0) {return;}
-                else if (
+                // Only go back in history if selectionStart is 0
+                // (i.e. the cursor is at the beginning of the input)
+                if (
+                  positionInHistory == 0 ||
+                  event.currentTarget.selectionStart !== 0
+                ) {
+                  console.log(
+                    "returning",
+                    positionInHistory,
+                    event.currentTarget.selectionStart
+                  );
+                  (event.nativeEvent as any).preventDownshiftDefault = true;
+                  return;
+                } else if (
                   positionInHistory == history.length &&
                   (history.length === 0 ||
                     history[history.length - 1] !== event.currentTarget.value)
@@ -443,6 +456,15 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 setPositionInHistory((prev) => prev - 1);
                 setCurrentlyInContextQuery(false);
               } else if (event.key === "ArrowDown") {
+                if (
+                  positionInHistory === history.length ||
+                  event.currentTarget.selectionStart !==
+                    event.currentTarget.value.length
+                ) {
+                  (event.nativeEvent as any).preventDownshiftDefault = true;
+                  return;
+                }
+
                 if (positionInHistory < history.length) {
                   downshiftProps.setInputValue(history[positionInHistory + 1]);
                 }
@@ -454,6 +476,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 setCurrentlyInContextQuery(false);
                 if (downshiftProps.isOpen && items.length > 0) {
                   downshiftProps.closeMenu();
+                  (event.nativeEvent as any).preventDownshiftDefault = true;
                 } else {
                   (event.nativeEvent as any).preventDownshiftDefault = true;
                   // Remove focus from the input
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index 0dcd43eb..1ffdeeed 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -106,7 +106,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
 
   &:focus {
     outline: none;
-    border-color: red;
+    border-color: ${vscForeground};
     border-width: 1px;
     border-style: solid;
   }
@@ -185,13 +185,13 @@ const PillButton = (props: PillButtonProps) => {
             <GridDiv
               style={{
                 gridTemplateColumns:
-                  props.item.editable && props.addingHighlightedCode
+                  props.item.editable && props.areMultipleItems
                     ? "1fr 1fr"
                     : "1fr",
                 backgroundColor: vscBackground,
               }}
             >
-              {props.item.editable && props.addingHighlightedCode && (
+              {props.item.editable && props.areMultipleItems && (
                 <ButtonDiv
                   data-tooltip-id={`edit-${props.index}`}
                   backgroundColor={"#8800aa55"}