refactor toggle div

.github/workflows/pr_checks.yaml

@@ -4,12 +4,10 @@ on:
   pull_request:
     branches:
       - main
-      - staging
 
   push:
     branches:
       - main
-      - staging
 
 jobs:
   install-root:

core/index.d.ts

@@ -966,7 +966,10 @@ export interface ToolExtras {
   fetch: FetchFunction;
   tool: Tool;
   toolCallId?: string;
-  onPartialOutput?: (params: { toolCallId: string, contextItems: ContextItem[] }) => void;
+  onPartialOutput?: (params: {
+    toolCallId: string;
+    contextItems: ContextItem[];
+  }) => void;
 }
 
 export interface Tool {
@@ -983,6 +986,7 @@ export interface Tool {
   isCurrently?: string;
   hasAlready?: string;
   readonly: boolean;
+  isInstant?: boolean;
   uri?: string;
   faviconUrl?: string;
   group: string;

core/tools/definitions/createNewFile.ts

@@ -9,6 +9,7 @@ export const createNewFileTool: Tool = {
   hasAlready: "created a new file at {{{ filepath }}}",
   group: BUILT_IN_GROUP_NAME,
   readonly: false,
+  isInstant: true,
   function: {
     name: BuiltInToolNames.CreateNewFile,
     description:

core/tools/definitions/createRuleBlock.ts

@@ -8,6 +8,7 @@ export const createRuleBlock: Tool = {
   isCurrently: 'creating a rule block for "{{{ rule_name }}}"',
   hasAlready: 'created a rule block for "{{{ rule_name }}}"',
   readonly: false,
+  isInstant: true,
   group: BUILT_IN_GROUP_NAME,
   function: {
     name: BuiltInToolNames.CreateRuleBlock,

core/tools/definitions/globSearch.ts

@@ -8,6 +8,7 @@ export const globSearchTool: Tool = {
   isCurrently: 'finding file matches for "{{{ pattern }}}"',
   hasAlready: 'retreived file matches for "{{{ pattern }}}"',
   readonly: true,
+  isInstant: true,
   group: BUILT_IN_GROUP_NAME,
   function: {
     name: BuiltInToolNames.FileGlobSearch,

core/tools/definitions/grepSearch.ts

@@ -8,6 +8,7 @@ export const grepSearchTool: Tool = {
   isCurrently: 'getting search results for "{{{ query }}}"',
   hasAlready: 'retrieved search results for "{{{ query }}}"',
   readonly: true,
+  isInstant: true,
   group: BUILT_IN_GROUP_NAME,
   function: {
     name: BuiltInToolNames.GrepSearch,

core/tools/definitions/lsTool.ts

@@ -9,6 +9,7 @@ export const lsTool: Tool = {
   isCurrently: "listing files and folders in {{{ dirPath }}}",
   hasAlready: "listed files and folders in {{{ dirPath }}}",
   readonly: true,
+  isInstant: true,
   group: BUILT_IN_GROUP_NAME,
   function: {
     name: BuiltInToolNames.LSTool,

core/tools/definitions/readCurrentlyOpenFile.ts

@@ -8,6 +8,7 @@ export const readCurrentlyOpenFileTool: Tool = {
   isCurrently: "reading the current file",
   hasAlready: "viewed the current file",
   readonly: true,
+  isInstant: true,
   group: BUILT_IN_GROUP_NAME,
   function: {
     name: BuiltInToolNames.ReadCurrentlyOpenFile,

core/tools/definitions/readFile.ts

@@ -8,6 +8,7 @@ export const readFileTool: Tool = {
   isCurrently: "reading {{{ filepath }}}",
   hasAlready: "viewed {{{ filepath }}}",
   readonly: true,
+  isInstant: true,
   group: BUILT_IN_GROUP_NAME,
   function: {
     name: BuiltInToolNames.ReadFile,

core/tools/definitions/viewDiff.ts

@@ -9,6 +9,7 @@ export const viewDiffTool: Tool = {
   isCurrently: "getting the git diff",
   hasAlready: "viewed the git diff",
   readonly: true,
+  isInstant: true,
   group: BUILT_IN_GROUP_NAME,
   function: {
     name: BuiltInToolNames.ViewDiff,

core/tools/definitions/viewRepoMap.ts

@@ -9,6 +9,7 @@ export const viewRepoMapTool: Tool = {
   isCurrently: "getting the repository map",
   hasAlready: "viewed the repository map",
   readonly: true,
+  isInstant: true,
   group: BUILT_IN_GROUP_NAME,
   function: {
     name: BuiltInToolNames.ViewRepoMap,

core/tools/definitions/viewSubdirectory.ts

@@ -9,6 +9,7 @@ export const viewSubdirectoryTool: Tool = {
   hasAlready: 'viewed a map of "{{{ directory_path }}}"',
   readonly: true,
   group: BUILT_IN_GROUP_NAME,
+  isInstant: true,
   function: {
     name: BuiltInToolNames.ViewSubdirectory,
     description: "View the contents of a subdirectory",

extensions/vscode/e2e/selectors/GUI.selectors.ts

@@ -46,10 +46,7 @@ export class GUISelectors {
   }
 
   public static getToolCallStatusMessage(view: WebView) {
-    return SelectorUtils.getElementByDataTestId(
-      view,
-      "tool-call-status-message",
-    );
+    return SelectorUtils.getElementByDataTestId(view, "toggle-div-title");
   }
 
   public static getToolButton(view: WebView) {

gui/src/components/ToggleDiv.tsx

@@ -0,0 +1,66 @@
+import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import { ComponentType, useState } from "react";
+import { lightGray, vscBackground } from ".";
+
+interface ToggleProps {
+  children: React.ReactNode;
+  title: React.ReactNode;
+  icon?: ComponentType<React.SVGProps<SVGSVGElement>>;
+}
+
+function ToggleDiv({ children, title, icon: Icon }: ToggleProps) {
+  const [open, setOpen] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      className={`pl-2 pt-2`}
+      style={{
+        backgroundColor: vscBackground,
+      }}
+    >
+      <div
+        className="flex cursor-pointer items-center justify-start text-xs text-gray-300"
+        onClick={() => setOpen((prev) => !prev)}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        data-testid="context-items-peek"
+      >
+        <div className="relative mr-1 h-4 w-4">
+          {Icon && !isHovered && !open ? (
+            <Icon className={`absolute h-4 w-4 text-[${lightGray}]`} />
+          ) : (
+            <>
+              <ChevronRightIcon
+                className={`absolute h-4 w-4 transition-all duration-200 ease-in-out text-[${lightGray}] ${
+                  open ? "rotate-90 opacity-0" : "rotate-0 opacity-100"
+                }`}
+              />
+              <ChevronDownIcon
+                className={`absolute h-4 w-4 transition-all duration-200 ease-in-out text-[${lightGray}] ${
+                  open ? "rotate-0 opacity-100" : "-rotate-90 opacity-0"
+                }`}
+              />
+            </>
+          )}
+        </div>
+        <span
+          className="ml-1 text-xs text-gray-400 transition-colors duration-200"
+          data-testid="toggle-div-title"
+        >
+          {title}
+        </span>
+      </div>
+
+      <div
+        className={`mt-2 overflow-y-auto transition-all duration-300 ease-in-out ${
+          open ? "max-h-[50vh] opacity-100" : "max-h-0 opacity-0"
+        }`}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default ToggleDiv;

gui/src/components/mainInput/InputToolbar.tsx

@@ -3,14 +3,7 @@ import { InputModifiers } from "core";
 import { modelSupportsImages, modelSupportsTools } from "core/llm/autodetect";
 import { useRef } from "react";
 import styled from "styled-components";
-import {
-  defaultBorderRadius,
-  lightGray,
-  vscButtonBackground,
-  vscButtonForeground,
-  vscForeground,
-  vscInputBackground,
-} from "..";
+import { vscInputBackground } from "..";
 import { useAppDispatch, useAppSelector } from "../../redux/hooks";
 import { selectUseActiveFile } from "../../redux/selectors";
 import { selectCurrentToolCall } from "../../redux/selectors/selectCurrentToolCall";
@@ -31,6 +24,7 @@ import { ToolTip } from "../gui/Tooltip";
 import ModelSelect from "../modelSelection/ModelSelect";
 import ModeSelect from "../modelSelection/ModeSelect";
 import { useFontSize } from "../ui/font";
+import { EnterButton } from "./InputToolbar/EnterButton";
 import HoverItem from "./InputToolbar/HoverItem";
 
 const StyledDiv = styled.div<{ isHidden?: boolean }>`
@@ -50,25 +44,6 @@ const StyledDiv = styled.div<{ isHidden?: boolean }>`
   }
 `;
 
-const EnterButton = styled.button<{ isPrimary?: boolean }>`
-  all: unset;
-  padding: 2px 4px;
-  display: flex;
-  align-items: center;
-  background-color: ${(props) =>
-    !props.disabled && props.isPrimary
-      ? vscButtonBackground
-      : lightGray + "33"};
-  border-radius: ${defaultBorderRadius};
-  color: ${(props) =>
-    !props.disabled && props.isPrimary ? vscButtonForeground : vscForeground};
-  cursor: pointer;
-
-  :disabled {
-    cursor: wait;
-  }
-`;
-
 export interface ToolbarOptions {
   hideUseCodebase?: boolean;
   hideImageUpload?: boolean;

gui/src/components/mainInput/InputToolbar/EnterButton.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import {
+  defaultBorderRadius,
+  lightGray,
+  vscButtonBackground,
+  vscButtonForeground,
+  vscForeground,
+} from "../..";
+import { fontSize } from "../../../util";
+
+export const EnterButton = styled.button<{ isPrimary?: boolean }>`
+  all: unset;
+  font-size: ${fontSize(-3)};
+  padding: 2px 4px;
+  display: flex;
+  align-items: center;
+  background-color: ${(props) =>
+    !props.disabled && props.isPrimary
+      ? vscButtonBackground
+      : lightGray + "33"};
+  border-radius: ${defaultBorderRadius};
+  color: ${(props) =>
+    !props.disabled && props.isPrimary ? vscButtonForeground : vscForeground};
+  cursor: pointer;
+
+  :disabled {
+    cursor: wait;
+  }
+`;

gui/src/components/mainInput/Lump/LumpToolbar.tsx

@@ -1,10 +1,15 @@
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
+import { useSelector } from "react-redux";
 import styled from "styled-components";
 import { AnimatedEllipsis } from "../..";
 import { IdeMessengerContext } from "../../../context/IdeMessenger";
 import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import { selectCurrentToolCall } from "../../../redux/selectors/selectCurrentToolCall";
+import { callTool } from "../../../redux/thunks/callTool";
 import { cancelStream } from "../../../redux/thunks/cancelStream";
+import { cancelTool } from "../../../redux/thunks/cancelTool";
 import { getFontSize, getMetaKeyLabel } from "../../../util";
+import { EnterButton } from "../InputToolbar/EnterButton";
 import { BlockSettingsTopToolbar } from "./BlockSettingsTopToolbar";
 
 const Container = styled.div`
@@ -36,6 +41,31 @@ export function LumpToolbar() {
   const ttsActive = useAppSelector((state) => state.ui.ttsActive);
   const isStreaming = useAppSelector((state) => state.session.isStreaming);
 
+  const toolCallState = useSelector(selectCurrentToolCall);
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (toolCallState?.status === "generated") {
+      const metaKey = event.metaKey || event.ctrlKey;
+
+      if (metaKey && event.key === "Enter") {
+        event.preventDefault();
+        event.stopPropagation();
+        dispatch(callTool());
+      } else if (metaKey && event.key === "Backspace") {
+        event.preventDefault();
+        event.stopPropagation();
+        dispatch(cancelTool());
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [toolCallState]);
+
   if (ttsActive) {
     return (
       <Container>
@@ -68,5 +98,31 @@ export function LumpToolbar() {
     );
   }
 
+  if (toolCallState?.status === "generated") {
+    return (
+      <Container>
+        <GeneratingIndicator />
+
+        <div className="flex gap-2 pb-0.5">
+          <StopButton
+            className="text-gray-400"
+            onClick={() => dispatch(cancelTool())}
+            data-testid="reject-tool-call-button"
+          >
+            {getMetaKeyLabel()} ⌫ Cancel
+          </StopButton>
+          <EnterButton
+            isPrimary={true}
+            className="text-gray-400"
+            onClick={() => dispatch(callTool())}
+            data-testid="accept-tool-call-button"
+          >
+            {getMetaKeyLabel()} ⏎ Continue
+          </EnterButton>
+        </div>
+      </Container>
+    );
+  }
+
   return <BlockSettingsTopToolbar />;
 }