feat(chat): create igniteui-webcomponents/extras with markdown renderer

Author: igdmdimitrov

package-lock.json

@@ -6,7 +6,8 @@
   "license": "SEE LICENSE IN LICENSE",
   "exports": {
     ".": "./src/index.js",
-    "./types": "./src/types.js"
+    "./types": "./src/types.js",
+    "./extras": "./src/extras/index.js"
   },
   "type": "module",
   "repository": {
@@ -85,15 +86,12 @@
     "lint-staged": "^16.1.5",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
-    "marked": "^12.0.2",
-    "marked-shiki": "^1.2.1",
     "node-watch": "^0.7.4",
     "playwright": "^1.55.0",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
     "sass-embedded": "~1.78.0",
-    "shiki": "^3.10.0",
     "sinon": "^21.0.0",
     "storybook": "^9.1.3",
     "stylelint": "^16.23.1",

package.json

@@ -10,7 +10,11 @@
       "types": "./index.d.ts",
       "default": "./index.js"
     },
-    "./themes/*.css": "./themes/*.css"
+    "./themes/*.css": "./themes/*.css",
+    "./extras": {
+      "types": "./extras/index.d.ts",
+      "default": "./extras/index.js"
+    }
   },
   "type": "module",
   "sideEffects": false,

scripts/_package.json

@@ -1,7 +1,9 @@
 import DOMPurify from 'dompurify';
 import { html, type TemplateResult } from 'lit';
 import { Marked, Renderer } from 'marked';
-import type { ChatMessageRenderer, IgcMessage } from './types.js';
+import markedShiki from 'marked-shiki';
+import { getSingletonHighlighter } from 'shiki';
+import type { ChatMessageRenderer, IgcMessage } from '../types.js';
 
 /**
  * Options to configure the MarkdownMessageRenderer.
@@ -101,15 +103,13 @@ export class MarkdownMessageRenderer implements ChatMessageRenderer {
       return;
     }
 
-    const shiki = await import('shiki');
-    this.highlighter = await shiki.getSingletonHighlighter({
+    this.highlighter = await getSingletonHighlighter({
       themes: [this.theme],
       langs: this.langs,
     });
 
-    const markedShiki = await import('marked-shiki');
     this._marked.use(
-      markedShiki.default({
+      markedShiki({
         highlight: (code: any, lang: string) => {
           try {
             const safeLang =

src/components/chat/markdown-renderer.ts …ponents/chat/extras/markdown-renderer.tssrc/components/chat/markdown-renderer.ts renamed to src/components/chat/extras/markdown-renderer.ts src/components/chat/markdown-renderer.ts renamed to src/components/chat/extras/markdown-renderer.ts

@@ -0,0 +1 @@
+export { MarkdownMessageRenderer } from '../components/chat/extras/markdown-renderer.js';

src/extras/index.ts

@@ -167,4 +167,3 @@ export type {
   MessageTemplate,
 } from './components/chat/types.js';
 export { PlainTextRenderer } from './components/chat/plain-text-renderer.js';
-export { MarkdownMessageRenderer } from './components/chat/markdown-renderer.js';

src/index.ts

@@ -3,10 +3,10 @@ import { html } from 'lit';
 import { GoogleGenAI, Modality } from '@google/genai';
 import {
   IgcChatComponent,
-  MarkdownMessageRenderer,
   defineComponents,
   registerIcon,
 } from 'igniteui-webcomponents';
+import { MarkdownMessageRenderer } from 'igniteui-webcomponents/extras';
 import type {
   IgcChatTemplates,
   IgcMessage,