refactor(chat): Simplify markdown renderer

Author: rkaraivanov

src/components/chat/extras/markdown-renderer.ts

@@ -1,6 +1,6 @@
 import DOMPurify from 'dompurify';
-import { html, type TemplateResult } from 'lit';
-import { Marked, Renderer } from 'marked';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { Marked } from 'marked';
 import markedShiki from 'marked-shiki';
 import { getSingletonHighlighter } from 'shiki';
 import type { IgcMessage } from '../types.js';
@@ -30,121 +30,50 @@ export interface MarkdownRendererOptions {
   sanitizer?: (html: string) => string;
 }
 
-/**
- * A renderer that converts markdown chat messages to HTML using `marked`,
- * with optional syntax highlighting powered by `shiki`.
- *
- */
-export class MarkdownMessageRenderer {
-  private highlighter?: any;
-  private theme: string;
-  private langs: string[];
-  private _marked: Marked;
-  private initialized = false;
-  private _sanitizer: (html: string) => string;
-
-  /**
-   * Creates a new MarkdownMessageRenderer.
-   *
-   * @param {MarkdownRendererOptions} [opts={}] - Configuration options.
-   */
-  constructor(private opts: MarkdownRendererOptions = {}) {
-    this.theme = opts.theme ?? 'github-light';
-    this.langs = opts.languages ?? ['javascript', 'typescript', 'html', 'css'];
-
-    this._marked = new Marked();
-    this.initMarked();
-    this._sanitizer = this.initSanitizer();
-  }
-
-  /**
-   * Initializes the `marked` instance with custom renderer options.
-   * Currently modifies link rendering to open in a new tab with safe attributes.
-   *
-   * @private
-   */
-  private initMarked() {
-    const renderer = new Renderer();
-
-    // Customize link rendering
-    renderer.link = (href, title, text) => {
-      return `<a href="${href}" target="_blank" rel="noopener noreferrer" ${title ? `title="${title}"` : ''}>${text}</a>`;
-    };
-
-    this._marked.setOptions({
-      gfm: true,
-      breaks: true,
-      renderer,
-    });
-  }
-
-  private initSanitizer() {
-    return this.opts?.sanitizer ?? DOMPurify.sanitize;
-  }
-
-  /**
-   * Performs async initialization for syntax highlighting.
-   * Loads Shiki and configures the `marked` instance with `marked-shiki`.
-   * This is called lazily during rendering unless pre-called explicitly.
-   *
-   * @async
-   * @returns {Promise<void>} A promise that resolves once initialization is complete.
-   */
-  async init(): Promise<void> {
-    if (this.highlighter || this.opts.noHighlighter) {
-      this.initialized = true;
-      return;
-    }
-
-    this.highlighter = await getSingletonHighlighter({
-      themes: [this.theme],
-      langs: this.langs,
+export async function createMarkdownRenderer(
+  options?: MarkdownRendererOptions
+) {
+  const sanitizer = options?.sanitizer ?? DOMPurify.sanitize;
+
+  const markedInstance = 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>`;
+        },
+      },
+    ],
+  });
+
+  if (!options?.noHighlighter) {
+    const themes = [options?.theme ?? 'github-light'];
+    const langs = options?.languages
+      ? options.languages
+      : ['javascript', 'typescript', 'html', 'css'];
+
+    const shikiInstance = await getSingletonHighlighter({
+      themes,
+      langs,
     });
 
-    this._marked.use(
+    markedInstance.use(
       markedShiki({
-        highlight: (code: any, lang: string) => {
-          try {
-            const safeLang =
-              lang && this.highlighter.getLoadedLanguages?.().includes(lang)
-                ? lang
-                : 'text';
-
-            return (
-              this.highlighter?.codeToHtml(code, {
-                lang: safeLang,
-                themes: { light: this.theme },
-              }) ?? code
-            );
-          } catch (_err) {
-            // if Shiki still throws for some reason, just return escaped code
-            return `<pre><code>${DOMPurify.sanitize(code)}</code></pre>`;
-          }
+        highlight(code, lang, _) {
+          return shikiInstance.codeToHtml(code, {
+            lang,
+            themes: { light: themes[0] },
+          });
         },
       })
     );
-
-    this.initialized = true;
   }
 
-  /**
-   * Renders the given chat message as markdown, with optional syntax highlighting.
-   *
-   * @param {IgcMessage} message - The message to render.
-   * @returns {Promise<TemplateResult>} A lit template containing the rendered markdown content.
-   */
-  async render(message: IgcMessage): Promise<TemplateResult> {
-    if (!this.initialized) {
-      await this.init();
-    }
-
-    if (!message.text) return html``;
-
-    const rendered = await this._marked?.parse(message.text);
-    const cleanHtml = this._sanitizer(rendered);
-    const template = document.createElement('template');
-    template.innerHTML = cleanHtml ?? message.text;
-
-    return html`${template.content}`;
-  }
+  return async (message: IgcMessage): Promise<unknown> => {
+    return message.text
+      ? unsafeHTML(sanitizer(await markedInstance.parse(message.text)))
+      : '';
+  };
 }

stories/chat.stories.ts

@@ -6,7 +6,7 @@ import {
   defineComponents,
   registerIcon,
 } from 'igniteui-webcomponents';
-import { MarkdownMessageRenderer } from 'igniteui-webcomponents/extras';
+import { createMarkdownRenderer } from 'igniteui-webcomponents/extras';
 import type {
   IgcChatOptions,
   IgcMessage,
@@ -174,9 +174,9 @@ const _customRenderer = {
     return html`<span>${m.text.toUpperCase()}</span>`;
   },
 };
-const _markdownRenderer = new MarkdownMessageRenderer();
+const _markdownRenderer = await createMarkdownRenderer();
 
-const ai_chat_options = {
+const ai_chat_options: IgcChatOptions = {
   headerText: 'Chat',
   inputPlaceholder: 'Type your message here...',
   suggestions: [
@@ -185,7 +185,7 @@ const ai_chat_options = {
     'Show me very short sample typescript code',
   ],
   renderers: {
-    messageContent: (ctx) => _markdownRenderer.render(ctx.param),
+    messageContent: async ({ param }) => _markdownRenderer(param),
   },
 };
 
@@ -196,7 +196,7 @@ const chat_options: IgcChatOptions = {
   inputPlaceholder: 'Type your message here...',
   headerText: 'Chat',
   renderers: {
-    messageContent: async (ctx) => _markdownRenderer.render(ctx.param),
+    messageContent: async (ctx) => _markdownRenderer(ctx.param),
   },
 };
 
@@ -482,6 +482,13 @@ export const Basic: Story = {
   render: () => {
     messages = initialMessages;
     return html`
+      <style>
+        .shiki {
+          code {
+            font-family: monospace;
+          }
+        }
+      </style>
       <igc-chat
         style="--igc-chat-height: calc(100vh - 32px);"
         .messages=${messages}
@@ -505,7 +512,7 @@ export const AI: Story = {
   `,
 };
 
-let options: any;
+let options: IgcChatOptions;
 export const Chat_Templates: Story = {
   play: async () => {
     const chat = document.querySelector('igc-chat');
@@ -525,8 +532,7 @@ export const Chat_Templates: Story = {
         suggestions: ['Hello', 'Hi', 'Generate an image!'],
         renderers: {
           messageHeader: (ctx) => _messageAuthorTemplate(ctx.param, ctx),
-          messageContent: (ctx) => _markdownRenderer.render(ctx.param),
-          // messageContent: (ctx) => html`${ctx.param.text.toUpperCase()}`,
+          messageContent: (ctx) => _markdownRenderer(ctx.param),
           messageActions: (ctx) => _messageActionsTemplate(ctx.param),
           attachmentHeader: () => nothing,
           inputActions: (ctx) => _actionsTemplate(ctx),