fix: continue to use resumed session after confirmation is cancelled (#1548)

ui/desktop/src/components/ChatView.tsx

@@ -29,6 +29,9 @@ import {
 export interface ChatType {
   id: number;
   title: string;
+  // messages up to this index are presumed to be "history" from a resumed session, this is used to track older tool confirmation requests
+  // anything before this index should not render any buttons, but anything after should
+  messageHistoryIndex: number;
   messages: Message[];
 }
 
@@ -76,6 +79,7 @@ export default function ChatView({
         return {
           id: Date.now(),
           title: resumedSession.metadata?.description || `ID: ${resumedSession.session_id}`,
+          messageHistoryIndex: convertedMessages.length,
           messages: convertedMessages,
         };
       } catch (e) {
@@ -98,6 +102,7 @@ export default function ChatView({
       id: Date.now(),
       title: 'Chat 1',
       messages: [],
+      messageHistoryIndex: 0,
     };
   });
   const [messageMetadata, setMessageMetadata] = useState<Record<string, string[]>>({});
@@ -319,10 +324,15 @@ export default function ChatView({
                   <UserMessage message={message} />
                 ) : (
                   <GooseMessage
+                    messageHistoryIndex={chat?.messageHistoryIndex}
                     message={message}
                     messages={messages}
                     metadata={messageMetadata[message.id || '']}
                     append={(text) => append(createUserMessage(text))}
+                    appendMessage={(newMessage) => {
+                      const updatedMessages = [...messages, newMessage];
+                      setMessages(updatedMessages);
+                    }}
                   />
                 )}
               </div>

ui/desktop/src/components/GooseMessage.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import LinkPreview from './LinkPreview';
 import GooseResponseForm from './GooseResponseForm';
 import { extractUrls } from '../utils/urlUtils';
@@ -10,18 +10,28 @@ import {
   getToolRequests,
   getToolResponses,
   getToolConfirmationContent,
+  createToolErrorResponseMessage,
 } from '../types/message';
 import ToolCallConfirmation from './ToolCallConfirmation';
 import MessageCopyLink from './MessageCopyLink';
 
 interface GooseMessageProps {
+  messageHistoryIndex: number;
   message: Message;
   messages: Message[];
   metadata?: string[];
   append: (value: string) => void;
+  appendMessage: (message: Message) => void;
 }
 
-export default function GooseMessage({ message, metadata, messages, append }: GooseMessageProps) {
+export default function GooseMessage({
+  messageHistoryIndex,
+  message,
+  metadata,
+  messages,
+  append,
+  appendMessage,
+}: GooseMessageProps) {
   const contentRef = useRef<HTMLDivElement>(null);
 
   // Extract text content from the message
@@ -64,6 +74,16 @@ export default function GooseMessage({ message, metadata, messages, append }: Go
     return responseMap;
   }, [messages, messageIndex, toolRequests]);
 
+  useEffect(() => {
+    // If the message is the last message in the resumed session and has tool confirmation, it means the tool confirmation
+    // is broken or cancelled, to contonue use the session, we need to append a tool response to avoid mismatch tool result error.
+    if (messageIndex == messageHistoryIndex - 1 && hasToolConfirmation) {
+      appendMessage(
+        createToolErrorResponseMessage(toolConfirmationContent.id, 'The tool call is cancelled.')
+      );
+    }
+  }, []);
+
   return (
     <div className="goose-message flex w-[90%] justify-start opacity-0 animate-[appear_150ms_ease-in_forwards]">
       <div className="flex flex-col w-full">
@@ -86,17 +106,15 @@ export default function GooseMessage({ message, metadata, messages, append }: Go
           </div>
         )}
 
-        {hasToolConfirmation && (
-          <ToolCallConfirmation
-            toolConfirmationId={toolConfirmationContent.id}
-            toolName={toolConfirmationContent.toolName}
-          />
-        )}
-
         {toolRequests.length > 0 && (
           <div className="goose-message-tool bg-bgApp border border-borderSubtle dark:border-gray-700 rounded-b-2xl px-4 pt-4 pb-2 mt-1">
             {toolRequests.map((toolRequest) => (
               <ToolCallWithResponse
+                // If the message is resumed and not matched tool response, it means the tool is broken or cancelled.
+                isCancelledMessage={
+                  messageIndex < messageHistoryIndex &&
+                  toolResponsesMap.get(toolRequest.id) == undefined
+                }
                 key={toolRequest.id}
                 toolRequest={toolRequest}
                 toolResponse={toolResponsesMap.get(toolRequest.id)}
@@ -104,6 +122,15 @@ export default function GooseMessage({ message, metadata, messages, append }: Go
             ))}
           </div>
         )}
+
+        {hasToolConfirmation && (
+          <ToolCallConfirmation
+            isCancelledMessage={messageIndex == messageHistoryIndex - 1}
+            isClicked={messageIndex < messageHistoryIndex - 1}
+            toolConfirmationId={toolConfirmationContent.id}
+            toolName={toolConfirmationContent.toolName}
+          />
+        )}
       </div>
 
       {/* TODO(alexhancock): Re-enable link previews once styled well again */}

ui/desktop/src/components/ToolCallConfirmation.tsx

@@ -2,9 +2,14 @@ import React, { useState } from 'react';
 import { ConfirmToolRequest } from '../utils/toolConfirm';
 import { snakeToTitleCase } from '../utils';
 
-export default function ToolConfirmation({ toolConfirmationId, toolName }) {
+export default function ToolConfirmation({
-  const [clicked, setClicked] = useState(false);
+  isCancelledMessage,
-  const [status, setStatus] = useState('');
+  isClicked,
+  toolConfirmationId,
+  toolName,
+}) {
+  const [clicked, setClicked] = useState(isClicked);
+  const [status, setStatus] = useState('unknown');
 
   const handleButtonClick = (confirmed) => {
     setClicked(true);
@@ -12,7 +17,11 @@ export default function ToolConfirmation({ toolConfirmationId, toolName }) {
     ConfirmToolRequest(toolConfirmationId, confirmed);
   };
 
-  return (
+  return isCancelledMessage ? (
+    <div className="goose-message-content bg-bgSubtle rounded-2xl px-4 py-2 text-textStandard">
+      Tool call confirmation is cancelled.
+    </div>
+  ) : (
     <>
       <div className="goose-message-content bg-bgSubtle rounded-2xl px-4 py-2 rounded-b-none text-textStandard">
         Goose would like to call the above tool. Allow?
@@ -45,7 +54,9 @@ export default function ToolConfirmation({ toolConfirmationId, toolName }) {
               </svg>
             )}
             <span className="ml-2 text-textStandard">
-              {snakeToTitleCase(toolName.substring(toolName.lastIndexOf('__') + 2))} is {status}
+              {isClicked
+                ? 'Tool confirmation is not available'
+                : `${snakeToTitleCase(toolName.substring(toolName.lastIndexOf('__') + 2))} is ${status}`}
             </span>
           </div>
         </div>

ui/desktop/src/components/ToolCallWithResponse.tsx

@@ -9,11 +9,13 @@ import { Content, ToolRequestMessageContent, ToolResponseMessageContent } from '
 import { snakeToTitleCase } from '../utils';
 
 interface ToolCallWithResponseProps {
+  isCancelledMessage: boolean;
   toolRequest: ToolRequestMessageContent;
   toolResponse?: ToolResponseMessageContent;
 }
 
 export default function ToolCallWithResponse({
+  isCancelledMessage,
   toolRequest,
   toolResponse,
 }: ToolCallWithResponseProps) {
@@ -27,7 +29,8 @@ export default function ToolCallWithResponse({
     <div className="w-full">
       <Card className="">
         <ToolCallView toolCall={toolCall} />
-        {toolResponse ? (
+        {!isCancelledMessage ? (
+          toolResponse ? (
             <ToolResultView
               result={
                 toolResponse.toolResult.status === 'success'
@@ -37,7 +40,8 @@ export default function ToolCallWithResponse({
             />
           ) : (
             <LoadingPlaceholder />
-        )}
+          )
+        ) : undefined}
       </Card>
     </div>
   );

ui/desktop/src/components/sessions/SessionHistoryView.tsx

@@ -166,6 +166,11 @@ const SessionHistoryView: React.FC<SessionHistoryViewProps> = ({
                             <div className="goose-message-tool bg-bgApp border border-borderSubtle dark:border-gray-700 rounded-b-2xl px-4 pt-4 pb-2 mt-1">
                               {toolRequests.map((toolRequest) => (
                                 <ToolCallWithResponse
+                                  // In the session history page, if no tool response found for given request, it means the tool call
+                                  // is broken or cancelled.
+                                  isCancelledMessage={
+                                    toolResponsesMap.get(toolRequest.id) == undefined
+                                  }
                                   key={toolRequest.id}
                                   toolRequest={toolRequest}
                                   toolResponse={toolResponsesMap.get(toolRequest.id)}