Disable chat while tools generated

gui/src/components/mainInput/InputToolbar.tsx

@@ -9,9 +9,11 @@ import {
   vscButtonBackground,
   vscButtonForeground,
   vscForeground,
+  vscInputBackground,
 } from "..";
 import { useAppDispatch, useAppSelector } from "../../redux/hooks";
 import { selectUseActiveFile } from "../../redux/selectors";
+import { selectCurrentToolCall } from "../../redux/selectors/selectCurrentToolCall";
 import { selectDefaultModel } from "../../redux/slices/configSlice";
 import {
   selectHasCodeToEdit,
@@ -21,6 +23,7 @@ import { exitEditMode } from "../../redux/thunks";
 import { loadLastSession } from "../../redux/thunks/session";
 import {
   getAltKeyLabel,
+  getFontSize,
   getMetaKeyLabel,
   isMetaEquivalentKeyPressed,
 } from "../../util";
@@ -30,15 +33,35 @@ import ModeSelect from "../modelSelection/ModeSelect";
 import { useFontSize } from "../ui/font";
 import HoverItem from "./InputToolbar/bottom/HoverItem";
 
+const StyledDiv = styled.div<{ isHidden?: boolean }>`
+  padding-top: 4px;
+  justify-content: space-between;
+  gap: 1px;
+  background-color: ${vscInputBackground};
+  align-items: center;
+  font-size: ${getFontSize() - 2}px;
+  cursor: ${(props) => (props.isHidden ? "default" : "text")};
+  opacity: ${(props) => (props.isHidden ? 0 : 1)};
+  pointer-events: ${(props) => (props.isHidden ? "none" : "auto")};
+  user-select: none;
+
+  & > * {
+    flex: 0 0 auto;
+  }
+`;
+
 const EnterButton = styled.button<{ isPrimary?: boolean }>`
   all: unset;
   padding: 2px 4px;
   display: flex;
   align-items: center;
   background-color: ${(props) =>
-    props.isPrimary ? vscButtonBackground : lightGray + "33"};
+    !props.disabled && props.isPrimary
+      ? vscButtonBackground
+      : lightGray + "33"};
   border-radius: ${defaultBorderRadius};
-  color: ${(props) => (props.isPrimary ? vscButtonForeground : vscForeground)};
+  color: ${(props) =>
+    !props.disabled && props.isPrimary ? vscButtonForeground : vscForeground};
   cursor: pointer;
 
   :disabled {
@@ -75,8 +98,13 @@ function InputToolbar(props: InputToolbarProps) {
   const useActiveFile = useAppSelector(selectUseActiveFile);
   const isInEditMode = useAppSelector(selectIsInEditMode);
   const hasCodeToEdit = useAppSelector(selectHasCodeToEdit);
+  const toolCallState = useAppSelector(selectCurrentToolCall);
   const isEditModeAndNoCodeToEdit = isInEditMode && !hasCodeToEdit;
-  const isEnterDisabled = props.disabled || isEditModeAndNoCodeToEdit;
+
+  const isEnterDisabled =
+    props.disabled ||
+    isEditModeAndNoCodeToEdit ||
+    toolCallState?.status === "generated";
   const toolsSupported = defaultModel && modelSupportsTools(defaultModel);
 
   const supportsImages =

gui/src/components/mainInput/tiptap/TipTapEditor.tsx

@@ -231,10 +231,6 @@ function TipTapEditor(props: TipTapEditorProps) {
       }}
     >
       <div className="px-2.5 pb-1 pt-2">
-        {/* <TopInputToolbar
-          lumpOpen={props.lumpOpen}
-          setLumpOpen={props.setLumpOpen}
-        /> */}
         <EditorContent
           className={`scroll-container overflow-y-scroll ${props.isMainInput ? "max-h-[70vh]" : ""}`}
           spellCheck={false}

gui/src/pages/gui/Chat.tsx

@@ -5,13 +5,12 @@ import {
   ExclamationTriangleIcon,
 } from "@heroicons/react/24/outline";
 import { Editor, JSONContent } from "@tiptap/react";
-import { InputModifiers, RangeInFileWithContents, ToolCallState } from "core";
+import { InputModifiers, RangeInFileWithContents } from "core";
 import { streamResponse } from "core/llm/stream";
 import { renderChatMessage, stripImages } from "core/util/messageContent";
 import { usePostHog } from "posthog-js/react";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { useSelector } from "react-redux";
 import styled from "styled-components";
 import { Button, lightGray, vscBackground } from "../../components";
 import CodeToEditCard from "../../components/CodeToEditCard";
@@ -44,7 +43,6 @@ import {
   setDialogMessage,
   setShowDialog,
 } from "../../redux/slices/uiSlice";
-import { RootState } from "../../redux/store";
 import { cancelStream } from "../../redux/thunks/cancelStream";
 import { exitEditMode } from "../../redux/thunks/exitEditMode";
 import { loadLastSession } from "../../redux/thunks/session";
@@ -115,9 +113,7 @@ export function Chat() {
     (state) => state.config.config.ui?.showChatScrollbar,
   );
   const codeToEdit = useAppSelector((state) => state.session.codeToEdit);
-  const toolCallState = useSelector<RootState, ToolCallState | undefined>(
-    selectCurrentToolCall,
-  );
+  const toolCallState = useAppSelector(selectCurrentToolCall);
   const applyStates = useAppSelector(
     (state) => state.session.codeBlockApplyStates.states,
   );
@@ -162,6 +158,11 @@ export function Chat() {
       index?: number,
       editorToClearOnSend?: Editor,
     ) => {
+      if (toolCallState?.status === "generated") {
+        return console.error(
+          "Cannot submit message while awaiting tool confirmation",
+        );
+      }
       if (defaultModel?.provider === "free-trial") {
         const newCount = incrementFreeTrialCount();
 
@@ -225,6 +226,7 @@ export function Chat() {
       streamResponse,
       isSingleRangeEditOrInsertion,
       codeToEdit,
+      toolCallState,
     ],
   );