Skip to content

Commit 1b12dc6

Browse files
ngafarngafar
authored
Merge pull request #1543 from mito-ds/feat/agent-mode-delete-steps
Agent Mode: Delete Steps
2 parents b9336ed + 58899ee commit 1b12dc6

File tree

8 files changed

+222
-125
lines changed

8 files changed

+222
-125
lines changed

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

+6-2
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,11 @@ export class ChatHistoryManager {
132132
return chatMessageMetadata
133133
}
134134

135+
removeMessageAtIndex(index: number): void {
136+
// Remove the message at the specified index
137+
this.displayOptimizedChatHistory.splice(index, 1);
138+
}
139+
135140
addAgentMessage(message: string, index?: number): IAgentPlanningMetadata {
136141

137142
const agentPlanningMetadata: IAgentPlanningMetadata = {
@@ -275,8 +280,7 @@ export class ChatHistoryManager {
275280
return
276281
}
277282

278-
const displayOptimizedChatHistory = this.getDisplayOptimizedHistory()
279-
return displayOptimizedChatHistory[lastAIMessagesIndex]
283+
return this.displayOptimizedChatHistory[lastAIMessagesIndex]
280284
}
281285
}
282286

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

+22-7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { PYTHON_CODE_BLOCK_START_WITHOUT_NEW_LINE, splitStringWithCodeBlocks } f
1010
import { JupyterFrontEnd } from '@jupyterlab/application';
1111
import { OperatingSystem } from '../../../utils/user';
1212
import PencilIcon from '../../../icons/Pencil';
13+
import GarbageIcon from '../../../icons/GarbageIcon';
1314
import ChatInput from './ChatInput';
1415
import { IContextManager } from '../../ContextManager/ContextManagerPlugin';
1516
import { CodeReviewStatus } from '../ChatTaskpane';
@@ -20,6 +21,7 @@ import CopyIcon from '../../../icons/CopyIcon';
2021
import copyToClipboard from '../../../utils/copyToClipboard';
2122
import TextButton from '../../../components/TextButton';
2223
import { IDisplayOptimizedChatHistory } from '../ChatHistoryManager';
24+
import '../../../../style/ChatMessage.css';
2325

2426
interface IChatMessageProps {
2527
message: OpenAI.Chat.ChatCompletionMessageParam
@@ -38,6 +40,7 @@ interface IChatMessageProps {
3840
acceptAICode: () => void
3941
rejectAICode: () => void
4042
onUpdateMessage: (messageIndex: number, newContent: string, messageType: ChatMessageType) => void
43+
onDeleteMessage: (messageIndex: number) => void
4144
contextManager?: IContextManager
4245
codeReviewStatus: CodeReviewStatus
4346
}
@@ -57,6 +60,7 @@ const ChatMessage: React.FC<IChatMessageProps> = ({
5760
acceptAICode,
5861
rejectAICode,
5962
onUpdateMessage,
63+
onDeleteMessage,
6064
contextManager,
6165
codeReviewStatus
6266
}): JSX.Element | null => {
@@ -205,13 +209,24 @@ const ChatMessage: React.FC<IChatMessageProps> = ({
205209
}
206210
})}
207211
{editable &&
208-
<button
209-
className="message-start-editing-button"
210-
onClick={handleEditClick}
211-
title="Edit message"
212-
>
213-
<PencilIcon />
214-
</button>
212+
<div className="message-action-buttons">
213+
<button
214+
className="message-start-editing-button"
215+
onClick={handleEditClick}
216+
title="Edit message"
217+
>
218+
<PencilIcon />
219+
</button>
220+
{messageType === 'openai message:agent:planning' &&
221+
<button
222+
className="message-delete-button"
223+
onClick={() => onDeleteMessage(messageIndex)}
224+
title="Delete message"
225+
>
226+
<GarbageIcon />
227+
</button>
228+
}
229+
</div>
215230
}
216231
</div>
217232
)

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

+12
Original file line numberDiff line numberDiff line change
@@ -343,6 +343,17 @@ const ChatTaskpane: React.FC<IChatTaskpaneProps> = ({
343343
}
344344
};
345345

346+
const handleDeleteMessage = (messageIndex: number) => {
347+
// Get a new chat history manager
348+
const newChatHistoryManager = getDuplicateChatHistoryManager()
349+
350+
// Remove the message at the specified index
351+
newChatHistoryManager.removeMessageAtIndex(messageIndex)
352+
353+
// Update the state with the new chat history
354+
setChatHistoryManager(newChatHistoryManager)
355+
}
356+
346357
const sendAgentPlanningMessage = async (message: string, messageIndex?: number): Promise<void> => {
347358
// Step 0: Reject the previous Ai generated code if they did not accept it
348359
rejectAICode()
@@ -906,6 +917,7 @@ const ChatTaskpane: React.FC<IChatTaskpaneProps> = ({
906917
acceptAICode={acceptAICode}
907918
rejectAICode={rejectAICode}
908919
onUpdateMessage={handleUpdateMessage}
920+
onDeleteMessage={handleDeleteMessage}
909921
contextManager={contextManager}
910922
codeReviewStatus={codeReviewStatus}
911923
/>

‎mito-ai/src/icons/GarbageIcon.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
3+
const GarbageIcon: React.FC = () => (
4+
<svg width="14" height="14" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
5+
<g fill='currentColor'>
6+
<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" />
7+
</g>
8+
</svg>
9+
);
10+
11+
export default GarbageIcon;

‎mito-ai/src/icons/Pencil.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22

33
const PencilIcon: React.FC = () => (
4-
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
4+
<svg width="14" height="14" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
55
<g fill='currentColor'>
6-
<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"/>
6+
<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" />
77
</g>
88
</svg>
99
);

‎mito-ai/style/ChatMessage.css

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
.message {
2+
position: relative;
3+
height: min-content;
4+
box-sizing: border-box;
5+
width: 100%;
6+
font-size: 14px;
7+
border-radius: 5px;
8+
padding-left: 10px;
9+
padding-right: 10px;
10+
}
11+
12+
.message:not(.chat-input) {
13+
margin-bottom: 20px;
14+
}
15+
16+
.message:hover .message-start-editing-button {
17+
opacity: 1 !important;
18+
}
19+
20+
.message-user {
21+
background-color: var(--chat-user-message-background-color);
22+
color: var(--chat-user-message-font-color);
23+
padding: 10px;
24+
}
25+
26+
.message-assistant-chat {
27+
color: var(--chat-assistant-message-font-color);
28+
}
29+
30+
.message-assistant-agent {
31+
background-color: var(--purple-300);
32+
padding: 10px;
33+
}
34+
35+
.message-assistant-agent p {
36+
color: var(--grey-900)!important;
37+
}
38+
39+
.chat-message-buttons {
40+
display: flex;
41+
flex-direction: row;
42+
gap: 8px;
43+
margin-top: 10px;
44+
margin-bottom: 10px;
45+
flex-wrap: wrap;
46+
}
47+
48+
.chat-taskpane-smart-debug-error-message {
49+
white-space: pre;
50+
font-family: monospace;
51+
margin: 0;
52+
overflow-x: auto;
53+
}
54+
55+
.message-text {
56+
align-items: center;
57+
}
58+
59+
/* Message Action Buttons Container */
60+
.message-action-buttons {
61+
position: absolute;
62+
bottom: 8px;
63+
right: 8px;
64+
display: flex;
65+
border-radius: 4px;
66+
overflow: hidden; /* Ensures inner buttons don't break the rounded corners */
67+
}
68+
69+
/* Common styles for action buttons */
70+
.message-action-buttons button,
71+
.message-start-editing-button {
72+
cursor: pointer;
73+
opacity: 0;
74+
transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
75+
background-color: var(--jp-layout-color3);
76+
border: none;
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
80+
color: var(--jp-content-font-color1);
81+
}
82+
83+
/* Action buttons in the group */
84+
.message-action-buttons button {
85+
width: 28px;
86+
height: 28px;
87+
padding: 0;
88+
border-radius: 0; /* Remove individual button radius */
89+
}
90+
91+
/* Add subtle separator between buttons */
92+
.message-action-buttons button:not(:last-child) {
93+
border-right: 1px solid var(--jp-border-color1);
94+
}
95+
96+
/* Remove the individual button radius styles since we're handling it at the container level */
97+
.message-action-buttons button:first-child,
98+
.message-action-buttons button:last-child {
99+
border-radius: 0;
100+
}
101+
102+
/* Standalone edit button */
103+
.message-start-editing-button {
104+
position: relative;
105+
padding: 4px;
106+
border-radius: 4px;
107+
}
108+
109+
/* SVG icon color */
110+
.message-action-buttons button svg {
111+
color: var(--jp-content-font-color1);
112+
}
113+
114+
/* Hover states */
115+
.message-action-buttons button:hover,
116+
.message-start-editing-button:hover {
117+
background-color: var(--jp-layout-color4);
118+
}
119+
120+
/* Show buttons on message hover */
121+
.message:hover .message-action-buttons button,
122+
.message:hover .message-start-editing-button {
123+
opacity: 1;
124+
}
125+
126+
.message-edit-buttons {
127+
display: flex;
128+
gap: 8px;
129+
padding: 5px;
130+
}
131+
132+
.message-edit-buttons button {
133+
padding: 4px 12px;
134+
border-radius: 4px;
135+
background-color: var(--jp-layout-color1);
136+
color: var(--jp-content-font-color1);
137+
border: 1px solid var(--jp-border-color1);
138+
cursor: pointer;
139+
}
140+
141+
.message-edit-buttons button:hover {
142+
background-color: var(--jp-layout-color2);
143+
}
144+
145+
.chat-message-alert {
146+
background-color: var(--purple-300);
147+
border-radius: 5px;
148+
padding: 10px;
149+
border: 1px solid var(--purple-500);
150+
}
151+
152+
.chat-message-alert a {
153+
color: var(--purple-700);
154+
text-decoration: underline;
155+
}

0 commit comments

Comments
 (0)