feat: support markdown when renderAsPills is true (#424)

Author: ctlai95

example/src/samples/sample-data.ts

@@ -2035,11 +2035,13 @@ mkdir -p src/ lalalaaaa sad fbnsafsdaf sdakjfsd sadf asdkljf basdkjfh ksajhf kjs
                 details: {
                     'src/components/ui': {
                         visibleName: 'ui',
-                        description: 'src/components/ui'
+                        description: 'src/components/ui',
+                        clickable: false
                     },
                     'src/components/forms': {
                         visibleName: 'forms',
-                        description: 'src/components/forms'
+                        description: 'src/components/forms',
+                        clickable: false
                     },
                 },
                 renderAsPills: true
@@ -2059,27 +2061,55 @@ mkdir -p src/ lalalaaaa sad fbnsafsdaf sdakjfsd sadf asdkljf basdkjfh ksajhf kjs
                     'src/components/ui': {
                         visibleName: 'ui',
                         description: 'src/components/ui',
+                        clickable: false
                     },
                     'src/components/forms': {
                         visibleName: 'forms',
-                        description: 'src/components/forms'
+                        description: 'src/components/forms',
+                        clickable: false
                     },
                     'src/components/layout': {
                         visibleName: 'layout',
-                        description: 'src/components/layout'
+                        description: 'src/components/layout',
+                        clickable: false
                     },
                     'src/utils/helpers': {
                         visibleName: 'helpers',
-                        description: 'src/components/helpers'
+                        description: 'src/components/helpers',
+                        clickable: false
                     },
                     'src/utils/validation': {
                         visibleName: 'validation',
-                        description: 'src/components/validation'
+                        description: 'src/components/validation',
+                        clickable: false
                     },
                 },
                 renderAsPills: true
             }
         }
+    },
+    {
+        type: ChatItemType.ANSWER,
+        fullWidth: true,
+        padding: false,
+        header: {
+            icon: 'search',
+            body: 'Searched for `*.md` in',
+            fileList: {
+                filePaths: ['src/docs'],
+                details: {
+                    ['src/docs']: {
+                        visibleName: 'docs',
+                        description: 'src/docs',
+                        clickable: false
+                    }
+                },
+                renderAsPills: true
+            },
+            status: {
+                text: '5 results found'
+            }
+        },
     }
 ];
 

src/components/__test__/chat-item/chat-item-card.spec.ts

@@ -1,5 +1,6 @@
 import { ChatItemCard } from '../../chat-item/chat-item-card';
 import { ChatItemType } from '../../../static';
+import { MynahUIGlobalEvents } from '../../../helper/events';
 
 // Mock the tabs store
 jest.mock('../../../helper/tabs-store', () => ({
@@ -13,7 +14,29 @@ jest.mock('../../../helper/tabs-store', () => ({
   }
 }));
 
+// Mock global events
+jest.mock('../../../helper/events', () => ({
+  MynahUIGlobalEvents: {
+    getInstance: jest.fn(() => ({
+      dispatch: jest.fn()
+    }))
+  }
+}));
+
 describe('ChatItemCard', () => {
+  let mockDispatch: jest.Mock;
+
+  beforeEach(() => {
+    mockDispatch = jest.fn();
+    (MynahUIGlobalEvents.getInstance as jest.Mock).mockReturnValue({
+      dispatch: mockDispatch
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should render basic chat item card', () => {
     const card = new ChatItemCard({
       tabId: 'test-tab',
@@ -115,6 +138,32 @@ describe('ChatItemCard', () => {
       expect(deletedPill).toBeTruthy();
       expect(deletedPill?.textContent).toBe('deleted.ts');
     });
+
+    it('should not dispatch click events when clickable is false', () => {
+      const card = new ChatItemCard({
+        tabId: 'test-tab',
+        chatItem: {
+          type: ChatItemType.ANSWER,
+          header: {
+            body: 'Files',
+            fileList: {
+              filePaths: [ 'test.js' ],
+              details: {
+                'test.js': {
+                  clickable: false
+                }
+              },
+              renderAsPills: true
+            }
+          }
+        }
+      });
+
+      const pillElement = card.render.querySelector('.mynah-chat-item-tree-file-pill') as HTMLElement;
+      pillElement?.click();
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
   });
 
   it('should not render pills when renderAsPills is false', () => {
@@ -173,4 +222,23 @@ describe('ChatItemCard', () => {
     const pillElements = card.render.querySelectorAll('.mynah-chat-item-tree-file-pill');
     expect(pillElements.length).toBe(0);
   });
+
+  it('should parse markdown in header body for pills', () => {
+    const card = new ChatItemCard({
+      tabId: 'test-tab',
+      chatItem: {
+        type: ChatItemType.ANSWER,
+        header: {
+          body: 'Reading `inline code` text',
+          fileList: {
+            filePaths: [ 'test.js' ],
+            renderAsPills: true
+          }
+        }
+      }
+    });
+
+    const codeElement = card.render.querySelector('.mynah-inline-code');
+    expect(codeElement).toBeTruthy();
+  });
 });

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

@@ -27,6 +27,7 @@ import { MoreContentIndicator } from '../more-content-indicator';
 import { Button } from '../button';
 import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from '../overlay';
 import { marked } from 'marked';
+import { parseMarkdown } from '../../helper/marked';
 
 const TOOLTIP_DELAY = 350;
 export interface ChatItemCardProps {
@@ -258,9 +259,45 @@ export class ChatItemCard {
 
     // Add body text if present
     if (header.body != null && header.body !== '') {
+      // Parse markdown to handle inline code
+      const parsedHtml = parseMarkdown(header.body, { includeLineBreaks: true });
+
+      // Create a temporary div to extract text content while preserving inline code
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = parsedHtml;
+
+      // Convert to ChatItemBodyRenderer format
+      const processNode = (node: Node): Array<string | ChatItemBodyRenderer> => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          return [ node.textContent ?? '' ];
+        } else if (node.nodeType === Node.ELEMENT_NODE) {
+          const element = node as HTMLElement;
+          if (element.tagName.toLowerCase() === 'code') {
+            return [ {
+              type: 'code' as const,
+              classNames: [ 'mynah-syntax-highlighter', 'mynah-inline-code' ],
+              children: [ element.textContent ?? '' ]
+            } ];
+          } else {
+            // For other elements, process their children
+            const children: Array<string | ChatItemBodyRenderer> = [];
+            Array.from(element.childNodes).forEach(child => {
+              children.push(...processNode(child));
+            });
+            return children;
+          }
+        }
+        return [ '' ];
+      };
+
+      const children: Array<string | ChatItemBodyRenderer> = [];
+      Array.from(tempDiv.childNodes).forEach(node => {
+        children.push(...processNode(node));
+      });
+
       customRenderer.push({
         type: 'span' as const,
-        children: [ header.body ]
+        children
       });
     }
 
@@ -279,6 +316,9 @@ export class ChatItemCard {
         children: [ fileName ],
         events: {
           click: () => {
+            if (header.fileList?.details?.[filePath]?.clickable === false) {
+              return;
+            }
             MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FILE_CLICK, {
               tabId: this.props.tabId,
               messageId: this.props.chatItem.messageId,