feat: improvements to file tree

example/dev.js

@@ -1,2 +1,12 @@
-import open from 'open';
-await open('./dist/index.html');
+// Dynamic import handling
+const openFile = async () => {
+  try {
+      // Use dynamic import to load the ES module
+      const open = (await import('open')).default;
+      await open('./dist/index.html');
+  } catch (err) {
+      console.error('Error opening file:', err);
+  }
+};
+
+openFile();

example/src/samples/sample-data.ts

@@ -212,8 +212,8 @@ export const exampleFileListChatItem: ChatItem = {
     type: ChatItemType.ANSWER,
     fileList: {
         rootFolderTitle: 'Changes',
-        filePaths: ['./package.json', './tsconfig.json', 'src/game.ts', 'tests/game.test.ts'],
-        deletedFiles: [],
+        filePaths: ['.github/workflow.yml', './package.json', './tsconfig.json', 'src/game.ts', 'tests/game.test.ts', 'tests/no-extension', 'tests/.eslintignore', 'deleted/file-added.js'],
+        deletedFiles: ['.github/removed-workflow.yml', 'deleted/folder/', 'deleted/file-removed.ts', 'deleted/folder/file-removed.ts', 'deleted/folder/file-removed.ts'],
         actions: {
             './package.json': [
                 {

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

@@ -75,7 +75,7 @@ export class ChatItemTreeViewWrapper {
                     },
                     {
                       type: 'span',
-                      children: [ `${(props.files?.length ?? 0) + (props.deletedFiles?.length ?? 0)} ${Config.getInstance().config.texts.files}` ]
+                      children: [ `${(props.files?.length ?? 0) + (props.deletedFiles?.length ?? 0)} ${(props.files?.length ?? 0) + (props.deletedFiles?.length ?? 0) > 1 ? Config.getInstance().config.texts.files : Config.getInstance().config.texts.file}` ]
                     },
                   ]
                 } ]

src/components/chat-item/chat-item-tree-view.ts

@@ -67,13 +67,17 @@ export class ChatItemTreeView {
   buildFolderNode (): ExtendedHTMLElement[] {
     if (this.node.type !== 'folder') return [];
 
+    console.log(this.node);
     const folderItem = new Button({
       testId: testIds.chatItem.fileTree.folder,
       icon: new Icon({ icon: this.isOpen ? MynahIcons.DOWN_OPEN : MynahIcons.RIGHT_OPEN }).render,
       classNames: [ 'mynah-chat-item-tree-view-button' ],
       label: DomBuilder.getInstance().build({
         type: 'div',
-        classNames: [ 'mynah-chat-item-tree-view-button-title' ],
+        classNames: [
+          'mynah-chat-item-tree-view-button-title',
+          this.node.deleted ? 'mynah-chat-item-tree-view-button-title-deleted' : '',
+        ],
         children: [
           new Icon({ icon: MynahIcons.FOLDER }).render,
           {
@@ -83,7 +87,7 @@ export class ChatItemTreeView {
           {
             type: 'span',
             classNames: [ 'mynah-chat-item-tree-view-button-weak-title' ],
-            children: [ `${this.node.children.length} ${Config.getInstance().config.texts.files}` ]
+            children: [ `(${this.node.children.length} ${this.node.children.length > 1 ? Config.getInstance().config.texts.files : Config.getInstance().config.texts.file})` ]
           }
         ]
       }),

src/helper/__test__/file-tree.spec.ts

@@ -2,23 +2,160 @@ import { TreeNode, fileListToTree } from '../file-tree';
 
 describe('file tree', () => {
   it('fileListToTree', () => {
-    const modifiedFilePaths = [ 'project/src/hello.js' ];
-    const deletedFilePaths = [ 'project/src/goodbye.js' ];
+    const modifiedFilePaths = [
+      '.github/workflow.yml',
+      './package.json',
+      './tsconfig.json',
+      'src/game.ts',
+      'tests/game.test.ts',
+      'tests/no-extension',
+      'tests/.eslintignore',
+      'deleted/file-added.js'
+    ];
+
+    const deletedFilePaths = [
+      '.github/removed-workflow.yml',
+      'deleted/folder/',
+      'deleted/file-removed.ts',
+      'deleted/folder/file-removed.ts'
+    ];
+
     const correctTreeNode: TreeNode = {
       name: 'Changes',
       type: 'folder',
+      deleted: false,
       children: [
         {
-          name: 'project',
+          name: '.github',
+          type: 'folder',
+          deleted: false,
+          children: [
+            {
+              name: 'workflow.yml',
+              type: 'file',
+              filePath: '.github/workflow.yml',
+              originalFilePath: '.github/workflow.yml',
+              deleted: false,
+              actions: undefined,
+              details: undefined
+            },
+            {
+              name: 'removed-workflow.yml',
+              type: 'file',
+              filePath: '.github/removed-workflow.yml',
+              originalFilePath: '.github/removed-workflow.yml',
+              deleted: true,
+              actions: undefined,
+              details: undefined
+            }
+          ]
+        },
+        {
+          name: 'package.json',
+          type: 'file',
+          filePath: 'package.json', // Removed the leading ./
+          originalFilePath: './package.json',
+          deleted: false,
+          actions: undefined,
+          details: undefined
+        },
+        {
+          name: 'tsconfig.json',
+          type: 'file',
+          filePath: 'tsconfig.json', // Removed the leading ./
+          originalFilePath: './tsconfig.json',
+          deleted: false,
+          actions: undefined,
+          details: undefined
+        },
+        {
+          name: 'src',
           type: 'folder',
+          deleted: false,
           children: [
             {
-              name: 'src',
+              name: 'game.ts',
+              type: 'file',
+              filePath: 'src/game.ts',
+              originalFilePath: 'src/game.ts',
+              deleted: false,
+              actions: undefined,
+              details: undefined
+            }
+          ]
+        },
+        {
+          name: 'tests',
+          type: 'folder',
+          deleted: false,
+          children: [
+            {
+              name: 'game.test.ts',
+              type: 'file',
+              filePath: 'tests/game.test.ts',
+              originalFilePath: 'tests/game.test.ts',
+              deleted: false,
+              actions: undefined,
+              details: undefined
+            },
+            {
+              name: 'no-extension',
+              type: 'file',
+              filePath: 'tests/no-extension',
+              originalFilePath: 'tests/no-extension',
+              deleted: false,
+              actions: undefined,
+              details: undefined
+            },
+            {
+              name: '.eslintignore',
+              type: 'file',
+              filePath: 'tests/.eslintignore',
+              originalFilePath: 'tests/.eslintignore',
+              deleted: false,
+              actions: undefined,
+              details: undefined
+            }
+          ]
+        },
+        {
+          name: 'deleted',
+          type: 'folder',
+          deleted: false,
+          children: [
+            {
+              name: 'file-added.js',
+              type: 'file',
+              filePath: 'deleted/file-added.js',
+              originalFilePath: 'deleted/file-added.js',
+              deleted: false,
+              actions: undefined,
+              details: undefined
+            },
+            {
+              name: 'folder',
               type: 'folder',
+              deleted: true,
               children: [
-                { name: 'hello.js', type: 'file', filePath: 'project/src/hello.js', originalFilePath: 'project/src/hello.js', deleted: false },
-                { name: 'goodbye.js', type: 'file', filePath: 'project/src/goodbye.js', originalFilePath: 'project/src/goodbye.js', deleted: true }
+                {
+                  name: 'file-removed.ts',
+                  type: 'file',
+                  filePath: 'deleted/folder/file-removed.ts',
+                  originalFilePath: 'deleted/folder/file-removed.ts',
+                  deleted: true,
+                  actions: undefined,
+                  details: undefined
+                }
               ]
+            },
+            {
+              name: 'file-removed.ts',
+              type: 'file',
+              filePath: 'deleted/file-removed.ts',
+              originalFilePath: 'deleted/file-removed.ts',
+              deleted: true,
+              actions: undefined,
+              details: undefined
             }
           ]
         }

src/helper/config.ts

@@ -60,7 +60,8 @@ const configDefaults: ConfigFullModel = {
     feedbackThanks: 'Thanks!',
     feedbackReportButtonLabel: 'Report an issue',
     codeSuggestions: 'Files',
-    files: 'file(s)',
+    file: 'file',
+    files: 'files',
     changes: 'Changes',
     clickFileToViewDiff: 'Click on a file to view diff.',
     showMore: 'Show more',