feat: add chat component Angular wrapper (#16255)

Co-authored-by: Galina Edinakova <[email protected]>

Author: rkaraivanov

package-lock.json

@@ -73,13 +73,17 @@
     "@igniteui/material-icons-extended": "^3.1.0",
     "@lit-labs/ssr-dom-shim": "^1.3.0",
     "@types/source-map": "0.5.2",
+    "dompurify": "^3.3.0",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
     "igniteui-theming": "^24.0.0",
     "igniteui-trial-watermark": "^3.1.0",
     "jspdf": "^3.0.4",
     "lodash-es": "^4.17.21",
+    "marked": "^16.4.0",
+    "marked-shiki": "^1.2.1",
     "rxjs": "^7.8.2",
+    "shiki": "^3.13.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },
@@ -122,7 +126,7 @@
     "ig-typedoc-theme": "^7.0.0",
     "igniteui-dockmanager": "^1.17.0",
     "igniteui-sassdoc-theme": "^2.1.0",
-    "igniteui-webcomponents": "6.2.1",
+    "igniteui-webcomponents": "^6.3.1",
     "jasmine": "^5.6.0",
     "jasmine-core": "^5.6.0",
     "karma": "^6.4.4",

package.json

@@ -0,0 +1 @@
+export * from './src/public_api';

projects/igniteui-angular/chat-extras/index.ts

@@ -0,0 +1 @@
+{}

projects/igniteui-angular/chat-extras/ng-package.json

@@ -0,0 +1,57 @@
+import { DomSanitizer } from '@angular/platform-browser';
+import { TestBed } from '@angular/core/testing';
+import { IgxChatMarkdownService } from './markdown-service';
+import { MarkdownPipe } from './markdown-pipe';
+import Spy = jasmine.Spy;
+
+// Mock the Service: We only care that the pipe calls the service and gets an HTML string.
+// We provide a *known* unsafe HTML string to ensure sanitization is working.
+const mockUnsafeHtml = `
+  <pre class="shiki" style="color: var(--shiki-fg);"><code><span style="color: #FF0000;">unsafe</span></code></pre>
+  <img src="x" onerror="alert(1)">
+`;
+
+class MockChatMarkdownService {
+    public async parse(_: string): Promise<string> {
+        return mockUnsafeHtml;
+    }
+}
+
+describe('MarkdownPipe', () => {
+    let pipe: MarkdownPipe;
+    let sanitizer: DomSanitizer;
+    let bypassSpy: Spy;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                MarkdownPipe,
+                { provide: IgxChatMarkdownService, useClass: MockChatMarkdownService },
+            ],
+        });
+
+        pipe = TestBed.inject(MarkdownPipe);
+        sanitizer = TestBed.inject(DomSanitizer);
+        bypassSpy = spyOn(sanitizer, 'bypassSecurityTrustHtml').and.callThrough();
+    });
+
+    it('should be created', () => {
+        expect(pipe).toBeTruthy();
+    });
+
+    it('should call the service, sanitize content, and return SafeHtml', async () => {
+        await pipe.transform('some markdown');
+
+        expect(bypassSpy).toHaveBeenCalledTimes(1);
+
+        const sanitizedString = bypassSpy.calls.mostRecent().args[0];
+
+        expect(sanitizedString).not.toContain('onerror');
+        expect(sanitizedString).toContain('style="color: var(--shiki-fg);"');
+    });
+
+    it('should handle undefined input text', async () => {
+        await pipe.transform(undefined);
+        expect(sanitizer.bypassSecurityTrustHtml).toHaveBeenCalled();
+    });
+});

projects/igniteui-angular/chat-extras/src/markdown-pipe.spec.ts

@@ -0,0 +1,18 @@
+import DOMPurify from 'dompurify';
+import { inject, Pipe, type PipeTransform } from '@angular/core';
+import { IgxChatMarkdownService } from './markdown-service';
+import { DomSanitizer, type SafeHtml } from '@angular/platform-browser';
+
+
+@Pipe({ name: 'fromMarkdown' })
+export class MarkdownPipe implements PipeTransform {
+    private _service = inject(IgxChatMarkdownService);
+    private _sanitizer = inject(DomSanitizer);
+
+
+    public async transform(text?: string): Promise<SafeHtml> {
+        return this._sanitizer.bypassSecurityTrustHtml(DOMPurify.sanitize(
+            await this._service.parse(text ?? '')
+        ));
+    }
+}

projects/igniteui-angular/chat-extras/src/markdown-pipe.ts

@@ -0,0 +1,41 @@
+import { TestBed } from '@angular/core/testing';
+import { IgxChatMarkdownService } from './markdown-service';
+
+describe('IgxChatMarkdownService', () => {
+    let service: IgxChatMarkdownService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({});
+        service = TestBed.inject(IgxChatMarkdownService);
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+
+    it('should parse basic markdown to HTML', async () => {
+        const markdown = '**Hello** *World*';
+        const expectedHtml = '<p><strong>Hello</strong> <em>World</em></p>\n';
+
+        const result = await service.parse(markdown);
+        expect(result).toBe(expectedHtml);
+    });
+
+    it('should parse a code block with shiki highlighting', async () => {
+        const markdown = '```typescript\nconst x = 5;\n```';
+        const result = await service.parse(markdown);
+
+        expect(result).toContain('<pre class="shiki shiki-themes github-light github-dark"');
+        expect(result).toContain('const');
+        expect(result).toMatch(/--shiki-.*?/);
+        expect(result).toContain('code');
+    });
+
+    it('should apply custom link extension with target="_blank"', async () => {
+        const markdown = '[Infragistics](https://www.infragistics.com)';
+        const expectedLink = '<p><a href="https://www.infragistics.com" target="_blank" rel="noopener noreferrer" >Infragistics</a></p>';
+
+        const result = await service.parse(markdown);
+        expect(result).toContain(expectedLink);
+    });
+});

projects/igniteui-angular/chat-extras/src/markdown-service.spec.ts

@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core';
+import { Marked } from 'marked';
+import markedShiki from 'marked-shiki';
+import { bundledThemes, createHighlighter } from 'shiki/bundle/web';
+
+
+const DEFAULT_LANGUAGES = ['javascript', 'typescript', 'html', 'css'];
+const DEFAULT_THEMES = {
+    light: 'github-light',
+    dark: 'github-dark'
+};
+
+@Injectable({ providedIn: 'root' })
+export class IgxChatMarkdownService {
+
+    private _instance: Marked;
+    private _isInitialized: Promise<void>;
+
+    private _initializeMarked(): void {
+        this._instance = new Marked({
+            breaks: true,
+            gfm: true,
+            extensions: [
+                {
+                    name: 'link',
+                    renderer({ href, title, text }) {
+                        return `<a href="${href}" target="_blank" rel="noopener noreferrer" ${title ? `title="${title}"` : ''}>${text}</a>`;
+                    }
+                }
+            ]
+        });
+    }
+
+    private async _initializeShiki(): Promise<void> {
+        const highlighter = await createHighlighter({
+            langs: DEFAULT_LANGUAGES,
+            themes: Object.keys(bundledThemes)
+        });
+
+        this._instance.use(
+            markedShiki({
+                highlight(code, lang, _) {
+                    try {
+                        return highlighter.codeToHtml(code, {
+                            lang,
+                            themes: DEFAULT_THEMES,
+                        });
+
+                    } catch {
+                        return `<pre><code>${code}</code></pre>`;
+                    }
+                }
+            })
+        );
+    }
+
+
+    constructor() {
+        this._initializeMarked();
+        this._isInitialized = this._initializeShiki();
+    }
+
+    public async parse(text: string): Promise<string> {
+        await this._isInitialized;
+        return await this._instance.parse(text);
+    }
+}

projects/igniteui-angular/chat-extras/src/markdown-service.ts

@@ -0,0 +1 @@
+export { MarkdownPipe } from './markdown-pipe';

projects/igniteui-angular/chat-extras/src/public_api.ts

@@ -0,0 +1 @@
+export * from './src/public_api';