disable stuff while generated

Author: RomneyDa

gui/src/components/mainInput/InputToolbar.tsx

@@ -13,6 +13,7 @@ import {
 } 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,
@@ -49,15 +50,21 @@ const StyledDiv = styled.div<{ isHidden?: boolean }>`
   }
 `;
 
-const EnterButton = styled.button<{ isPrimary?: boolean }>`
+const EnterButton = styled.button<{
+  isPrimary?: boolean;
+  disabled?: 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 {
@@ -94,8 +101,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

@@ -223,10 +223,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";
@@ -45,7 +44,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";
@@ -116,9 +114,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,
   );
@@ -163,6 +159,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();
 
@@ -226,6 +227,7 @@ export function Chat() {
       streamResponse,
       isSingleRangeEditOrInsertion,
       codeToEdit,
+      toolCallState,
     ],
   );