Agent Mode: Delete Steps

mito-ai/src/Extensions/AiChat/ChatHistoryManager.tsx

@@ -132,6 +132,11 @@ export class ChatHistoryManager {
         return chatMessageMetadata
     }
 
+    removeMessageAtIndex(index: number): void {
+        // Remove the message at the specified index
+        this.displayOptimizedChatHistory.splice(index, 1);
+    }
+
     addAgentMessage(message: string, index?: number): IAgentPlanningMetadata {
 
         const agentPlanningMetadata: IAgentPlanningMetadata = {
@@ -275,8 +280,7 @@ export class ChatHistoryManager {
             return
         }
 
-        const displayOptimizedChatHistory = this.getDisplayOptimizedHistory()
-        return displayOptimizedChatHistory[lastAIMessagesIndex]
+        return this.displayOptimizedChatHistory[lastAIMessagesIndex]
     }
 }
 

mito-ai/src/Extensions/AiChat/ChatMessage/ChatMessage.tsx

@@ -10,6 +10,7 @@ import { PYTHON_CODE_BLOCK_START_WITHOUT_NEW_LINE, splitStringWithCodeBlocks } f
 import { JupyterFrontEnd } from '@jupyterlab/application';
 import { OperatingSystem } from '../../../utils/user';
 import PencilIcon from '../../../icons/Pencil';
+import GarbageIcon from '../../../icons/GarbageIcon';
 import ChatInput from './ChatInput';
 import { IContextManager } from '../../ContextManager/ContextManagerPlugin';
 import { CodeReviewStatus } from '../ChatTaskpane';
@@ -38,6 +39,7 @@ interface IChatMessageProps {
     acceptAICode: () => void
     rejectAICode: () => void
     onUpdateMessage: (messageIndex: number, newContent: string, messageType: ChatMessageType) => void
+    onDeleteMessage?: (messageIndex: number) => void
     contextManager?: IContextManager
     codeReviewStatus: CodeReviewStatus
 }
@@ -57,6 +59,7 @@ const ChatMessage: React.FC<IChatMessageProps> = ({
     acceptAICode,
     rejectAICode,
     onUpdateMessage,
+    onDeleteMessage,
     contextManager,
     codeReviewStatus
 }): JSX.Element | null => {
@@ -205,13 +208,22 @@ const ChatMessage: React.FC<IChatMessageProps> = ({
                 }
             })}
             {editable && 
-                <button
-                    className="message-start-editing-button"
-                    onClick={handleEditClick}
-                    title="Edit message"
-                >
-                    <PencilIcon />
-                </button>
+                <div className="message-action-buttons">
+                    <button
+                        className="message-start-editing-button"
+                        onClick={handleEditClick}
+                        title="Edit message"
+                    >
+                        <PencilIcon />
+                    </button>
+                    <button
+                        className="message-delete-button"
+                        onClick={() => onDeleteMessage?.(messageIndex)}
+                        title="Delete message"
+                    >
+                        <GarbageIcon />
+                    </button>
+                </div>
             }
         </div>
     )

mito-ai/src/Extensions/AiChat/ChatTaskpane.tsx

@@ -342,6 +342,17 @@ const ChatTaskpane: React.FC<IChatTaskpaneProps> = ({
         }
     };
 
+    const handleDeleteMessage = (messageIndex: number) => {
+        // Get a new chat history manager
+        const newChatHistoryManager = getDuplicateChatHistoryManager()
+
+        // Remove the message at the specified index
+        newChatHistoryManager.removeMessageAtIndex(messageIndex)
+
+        // Update the state with the new chat history
+        setChatHistoryManager(newChatHistoryManager)
+    }
+
     const sendAgentPlanningMessage = async (message: string, messageIndex?: number): Promise<void> => {
         // Step 0: Reject the previous Ai generated code if they did not accept it
         rejectAICode()
@@ -885,6 +896,7 @@ const ChatTaskpane: React.FC<IChatTaskpaneProps> = ({
                             acceptAICode={acceptAICode}
                             rejectAICode={rejectAICode}
                             onUpdateMessage={handleUpdateMessage}
+                            onDeleteMessage={handleDeleteMessage}
                             contextManager={contextManager}
                             codeReviewStatus={codeReviewStatus}
                         />

mito-ai/src/icons/GarbageIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const GarbageIcon: React.FC = () => (
+    <svg width="14" height="14" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g fill='currentColor'>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.1364 4.53183V8.67853C9.1364 9.04282 8.98838 9.373 8.74865 9.61227C8.50935 9.85157 8.17916 10 7.81487 10H2.1849C1.82059 10 1.4904 9.85198 1.25112 9.61227C1.01181 9.37297 0.863369 9.0428 0.863369 8.67853V4.53183C0.863369 4.42452 0.950952 4.33652 1.05869 4.33652H8.94079C9.04852 4.33652 9.13611 4.4241 9.13611 4.53183H9.1364ZM1.32141 1.75772H2.80914V1.32147C2.80914 0.957177 2.95758 0.627004 3.19689 0.387732C3.4362 0.14846 3.76639 0 4.13068 0H5.8692C6.23351 0 6.5637 0.148433 6.80298 0.387732C7.04227 0.627031 7.19073 0.957203 7.19073 1.32147V1.75772H8.67847C9.04278 1.75772 9.37297 1.90615 9.61225 2.14504C9.85156 2.38434 10 2.71451 10 3.07878V3.33617C10 3.57259 9.80797 3.76461 9.57154 3.76461L0.428461 3.76502C0.192028 3.76502 0 3.573 0 3.33658V3.07919C0 2.71489 0.14844 2.38472 0.38775 2.14545C0.627059 1.90618 0.957247 1.75813 1.32153 1.75813L1.32141 1.75772ZM5.86918 0.857224H4.13065C4.00318 0.857224 3.88723 0.909443 3.80293 0.993728C3.71864 1.07802 3.66642 1.19397 3.66642 1.32143V1.75768H6.33382V1.32143C6.33382 1.19397 6.2816 1.07801 6.19731 0.993728C6.11302 0.909438 5.99706 0.857224 5.8696 0.857224H5.86918ZM3.67266 5.93643C3.67266 5.70001 3.48063 5.50799 3.2442 5.50799C3.00777 5.50799 2.81574 5.70001 2.81574 5.93643V8.13416C2.81574 8.37058 3.00777 8.5626 3.2442 8.5626C3.48105 8.5626 3.67266 8.37058 3.67266 8.13416V5.93643ZM5.42847 5.93643C5.42847 5.70001 5.23644 5.50799 5.00001 5.50799C4.76358 5.50799 4.57155 5.70001 4.57155 5.93643V8.13416C4.57155 8.37058 4.76358 8.5626 5.00001 8.5626C5.23685 8.5626 5.42847 8.37058 5.42847 8.13416V5.93643ZM7.18428 5.93643C7.18428 5.70001 6.99225 5.50799 6.75582 5.50799C6.51939 5.50799 6.32736 5.70001 6.32736 5.93643V8.13416C6.32736 8.37058 6.51897 8.5626 6.75582 8.5626C6.99266 8.5626 7.18428 8.37058 7.18428 8.13416V5.93643Z" fill="black" />
+        </g>
+    </svg>
+);
+
+export default GarbageIcon; 

mito-ai/src/icons/Pencil.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 const PencilIcon: React.FC = () => (
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="14" height="14" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
         <g fill='currentColor'>
-            <path d="M12.8507 1.88649L11.3947 0.430491C10.8207 -0.143497 9.81271 -0.143497 9.23871 0.430491L2.32271 7.34649C1.65069 8.01851 1.13271 8.85849 0.838711 9.76849L0.0407339 12.2045C-0.0572474 12.4985 0.0267432 12.8205 0.236746 13.0445C0.390734 13.1985 0.600734 13.2825 0.810734 13.2825C0.894725 13.2825 0.978711 13.2685 1.06276 13.2404L3.49876 12.4425C4.40876 12.1485 5.24876 11.6304 5.92076 10.9585L12.8368 4.04247C13.1307 3.74848 13.2847 3.37045 13.2847 2.9645C13.2847 2.55853 13.1447 2.18051 12.8507 1.88652L12.8507 1.88649ZM3.21871 11.5185L1.04871 12.2325L1.7627 10.0765C1.86068 9.7685 2.00068 9.47446 2.16871 9.18047L4.11471 11.1265C3.82072 11.2805 3.52669 11.4205 3.2187 11.5185H3.21871ZM5.24871 10.2725C5.15073 10.3705 5.03871 10.4685 4.92669 10.5665L2.72869 8.36848C2.82667 8.25646 2.91071 8.14449 3.02268 8.04646L8.51067 2.55846L10.7507 4.79846L5.24871 10.2725ZM12.1647 3.35649L11.4227 4.09851L9.18269 1.85851L9.92471 1.11649C10.0227 1.00447 10.1627 0.948515 10.3167 0.948515C10.4707 0.948515 10.6107 1.00452 10.7088 1.11649L12.1648 2.57249C12.2768 2.67047 12.3327 2.81047 12.3327 2.96451C12.3327 3.1185 12.2767 3.2585 12.1647 3.35649Z"/>
+            <path d="M9.88308 1.82456C9.68326 1.49798 9.43085 1.18192 9.1259 0.876387C8.8209 0.570854 8.5054 0.317998 8.18991 0.117862C7.88492 -0.0717913 7.48531 -0.0296413 7.22238 0.223215L1.15425 6.29155C1.12269 6.32317 1.10167 6.35476 1.08065 6.39691L0.0289843 9.38893C-0.0341088 9.55749 0.00796491 9.73662 0.134151 9.86302C0.218298 9.94732 0.333977 10 0.449651 10C0.502235 10 0.554818 9.98947 0.596894 9.97894L3.58363 8.92541C3.6257 8.91488 3.65723 8.88326 3.6888 8.85168L9.76744 2.78325C10.0304 2.51987 10.0724 2.13008 9.88311 1.82454L9.88308 1.82456ZM1.56439 6.80777C1.86938 6.98685 2.18488 7.2397 2.47934 7.53471C2.77382 7.82972 3.01568 8.14578 3.19449 8.45128L1.46976 9.06235C1.41717 8.957 1.34357 8.85164 1.25942 8.76734C1.16476 8.67252 1.0701 8.60931 0.964937 8.55664L1.56439 6.80777Z" fill="black" fill-opacity="0.87" />
         </g>
     </svg>
 );

mito-ai/style/ChatTaskpane.css

@@ -143,10 +143,59 @@
     align-items: center;
 }
 
-.message-start-editing-button {
+.message-action-buttons {
     position: absolute !important;
     bottom: 8px !important;
     right: 8px !important;
+    display: flex;
+}
+
+.message-action-buttons button {
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
+    background-color: var(--jp-layout-color3);
+    border: none;
+    padding: 0px;
+    border-radius: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--grey-900) !important;
+    width: 28px;
+    height: 28px;
+    position: relative;
+}
+
+.message-action-buttons button svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.message-action-buttons button:first-child {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.message-action-buttons button:last-child {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.message-action-buttons button:hover {
+    background-color: var(--jp-layout-color4);
+}
+
+.message:hover .message-action-buttons button {
+    opacity: 1 !important;
+}
+
+.message-start-editing-button {
+    position: relative !important;
+    bottom: unset !important;
+    right: unset !important;
     cursor: pointer;
     opacity: 0;
     transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;

tests/mitoai_ui_tests/agent.spec.ts

@@ -95,6 +95,20 @@ test.describe("Agent mode print hi", () => {
         expect(lastAgentMessageContent).toContain(newMessage);
     });
 
+    test.only("Delete message in agent's plan", async ({ page }) => {
+        // Get initial count of agent messages
+        const initialMessageCount = await page.locator('.message-assistant-agent').count();
+
+        // Get the last agent message and delete it
+        const lastAgentMessage = await page.locator('.message-assistant-agent').last();
+        await lastAgentMessage.locator('.message-delete-button').click();
+        await waitForIdle(page);
+
+        // Verify the message count has decreased by 1
+        const finalMessageCount = await page.locator('.message-assistant-agent').count();
+        expect(finalMessageCount).toBe(initialMessageCount - 1);
+    });
+
     test("Run agent's plan", async ({ page }) => {
         const numOfStepsInAgentsPlan = await page.locator('.message-assistant-agent').count();
         const startingNumOfChatMessages = await page.locator('.message-assistant-chat').count();