Disable send button while approval is pending (#1368)

e2e-tests/chat_input.spec.ts

+import { test } from "./helpers/test_helper";
+import { expect } from "@playwright/test";
+
+test("send button disabled during pending proposal", async ({ po }) => {
+  await po.setUp();
+
+  // Send a prompt that generates a proposal
+  await po.sendPrompt("Create a simple React component");
+
+  // Wait for proposal buttons to appear (ensuring proposal is rendered)
+  await expect(po.page.getByTestId("approve-proposal-button")).toBeVisible();
+
+  // Type something in the input to ensure it's not disabled due to empty input
+  await po.getChatInput().fill("test message");
+
+  // Check send button is disabled due to pending changes
+  const sendButton = po.page.getByRole("button", { name: "Send message" });
+  await expect(sendButton).toBeDisabled();
+
+  // Approve the proposal
+  await po.approveProposal();
+
+  // Check send button is enabled again
+  await expect(sendButton).toBeEnabled();
+});
+
+test("send button disabled during pending proposal - reject", async ({
+  po,
+}) => {
+  await po.setUp();
+
+  // Send a prompt that generates a proposal
+  await po.sendPrompt("Create a simple React component");
+
+  // Wait for proposal buttons to appear (ensuring proposal is rendered)
+  await expect(po.page.getByTestId("reject-proposal-button")).toBeVisible();
+
+  // Type something in the input to ensure it's not disabled due to empty input
+  await po.getChatInput().fill("test message");
+
+  // Check send button is disabled due to pending changes
+  const sendButton = po.page.getByRole("button", { name: "Send message" });
+  await expect(sendButton).toBeDisabled();
+
+  // Reject the proposal
+  await po.rejectProposal();
+
+  // Check send button is enabled again
+  await expect(sendButton).toBeEnabled();
+});

e2e-tests/mcp.spec.ts

@@ -43,6 +43,7 @@ test("mcp - call calculator", async ({ po }) => {
   // Make sure the tool call doesn't execute until consent is given
   await po.snapshotMessages();
   await alwaysAllowButton.click();
+  await po.page.getByRole("button", { name: "Approve" }).click();
 
   await po.sendPrompt("[dump]");
   await po.snapshotServerDump("all-messages");

src/components/chat/ChatInput.tsx

@@ -79,7 +79,7 @@ export function ChatInput({ chatId }: { chatId?: number }) {
   const [showError, setShowError] = useState(true);
   const [isApproving, setIsApproving] = useState(false); // State for approving
   const [isRejecting, setIsRejecting] = useState(false); // State for rejecting
-  const [, setMessages] = useAtom<Message[]>(chatMessagesAtom);
+  const [messages, setMessages] = useAtom<Message[]>(chatMessagesAtom);
   const setIsPreviewOpen = useSetAtom(isPreviewOpenAtom);
   const [showTokenBar, setShowTokenBar] = useAtom(showTokenBarAtom);
   const [selectedComponent, setSelectedComponent] = useAtom(
@@ -108,6 +108,14 @@ export function ChatInput({ chatId }: { chatId?: number }) {
   } = useProposal(chatId);
   const { proposal, messageId } = proposalResult ?? {};
 
+  const lastMessage = messages.at(-1);
+  const disableSendButton =
+    lastMessage?.role === "assistant" &&
+    !lastMessage.approvalState &&
+    !!proposal &&
+    proposal.type === "code-proposal" &&
+    messageId === lastMessage.id;
+
   useEffect(() => {
     if (error) {
       setShowError(true);
@@ -214,7 +222,6 @@ export function ChatInput({ chatId }: { chatId?: number }) {
       setError((err as Error)?.message || "An error occurred while rejecting");
     } finally {
       setIsRejecting(false);
-
       // Keep same as handleApprove
       refreshProposal();
       fetchChatMessages();
@@ -307,7 +314,10 @@ export function ChatInput({ chatId }: { chatId?: number }) {
             ) : (
               <button
                 onClick={handleSubmit}
-                disabled={!inputValue.trim() && attachments.length === 0}
+                disabled={
+                  (!inputValue.trim() && attachments.length === 0) ||
+                  disableSendButton
+                }
                 className="px-2 py-2 mt-1 mr-1 hover:bg-(--background-darkest) text-(--sidebar-accent-fg) rounded-lg disabled:opacity-50"
                 title="Send message"
               >