feat: new component - Modified Files Tracker

example/src/main.ts

@@ -1260,8 +1260,8 @@ here to see if it gets cut off properly as expected, with an ellipsis through cs
         },
         onChatPrompt: (tabId: string, prompt: ChatPrompt) => {
 
-
 
+
             Log(`New prompt on tab: <b>${tabId}</b><br/>
       prompt: <b>${prompt.prompt !== undefined && prompt.prompt !== '' ? prompt.prompt : '{command only}'}</b><br/>
       command: <b>${prompt.command ?? '{none}'}</b><br/>

src/components/__test__/modified-files-tracker.spec.ts

@@ -0,0 +1,174 @@
+import { ModifiedFilesTracker } from '../modified-files-tracker';
+import { ChatItem, ChatItemType } from '../../static';
+import { MynahUIGlobalEvents } from '../../helper/events';
+
+// Mock global events
+jest.mock('../../helper/events', () => ({
+  MynahUIGlobalEvents: {
+    getInstance: jest.fn(() => ({
+      dispatch: jest.fn()
+    }))
+  }
+}));
+
+describe('ModifiedFilesTracker', () => {
+  let mockDispatch: jest.Mock;
+
+  beforeEach(() => {
+    mockDispatch = jest.fn();
+    (MynahUIGlobalEvents.getInstance as jest.Mock).mockReturnValue({
+      dispatch: mockDispatch
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render basic modified files tracker', () => {
+    const tracker = new ModifiedFilesTracker({ tabId: 'test-tab' });
+    expect(tracker.render).toBeDefined();
+    expect(tracker.render.classList.contains('hidden')).toBe(true);
+  });
+
+  describe('addChatItem', () => {
+    it('should add chat item with file list', () => {
+      const tracker = new ModifiedFilesTracker({ tabId: 'test-tab' });
+      const chatItem: ChatItem = {
+        type: ChatItemType.ANSWER,
+        messageId: 'msg1',
+        header: {
+          fileList: {
+            filePaths: [ 'file1.ts' ],
+            deletedFiles: [],
+            actions: {},
+            details: {}
+          }
+        }
+      };
+
+      tracker.addChatItem(chatItem);
+      expect(tracker.render.classList.contains('hidden')).toBe(false);
+    });
+
+    it('should add chat item with buttons only', () => {
+      const tracker = new ModifiedFilesTracker({ tabId: 'test-tab' });
+      const chatItem: ChatItem = {
+        type: ChatItemType.ANSWER,
+        messageId: 'msg2',
+        buttons: [ { id: 'undo-all', text: 'Undo All' } ]
+      };
+
+      tracker.addChatItem(chatItem);
+      expect(tracker.render.classList.contains('hidden')).toBe(true);
+    });
+
+    it('should not add chat item without messageId', () => {
+      const tracker = new ModifiedFilesTracker({ tabId: 'test-tab' });
+      const chatItem: ChatItem = {
+        type: ChatItemType.ANSWER,
+        buttons: [ { id: 'undo-all', text: 'Undo All' } ]
+      };
+
+      tracker.addChatItem(chatItem);
+      expect(tracker.render.classList.contains('hidden')).toBe(true);
+    });
+  });
+
+  describe('undo-all button logic', () => {
+    it('should render undo-all button when files were rendered previously', () => {
+      const tracker = new ModifiedFilesTracker({ tabId: 'test-tab' });
+
+      // Add file list first
+      const fileItem: ChatItem = {
+        type: ChatItemType.ANSWER,
+        messageId: 'file-msg',
+        header: {
+          fileList: {
+            filePaths: [ 'file1.ts' ],
+            deletedFiles: [],
+            actions: {},
+            details: {}
+          }
+        }
+      };
+
+      // Add undo-all button
+      const undoAllItem: ChatItem = {
+        type: ChatItemType.ANSWER,
+        messageId: 'undo-msg',
+        buttons: [ { id: 'undo-all', text: 'Undo All' } ]
+      };
+
+      tracker.addChatItem(fileItem);
+      tracker.addChatItem(undoAllItem);
+
+      const undoContainer = tracker.render.querySelector('.mynah-modified-files-undo-all-container');
+      expect(undoContainer).toBeTruthy();
+    });
+
+    it('should not render undo-all button when no files were rendered', () => {
+      const tracker = new ModifiedFilesTracker({ tabId: 'test-tab' });
+
+      // Add only undo-all button without files
+      const undoAllItem: ChatItem = {
+        type: ChatItemType.ANSWER,
+        messageId: 'undo-msg',
+        buttons: [ { id: 'undo-all', text: 'Undo All' } ]
+      };
+
+      tracker.addChatItem(undoAllItem);
+
+      const undoContainer = tracker.render.querySelector('.mynah-modified-files-undo-all-container');
+      expect(undoContainer).toBeFalsy();
+    });
+  });
+
+  describe('removeChatItem', () => {
+    it('should remove chat item by messageId', () => {
+      const tracker = new ModifiedFilesTracker({ tabId: 'test-tab' });
+      const chatItem: ChatItem = {
+        type: ChatItemType.ANSWER,
+        messageId: 'msg1',
+        header: {
+          fileList: {
+            filePaths: [ 'file1.ts' ],
+            deletedFiles: [],
+            actions: {},
+            details: {}
+          }
+        }
+      };
+
+      tracker.addChatItem(chatItem);
+      expect(tracker.render.classList.contains('hidden')).toBe(false);
+
+      tracker.removeChatItem('msg1');
+      expect(tracker.render.classList.contains('hidden')).toBe(true);
+    });
+  });
+
+  describe('clear', () => {
+    it('should clear all chat items and hide tracker', () => {
+      const tracker = new ModifiedFilesTracker({ tabId: 'test-tab' });
+      const chatItem: ChatItem = {
+        type: ChatItemType.ANSWER,
+        messageId: 'msg1',
+        header: {
+          fileList: {
+            filePaths: [ 'file1.ts' ],
+            deletedFiles: [],
+            actions: {},
+            details: {}
+          }
+        }
+      };
+
+      tracker.addChatItem(chatItem);
+      expect(tracker.render.classList.contains('hidden')).toBe(false);
+
+      tracker.clear();
+      expect(tracker.render.classList.contains('hidden')).toBe(true);
+    });
+  });
+});

src/components/chat-item/chat-wrapper.ts

@@ -30,6 +30,7 @@ import { StyleLoader } from '../../helper/style-loader';
 import { Icon } from '../icon';
 import { cancelEvent, MynahUIGlobalEvents } from '../../helper/events';
 import { TopBarButtonOverlayProps } from './prompt-input/prompt-top-bar/top-bar-button';
+import { ModifiedFilesTracker } from '../modified-files-tracker';
 
 export const CONTAINER_GAP = 12;
 export interface ChatWrapperProps {
@@ -58,6 +59,7 @@ export class ChatWrapper {
   private readonly dragBlurOverlay: HTMLElement;
   private dragOverlayVisibility: boolean = true;
   private imageContextFeatureEnabled: boolean = false;
+  private readonly modifiedFilesTracker: ModifiedFilesTracker;
 
   constructor (props: ChatWrapperProps) {
     StyleLoader.getInstance().load('components/chat/_chat-wrapper.scss');
@@ -92,8 +94,14 @@ export class ChatWrapper {
     this.imageContextFeatureEnabled = contextCommands.some(group =>
       group.commands.some((cmd: QuickActionCommand) => cmd.command.toLowerCase() === 'image')
     );
+
+    this.modifiedFilesTracker = new ModifiedFilesTracker({
+      tabId: this.props.tabId
+    });
+
     MynahUITabsStore.getInstance().addListenerToDataStore(this.props.tabId, 'chatItems', (chatItems: ChatItem[]) => {
       const chatItemToInsert: ChatItem = chatItems[chatItems.length - 1];
+
       if (Object.keys(this.allRenderedChatItems).length === chatItems.length) {
         const lastItem = this.chatItemsContainer.children.item(Array.from(this.chatItemsContainer.children).length - 1);
         if (lastItem != null && chatItemToInsert != null) {
@@ -115,6 +123,8 @@ export class ChatWrapper {
         this.chatItemsContainer.clear(true);
         this.chatItemsContainer.insertChild('beforeend', this.getNewConversationGroupElement());
         this.allRenderedChatItems = {};
+        // clear modifiedFilesTracker component as well
+        this.modifiedFilesTracker.clear();
       }
     });
 
@@ -310,6 +320,7 @@ export class ChatWrapper {
           }
         }).render,
         this.promptStickyCard,
+        this.modifiedFilesTracker.render,
         this.promptInputElement,
         this.footerSpacer,
         this.promptInfo,
@@ -377,14 +388,27 @@ export class ChatWrapper {
   };
 
   private readonly insertChatItem = (chatItem: ChatItem): void => {
+    // Normal flow on initially opening ui requires the currentMessageId;
     this.removeEmptyCardsAndFollowups();
+
     const currentMessageId: string = (chatItem.messageId != null && chatItem.messageId !== '') ? chatItem.messageId : `TEMP_${generateUID()}`;
+
+    // Create complete chatItem with proper messageId
+    const completeChatItem = {
+      ...chatItem,
+      messageId: currentMessageId
+    };
+
+    // Check if forModifiedFilesTracker property is set in the chatItem
+    if (chatItem.forModifiedFilesTracker !== undefined) {
+      // Forward the complete chatItem with messageId to ModifiedFilesTracker
+      this.modifiedFilesTracker.addChatItem(completeChatItem);
+    }
+
+    // Normal flow for all other chat items
     const chatItemCard = new ChatItemCard({
       tabId: this.props.tabId,
-      chatItem: {
-        ...chatItem,
-        messageId: currentMessageId
-      }
+      chatItem: completeChatItem
     });
 
     // When a new card appears, we're cleaning the last streaming card vars, since it is not the last anymore
@@ -409,6 +433,8 @@ export class ChatWrapper {
     this.allRenderedChatItems[currentMessageId] = chatItemCard;
 
     if (chatItem.type === ChatItemType.PROMPT || chatItem.type === ChatItemType.SYSTEM_PROMPT) {
+      // Clear modified files tracker on new prompt
+      this.modifiedFilesTracker.clear();
       // Make sure we align to top when there is a new prompt.
       // Only if it is a PROMPT!
       // Check css application
@@ -493,6 +519,12 @@ export class ChatWrapper {
     if (this.allRenderedChatItems[messageId]?.render !== undefined) {
       this.allRenderedChatItems[messageId].updateCardStack(updateWith);
 
+      if (updateWith.forModifiedFilesTracker !== undefined) {
+        if (updateWith.forModifiedFilesTracker?.removeFile !== undefined && updateWith.forModifiedFilesTracker?.removeFile) {
+          this.modifiedFilesTracker.removeChatItem(messageId);
+        }
+      }
+
       // If the last streaming chat answer is the same with the messageId
       if (this.lastStreamingChatItemMessageId === messageId) {
         this.checkLastAnswerStreamChange(updateWith);

src/components/collapsible-content.ts

@@ -22,6 +22,7 @@ export class CollapsibleContent {
   private readonly props: Required<CollapsibleContentProps>;
   private readonly uid: string;
   private icon: ExtendedHTMLElement;
+  private readonly titleTextElement: ExtendedHTMLElement;
   constructor (props: CollapsibleContentProps) {
     StyleLoader.getInstance().load('components/_collapsible-content.scss');
     this.uid = generateUID();
@@ -71,11 +72,11 @@ export class CollapsibleContent {
               classNames: [ 'mynah-collapsible-content-label-title-wrapper' ],
               children: [
                 this.icon,
-                {
+                this.titleTextElement = DomBuilder.getInstance().build({
                   type: 'span',
                   classNames: [ 'mynah-collapsible-content-label-title-text' ],
                   children: [ this.props.title ]
-                }
+                })
               ]
             },
             {
@@ -88,4 +89,8 @@ export class CollapsibleContent {
       ],
     });
   }
+
+  public updateTitle (newTitle: string): void {
+    this.titleTextElement.update({ children: [ newTitle ] });
+  }
 }