From 9e38eeef5cd49879ffdca1406db14cc6cce73ad6 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Sat, 6 Dec 2025 18:39:19 +0100
Subject: [PATCH 01/30] feat(chat-messages): add code copy button to markdown
 renderer

---
 .../element-ng/markdown-renderer/index.api.md | 17 ++++-
 api-goldens/element-ng/translate/index.api.md |  2 +
 .../si-chat-messages--si-chat-container.yaml  | 15 ++--
 projects/element-ng/link/si-link.directive.ts |  1 -
 .../markdown-renderer/markdown-renderer.ts    | 76 ++++++++++++++++++-
 .../si-markdown-renderer.component.spec.ts    |  7 +-
 .../si-markdown-renderer.component.ts         | 29 ++++++-
 .../si-translatable-keys.interface.ts         |  1 +
 .../src/styles/components/_markdown.scss      | 20 ++++-
 .../si-chat-messages/si-ai-message.ts         |  8 +-
 .../si-chat-messages/si-chat-container.ts     | 55 ++++++++------
 .../si-chat-messages/si-user-message.ts       |  7 +-
 12 files changed, 190 insertions(+), 48 deletions(-)

diff --git a/api-goldens/element-ng/markdown-renderer/index.api.md b/api-goldens/element-ng/markdown-renderer/index.api.md
index e47c3c773..5597c397c 100644
--- a/api-goldens/element-ng/markdown-renderer/index.api.md
+++ b/api-goldens/element-ng/markdown-renderer/index.api.md
@@ -4,16 +4,27 @@
 
 ```ts
 
+import * as _angular_core from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i0 from '@angular/core';
+import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
+import { SiTranslateService } from '@siemens/element-translate-ng/translate';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 // @public
-export const getMarkdownRenderer: (sanitizer: DomSanitizer) => ((text: string) => Node);
+export const getMarkdownRenderer: (sanitizer: DomSanitizer, options?: MarkdownRendererOptions) => ((text: string) => Node);
+
+// @public (undocumented)
+export interface MarkdownRendererOptions {
+    copyCodeButton?: TranslatableString;
+    translateSync?: SiTranslateService['translateSync'];
+}
 
 // @public
 export class SiMarkdownRendererComponent {
     constructor();
-    readonly text: i0.InputSignal<string>;
+    readonly copyButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    readonly disableCopyButton: _angular_core.InputSignal<boolean>;
+    readonly text: _angular_core.InputSignal<string>;
 }
 
 // (No @packageDocumentation comment for this package)
diff --git a/api-goldens/element-ng/translate/index.api.md b/api-goldens/element-ng/translate/index.api.md
index d7e5013e3..90813d72a 100644
--- a/api-goldens/element-ng/translate/index.api.md
+++ b/api-goldens/element-ng/translate/index.api.md
@@ -334,6 +334,8 @@ export interface SiTranslatableKeys {
     // (undocumented)
     'SI_MAIN_DETAIL_CONTAINER.BACK'?: string;
     // (undocumented)
+    'SI_MARKDOWN_RENDERER.COPY'?: string;
+    // (undocumented)
     'SI_NAVBAR.OPEN_LAUNCHPAD'?: string;
     // (undocumented)
     'SI_NAVBAR.TOGGLE_NAVIGATION'?: string;
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml
index 8c06f612f..03f27a49c 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml
@@ -4,16 +4,16 @@
   - button "dataset.csv"
 - paragraph: Can you help me analyze these files?
 - paragraph: I'm having trouble understanding the data structure and need assistance with the implementation.
-- button "Copy message"
+- button "Export message"
 - paragraph: I'd be happy to help you analyze your files! I can see you've shared a Python script and a CSV dataset.
 - paragraph: Let me examine the structure and provide guidance.
-- button "Good response"
-- button "Copy response"
+- button "Add to list"
+- button "Export response"
 - button "Retry response"
 - button "More actions"
 - paragraph: Perfect! What should I focus on first
 - paragraph: I also want to make sure the performance is optimized for large datasets since this will be used in production with potentially millions of rows?
-- button "Copy message"
+- button "Export message"
 - paragraph: Great question! When analyzing large datasets, it's crucial to focus on...
 - alert: Info AI responses are for demonstration purposes.
 - group:
@@ -23,8 +23,9 @@
   - text: mockup.png
   - button "Remove attachment mockup.png"
 - textbox "Chat message input":
-  - /placeholder: Enter a command, question or topic…
+  - /placeholder: Enter a command, question or topic...
 - button "Attach file"
-- button "Text formatting"
-- button "Message templates"
+- button "Format text"
+- button "Use template"
 - button "Send"
+- text: The content is AI generated. Always verify the information for accuracy.
\ No newline at end of file
diff --git a/projects/element-ng/link/si-link.directive.ts b/projects/element-ng/link/si-link.directive.ts
index ec01d90a2..46e52960b 100644
--- a/projects/element-ng/link/si-link.directive.ts
+++ b/projects/element-ng/link/si-link.directive.ts
@@ -2,7 +2,6 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-/* eslint-disable @angular-eslint/no-conflicting-lifecycle */
 import { LocationStrategy } from '@angular/common';
 import {
   booleanAttribute,
diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index 1f072426d..f57119ca6 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -4,6 +4,24 @@
  */
 import { SecurityContext } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import type {
+  SiTranslateService,
+  TranslatableString
+} from '@siemens/element-translate-ng/translate';
+
+export interface MarkdownRendererOptions {
+  /**
+   * Provide this to enable the copy code button functionality.
+   * Label for the copy code button (will be translated internally if translateService is provided).
+   * @defaultValue undefined
+   */
+  copyCodeButton?: TranslatableString;
+  /**
+   * Optional translate sync function of a service instance for translating the copy button label.
+   * @defaultValue undefined
+   */
+  translateSync?: SiTranslateService['translateSync'];
+}
 
 /**
  * Returns a markdown renderer function which_
@@ -15,9 +33,13 @@ import { DomSanitizer } from '@angular/platform-browser';
  *
  * @experimental
  * @param sanitizer - Angular DomSanitizer instance
+ * @param options - Optional configuration for the markdown renderer
  * @returns A function taking the markdown text to transform and returning a DOM div element containing the formatted HTML
  */
-export const getMarkdownRenderer = (sanitizer: DomSanitizer): ((text: string) => Node) => {
+export const getMarkdownRenderer = (
+  sanitizer: DomSanitizer,
+  options?: MarkdownRendererOptions
+): ((text: string) => Node) => {
   return (text: string): Node => {
     const div = document.createElement('div');
     div.className = 'markdown-content text-break';
@@ -93,9 +115,32 @@ export const getMarkdownRenderer = (sanitizer: DomSanitizer): ((text: string) =>
       // Remove duplicate table tags
       .replace(/<\/table>\s*<table class="table table-hover">/g, '');
 
-    html = transformMarkdownText(html, true, sanitizer);
+    html = transformMarkdownText(html, true, sanitizer, options);
 
     div.innerHTML = html;
+
+    // Add copy functionality to code blocks
+    div.querySelectorAll('.copy-code-btn').forEach(btn => {
+      btn.addEventListener('click', e => {
+        const button = e.target as HTMLButtonElement;
+        const codeId = button.getAttribute('data-code-id');
+        if (!codeId) {
+          return;
+        }
+
+        const codeElement = div.querySelector(`#${codeId}`);
+        if (!codeElement) {
+          return;
+        }
+
+        const code = codeElement.textContent ?? '';
+
+        navigator.clipboard.writeText(code).catch(() => {
+          // Clipboard API may fail if not in a secure context or permissions denied
+          console.warn('Failed to copy code to clipboard');
+        });
+      });
+    });
     return div;
   };
 };
@@ -103,7 +148,8 @@ export const getMarkdownRenderer = (sanitizer: DomSanitizer): ((text: string) =>
 const transformMarkdownText = (
   html: string,
   keepAdditionalNewlines = true,
-  sanitizer: DomSanitizer
+  sanitizer: DomSanitizer,
+  options?: MarkdownRendererOptions
 ): string => {
   // Generate a random placeholder for inner code blocks to prevent markdown processing inside them
   const innerCodeQuotePlaceholder = `--INNER-CODE-${Math.random().toString(36).substring(2, 15)}--`;
@@ -117,7 +163,29 @@ const transformMarkdownText = (
     // Multiline code blocks ```code``` with placeholder
     .replace(/```[^\n]*\n?([\s\S]*?)\n?```/g, (match, content) => {
       // Escape HTML special characters in code blocks (not for security, but for correct display) and preserve inner backticks
-      const code = `<pre><code>${content.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/`/g, innerCodeQuotePlaceholder)}</code></pre>`;
+      const escapedCode = content
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/`/g, innerCodeQuotePlaceholder);
+
+      const codeId = `code-${Math.random().toString(36).substring(2, 15)}`;
+
+      const translatedLabel =
+        options?.copyCodeButton && options?.translateSync
+          ? options.translateSync(options.copyCodeButton)
+          : options?.copyCodeButton
+            ? String(options.copyCodeButton)
+            : undefined;
+      const buttonLabel = translatedLabel
+        ?.replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+      const codeCopyButton = buttonLabel
+        ? `<button type="button" class="btn btn-circle btn-sm btn-tertiary element-copy copy-code-btn" data-code-id="${codeId}" aria-label="${buttonLabel}"></button>`
+        : '';
+
+      const code = `<div class="code-wrapper">${codeCopyButton}<pre><code id="${codeId}">${escapedCode}</code></pre></div>`;
       const codePlaceholder = `--CODE-BLOCK-${Math.random().toString(36).substring(2, 15)}--`;
       codeSectionPlaceholderMap.set(codePlaceholder, code);
       return codePlaceholder;
diff --git a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.ts b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.ts
index ccb34536f..474aaca5f 100644
--- a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.ts
+++ b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.ts
@@ -122,7 +122,12 @@ const example = "code block";
     expect(innerHTML).toContain('<strong>bold</strong>');
     expect(innerHTML).toContain('<em>italic</em>');
     expect(innerHTML).toContain('<code>code</code>');
-    expect(innerHTML).toContain('<pre><code>');
+    const codeWrapper = markdownDiv.querySelector('.code-wrapper')!;
+    expect(codeWrapper).toBeTruthy();
+    expect(codeWrapper.querySelector('button.copy-code-btn')).toBeTruthy();
+    const preElement = codeWrapper.querySelector('pre')!;
+    expect(preElement).toBeTruthy();
+    expect(preElement.querySelector('code')).toBeTruthy();
     expect(innerHTML).toContain('<li>First item</li>');
   });
 
diff --git a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
index fcf668b13..f268c9051 100644
--- a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
+++ b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
@@ -4,8 +4,9 @@
  */
 import { Component, effect, inject, input, ElementRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { injectSiTranslateService, t } from '@siemens/element-translate-ng/translate';
 
-import { getMarkdownRenderer } from './markdown-renderer';
+import { getMarkdownRenderer, type MarkdownRendererOptions } from './markdown-renderer';
 
 /**
  * Component to display markdown text, uses the {@link getMarkdownRenderer} function internally, relies on `markdown-content` theme class.
@@ -18,7 +19,7 @@ import { getMarkdownRenderer } from './markdown-renderer';
 export class SiMarkdownRendererComponent {
   private sanitizer = inject(DomSanitizer);
   private hostElement = inject(ElementRef<HTMLElement>);
-  private markdownRenderer = getMarkdownRenderer(this.sanitizer);
+  private translateService = injectSiTranslateService();
 
   /**
    * The markdown text to transform and display
@@ -26,13 +27,35 @@ export class SiMarkdownRendererComponent {
    */
   readonly text = input<string>('');
 
+  /**
+   * Do not display the copy code button.
+   * @defaultValue false
+   */
+  readonly disableCopyButton = input<boolean>(false);
+
+  /**
+   * Label for the copy button.
+   * @defaultValue
+   * ```
+   * t(() => $localize`:@@SI_MARKDOWN_RENDERER.COPY:Copy`)
+   * ```
+   */
+  readonly copyButtonLabel = input(t(() => $localize`:@@SI_MARKDOWN_RENDERER.COPY:Copy`));
+
   constructor() {
     effect(() => {
       const contentValue = this.text();
       const containerEl = this.hostElement.nativeElement;
 
+      const options: MarkdownRendererOptions | undefined = {
+        copyCodeButton: !this.disableCopyButton() ? this.copyButtonLabel() : undefined,
+        translateSync: this.translateService.translateSync.bind(this.translateService)
+      };
+
+      const markdownRenderer = getMarkdownRenderer(this.sanitizer, options);
+
       if (containerEl) {
-        const formattedNode = this.markdownRenderer(contentValue);
+        const formattedNode = markdownRenderer(contentValue);
         containerEl.innerHTML = '';
         containerEl.appendChild(formattedNode);
       }
diff --git a/projects/element-ng/translate/si-translatable-keys.interface.ts b/projects/element-ng/translate/si-translatable-keys.interface.ts
index f5ce83212..ee9f03e33 100644
--- a/projects/element-ng/translate/si-translatable-keys.interface.ts
+++ b/projects/element-ng/translate/si-translatable-keys.interface.ts
@@ -165,6 +165,7 @@ export interface SiTranslatableKeys {
   'SI_LOGIN_BASIC.USERNAME'?: string;
   'SI_LOGIN_SINGLE-SIGN-ON.LOGIN_SIGN_UP'?: string;
   'SI_MAIN_DETAIL_CONTAINER.BACK'?: string;
+  'SI_MARKDOWN_RENDERER.COPY'?: string;
   'SI_NAVBAR.OPEN_LAUNCHPAD'?: string;
   'SI_NAVBAR.TOGGLE_NAVIGATION'?: string;
   'SI_NAVBAR_VERTICAL.COLLAPSE'?: string;
diff --git a/projects/element-theme/src/styles/components/_markdown.scss b/projects/element-theme/src/styles/components/_markdown.scss
index 6cf0f4755..af5ba92d1 100644
--- a/projects/element-theme/src/styles/components/_markdown.scss
+++ b/projects/element-theme/src/styles/components/_markdown.scss
@@ -1,7 +1,7 @@
-@use '../variables';
-
 @use 'sass:map';
 
+@use '../variables';
+
 .markdown-content {
   max-inline-size: 100%;
   min-inline-size: 0;
@@ -43,6 +43,12 @@
     overflow-wrap: break-word;
   }
 
+  .code-wrapper {
+    position: relative;
+    inline-size: max-content;
+    max-inline-size: 100%;
+  }
+
   pre {
     background-color: variables.$element-ui-4;
     padding-block: map.get(variables.$spacers, 4);
@@ -66,6 +72,16 @@
     }
   }
 
+  .copy-code-btn {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    z-index: 1;
+  }
+
   em {
     font-style: italic;
   }
diff --git a/src/app/examples/si-chat-messages/si-ai-message.ts b/src/app/examples/si-chat-messages/si-ai-message.ts
index 7b46f6353..b37387867 100644
--- a/src/app/examples/si-chat-messages/si-ai-message.ts
+++ b/src/app/examples/si-chat-messages/si-ai-message.ts
@@ -7,7 +7,9 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { MessageAction, SiAiMessageComponent } from '@siemens/element-ng/chat-messages';
 import { getMarkdownRenderer } from '@siemens/element-ng/markdown-renderer';
 import { MenuItemAction } from '@siemens/element-ng/menu';
+import { injectSiTranslateService } from '@siemens/element-translate-ng/translate';
 import { LOG_EVENT } from '@siemens/live-preview';
+import hljs from 'highlight.js';
 
 @Component({
   selector: 'app-sample',
@@ -18,8 +20,12 @@ import { LOG_EVENT } from '@siemens/live-preview';
 export class SampleComponent {
   logEvent = inject(LOG_EVENT);
   private sanitizer = inject(DomSanitizer);
+  private translate = injectSiTranslateService();
 
-  protected markdownRenderer = getMarkdownRenderer(this.sanitizer);
+  protected markdownRenderer = getMarkdownRenderer(this.sanitizer, {
+    copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY',
+    translateSync: this.translate.translateSync.bind(this.translate)
+  });
 
   content = `Here's a **simple response** with basic formatting.
 
diff --git a/src/app/examples/si-chat-messages/si-chat-container.ts b/src/app/examples/si-chat-messages/si-chat-container.ts
index 60fc3b431..6dfef63fd 100644
--- a/src/app/examples/si-chat-messages/si-chat-container.ts
+++ b/src/app/examples/si-chat-messages/si-chat-container.ts
@@ -32,6 +32,7 @@ import {
 } from '@siemens/element-ng/markdown-renderer';
 import { MenuItem } from '@siemens/element-ng/menu';
 import { SiToastNotificationService } from '@siemens/element-ng/toast-notification';
+import { injectSiTranslateService } from '@siemens/element-translate-ng/translate';
 import { LOG_EVENT } from '@siemens/live-preview';
 
 interface ChatMessage {
@@ -63,8 +64,12 @@ export class SampleComponent {
   private readonly modalTemplate = viewChild<TemplateRef<any>>('modalTemplate');
   private sanitizer = inject(DomSanitizer);
   private readonly toastService = inject(SiToastNotificationService);
+  private translate = injectSiTranslateService();
 
-  protected markdownRenderer = getMarkdownRenderer(this.sanitizer);
+  protected markdownRenderer = getMarkdownRenderer(this.sanitizer, {
+    copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY',
+    translateSync: this.translate.translateSync.bind(this.translate)
+  });
 
   readonly preAttachedFiles: ChatInputAttachment[] = [
     {
@@ -100,10 +105,10 @@ export class SampleComponent {
       ],
       actions: [
         {
-          label: 'Copy message',
+          label: 'Export message',
           icon: 'element-export',
           action: (message: ChatMessage) =>
-            this.logEvent(`Copy user message ${message.content.slice(0, 20)}...`)
+            this.logEvent(`Export user message ${message.content.slice(0, 20)}...`)
         }
       ]
     },
@@ -114,14 +119,14 @@ export class SampleComponent {
   Let me examine the structure and provide guidance.`,
       actions: [
         {
-          label: 'Good response',
+          label: 'Add to list',
           icon: 'element-plus',
-          action: (_message: ChatMessage) => this.logEvent('Thumbs up for AI message')
+          action: (_message: ChatMessage) => this.logEvent('Add AI message to list')
         },
         {
-          label: 'Copy response',
+          label: 'Export response',
           icon: 'element-export',
-          action: (_message: ChatMessage) => this.logEvent('Copy AI message')
+          action: (_message: ChatMessage) => this.logEvent('Export AI message')
         },
         {
           label: 'Retry response',
@@ -141,10 +146,10 @@ export class SampleComponent {
         'Perfect! What should I focus on first\n\nI also want to make sure the performance is optimized for large datasets since this will be used in production with potentially millions of rows?',
       actions: [
         {
-          label: 'Copy message',
+          label: 'Export message',
           icon: 'element-export',
           action: (_message: ChatMessage) =>
-            this.logEvent(`Copy user message ${_message.content.slice(0, 20)}...`)
+            this.logEvent(`Export user message ${_message.content.slice(0, 20)}...`)
         }
       ]
     },
@@ -163,23 +168,23 @@ export class SampleComponent {
 
   inputActions: MessageAction[] = [
     {
-      label: 'Text formatting',
+      label: 'Format text',
       icon: 'element-brush',
-      action: () => this.logEvent('Text formatting clicked')
+      action: () => this.logEvent('Format text clicked')
     },
     {
-      label: 'Message templates',
+      label: 'Use template',
       icon: 'element-template',
-      action: () => this.logEvent('Templates clicked')
+      action: () => this.logEvent('Use template clicked')
     }
   ];
 
   userActions: MessageAction[] = [
     {
-      label: 'Copy message',
+      label: 'Export message',
       icon: 'element-export',
       action: (_message: ChatMessage) =>
-        this.logEvent(`Copy user message ${_message.content.slice(0, 20)}...`)
+        this.logEvent(`Export user message ${_message.content.slice(0, 20)}...`)
     },
     {
       label: 'Delete message',
@@ -191,14 +196,14 @@ export class SampleComponent {
 
   aiActions: MessageAction[] = [
     {
-      label: 'Good response',
+      label: 'Add to list',
       icon: 'element-plus',
-      action: (_message: ChatMessage) => this.logEvent('Thumbs up for AI message')
+      action: (_message: ChatMessage) => this.logEvent('Add AI message to list')
     },
     {
-      label: 'Copy response',
+      label: 'Export response',
       icon: 'element-export',
-      action: (_message: ChatMessage) => this.logEvent('Copy AI message')
+      action: (_message: ChatMessage) => this.logEvent('Export AI message')
     }
   ];
 
@@ -211,9 +216,9 @@ export class SampleComponent {
         content: event.content,
         actions: [
           {
-            label: 'Copy message',
+            label: 'Export message',
             icon: 'element-export',
-            action: () => this.logEvent('Copy user message')
+            action: () => this.logEvent('Export user message')
           }
         ],
         attachments: event.attachments.map(att => ({
@@ -253,14 +258,14 @@ export class SampleComponent {
             content: response,
             actions: [
               {
-                label: 'Good response',
+                label: 'Add to list',
                 icon: 'element-plus',
-                action: () => this.logEvent('Thumbs up for AI message')
+                action: () => this.logEvent('Add AI message to list')
               },
               {
-                label: 'Copy response',
+                label: 'Export response',
                 icon: 'element-export',
-                action: () => this.logEvent('Copy AI message')
+                action: () => this.logEvent('Export AI message')
               }
             ]
           }
diff --git a/src/app/examples/si-chat-messages/si-user-message.ts b/src/app/examples/si-chat-messages/si-user-message.ts
index be6738c71..d5715da8c 100644
--- a/src/app/examples/si-chat-messages/si-user-message.ts
+++ b/src/app/examples/si-chat-messages/si-user-message.ts
@@ -10,6 +10,7 @@ import {
   MessageAction
 } from '@siemens/element-ng/chat-messages';
 import { getMarkdownRenderer } from '@siemens/element-ng/markdown-renderer';
+import { injectSiTranslateService } from '@siemens/element-translate-ng/translate';
 import { LOG_EVENT } from '@siemens/live-preview';
 
 @Component({
@@ -21,8 +22,12 @@ import { LOG_EVENT } from '@siemens/live-preview';
 export class SampleComponent {
   logEvent = inject(LOG_EVENT);
   private sanitizer = inject(DomSanitizer);
+  private translate = injectSiTranslateService();
 
-  protected markdownRenderer = getMarkdownRenderer(this.sanitizer);
+  protected markdownRenderer = getMarkdownRenderer(this.sanitizer, {
+    copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY',
+    translateSync: this.translate.translateSync.bind(this.translate)
+  });
 
   content = `Can you help me with this **code snippet**?
 

From a21fc3dced7c8a4ed8bd69ed70cd3c27160ee33e Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Sat, 6 Dec 2025 14:48:47 +0100
Subject: [PATCH 02/30] feat(chat-messages): add table download button to
 markdown renderer

---
 .../element-ng/markdown-renderer/index.api.md |   3 +
 api-goldens/element-ng/translate/index.api.md |   2 +
 .../markdown-renderer/markdown-renderer.ts    | 126 +++++++++++++++++-
 .../si-markdown-renderer.component.ts         |  18 +++
 .../si-translatable-keys.interface.ts         |   1 +
 .../src/styles/components/_markdown.scss      |  22 ++-
 .../si-chat-messages/si-ai-message.ts         |   1 +
 .../si-chat-messages/si-chat-container.ts     |   1 +
 .../si-chat-messages/si-user-message.ts       |   1 +
 9 files changed, 168 insertions(+), 7 deletions(-)

diff --git a/api-goldens/element-ng/markdown-renderer/index.api.md b/api-goldens/element-ng/markdown-renderer/index.api.md
index 5597c397c..ee60c23eb 100644
--- a/api-goldens/element-ng/markdown-renderer/index.api.md
+++ b/api-goldens/element-ng/markdown-renderer/index.api.md
@@ -16,6 +16,7 @@ export const getMarkdownRenderer: (sanitizer: DomSanitizer, options?: MarkdownRe
 // @public (undocumented)
 export interface MarkdownRendererOptions {
     copyCodeButton?: TranslatableString;
+    downloadTableButton?: TranslatableString;
     translateSync?: SiTranslateService['translateSync'];
 }
 
@@ -24,6 +25,8 @@ export class SiMarkdownRendererComponent {
     constructor();
     readonly copyButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
     readonly disableCopyButton: _angular_core.InputSignal<boolean>;
+    readonly disableDownloadButton: _angular_core.InputSignal<boolean>;
+    readonly downloadButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
     readonly text: _angular_core.InputSignal<string>;
 }
 
diff --git a/api-goldens/element-ng/translate/index.api.md b/api-goldens/element-ng/translate/index.api.md
index 90813d72a..a2aac848f 100644
--- a/api-goldens/element-ng/translate/index.api.md
+++ b/api-goldens/element-ng/translate/index.api.md
@@ -336,6 +336,8 @@ export interface SiTranslatableKeys {
     // (undocumented)
     'SI_MARKDOWN_RENDERER.COPY'?: string;
     // (undocumented)
+    'SI_MARKDOWN_RENDERER.DOWNLOAD'?: string;
+    // (undocumented)
     'SI_NAVBAR.OPEN_LAUNCHPAD'?: string;
     // (undocumented)
     'SI_NAVBAR.TOGGLE_NAVIGATION'?: string;
diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index f57119ca6..20a6b45b3 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -17,7 +17,13 @@ export interface MarkdownRendererOptions {
    */
   copyCodeButton?: TranslatableString;
   /**
-   * Optional translate sync function of a service instance for translating the copy button label.
+   * Provide this to enable the table CSV download button functionality.
+   * Download button label for table CSV export (will be translated internally if translateService is provided).
+   * @defaultValue undefined
+   */
+  downloadTableButton?: TranslatableString;
+  /**
+   * Optional translate sync function of a service instance for translating the copy button label and download button label.
    * @defaultValue undefined
    */
   translateSync?: SiTranslateService['translateSync'];
@@ -44,6 +50,9 @@ export const getMarkdownRenderer = (
     const div = document.createElement('div');
     div.className = 'markdown-content text-break';
 
+    // Map to store original table cell content: tableIndex -> rowIndex -> columnIndex -> original text
+    const tableCellData = new Map<number, Map<number, Map<number, string>>>();
+
     if (!text) {
       return div;
     }
@@ -61,11 +70,27 @@ export const getMarkdownRenderer = (
     let html = sanitizedInput.replace(new RegExp(newlinePlaceholder, 'g'), '\n');
 
     // Process tables first
+    let tableIndex = -1;
+    const rowIndexMap = new Map<number, number>();
+
     html = html
       // Remove table separator lines first
       .replace(/^\|\s*[-:]+.*\|\s*$/gm, '')
       // Process table rows
       .replace(/^\|(.+)\|\s*$/gm, (_match, htmlContent) => {
+        // Track which table we're in (increment on first row of each table)
+        const isFirstRow = rowIndexMap.get(tableIndex) === undefined;
+        if (isFirstRow) {
+          tableIndex++;
+          rowIndexMap.set(tableIndex, 0);
+          tableCellData.set(tableIndex, new Map());
+        }
+
+        const currentRowIndex = rowIndexMap.get(tableIndex)!;
+        const tableData = tableCellData.get(tableIndex)!;
+        tableData.set(currentRowIndex, new Map());
+        const rowData = tableData.get(currentRowIndex)!;
+
         // Handle escaped pipes by temporarily replacing them
         const escapedPipePlaceholder = `--ESCAPED-PIPE-${Math.random().toString(36).substring(2, 15)}--`;
         const contentWithPlaceholders = htmlContent.replace(/\\\|/g, escapedPipePlaceholder);
@@ -103,17 +128,54 @@ export const getMarkdownRenderer = (
           return preProcessedCell;
         });
 
-        // Recursively process cell content for markdown formatting
-        const processedCells = cellsWithNewlines.map((cell: string) => {
-          return transformMarkdownText(cell, false, sanitizer);
+        // Recursively process cell content for markdown formatting and store original data
+        const processedCells = cellsWithNewlines.map((cell: string, index: number) => {
+          const formattedContent = transformMarkdownText(cell, false, sanitizer, options);
+          // Store original cell text in the map
+          rowData.set(index, cells[index]);
+          return formattedContent;
         });
 
+        // Increment row index for next row
+        rowIndexMap.set(tableIndex, currentRowIndex + 1);
+
         return `<tr>${processedCells.map((cell: string) => `<td>${cell}</td>`).join('')}</tr>`;
       })
       // Wrap table rows in table elements
-      .replace(/(<tr>.*?<\/tr>)/gs, '<table class="table table-hover">$1</table>')
+      .replace(
+        /(<tr>.*?<\/tr>)/gs,
+        (() => {
+          let currentTableWrapIndex = -1;
+
+          const translatedLabel =
+            options?.downloadTableButton && options?.translateSync
+              ? options.translateSync(options.downloadTableButton)
+              : options?.downloadTableButton
+                ? String(options.downloadTableButton)
+                : undefined;
+          const buttonLabel = translatedLabel
+            ?.replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+
+          return (match: string) => {
+            currentTableWrapIndex++;
+            const tableId = `table-${Math.random().toString(36).substring(2, 15)}`;
+
+            const downloadTableCsvButton = buttonLabel
+              ? `<button type="button" class="btn btn-circle btn-sm btn-tertiary element-download download-table-btn" data-table-id="${tableId}" data-table-index="${currentTableWrapIndex}" aria-label="${buttonLabel}"></button>`
+              : '';
+
+            return `<div class="table-wrapper">${downloadTableCsvButton}<table class="table table-hover" id="${tableId}">${match}</table></div>`;
+          };
+        })()
+      )
       // Remove duplicate table tags
-      .replace(/<\/table>\s*<table class="table table-hover">/g, '');
+      .replace(
+        /<\/table><\/div>\s*<div class="table-wrapper"><button[^>]*><\/button><table class="table table-hover"[^>]*>/g,
+        ''
+      );
 
     html = transformMarkdownText(html, true, sanitizer, options);
 
@@ -141,6 +203,58 @@ export const getMarkdownRenderer = (
         });
       });
     });
+
+    // Add download functionality to tables (CSV export)
+    div.querySelectorAll('.download-table-btn').forEach(btn => {
+      btn.addEventListener('click', e => {
+        const button = e.target as HTMLButtonElement;
+        const tableId = button.getAttribute('data-table-id');
+        const tableIndexStr = button.getAttribute('data-table-index');
+        if (!tableId || tableIndexStr === null) {
+          return;
+        }
+
+        const tableElement = div.querySelector(`#${tableId}`) as HTMLTableElement;
+        if (!tableElement) {
+          return;
+        }
+
+        const currentTableIndex = parseInt(tableIndexStr, 10);
+        const tableData = tableCellData.get(currentTableIndex);
+
+        // Convert table to CSV
+        const rows = Array.from(tableElement.querySelectorAll('tr'));
+        const csv = rows
+          .map((row, rowIndex) => {
+            const cells = Array.from(row.querySelectorAll('td, th'));
+            return cells
+              .map((cell, columnIndex) => {
+                // Use original text from map, fallback to textContent
+                const cellText =
+                  tableData?.get(rowIndex)?.get(columnIndex) ?? cell.textContent ?? '';
+                // Escape quotes and wrap in quotes if contains comma, quote, or newline
+                if (cellText.includes(',') || cellText.includes('"') || cellText.includes('\n')) {
+                  return `"${cellText.replace(/"/g, '""')}"`;
+                }
+                return cellText;
+              })
+              .join(',');
+          })
+          .join('\n');
+
+        // Create and trigger download
+        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+        const link = document.createElement('a');
+        const url = URL.createObjectURL(blob);
+        link.setAttribute('href', url);
+        link.setAttribute('download', 'table.csv');
+        link.style.visibility = 'hidden';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      });
+    });
     return div;
   };
 };
diff --git a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
index f268c9051..12c2f6c86 100644
--- a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
+++ b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
@@ -33,6 +33,12 @@ export class SiMarkdownRendererComponent {
    */
   readonly disableCopyButton = input<boolean>(false);
 
+  /**
+   * Do not display the download CSV button for tables.
+   * @defaultValue false
+   */
+  readonly disableDownloadButton = input<boolean>(false);
+
   /**
    * Label for the copy button.
    * @defaultValue
@@ -42,6 +48,17 @@ export class SiMarkdownRendererComponent {
    */
   readonly copyButtonLabel = input(t(() => $localize`:@@SI_MARKDOWN_RENDERER.COPY:Copy`));
 
+  /**
+   * Label for the download CSV button.
+   * @defaultValue
+   * ```
+   * t(() => $localize`:@@SI_MARKDOWN_RENDERER.DOWNLOAD:Download CSV`)
+   * ```
+   */
+  readonly downloadButtonLabel = input(
+    t(() => $localize`:@@SI_MARKDOWN_RENDERER.DOWNLOAD:Download CSV`)
+  );
+
   constructor() {
     effect(() => {
       const contentValue = this.text();
@@ -49,6 +66,7 @@ export class SiMarkdownRendererComponent {
 
       const options: MarkdownRendererOptions | undefined = {
         copyCodeButton: !this.disableCopyButton() ? this.copyButtonLabel() : undefined,
+        downloadTableButton: !this.disableDownloadButton() ? this.downloadButtonLabel() : undefined,
         translateSync: this.translateService.translateSync.bind(this.translateService)
       };
 
diff --git a/projects/element-ng/translate/si-translatable-keys.interface.ts b/projects/element-ng/translate/si-translatable-keys.interface.ts
index ee9f03e33..e4e0390a5 100644
--- a/projects/element-ng/translate/si-translatable-keys.interface.ts
+++ b/projects/element-ng/translate/si-translatable-keys.interface.ts
@@ -166,6 +166,7 @@ export interface SiTranslatableKeys {
   'SI_LOGIN_SINGLE-SIGN-ON.LOGIN_SIGN_UP'?: string;
   'SI_MAIN_DETAIL_CONTAINER.BACK'?: string;
   'SI_MARKDOWN_RENDERER.COPY'?: string;
+  'SI_MARKDOWN_RENDERER.DOWNLOAD'?: string;
   'SI_NAVBAR.OPEN_LAUNCHPAD'?: string;
   'SI_NAVBAR.TOGGLE_NAVIGATION'?: string;
   'SI_NAVBAR_VERTICAL.COLLAPSE'?: string;
diff --git a/projects/element-theme/src/styles/components/_markdown.scss b/projects/element-theme/src/styles/components/_markdown.scss
index af5ba92d1..20e7cb089 100644
--- a/projects/element-theme/src/styles/components/_markdown.scss
+++ b/projects/element-theme/src/styles/components/_markdown.scss
@@ -105,13 +105,33 @@
     margin-block-end: 0 !important;
   }
 
-  table {
+  .table-wrapper {
+    position: relative;
     inline-size: max-content;
     max-inline-size: 100%;
     // stylelint-disable-next-line declaration-no-important
     margin-block-start: map.get(variables.$spacers, 6) !important;
     // stylelint-disable-next-line declaration-no-important
     margin-block-end: 0 !important;
+  }
+
+  .download-table-btn {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    z-index: 1;
+  }
+
+  table {
+    inline-size: max-content;
+    max-inline-size: 100%;
+    // stylelint-disable-next-line declaration-no-important
+    margin-block-start: 0 !important;
+    // stylelint-disable-next-line declaration-no-important
+    margin-block-end: 0 !important;
     overflow: auto;
     display: block;
     white-space: nowrap;
diff --git a/src/app/examples/si-chat-messages/si-ai-message.ts b/src/app/examples/si-chat-messages/si-ai-message.ts
index b37387867..2bcd6354f 100644
--- a/src/app/examples/si-chat-messages/si-ai-message.ts
+++ b/src/app/examples/si-chat-messages/si-ai-message.ts
@@ -24,6 +24,7 @@ export class SampleComponent {
 
   protected markdownRenderer = getMarkdownRenderer(this.sanitizer, {
     copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY',
+    downloadTableButton: 'SI_MARKDOWN_RENDERER.DOWNLOAD',
     translateSync: this.translate.translateSync.bind(this.translate)
   });
 
diff --git a/src/app/examples/si-chat-messages/si-chat-container.ts b/src/app/examples/si-chat-messages/si-chat-container.ts
index 6dfef63fd..8140743a2 100644
--- a/src/app/examples/si-chat-messages/si-chat-container.ts
+++ b/src/app/examples/si-chat-messages/si-chat-container.ts
@@ -68,6 +68,7 @@ export class SampleComponent {
 
   protected markdownRenderer = getMarkdownRenderer(this.sanitizer, {
     copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY',
+    downloadTableButton: 'SI_MARKDOWN_RENDERER.DOWNLOAD',
     translateSync: this.translate.translateSync.bind(this.translate)
   });
 
diff --git a/src/app/examples/si-chat-messages/si-user-message.ts b/src/app/examples/si-chat-messages/si-user-message.ts
index d5715da8c..9a556118e 100644
--- a/src/app/examples/si-chat-messages/si-user-message.ts
+++ b/src/app/examples/si-chat-messages/si-user-message.ts
@@ -26,6 +26,7 @@ export class SampleComponent {
 
   protected markdownRenderer = getMarkdownRenderer(this.sanitizer, {
     copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY',
+    downloadTableButton: 'SI_MARKDOWN_RENDERER.DOWNLOAD',
     translateSync: this.translate.translateSync.bind(this.translate)
   });
 

From aec92055cc525c0a15f3f0d1459f1e27f34bc473 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Sat, 6 Dec 2025 14:45:04 +0100
Subject: [PATCH 03/30] fix(chat-messages): complete unfinished code blocks for
 streaming in markdown renderer

---
 .../markdown-renderer/markdown-renderer.ts           | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index 20a6b45b3..be1b5b792 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -273,6 +273,11 @@ const transformMarkdownText = (
   const escapedUnderscorePlaceholder = `--UNDERSCORE-${Math.random().toString(36).substring(2, 15)}--`;
 
   // Apply markdown transformations to the sanitized content
+
+  // Add temporary closing backticks at the end to handle incomplete code blocks during streaming
+  const tempClosingMarker = `\n\`\`\`--TEMP-CLOSE--\n`;
+  html = html + tempClosingMarker;
+
   html = html
     // Multiline code blocks ```code``` with placeholder
     .replace(/```[^\n]*\n?([\s\S]*?)\n?```/g, (match, content) => {
@@ -303,7 +308,12 @@ const transformMarkdownText = (
       const codePlaceholder = `--CODE-BLOCK-${Math.random().toString(36).substring(2, 15)}--`;
       codeSectionPlaceholderMap.set(codePlaceholder, code);
       return codePlaceholder;
-    })
+    });
+
+  // Remove temporary closing marker if it's still there (wasn't part of a code block)
+  html = html.replace(tempClosingMarker, '').replace(/--TEMP-CLOSE--/g, '');
+
+  html = html
 
     // Inline code `text`
     .replace(/`(.*?)`/g, (match, content) => {

From 3e38d1b162f24e8a6e621b18090ed07a5c76ec07 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Sat, 6 Dec 2025 17:49:35 +0100
Subject: [PATCH 04/30] fix(chat-messages): sanitize code-block separately

---
 .../markdown-renderer/markdown-renderer.ts    | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index be1b5b792..736afbdd9 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -61,7 +61,17 @@ export const getMarkdownRenderer = (
     const newlinePlaceholder = `--NEWLINE-${Math.random().toString(36).substring(2, 15)}--`;
 
     // Replace newlines with placeholder before sanitization
-    const valueWithPlaceholders = text.replace(/\n/g, newlinePlaceholder);
+    let valueWithPlaceholders = text.replace(/\n/g, newlinePlaceholder);
+
+    // Replace code blocks with placeholders to preserve them during sanitization
+    const codeBlockPlaceholderMap = new Map<string, string>();
+    valueWithPlaceholders = valueWithPlaceholders
+      // Preserve code blocks by replacing them with placeholders
+      .replace(/```([\s\S]*?)```/g, match => {
+        const codePlaceholder = `--CODE-BLOCK-${Math.random().toString(36).substring(2, 15)}--`;
+        codeBlockPlaceholderMap.set(codePlaceholder, match);
+        return codePlaceholder;
+      });
 
     // Sanitize the input using Angular's HTML sanitizer
     const sanitizedInput = sanitizer.sanitize(SecurityContext.HTML, valueWithPlaceholders) ?? '';
@@ -69,6 +79,15 @@ export const getMarkdownRenderer = (
     // Restore newlines from placeholder for markdown processing.
     let html = sanitizedInput.replace(new RegExp(newlinePlaceholder, 'g'), '\n');
 
+    // Restore code blocks from placeholders
+    codeBlockPlaceholderMap.forEach((codeBlock, placeholder) => {
+      // In the blocks, restore newlines from placeholder for markdown processing.
+      html = html.replace(
+        new RegExp(placeholder, 'g'),
+        codeBlock.replace(new RegExp(newlinePlaceholder, 'g'), '\n')
+      );
+    });
+
     // Process tables first
     let tableIndex = -1;
     const rowIndexMap = new Map<number, number>();
@@ -289,6 +308,9 @@ const transformMarkdownText = (
 
       const codeId = `code-${Math.random().toString(36).substring(2, 15)}`;
 
+      // Apply sanitization to the final code content
+      const codeBlockContent = sanitizer.sanitize(SecurityContext.HTML, escapedCode);
+
       const translatedLabel =
         options?.copyCodeButton && options?.translateSync
           ? options.translateSync(options.copyCodeButton)
@@ -304,7 +326,7 @@ const transformMarkdownText = (
         ? `<button type="button" class="btn btn-circle btn-sm btn-tertiary element-copy copy-code-btn" data-code-id="${codeId}" aria-label="${buttonLabel}"></button>`
         : '';
 
-      const code = `<div class="code-wrapper">${codeCopyButton}<pre><code id="${codeId}">${escapedCode}</code></pre></div>`;
+      const code = `<div class="code-wrapper">${codeCopyButton}<pre><code id="${codeId}">${codeBlockContent}</code></pre></div>`;
       const codePlaceholder = `--CODE-BLOCK-${Math.random().toString(36).substring(2, 15)}--`;
       codeSectionPlaceholderMap.set(codePlaceholder, code);
       return codePlaceholder;

From eaaa2d8cac42bc8b0335395c6150fd28f592bb79 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Sat, 6 Dec 2025 14:46:26 +0100
Subject: [PATCH 05/30] feat(chat-messages): add support for code syntax
 highlighting in markdown renderer

---
 .../element-ng/markdown-renderer/index.api.md |   2 +
 package-lock.json                             |  19 ++-
 package.json                                  |   1 +
 .../markdown-renderer/markdown-renderer.ts    |  21 ++-
 .../si-markdown-renderer.component.ts         |  37 +++--
 .../components/_markdown-hljs-theme.scss      | 142 ++++++++++++++++++
 .../src/styles/components/_markdown.scss      |   2 +
 .../si-chat-messages/si-ai-message.ts         |  17 ++-
 .../si-chat-messages/si-chat-container.ts     |  18 ++-
 .../si-chat-messages/si-user-message.ts       |  18 ++-
 .../si-markdown-renderer.html                 |   2 +-
 .../si-markdown-renderer.ts                   |  17 +++
 12 files changed, 276 insertions(+), 20 deletions(-)
 create mode 100644 projects/element-theme/src/styles/components/_markdown-hljs-theme.scss

diff --git a/api-goldens/element-ng/markdown-renderer/index.api.md b/api-goldens/element-ng/markdown-renderer/index.api.md
index ee60c23eb..0b6dfd733 100644
--- a/api-goldens/element-ng/markdown-renderer/index.api.md
+++ b/api-goldens/element-ng/markdown-renderer/index.api.md
@@ -17,6 +17,7 @@ export const getMarkdownRenderer: (sanitizer: DomSanitizer, options?: MarkdownRe
 export interface MarkdownRendererOptions {
     copyCodeButton?: TranslatableString;
     downloadTableButton?: TranslatableString;
+    syntaxHighlighter?: (code: string, language?: string) => string | undefined;
     translateSync?: SiTranslateService['translateSync'];
 }
 
@@ -27,6 +28,7 @@ export class SiMarkdownRendererComponent {
     readonly disableCopyButton: _angular_core.InputSignal<boolean>;
     readonly disableDownloadButton: _angular_core.InputSignal<boolean>;
     readonly downloadButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    readonly syntaxHighlighter: _angular_core.InputSignal<((code: string, language?: string) => string | undefined) | undefined>;
     readonly text: _angular_core.InputSignal<string>;
 }
 
diff --git a/package-lock.json b/package-lock.json
index bd321a72b..26061b895 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -83,6 +83,7 @@
         "eslint-plugin-perfectionist": "5.3.1",
         "eslint-plugin-prefer-arrow": "1.2.3",
         "eslint-plugin-tsdoc": "0.5.0",
+        "highlight.js": "^11.11.1",
         "http-server": "14.1.1",
         "husky": "9.1.7",
         "jasmine": "5.13.0",
@@ -12090,6 +12091,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cli-highlight/node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/cli-highlight/node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -16220,13 +16231,13 @@
       }
     },
     "node_modules/highlight.js": {
-      "version": "10.7.3",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
-      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
       "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
-        "node": "*"
+        "node": ">=12.0.0"
       }
     },
     "node_modules/homedir-polyfill": {
diff --git a/package.json b/package.json
index 3bad464cc..fa816bfdc 100644
--- a/package.json
+++ b/package.json
@@ -151,6 +151,7 @@
     "eslint-plugin-perfectionist": "5.3.1",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "eslint-plugin-tsdoc": "0.5.0",
+    "highlight.js": "^11.11.1",
     "http-server": "14.1.1",
     "husky": "9.1.7",
     "jasmine": "5.13.0",
diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index 736afbdd9..dae902c59 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -22,6 +22,14 @@ export interface MarkdownRendererOptions {
    * @defaultValue undefined
    */
   downloadTableButton?: TranslatableString;
+  /**
+   * Optional syntax highlighter function.
+   * Receives code content and optional language, returns an HTML content string to display inside of the code block or undefined to use default rendering.
+   * The returned code is sanitized before insertion.
+   * Make sure that the required styles/scripts for the syntax highlighter are included in your application.
+   * @defaultValue undefined
+   */
+  syntaxHighlighter?: (code: string, language?: string) => string | undefined;
   /**
    * Optional translate sync function of a service instance for translating the copy button label and download button label.
    * @defaultValue undefined
@@ -299,7 +307,7 @@ const transformMarkdownText = (
 
   html = html
     // Multiline code blocks ```code``` with placeholder
-    .replace(/```[^\n]*\n?([\s\S]*?)\n?```/g, (match, content) => {
+    .replace(/```([^\n]*)\n?([\s\S]*?)\n?```/g, (match, language, content) => {
       // Escape HTML special characters in code blocks (not for security, but for correct display) and preserve inner backticks
       const escapedCode = content
         .replace(/</g, '&lt;')
@@ -308,8 +316,17 @@ const transformMarkdownText = (
 
       const codeId = `code-${Math.random().toString(36).substring(2, 15)}`;
 
+      // Apply syntax highlighting if highlighter is provided
+      const highlightedCode = options?.syntaxHighlighter
+        ? // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+          options.syntaxHighlighter(content, language?.trim() || undefined)
+        : undefined;
+
       // Apply sanitization to the final code content
-      const codeBlockContent = sanitizer.sanitize(SecurityContext.HTML, escapedCode);
+      const codeBlockContent = sanitizer.sanitize(
+        SecurityContext.HTML,
+        highlightedCode ?? escapedCode
+      );
 
       const translatedLabel =
         options?.copyCodeButton && options?.translateSync
diff --git a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
index 12c2f6c86..4b24a70bd 100644
--- a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
+++ b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
@@ -2,7 +2,7 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-import { Component, effect, inject, input, ElementRef } from '@angular/core';
+import { Component, computed, effect, inject, input, ElementRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { injectSiTranslateService, t } from '@siemens/element-translate-ng/translate';
 
@@ -39,6 +39,17 @@ export class SiMarkdownRendererComponent {
    */
   readonly disableDownloadButton = input<boolean>(false);
 
+  /**
+   * Optional syntax highlighter function for code blocks.
+   * Receives code content and optional language, returns an HTML content string to display inside of the code block or undefined to use default rendering.
+   * The returned code is sanitized before insertion.
+   * Make sure that the required styles/scripts for the syntax highlighter are included in your application.
+   * @defaultValue undefined
+   */
+  readonly syntaxHighlighter = input<
+    ((code: string, language?: string) => string | undefined) | undefined
+  >(undefined);
+
   /**
    * Label for the copy button.
    * @defaultValue
@@ -59,21 +70,27 @@ export class SiMarkdownRendererComponent {
     t(() => $localize`:@@SI_MARKDOWN_RENDERER.DOWNLOAD:Download CSV`)
   );
 
+  private readonly markdownRenderer = computed(() => {
+    const highlighterFn = this.syntaxHighlighter();
+
+    const options: MarkdownRendererOptions | undefined = {
+      copyCodeButton: !this.disableCopyButton() ? this.copyButtonLabel() : undefined,
+      downloadTableButton: !this.disableDownloadButton() ? this.downloadButtonLabel() : undefined,
+      syntaxHighlighter: highlighterFn,
+      translateSync: this.translateService.translateSync.bind(this.translateService)
+    };
+
+    return getMarkdownRenderer(this.sanitizer, options);
+  });
+
   constructor() {
     effect(() => {
       const contentValue = this.text();
       const containerEl = this.hostElement.nativeElement;
-
-      const options: MarkdownRendererOptions | undefined = {
-        copyCodeButton: !this.disableCopyButton() ? this.copyButtonLabel() : undefined,
-        downloadTableButton: !this.disableDownloadButton() ? this.downloadButtonLabel() : undefined,
-        translateSync: this.translateService.translateSync.bind(this.translateService)
-      };
-
-      const markdownRenderer = getMarkdownRenderer(this.sanitizer, options);
+      const renderer = this.markdownRenderer();
 
       if (containerEl) {
-        const formattedNode = markdownRenderer(contentValue);
+        const formattedNode = renderer(contentValue);
         containerEl.innerHTML = '';
         containerEl.appendChild(formattedNode);
       }
diff --git a/projects/element-theme/src/styles/components/_markdown-hljs-theme.scss b/projects/element-theme/src/styles/components/_markdown-hljs-theme.scss
new file mode 100644
index 000000000..cf56192b6
--- /dev/null
+++ b/projects/element-theme/src/styles/components/_markdown-hljs-theme.scss
@@ -0,0 +1,142 @@
+@use '../variables';
+
+// stylelint-disable selector-class-pattern
+
+// Custom highlight.js theme using Element Design System tokens
+// Automatically adapts to light and dark themes
+// Token mapping:
+// 1. Default and text: element-text-primary
+// 2. Keywords: element-data-purple-2
+// 3. Operators: element-data-plum-2
+// 4. Variables: element-data-6
+// 5. Functions: element-text-caution
+// 6. Strings: element-text-warning
+// 7. Numbers: element-text-success
+// 8. Constants: element-data-13
+// 9. Comments: element-data-green-3
+// 10. Punctuation: element-data-17
+// 11. Tags: element-data-5
+// 12. Types: element-data-4
+// 13. Invalid: element-data-10
+
+.markdown-content {
+  // 1. Default and text
+  .hljs {
+    color: variables.$element-text-primary;
+  }
+
+  // 2. Keywords
+  .hljs-keyword,
+  .hljs-literal {
+    color: variables.$element-data-purple-2;
+  }
+
+  // 3. Special keywords and operators
+  .hljs-operator {
+    color: variables.$element-data-plum-2;
+  }
+
+  // 4. Variables
+  .hljs-variable,
+  .hljs-variable.language_,
+  .hljs-variable.constant_,
+  .hljs-params,
+  .hljs-property {
+    color: variables.$element-data-6;
+  }
+
+  // 5. Functions and methods
+  .hljs-title,
+  .hljs-title.function_,
+  .hljs-title.function_.invoke__,
+  .hljs-built_in {
+    color: variables.$element-text-caution;
+  }
+
+  // 6. Strings
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-char.escape_,
+  .hljs-subst,
+  .hljs-doctag {
+    color: variables.$element-text-warning;
+  }
+
+  // 7. Numbers
+  .hljs-number {
+    color: variables.$element-text-success;
+  }
+
+  // 8. Constants and enums
+  .hljs-symbol,
+  .hljs-bullet {
+    color: variables.$element-data-13;
+  }
+
+  // 9. Comments
+  .hljs-comment,
+  .hljs-quote {
+    color: variables.$element-data-green-3;
+  }
+
+  // 10. Brackets/punctuation
+  .hljs-punctuation {
+    color: variables.$element-data-17;
+  }
+
+  // 11. Tags (HTML/XML)
+  .hljs-tag,
+  .hljs-name,
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-selector-tag,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-meta,
+  .hljs-meta.keyword_,
+  .hljs-template-tag,
+  .hljs-template-variable {
+    color: variables.$element-data-5;
+  }
+
+  // 12. Types declaration and references
+  .hljs-type,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-section {
+    color: variables.$element-data-4;
+  }
+
+  // 13. Invalid
+  .hljs-deletion {
+    color: variables.$element-data-10;
+  }
+
+  // Additions in diffs (use comment green)
+  .hljs-addition {
+    color: variables.$element-data-green-3;
+  }
+
+  // Emphasis
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  // Strong emphasis
+  .hljs-strong {
+    font-weight: variables.$si-font-weight-semibold;
+  }
+
+  // Code blocks and formulas
+  .hljs-code,
+  .hljs-formula {
+    color: variables.$element-text-primary;
+  }
+
+  // Links
+  .hljs-link {
+    color: variables.$element-text-warning;
+  }
+}
diff --git a/projects/element-theme/src/styles/components/_markdown.scss b/projects/element-theme/src/styles/components/_markdown.scss
index 20e7cb089..6288f7036 100644
--- a/projects/element-theme/src/styles/components/_markdown.scss
+++ b/projects/element-theme/src/styles/components/_markdown.scss
@@ -2,6 +2,8 @@
 
 @use '../variables';
 
+@use './markdown-hljs-theme';
+
 .markdown-content {
   max-inline-size: 100%;
   min-inline-size: 0;
diff --git a/src/app/examples/si-chat-messages/si-ai-message.ts b/src/app/examples/si-chat-messages/si-ai-message.ts
index 2bcd6354f..d7e6dfc77 100644
--- a/src/app/examples/si-chat-messages/si-ai-message.ts
+++ b/src/app/examples/si-chat-messages/si-ai-message.ts
@@ -25,7 +25,22 @@ export class SampleComponent {
   protected markdownRenderer = getMarkdownRenderer(this.sanitizer, {
     copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY',
     downloadTableButton: 'SI_MARKDOWN_RENDERER.DOWNLOAD',
-    translateSync: this.translate.translateSync.bind(this.translate)
+    translateSync: this.translate.translateSync.bind(this.translate),
+    // Optional: Syntax highlighting with highlight.js
+    // This function returns highlighted HTML markup for the code content.
+    // The returned HTML is sanitized before insertion.
+    // Element provides a built-in highlight.js theme that adapts to light/dark mode.
+    // Make sure to include highlight.js as a dependency.
+    syntaxHighlighter: (code: string, language?: string): string | undefined => {
+      if (language && hljs.getLanguage(language)) {
+        try {
+          return hljs.highlight(code, { language }).value;
+        } catch {
+          // If highlighting fails, fall back to no highlighting
+        }
+      }
+      return undefined;
+    }
   });
 
   content = `Here's a **simple response** with basic formatting.
diff --git a/src/app/examples/si-chat-messages/si-chat-container.ts b/src/app/examples/si-chat-messages/si-chat-container.ts
index 8140743a2..96fe05142 100644
--- a/src/app/examples/si-chat-messages/si-chat-container.ts
+++ b/src/app/examples/si-chat-messages/si-chat-container.ts
@@ -34,6 +34,7 @@ import { MenuItem } from '@siemens/element-ng/menu';
 import { SiToastNotificationService } from '@siemens/element-ng/toast-notification';
 import { injectSiTranslateService } from '@siemens/element-translate-ng/translate';
 import { LOG_EVENT } from '@siemens/live-preview';
+import hljs from 'highlight.js';
 
 interface ChatMessage {
   type: 'user' | 'ai' | 'custom';
@@ -69,7 +70,22 @@ export class SampleComponent {
   protected markdownRenderer = getMarkdownRenderer(this.sanitizer, {
     copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY',
     downloadTableButton: 'SI_MARKDOWN_RENDERER.DOWNLOAD',
-    translateSync: this.translate.translateSync.bind(this.translate)
+    translateSync: this.translate.translateSync.bind(this.translate),
+    // Optional: Syntax highlighting with highlight.js
+    // This function returns highlighted HTML markup for the code content.
+    // The returned HTML is sanitized before insertion.
+    // Element provides a built-in highlight.js theme that adapts to light/dark mode.
+    // Make sure to include highlight.js as a dependency.
+    syntaxHighlighter: (code: string, language?: string): string | undefined => {
+      if (language && hljs.getLanguage(language)) {
+        try {
+          return hljs.highlight(code, { language }).value;
+        } catch {
+          // If highlighting fails, fall back to no highlighting
+        }
+      }
+      return undefined;
+    }
   });
 
   readonly preAttachedFiles: ChatInputAttachment[] = [
diff --git a/src/app/examples/si-chat-messages/si-user-message.ts b/src/app/examples/si-chat-messages/si-user-message.ts
index 9a556118e..0838a260e 100644
--- a/src/app/examples/si-chat-messages/si-user-message.ts
+++ b/src/app/examples/si-chat-messages/si-user-message.ts
@@ -12,6 +12,7 @@ import {
 import { getMarkdownRenderer } from '@siemens/element-ng/markdown-renderer';
 import { injectSiTranslateService } from '@siemens/element-translate-ng/translate';
 import { LOG_EVENT } from '@siemens/live-preview';
+import hljs from 'highlight.js';
 
 @Component({
   selector: 'app-sample',
@@ -27,7 +28,22 @@ export class SampleComponent {
   protected markdownRenderer = getMarkdownRenderer(this.sanitizer, {
     copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY',
     downloadTableButton: 'SI_MARKDOWN_RENDERER.DOWNLOAD',
-    translateSync: this.translate.translateSync.bind(this.translate)
+    translateSync: this.translate.translateSync.bind(this.translate),
+    // Optional: Syntax highlighting with highlight.js
+    // This function returns highlighted HTML markup for the code content.
+    // The returned HTML is sanitized before insertion.
+    // Element provides a built-in highlight.js theme that adapts to light/dark mode.
+    // Make sure to include highlight.js as a dependency.
+    syntaxHighlighter: (code: string, language?: string): string | undefined => {
+      if (language && hljs.getLanguage(language)) {
+        try {
+          return hljs.highlight(code, { language }).value;
+        } catch {
+          // If highlighting fails, fall back to no highlighting
+        }
+      }
+      return undefined;
+    }
   });
 
   content = `Can you help me with this **code snippet**?
diff --git a/src/app/examples/si-markdown-renderer/si-markdown-renderer.html b/src/app/examples/si-markdown-renderer/si-markdown-renderer.html
index cf0ac2aad..56494fbc3 100644
--- a/src/app/examples/si-markdown-renderer/si-markdown-renderer.html
+++ b/src/app/examples/si-markdown-renderer/si-markdown-renderer.html
@@ -1,3 +1,3 @@
 <div class="p-4">
-  <si-markdown-renderer [text]="markdownText()" />
+  <si-markdown-renderer [text]="markdownText()" [syntaxHighlighter]="syntaxHighlighter" />
 </div>
diff --git a/src/app/examples/si-markdown-renderer/si-markdown-renderer.ts b/src/app/examples/si-markdown-renderer/si-markdown-renderer.ts
index 1aa759fd4..32d7619ef 100644
--- a/src/app/examples/si-markdown-renderer/si-markdown-renderer.ts
+++ b/src/app/examples/si-markdown-renderer/si-markdown-renderer.ts
@@ -12,6 +12,7 @@ import {
   signal
 } from '@angular/core';
 import { SiMarkdownRendererComponent } from '@siemens/element-ng/markdown-renderer';
+import hljs from 'highlight.js';
 
 @Component({
   selector: 'app-sample',
@@ -24,6 +25,22 @@ export class SampleComponent implements OnInit {
   readonly markdownText = signal<string>('');
   private cdRef = inject(ChangeDetectorRef);
 
+  // Optional: Syntax highlighting with highlight.js
+  // This function returns highlighted HTML markup for the code content.
+  // The returned HTML is sanitized before insertion.
+  // Element provides a built-in highlight.js theme that adapts to light/dark mode.
+  // Make sure to include highlight.js as a dependency.
+  readonly syntaxHighlighter = (code: string, language?: string): string | undefined => {
+    if (language && hljs.getLanguage(language)) {
+      try {
+        return hljs.highlight(code, { language }).value;
+      } catch {
+        // If highlighting fails, fall back to no highlighting
+      }
+    }
+    return undefined;
+  };
+
   ngOnInit(): void {
     this.http.get('assets/sample-markdown.md', { responseType: 'text' }).subscribe(text => {
       this.markdownText.set(text);

From 717b3ca7defdf6a3998cf4f1fe75a1409b286153 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Mon, 22 Dec 2025 16:11:23 +0100
Subject: [PATCH 06/30] fix(chat-messages): support horizontal rule/divider in
 markdown renderer

---
 projects/element-ng/markdown-renderer/markdown-renderer.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index dae902c59..368f73f63 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -406,7 +406,10 @@ const transformMarkdownText = (
     .replace(/^#### (.*$)/gm, '<h4>$1</h4>')
     .replace(/^### (.*$)/gm, '<h3>$1</h3>')
     .replace(/^## (.*$)/gm, '<h2>$1</h2>')
-    .replace(/^# (.*$)/gm, '<h2><strong>$1</strong></h2>');
+    .replace(/^# (.*$)/gm, '<h2><strong>$1</strong></h2>')
+
+    // Horizontal rule ---
+    .replace(/^---+$/gm, '<hr>');
 
   html = html
     // Bullet points - handle each type separately (• gets converted to &#8226; by sanitizer)

From e0d15a52b71a1ed4779af3d37aa27c5e73c2291e Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Sat, 6 Dec 2025 15:12:14 +0100
Subject: [PATCH 07/30] docs(chat-messages): extend markdown renderer example

---
 .../e2e/element-examples/static.spec.ts       |  2 +-
 ...r-element-examples-chromium-dark-linux.png |  4 ++--
 ...-element-examples-chromium-light-linux.png |  4 ++--
 ...rkdown-renderer--si-markdown-renderer.yaml | 16 ++++++++++----
 src/assets/sample-markdown.md                 | 21 ++++++++++++++++++-
 5 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/playwright/e2e/element-examples/static.spec.ts b/playwright/e2e/element-examples/static.spec.ts
index af0c0ef63..7002c8182 100644
--- a/playwright/e2e/element-examples/static.spec.ts
+++ b/playwright/e2e/element-examples/static.spec.ts
@@ -110,7 +110,7 @@ test('typography/type-styles', ({ si }) => si.static());
 test('typography/display-styles', ({ si }) => si.static());
 test('typography/typography', ({ si }) => si.static());
 test('si-markdown-renderer/si-markdown-renderer', ({ si }) =>
-  si.static({ disabledA11yRules: ['link-in-text-block'] }));
+  si.static({ disabledA11yRules: ['link-in-text-block', 'color-contrast'] }));
 test('si-chat-messages/si-ai-message', ({ si }) => si.static());
 test('si-chat-messages/si-user-message', ({ si }) => si.static());
 test('si-chat-messages/si-chat-message', ({ si }) => si.static());
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png
index 51092e1d9..dc9ab7539 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:812619a4f94ad30609fb21818985dd7c84413357890804d08673e6215cbdd499
-size 142176
+oid sha256:1226683d7f271c163e51f305b54059d263456efc42b6a04fc0afdac9fcd26b87
+size 477971
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png
index 9abc29eea..53e7c592e 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:93b378bb738fd8100e34380f71d548aaf6cc0244424c403910e28807a3b1be90
-size 137686
+oid sha256:b3b7925adf2c8ee2dd53a22608b697c74ed13a21bd3bc9bbb801be6d55a36e41
+size 473756
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
index 8b16fe2e6..15379810c 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
@@ -1,5 +1,5 @@
-- heading "AI Assistant Response" [level=2]:
-  - strong: AI Assistant Response
+- heading "Sample Markdown Content" [level=2]:
+  - strong: Sample Markdown Content
 - paragraph:
   - text: Here's a
   - strong: comprehensive example
@@ -11,6 +11,7 @@
   - code: console.log('Hello World')
   - text: "or multi-line code blocks:"
 - paragraph
+- button "Copy"
 - code: "function calculateSum(a, b) { return a + b; } const result = calculateSum(5, 3); console.log(`Result: ${result}`);"
 - paragraph
 - heading "Formatting Options" [level=2]
@@ -33,7 +34,7 @@
     - /url: https://element.siemens.io
   - text: for more information, as well as local links like
   - link "Internal Page":
-    - /url: "/#/internal-page"
+    - /url: /#/internal-page
   - text: .
 - paragraph:
   - text: "Links are also automatically detected:"
@@ -47,6 +48,8 @@
   - listitem: Inline code highlighting
   - listitem: Bullet point lists
   - listitem: Blockquote support
+  - listitem: Or in the alternate format
+  - listitem: Another bullet point
 - paragraph: This paragraph appears after the list to show proper spacing.
 - heading "Ordered Lists" [level=2]
 - paragraph: "Step-by-step instructions:"
@@ -65,9 +68,14 @@
   - listitem: First ordered item
   - listitem: Second ordered item
 - paragraph: Final paragraph to show proper spacing.
+- heading "Images" [level=2]
+- paragraph: "Images can be included as follows:"
+- paragraph:
+  - img "Building Image"
 - heading "Tables" [level=2]
 - paragraph: "Tables are also supported:"
 - paragraph
+- button "Download CSV"
 - table:
   - rowgroup:
     - row "Feature Examples Status Notes":
@@ -140,4 +148,4 @@
           - code: <br>
           - text: tags
 - text: This paragraph appears after the tables to demonstrate proper spacing.
-- paragraph
+- paragraph
\ No newline at end of file
diff --git a/src/assets/sample-markdown.md b/src/assets/sample-markdown.md
index a0fd07cd4..c72640dc3 100644
--- a/src/assets/sample-markdown.md
+++ b/src/assets/sample-markdown.md
@@ -1,4 +1,4 @@
-# AI Assistant Response
+# Sample Markdown Content
 
 Here's a **comprehensive example** of markdown content with various formatting options.
 
@@ -17,6 +17,8 @@ const result = calculateSum(5, 3);
 console.log(`Result: ${result}`);
 ```
 
+---
+
 ## Formatting Options
 
 Here's a paragraph explaining the formatting options available.
@@ -33,6 +35,8 @@ You can include links such as [Element](https://element.siemens.io) for more inf
 
 Links are also automatically detected: https://angular.io
 
+---
+
 ## Lists and Bullets
 
 Here are the key features:
@@ -44,6 +48,9 @@ Here are the key features:
 - Bullet point lists
 - Blockquote support
 
+* Or in the alternate format
+* Another bullet point
+
 This paragraph appears after the list to show proper spacing.
 
 ## Ordered Lists
@@ -54,6 +61,8 @@ Step-by-step instructions:
 2. Then, implement the solution
 3. Finally, test the implementation
 
+---
+
 > This is a blockquote that demonstrates how quoted text appears in the markdown content component.
 
 This paragraph follows the blockquotes to demonstrate proper paragraph separation.
@@ -70,6 +79,16 @@ Another paragraph between the lists.
 
 Final paragraph to show proper spacing.
 
+---
+
+## Images
+
+Images can be included as follows:
+
+![Building Image](./assets/images/building-1.webp)
+
+---
+
 ## Tables
 
 Tables are also supported:

From 5853e943d5c8f3daa3ce8d672e896160cd464cdb Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Tue, 9 Dec 2025 14:18:16 +0100
Subject: [PATCH 08/30] fix(chat-messages): keep width of si-chat-message
 constrained

---
 .../element-ng/chat-messages/si-chat-message.component.scss     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/projects/element-ng/chat-messages/si-chat-message.component.scss b/projects/element-ng/chat-messages/si-chat-message.component.scss
index b2484bba0..4f34bb870 100644
--- a/projects/element-ng/chat-messages/si-chat-message.component.scss
+++ b/projects/element-ng/chat-messages/si-chat-message.component.scss
@@ -35,6 +35,7 @@
   margin-block-end: auto;
   background-color: var(--chat-message-bubble-bg);
   min-inline-size: 0;
+  max-inline-size: 100%;
   overflow-wrap: break-word;
   word-break: break-word;
 
@@ -50,6 +51,7 @@
 
 .message-wrapper {
   min-inline-size: 0;
+  max-inline-size: 100%;
 }
 
 .attachment-slot {

From d2bc17bf994faa44d5941febc08a1e4e42902f31 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Tue, 9 Dec 2025 15:05:08 +0100
Subject: [PATCH 09/30] fix(chat-messages): auto scroll si-chat-container
 correctly with fast streaming

---
 .../si-chat-container.component.ts            | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/projects/element-ng/chat-messages/si-chat-container.component.ts b/projects/element-ng/chat-messages/si-chat-container.component.ts
index a4f6cab3a..081077209 100644
--- a/projects/element-ng/chat-messages/si-chat-container.component.ts
+++ b/projects/element-ng/chat-messages/si-chat-container.component.ts
@@ -50,6 +50,9 @@ export class SiChatContainerComponent implements AfterContentInit, OnDestroy {
 
   private isUserAtBottom = true;
   private scrollTimeout: ReturnType<typeof setTimeout> | undefined;
+  private lastScrollTime = 0;
+  private pendingScroll = false;
+  private scrollDebounceMs = 7; // ~144fps
   private resizeObserver: ResizeObserver | undefined;
   private contentObserver: MutationObserver | undefined;
 
@@ -107,13 +110,28 @@ export class SiChatContainerComponent implements AfterContentInit, OnDestroy {
   }
 
   private debouncedScrollToBottom(): void {
+    const now = Date.now();
+    const timeSinceLastScroll = now - this.lastScrollTime;
+
+    if (timeSinceLastScroll >= this.scrollDebounceMs) {
+      this.lastScrollTime = now;
+      this.scrollToBottom();
+      this.pendingScroll = false;
+    } else {
+      this.pendingScroll = true;
+    }
+
     if (this.scrollTimeout) {
       clearTimeout(this.scrollTimeout);
     }
 
     this.scrollTimeout = setTimeout(() => {
-      this.scrollToBottom();
-    }, 100);
+      if (this.pendingScroll) {
+        this.lastScrollTime = Date.now();
+        this.scrollToBottom();
+        this.pendingScroll = false;
+      }
+    }, this.scrollDebounceMs);
   }
 
   private setupResizeObserver(): void {

From 4324397d5ba7654b88e9b03f769ac908e5688334 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Tue, 16 Dec 2025 11:20:39 +0100
Subject: [PATCH 10/30] fix(chat-messages): expose method to scroll to bottom

---
 .../element-ng/chat-messages/index.api.md       |  3 +++
 .../si-chat-container.component.ts              | 17 +++++++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/api-goldens/element-ng/chat-messages/index.api.md b/api-goldens/element-ng/chat-messages/index.api.md
index c6876cdf9..1b4115ee1 100644
--- a/api-goldens/element-ng/chat-messages/index.api.md
+++ b/api-goldens/element-ng/chat-messages/index.api.md
@@ -67,6 +67,9 @@ export class SiChatContainerComponent implements AfterContentInit, OnDestroy {
     readonly colorVariant: _angular_core.InputSignal<string>;
     focus(): void;
     readonly noAutoScroll: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    // (undocumented)
+    protected onScroll(): void;
+    scrollToBottom(): void;
 }
 
 // @public
diff --git a/projects/element-ng/chat-messages/si-chat-container.component.ts b/projects/element-ng/chat-messages/si-chat-container.component.ts
index 081077209..ebbc13e1d 100644
--- a/projects/element-ng/chat-messages/si-chat-container.component.ts
+++ b/projects/element-ng/chat-messages/si-chat-container.component.ts
@@ -80,7 +80,7 @@ export class SiChatContainerComponent implements AfterContentInit, OnDestroy {
   }
 
   ngAfterContentInit(): void {
-    this.scrollToBottom();
+    this.scrollToBottomDuringStreaming();
   }
 
   ngOnDestroy(): void {
@@ -95,7 +95,7 @@ export class SiChatContainerComponent implements AfterContentInit, OnDestroy {
     }
   }
 
-  private scrollToBottom(): void {
+  private scrollToBottomDuringStreaming(): void {
     if (this.noAutoScroll() || !this.isUserAtBottom) {
       return;
     }
@@ -115,7 +115,7 @@ export class SiChatContainerComponent implements AfterContentInit, OnDestroy {
 
     if (timeSinceLastScroll >= this.scrollDebounceMs) {
       this.lastScrollTime = now;
-      this.scrollToBottom();
+      this.scrollToBottomDuringStreaming();
       this.pendingScroll = false;
     } else {
       this.pendingScroll = true;
@@ -128,7 +128,7 @@ export class SiChatContainerComponent implements AfterContentInit, OnDestroy {
     this.scrollTimeout = setTimeout(() => {
       if (this.pendingScroll) {
         this.lastScrollTime = Date.now();
-        this.scrollToBottom();
+        this.scrollToBottomDuringStreaming();
         this.pendingScroll = false;
       }
     }, this.scrollDebounceMs);
@@ -188,6 +188,15 @@ export class SiChatContainerComponent implements AfterContentInit, OnDestroy {
     this.checkIfUserAtBottom();
   }
 
+  /**
+   * Scrolls to the bottom of the messages container immediately.
+   * This method forces a scroll even if the user has scrolled up.
+   */
+  public scrollToBottom(): void {
+    this.isUserAtBottom = true;
+    this.scrollToBottomDuringStreaming();
+  }
+
   /**
    * Focuses the messages container element.
    */

From 9623ac003055a93c4552e76d91c97833cc607432 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Tue, 16 Dec 2025 11:21:48 +0100
Subject: [PATCH 11/30] docs(chat-messages): scroll to bottom when user sends
 message in chat-container

---
 src/app/examples/si-chat-messages/si-chat-container.html | 4 ++--
 src/app/examples/si-chat-messages/si-chat-container.ts   | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app/examples/si-chat-messages/si-chat-container.html b/src/app/examples/si-chat-messages/si-chat-container.html
index e5e5d1255..f9beb0363 100644
--- a/src/app/examples/si-chat-messages/si-chat-container.html
+++ b/src/app/examples/si-chat-messages/si-chat-container.html
@@ -1,6 +1,6 @@
 <div class="si-layout-fixed-height w-100 h-100">
-  <si-chat-container colorVariant="base-0">
-    @for (message of messages(); track message) {
+  <si-chat-container #chatContainer colorVariant="base-0">
+    @for (message of messages(); track $index) {
       @if (message.type === 'user') {
         <si-user-message
           [content]="message.content"
diff --git a/src/app/examples/si-chat-messages/si-chat-container.ts b/src/app/examples/si-chat-messages/si-chat-container.ts
index 96fe05142..8c330a599 100644
--- a/src/app/examples/si-chat-messages/si-chat-container.ts
+++ b/src/app/examples/si-chat-messages/si-chat-container.ts
@@ -63,6 +63,7 @@ interface ChatMessage {
 export class SampleComponent {
   private logEvent = inject(LOG_EVENT);
   private readonly modalTemplate = viewChild<TemplateRef<any>>('modalTemplate');
+  private readonly chatContainer = viewChild<SiChatContainerComponent>('chatContainer');
   private sanitizer = inject(DomSanitizer);
   private readonly toastService = inject(SiToastNotificationService);
   private translate = injectSiTranslateService();
@@ -245,6 +246,10 @@ export class SampleComponent {
       }
     ]);
     this.simulateAiResponse(event.content);
+
+    setTimeout(() => {
+      this.chatContainer()?.scrollToBottom();
+    }, 0);
   }
 
   onInterrupt(): void {

From ba73669a17595c174b98f1ba14aea439189588f7 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Mon, 22 Dec 2025 16:30:47 +0100
Subject: [PATCH 12/30] fix(chat-messages): cache rendering in markdown
 renderer to allow for scrolling

---
 .../markdown-renderer/markdown-renderer.ts    | 259 +++++++++++++++---
 1 file changed, 215 insertions(+), 44 deletions(-)

diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index 368f73f63..40336c382 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -9,6 +9,8 @@ import type {
   TranslatableString
 } from '@siemens/element-translate-ng/translate';
 
+const CACHE_SIZE = 50;
+
 export interface MarkdownRendererOptions {
   /**
    * Provide this to enable the copy code button functionality.
@@ -54,6 +56,11 @@ export const getMarkdownRenderer = (
   sanitizer: DomSanitizer,
   options?: MarkdownRendererOptions
 ): ((text: string) => Node) => {
+  const codeBlockCache = new Map<string, HTMLElement>();
+  const tableCache = new Map<string, HTMLElement>();
+  const codeBlockCacheOrder: string[] = [];
+  const tableCacheOrder: string[] = [];
+
   return (text: string): Node => {
     const div = document.createElement('div');
     div.className = 'markdown-content text-break';
@@ -61,6 +68,12 @@ export const getMarkdownRenderer = (
     // Map to store original table cell content: tableIndex -> rowIndex -> columnIndex -> original text
     const tableCellData = new Map<number, Map<number, Map<number, string>>>();
 
+    // Maps to track placeholder IDs to cache keys
+    const tablePlaceholderMap = new Map<string, string>();
+    const codeBlockCachePlaceholderMap = new Map<string, string>();
+    let tablePlaceholderCounter = 0;
+    const codeBlockPlaceholderState = { counter: 0 };
+
     if (!text) {
       return div;
     }
@@ -157,7 +170,17 @@ export const getMarkdownRenderer = (
 
         // Recursively process cell content for markdown formatting and store original data
         const processedCells = cellsWithNewlines.map((cell: string, index: number) => {
-          const formattedContent = transformMarkdownText(cell, false, sanitizer, options);
+          const formattedContent = transformMarkdownText(
+            cell,
+            false,
+            sanitizer,
+            options,
+            codeBlockCache,
+            codeBlockCacheOrder,
+            CACHE_SIZE,
+            codeBlockCachePlaceholderMap,
+            codeBlockPlaceholderState
+          );
           // Store original cell text in the map
           rowData.set(index, cells[index]);
           return formattedContent;
@@ -170,7 +193,7 @@ export const getMarkdownRenderer = (
       })
       // Wrap table rows in table elements
       .replace(
-        /(<tr>.*?<\/tr>)/gs,
+        /(<tr>[\s\S]*?<\/tr>(?:\s*<tr>[\s\S]*?<\/tr>)*)/g,
         (() => {
           let currentTableWrapIndex = -1;
 
@@ -188,13 +211,20 @@ export const getMarkdownRenderer = (
 
           return (match: string) => {
             currentTableWrapIndex++;
-            const tableId = `table-${Math.random().toString(36).substring(2, 15)}`;
+            const cacheKey = `${match}|||${options?.downloadTableButton ?? ''}`;
+            const placeholderId = `table-${tablePlaceholderCounter++}`;
+            tablePlaceholderMap.set(placeholderId, cacheKey);
+
+            getCachedOrCreateElement(tableCache, tableCacheOrder, CACHE_SIZE, cacheKey, () => {
+              const tableId = `table-${Math.random().toString(36).substring(2, 15)}`;
 
-            const downloadTableCsvButton = buttonLabel
-              ? `<button type="button" class="btn btn-circle btn-sm btn-tertiary element-download download-table-btn" data-table-id="${tableId}" data-table-index="${currentTableWrapIndex}" aria-label="${buttonLabel}"></button>`
-              : '';
+              const downloadTableCsvButton = buttonLabel
+                ? `<button type="button" class="btn btn-circle btn-sm btn-tertiary element-download download-table-btn" data-table-id="${tableId}" data-table-index="${currentTableWrapIndex}" aria-label="${buttonLabel}"></button>`
+                : '';
 
-            return `<div class="table-wrapper">${downloadTableCsvButton}<table class="table table-hover" id="${tableId}">${match}</table></div>`;
+              return `<div class="table-wrapper">${downloadTableCsvButton}<table class="table table-hover" id="${tableId}">${match}</table></div>`;
+            });
+            return `<!--TABLE-PLACEHOLDER-${placeholderId}-->`;
           };
         })()
       )
@@ -204,10 +234,59 @@ export const getMarkdownRenderer = (
         ''
       );
 
-    html = transformMarkdownText(html, true, sanitizer, options);
+    html = transformMarkdownText(
+      html,
+      true,
+      sanitizer,
+      options,
+      codeBlockCache,
+      codeBlockCacheOrder,
+      CACHE_SIZE,
+      codeBlockCachePlaceholderMap,
+      codeBlockPlaceholderState
+    );
 
     div.innerHTML = html;
 
+    // Replace placeholders with cached elements
+    const walker = document.createTreeWalker(div, NodeFilter.SHOW_COMMENT);
+    const commentsToReplace: { comment: Comment; element: HTMLElement }[] = [];
+
+    let currentNode = walker.nextNode();
+    while (currentNode) {
+      const comment = currentNode as Comment;
+      const tableMatch = comment.textContent?.match(/TABLE-PLACEHOLDER-(.*)/);
+      if (tableMatch) {
+        const placeholderId = tableMatch[1];
+        const cacheKey = tablePlaceholderMap.get(placeholderId);
+        if (cacheKey) {
+          const cachedElement = tableCache.get(cacheKey);
+          if (cachedElement) {
+            commentsToReplace.push({ comment, element: cachedElement });
+          }
+        }
+      }
+
+      const codeMatch = comment.textContent?.match(/CODE-BLOCK-PLACEHOLDER-(.*)/);
+      if (codeMatch) {
+        const placeholderId = codeMatch[1];
+        const cacheKey = codeBlockCachePlaceholderMap.get(placeholderId);
+        if (cacheKey) {
+          const cachedElement = codeBlockCache.get(cacheKey);
+          if (cachedElement) {
+            commentsToReplace.push({ comment, element: cachedElement });
+          }
+        }
+      }
+
+      currentNode = walker.nextNode();
+    }
+
+    // Replace all comments with their cached elements
+    commentsToReplace.forEach(({ comment, element }) => {
+      comment.parentNode?.replaceChild(element, comment);
+    });
+
     // Add copy functionality to code blocks
     div.querySelectorAll('.copy-code-btn').forEach(btn => {
       btn.addEventListener('click', e => {
@@ -286,11 +365,50 @@ export const getMarkdownRenderer = (
   };
 };
 
+const getCachedOrCreateElement = (
+  cache: Map<string, HTMLElement>,
+  cacheOrder: string[],
+  cacheSize: number,
+  key: string,
+  createHtml: () => string
+): HTMLElement => {
+  const cached = cache.get(key);
+  if (cached) {
+    const orderIndex = cacheOrder.indexOf(key);
+    if (orderIndex > -1) {
+      cacheOrder.splice(orderIndex, 1);
+    }
+    cacheOrder.push(key);
+    return cached;
+  }
+
+  const tempDiv = document.createElement('div');
+  tempDiv.innerHTML = createHtml();
+  const element = tempDiv.firstElementChild as HTMLElement;
+
+  cache.set(key, element);
+  cacheOrder.push(key);
+
+  if (cacheOrder.length > cacheSize) {
+    const oldestKey = cacheOrder.shift();
+    if (oldestKey) {
+      cache.delete(oldestKey);
+    }
+  }
+
+  return element;
+};
+
 const transformMarkdownText = (
   html: string,
   keepAdditionalNewlines = true,
   sanitizer: DomSanitizer,
-  options?: MarkdownRendererOptions
+  options?: MarkdownRendererOptions,
+  codeBlockCache?: Map<string, HTMLElement>,
+  codeBlockCacheOrder?: string[],
+  cacheSize?: number,
+  codeBlockCachePlaceholderMap?: Map<string, string>,
+  codeBlockPlaceholderState?: { counter: number }
 ): string => {
   // Generate a random placeholder for inner code blocks to prevent markdown processing inside them
   const innerCodeQuotePlaceholder = `--INNER-CODE-${Math.random().toString(36).substring(2, 15)}--`;
@@ -308,45 +426,98 @@ const transformMarkdownText = (
   html = html
     // Multiline code blocks ```code``` with placeholder
     .replace(/```([^\n]*)\n?([\s\S]*?)\n?```/g, (match, language, content) => {
-      // Escape HTML special characters in code blocks (not for security, but for correct display) and preserve inner backticks
-      const escapedCode = content
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/`/g, innerCodeQuotePlaceholder);
+      const cacheKey = `${language}|||${content}|||${options?.copyCodeButton ?? ''}`;
+
+      if (
+        codeBlockCache &&
+        codeBlockCacheOrder &&
+        cacheSize &&
+        codeBlockCachePlaceholderMap &&
+        codeBlockPlaceholderState
+      ) {
+        const placeholderId = `code-${codeBlockPlaceholderState.counter++}`;
+        codeBlockCachePlaceholderMap.set(placeholderId, cacheKey);
+
+        getCachedOrCreateElement(codeBlockCache, codeBlockCacheOrder, cacheSize, cacheKey, () => {
+          // Escape HTML special characters in code blocks (not for security, but for correct display) and preserve inner backticks
+          const escapedCode = content
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/`/g, innerCodeQuotePlaceholder);
 
-      const codeId = `code-${Math.random().toString(36).substring(2, 15)}`;
+          const codeId = `code-${Math.random().toString(36).substring(2, 15)}`;
 
-      // Apply syntax highlighting if highlighter is provided
-      const highlightedCode = options?.syntaxHighlighter
-        ? // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-          options.syntaxHighlighter(content, language?.trim() || undefined)
-        : undefined;
+          // Apply syntax highlighting if highlighter is provided
+          const highlightedCode = options?.syntaxHighlighter
+            ? // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+              options.syntaxHighlighter(content, language?.trim() || undefined)
+            : undefined;
 
-      // Apply sanitization to the final code content
-      const codeBlockContent = sanitizer.sanitize(
-        SecurityContext.HTML,
-        highlightedCode ?? escapedCode
-      );
+          // Apply sanitization to the final code content
+          const codeBlockContent = sanitizer.sanitize(
+            SecurityContext.HTML,
+            highlightedCode ?? escapedCode
+          );
 
-      const translatedLabel =
-        options?.copyCodeButton && options?.translateSync
-          ? options.translateSync(options.copyCodeButton)
-          : options?.copyCodeButton
-            ? String(options.copyCodeButton)
-            : undefined;
-      const buttonLabel = translatedLabel
-        ?.replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-      const codeCopyButton = buttonLabel
-        ? `<button type="button" class="btn btn-circle btn-sm btn-tertiary element-copy copy-code-btn" data-code-id="${codeId}" aria-label="${buttonLabel}"></button>`
-        : '';
-
-      const code = `<div class="code-wrapper">${codeCopyButton}<pre><code id="${codeId}">${codeBlockContent}</code></pre></div>`;
-      const codePlaceholder = `--CODE-BLOCK-${Math.random().toString(36).substring(2, 15)}--`;
-      codeSectionPlaceholderMap.set(codePlaceholder, code);
-      return codePlaceholder;
+          const translatedLabel =
+            options?.copyCodeButton && options?.translateSync
+              ? options.translateSync(options.copyCodeButton)
+              : options?.copyCodeButton
+                ? String(options.copyCodeButton)
+                : undefined;
+          const buttonLabel = translatedLabel
+            ?.replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+          const codeCopyButton = buttonLabel
+            ? `<button type="button" class="btn btn-circle btn-sm btn-tertiary element-copy copy-code-btn" data-code-id="${codeId}" aria-label="${buttonLabel}"></button>`
+            : '';
+
+          return `<div class="code-wrapper">${codeCopyButton}<pre><code id="${codeId}">${codeBlockContent}</code></pre></div>`;
+        });
+        return `<!--CODE-BLOCK-PLACEHOLDER-${placeholderId}-->`;
+      } else {
+        // Escape HTML special characters in code blocks (not for security, but for correct display) and preserve inner backticks
+        const escapedCode = content
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/`/g, innerCodeQuotePlaceholder);
+
+        const codeId = `code-${Math.random().toString(36).substring(2, 15)}`;
+
+        // Apply syntax highlighting if highlighter is provided
+        const highlightedCode = options?.syntaxHighlighter
+          ? // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+            options.syntaxHighlighter(content, language?.trim() || undefined)
+          : undefined;
+
+        // Apply sanitization to the final code content
+        const codeBlockContent = sanitizer.sanitize(
+          SecurityContext.HTML,
+          highlightedCode ?? escapedCode
+        );
+
+        const translatedLabel =
+          options?.copyCodeButton && options?.translateSync
+            ? options.translateSync(options.copyCodeButton)
+            : options?.copyCodeButton
+              ? String(options.copyCodeButton)
+              : undefined;
+        const buttonLabel = translatedLabel
+          ?.replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;');
+        const codeCopyButton = buttonLabel
+          ? `<button type="button" class="btn btn-circle btn-sm btn-tertiary element-copy copy-code-btn" data-code-id="${codeId}" aria-label="${buttonLabel}"></button>`
+          : '';
+
+        const code = `<div class="code-wrapper">${codeCopyButton}<pre><code id="${codeId}">${codeBlockContent}</code></pre></div>`;
+        const codePlaceholder = `--CODE-BLOCK-${Math.random().toString(36).substring(2, 15)}--`;
+        codeSectionPlaceholderMap.set(codePlaceholder, code);
+        return codePlaceholder;
+      }
     });
 
   // Remove temporary closing marker if it's still there (wasn't part of a code block)

From 3e6215324241c98dd8847aef4fd5aa35fc0394f4 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Mon, 22 Dec 2025 16:45:08 +0100
Subject: [PATCH 13/30] fix(chat-messages): support table headers in markdown
 renderer

---
 .../markdown-renderer/markdown-renderer.ts    | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index 40336c382..79b8f7345 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -112,9 +112,16 @@ export const getMarkdownRenderer = (
     // Process tables first
     let tableIndex = -1;
     const rowIndexMap = new Map<number, number>();
+    const tableHasSeparator = new Map<number, boolean>();
 
     html = html
-      // Remove table separator lines first
+      // Mark tables that have separator lines (these have headers)
+      .replace(/^\|(.+)\|\s*\n\|\s*[-:]+.*\|\s*$/gm, match => {
+        const nextTableIndex = tableIndex + 1;
+        tableHasSeparator.set(nextTableIndex, true);
+        return match;
+      })
+      // Remove table separator lines
       .replace(/^\|\s*[-:]+.*\|\s*$/gm, '')
       // Process table rows
       .replace(/^\|(.+)\|\s*$/gm, (_match, htmlContent) => {
@@ -130,6 +137,7 @@ export const getMarkdownRenderer = (
         const tableData = tableCellData.get(tableIndex)!;
         tableData.set(currentRowIndex, new Map());
         const rowData = tableData.get(currentRowIndex)!;
+        const isHeaderRow = currentRowIndex === 0 && tableHasSeparator.get(tableIndex);
 
         // Handle escaped pipes by temporarily replacing them
         const escapedPipePlaceholder = `--ESCAPED-PIPE-${Math.random().toString(36).substring(2, 15)}--`;
@@ -189,11 +197,19 @@ export const getMarkdownRenderer = (
         // Increment row index for next row
         rowIndexMap.set(tableIndex, currentRowIndex + 1);
 
-        return `<tr>${processedCells.map((cell: string) => `<td>${cell}</td>`).join('')}</tr>`;
+        const cellTag = isHeaderRow ? 'th' : 'td';
+        return `<tr>${processedCells.map((cell: string) => `<${cellTag}>${cell}</${cellTag}>`).join('')}</tr>`;
       })
-      // Wrap table rows in table elements
+      // Wrap header rows in thead
+      .replace(/(<tr><th>[\s\S]*?<\/th><\/tr>)/g, '<thead>$1</thead>')
+      // Wrap body rows in tbody (rows that are not already in thead)
+      .replace(
+        /(<tr><td>[\s\S]*?<\/td><\/tr>(?:\s*<tr><td>[\s\S]*?<\/td><\/tr>)*)/g,
+        '<tbody>$1</tbody>'
+      )
+      // Wrap table rows in table elements (match thead+tbody together or just tbody)
       .replace(
-        /(<tr>[\s\S]*?<\/tr>(?:\s*<tr>[\s\S]*?<\/tr>)*)/g,
+        /(?:<thead><tr><th>[\s\S]*?<\/th><\/tr><\/thead>\s*)?<tbody><tr><td>[\s\S]*?<\/td><\/tr>(?:\s*<tr><td>[\s\S]*?<\/td><\/tr>)*<\/tbody>/g,
         (() => {
           let currentTableWrapIndex = -1;
 

From 3df524121ce97fcb32b9b1ef74213d0413f42c5b Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Mon, 22 Dec 2025 18:29:30 +0100
Subject: [PATCH 14/30] feat(chat-messages): add support for latex formula
 rendering in markdown renderer

---
 angular.json                                  |   2 +-
 .../element-ng/chat-messages/index.api.md     |   2 -
 .../element-ng/markdown-renderer/index.api.md |   2 +
 package-lock.json                             | 340 ++++++++++++------
 package.json                                  |   2 +
 ...r-element-examples-chromium-dark-linux.png |   4 +-
 ...-element-examples-chromium-light-linux.png |   4 +-
 ...rkdown-renderer--si-markdown-renderer.yaml | 174 +++++----
 .../markdown-renderer-helpers.ts              | 159 ++++++++
 .../markdown-renderer/markdown-renderer.ts    | 157 ++++++--
 .../si-markdown-renderer.component.spec.ts    | 251 ++++++++++++-
 .../si-markdown-renderer.component.ts         |  13 +
 .../src/styles/components/_markdown.scss      |  14 +
 .../si-chat-messages/si-ai-message.ts         |  17 +
 .../si-chat-messages/si-chat-container.ts     |  17 +
 .../si-chat-messages/si-user-message.ts       |  17 +
 .../si-markdown-renderer.html                 |   6 +-
 .../si-markdown-renderer.ts                   |  19 +
 src/assets/sample-markdown.md                 |  16 +
 19 files changed, 959 insertions(+), 257 deletions(-)
 create mode 100644 projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts

diff --git a/angular.json b/angular.json
index bff0c15fc..a2495a798 100644
--- a/angular.json
+++ b/angular.json
@@ -42,7 +42,7 @@
             "stylePreprocessorOptions": {
               "includePaths": ["node_modules/"]
             },
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles.scss", "node_modules/katex/dist/katex.min.css"],
             "scripts": [],
             "allowedCommonJsDependencies": [
               "@babel/standalone",
diff --git a/api-goldens/element-ng/chat-messages/index.api.md b/api-goldens/element-ng/chat-messages/index.api.md
index 1b4115ee1..df202efca 100644
--- a/api-goldens/element-ng/chat-messages/index.api.md
+++ b/api-goldens/element-ng/chat-messages/index.api.md
@@ -67,8 +67,6 @@ export class SiChatContainerComponent implements AfterContentInit, OnDestroy {
     readonly colorVariant: _angular_core.InputSignal<string>;
     focus(): void;
     readonly noAutoScroll: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
-    // (undocumented)
-    protected onScroll(): void;
     scrollToBottom(): void;
 }
 
diff --git a/api-goldens/element-ng/markdown-renderer/index.api.md b/api-goldens/element-ng/markdown-renderer/index.api.md
index 0b6dfd733..c1634e395 100644
--- a/api-goldens/element-ng/markdown-renderer/index.api.md
+++ b/api-goldens/element-ng/markdown-renderer/index.api.md
@@ -17,6 +17,7 @@ export const getMarkdownRenderer: (sanitizer: DomSanitizer, options?: MarkdownRe
 export interface MarkdownRendererOptions {
     copyCodeButton?: TranslatableString;
     downloadTableButton?: TranslatableString;
+    latexRenderer?: (latex: string, displayMode: boolean) => string | undefined;
     syntaxHighlighter?: (code: string, language?: string) => string | undefined;
     translateSync?: SiTranslateService['translateSync'];
 }
@@ -28,6 +29,7 @@ export class SiMarkdownRendererComponent {
     readonly disableCopyButton: _angular_core.InputSignal<boolean>;
     readonly disableDownloadButton: _angular_core.InputSignal<boolean>;
     readonly downloadButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    readonly latexRenderer: _angular_core.InputSignal<((latex: string, displayMode: boolean) => string | undefined) | undefined>;
     readonly syntaxHighlighter: _angular_core.InputSignal<((code: string, language?: string) => string | undefined) | undefined>;
     readonly text: _angular_core.InputSignal<string>;
 }
diff --git a/package-lock.json b/package-lock.json
index 26061b895..9b8168aca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -72,6 +72,7 @@
         "@types/geojson": "7946.0.16",
         "@types/google-libphonenumber": "7.4.30",
         "@types/jasmine": "5.1.15",
+        "@types/katex": "0.16.7",
         "@types/node": "24.10.9",
         "angular-eslint": "21.1.0",
         "axe-html-reporter": "2.2.11",
@@ -97,6 +98,7 @@
         "karma-jasmine-seed-reporter": "0.2.0",
         "karma-junit-reporter": "2.0.1",
         "karma-spec-reporter": "0.0.36",
+        "katex": "0.16.27",
         "ng-packagr": "21.0.1",
         "piscina": "5.1.4",
         "postcss": "8.5.6",
@@ -469,7 +471,6 @@
       "integrity": "sha512-My42P8i/FrZgEsTnsCS9IXKMk7ikJwa14i0aBcHg3lMBAPrdpHVzgDS6/1SOO1HsoVYF/SiPjwnlL152xlm8/Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "2.3.0",
         "@angular-devkit/architect": "0.2100.5",
@@ -772,7 +773,6 @@
       "integrity": "sha512-PYVgNbjNtuD5/QOuS6cHR8A7bRqsVqxtUUXGqdv76FYMAajQcAvyfR0QxOkqf3NmYxgNgO3hlUHWq0ILjVbcow==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@angular-eslint/bundled-angular-compiler": "21.1.0",
         "eslint-scope": "^9.0.0"
@@ -819,7 +819,6 @@
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-21.0.8.tgz",
       "integrity": "sha512-1YXHZQO/LYiExbg7sZhiqqF5fMcH17iVgK1tI2Gk90Yy0HQAuqnteOv3pPGgUfLowNOWK0sGhCYbB2Lq21LA3w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -968,7 +967,6 @@
       "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-21.0.6.tgz",
       "integrity": "sha512-5Gw8mXtKXvcvDMWEciPLRYB6Ja5vsikLAidZsdCEIF6Bc51GmoqT5Tk/Ke+ciCd5Hq9Aco/IcHxT1RC3470lZg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "parse5": "^8.0.0",
         "tslib": "^2.3.0"
@@ -985,7 +983,6 @@
       "integrity": "sha512-UYFQqn9Ow1wFVSwdB/xfjmZo4Yb7CUNxilbeYDFIybesfxXSdjMJBbXLtV0+icIhjmqfSUm2gTls6WIrG8qv9A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@angular-devkit/architect": "0.2100.5",
         "@angular-devkit/core": "21.0.5",
@@ -1082,7 +1079,6 @@
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.0.8.tgz",
       "integrity": "sha512-on1B4oc/pf7IlkbG08Et/cCDSX8dpZz9iwp3zMFN/0JvorspyL5YOovFJfjdpmjdlrIi+ToGImwyIkY9P8Mblw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -1113,7 +1109,6 @@
       "integrity": "sha512-+i/wFvi5FTg47Ei+aiFf8j3iYfjQ79ieg8oJM86+Mw4bNwEKQqvWcpmKjoqcfmCescuw0sr2DXU6OEeX+yWeVg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/core": "7.28.4",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -1207,7 +1202,6 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.0.8.tgz",
       "integrity": "sha512-8dNolIQn8WHrD3PsqGuPrujxDX5hjpMbioifIByjjX9yaJy9on7AewVGb8m/DHVwWQ1eGVAGmvW9wt+h+nlzLg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -1249,7 +1243,6 @@
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-21.0.8.tgz",
       "integrity": "sha512-H03A50elawXO53xkz0Aytar5kYT14GLeaj6dLKc1kcR5NqvX9Y/R7z3bY52tvypAdIR8CmPT7ad07TlT4O9lkg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@standard-schema/spec": "^1.0.0",
         "tslib": "^2.3.0"
@@ -1280,7 +1273,6 @@
       "integrity": "sha512-b4R3lLq32CbRXZrwMct4K7rQ5yzL7EXihg1IfyHNSEcxuuzdtXw/M1xexIkEVtLIfA+SROAThISbYgSgWq6rwg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/core": "7.28.4",
         "@types/babel__core": "7.20.5",
@@ -1366,7 +1358,6 @@
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.0.8.tgz",
       "integrity": "sha512-5rPyrP6n6ClO0ZEUXndS2/Xb7nZrbjjYWOxgfCb+ZTCiU7eyN6zhSmicKk2dLQxE1M15wbTa87dN6/Ytuq2uvg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -1389,7 +1380,6 @@
       "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.0.8.tgz",
       "integrity": "sha512-LPR65wyWBSyR46fGeQtD92+TM635o0lh+N5k9qPZdMacogwViTrtBHWPfKYBtBUXLWEWXXKJfSbXvhh3w3uLxw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -1447,7 +1437,6 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -3095,7 +3084,6 @@
       "integrity": "sha512-eohl3hKTiVyD1ilYdw9T0OiB4hnjef89e3dMYKz+mVKDzj+5IteTseASUsOB+EU9Tf6VNTCjDePcP6wkDGmLKQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@keyv/serialize": "^1.1.1"
       }
@@ -3137,7 +3125,6 @@
       "integrity": "sha512-NtInjSlyev/+SLPvx/ulz8hRE25Wf5S9dLNDcIwazq0JyB4/w1ROF/5nV0ObPTX8YpRaKYeKtXDYWqumBNHWsw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@commitlint/format": "^20.3.1",
         "@commitlint/lint": "^20.3.1",
@@ -3160,7 +3147,6 @@
       "integrity": "sha512-NCzwvxepstBZbmVXsvg49s+shCxlJDJPWxXqONVcAtJH9wWrOlkMQw/zyl+dJmt8lyVopt5mwQ3mR5M2N2rUWg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@commitlint/types": "^20.3.1",
         "conventional-changelog-conventionalcommits": "^7.0.2"
@@ -3430,7 +3416,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -3474,7 +3459,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -4222,7 +4206,6 @@
       "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -4610,7 +4593,6 @@
       "integrity": "sha512-X7/+dG9SLpSzRkwgG5/xiIzW0oMrV3C0HOa7YHG1WnrLK+vCQHfte4k/T80059YBdei29RBC3s+pSMvPJDU9/A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@inquirer/checkbox": "^4.3.0",
         "@inquirer/confirm": "^5.1.19",
@@ -5436,6 +5418,7 @@
       "resolved": "https://registry.npmjs.org/@module-federation/bridge-react-webpack-plugin/-/bridge-react-webpack-plugin-0.9.1.tgz",
       "integrity": "sha512-znN/Qm6M0U1t3iF10gu1hSxDkk18yz78yvk+AMB34UDzpXHiC1zbpIeV2CQNV5GCeafmCICmcn9y1qh7F54KTg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@module-federation/sdk": "0.9.1",
         "@types/semver": "7.5.8",
@@ -5447,6 +5430,7 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
       "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "license": "ISC",
+      "peer": true,
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -5459,6 +5443,7 @@
       "resolved": "https://registry.npmjs.org/@module-federation/data-prefetch/-/data-prefetch-0.9.1.tgz",
       "integrity": "sha512-rS1AsgRvIMAWK8oMprEBF0YQ3WvsqnumjinvAZU1Dqut5DICmpQMTPEO1OrAKyjO+PQgEhmq13HggzN6ebGLrQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@module-federation/runtime": "0.9.1",
         "@module-federation/sdk": "0.9.1",
@@ -5474,6 +5459,7 @@
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
       "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "at-least-node": "^1.0.0",
         "graceful-fs": "^4.2.0",
@@ -5489,6 +5475,7 @@
       "resolved": "https://registry.npmjs.org/@module-federation/dts-plugin/-/dts-plugin-0.9.1.tgz",
       "integrity": "sha512-DezBrFaIKfDcEY7UhqyO1WbYocERYsR/CDN8AV6OvMnRlQ8u0rgM8qBUJwx0s+K59f+CFQFKEN4C8p7naCiHrw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@module-federation/error-codes": "0.9.1",
         "@module-federation/managers": "0.9.1",
@@ -5522,6 +5509,7 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -5537,6 +5525,7 @@
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
       "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -5550,6 +5539,7 @@
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
       "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "at-least-node": "^1.0.0",
         "graceful-fs": "^4.2.0",
@@ -5565,6 +5555,7 @@
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
       "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -5622,13 +5613,15 @@
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/@module-federation/error-codes/-/error-codes-0.9.1.tgz",
       "integrity": "sha512-q8spCvlwUzW42iX1irnlBTcwcZftRNHyGdlaoFO1z/fW4iphnBIfijzkigWQzOMhdPgzqN/up7XN+g5hjBGBtw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@module-federation/inject-external-runtime-core-plugin": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/@module-federation/inject-external-runtime-core-plugin/-/inject-external-runtime-core-plugin-0.9.1.tgz",
       "integrity": "sha512-BPfzu1cqDU5BhM493enVF1VfxJWmruen0ktlHrWdJJlcddhZzyFBGaLAGoGc+83fS75aEllvJTEthw4kMViMQQ==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@module-federation/runtime-tools": "0.9.1"
       }
@@ -5638,6 +5631,7 @@
       "resolved": "https://registry.npmjs.org/@module-federation/managers/-/managers-0.9.1.tgz",
       "integrity": "sha512-8hpIrvGfiODxS1qelTd7eaLRVF7jrp17RWgeH1DWoprxELANxm5IVvqUryB+7j+BhoQzamog9DL5q4MuNfGgIA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@module-federation/sdk": "0.9.1",
         "find-pkg": "2.0.0",
@@ -5649,6 +5643,7 @@
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
       "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "at-least-node": "^1.0.0",
         "graceful-fs": "^4.2.0",
@@ -5664,6 +5659,7 @@
       "resolved": "https://registry.npmjs.org/@module-federation/manifest/-/manifest-0.9.1.tgz",
       "integrity": "sha512-+GteKBXrAUkq49i2CSyWZXM4vYa+mEVXxR9Du71R55nXXxgbzAIoZj9gxjRunj9pcE8+YpAOyfHxLEdWngxWdg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@module-federation/dts-plugin": "0.9.1",
         "@module-federation/managers": "0.9.1",
@@ -5677,6 +5673,7 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -5692,6 +5689,7 @@
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
       "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -5705,6 +5703,7 @@
       "resolved": "https://registry.npmjs.org/@module-federation/rspack/-/rspack-0.9.1.tgz",
       "integrity": "sha512-ZJqG75dWHhyTMa9I0YPJEV2XRt0MFxnDiuMOpI92esdmwWY633CBKyNh1XxcLd629YVeTv03+whr+Fz/f91JEw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@module-federation/bridge-react-webpack-plugin": "0.9.1",
         "@module-federation/dts-plugin": "0.9.1",
@@ -5733,6 +5732,7 @@
       "resolved": "https://registry.npmjs.org/@module-federation/runtime/-/runtime-0.9.1.tgz",
       "integrity": "sha512-jp7K06weabM5BF5sruHr/VLyalO+cilvRDy7vdEBqq88O9mjc0RserD8J+AP4WTl3ZzU7/GRqwRsiwjjN913dA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@module-federation/error-codes": "0.9.1",
         "@module-federation/runtime-core": "0.9.1",
@@ -5744,6 +5744,7 @@
       "resolved": "https://registry.npmjs.org/@module-federation/runtime-core/-/runtime-core-0.6.21.tgz",
       "integrity": "sha512-CLQiPP3kpcPbgPkiu/A1VURI2v4geFnEdizlB1tq0c6eDZqb5aLzvp87ZCGDVSuwY7DCq6jh1k+CM2WGge/2xA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@module-federation/error-codes": "0.9.0",
         "@module-federation/sdk": "0.9.0"
@@ -5753,13 +5754,15 @@
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@module-federation/error-codes/-/error-codes-0.9.0.tgz",
       "integrity": "sha512-dNqIs5cQfE4p+WIdiZ64cTSRJ5KjGaV+epvZkGttrNjXW9XAAtE7zgpo7cMQ8GWA3wCGaKnFw7Dn48XcU5ZMNw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@module-federation/runtime-core/node_modules/@module-federation/sdk": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@module-federation/sdk/-/sdk-0.9.0.tgz",
       "integrity": "sha512-84MklxE6Z79gCAr+6HCyqOpF95pqSah+fGnhLz+g4ePcWf98J73bWfrdOWFO/UfxMRneXKBZBNbpDVvPLgaFeQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "isomorphic-rslog": "0.0.7"
       }
@@ -5780,6 +5783,7 @@
       "resolved": "https://registry.npmjs.org/@module-federation/runtime-core/-/runtime-core-0.9.1.tgz",
       "integrity": "sha512-r61ufhKt5pjl81v7TkmhzeIoSPOaNtLynW6+aCy3KZMa3RfRevFxmygJqv4Nug1L0NhqUeWtdLejh4VIglNy5Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@module-federation/error-codes": "0.9.1",
         "@module-federation/sdk": "0.9.1"
@@ -5789,13 +5793,15 @@
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/@module-federation/sdk/-/sdk-0.9.1.tgz",
       "integrity": "sha512-YQonPTImgnCqZjE/A+3N2g3J5ypR6kx1tbBzc9toUANKr/dw/S63qlh/zHKzWQzxjjNNVMdXRtTMp07g3kgEWg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@module-federation/third-party-dts-extractor": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/@module-federation/third-party-dts-extractor/-/third-party-dts-extractor-0.9.1.tgz",
       "integrity": "sha512-KeIByP718hHyq+Mc53enZ419pZZ1fh9Ns6+/bYLkc3iCoJr/EDBeiLzkbMwh2AS4Qk57WW0yNC82xzf7r0Zrrw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "find-pkg": "2.0.0",
         "fs-extra": "9.1.0",
@@ -5807,6 +5813,7 @@
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
       "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "at-least-node": "^1.0.0",
         "graceful-fs": "^4.2.0",
@@ -5822,6 +5829,7 @@
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -5839,6 +5847,7 @@
       "resolved": "https://registry.npmjs.org/@module-federation/webpack-bundler-runtime/-/webpack-bundler-runtime-0.9.1.tgz",
       "integrity": "sha512-CxySX01gT8cBowKl9xZh+voiHvThMZ471icasWnlDIZb14KasZoX1eCh9wpGvwoOdIk9rIRT7h70UvW9nmop6w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@module-federation/runtime": "0.9.1",
         "@module-federation/sdk": "0.9.1"
@@ -6239,6 +6248,7 @@
       "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
       "license": "MIT",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "@emnapi/core": "^1.4.3",
         "@emnapi/runtime": "^1.4.3",
@@ -6267,7 +6277,6 @@
       "resolved": "https://registry.npmjs.org/@ngx-formly/bootstrap/-/bootstrap-6.3.12.tgz",
       "integrity": "sha512-2HPqyC7DJjz5mwgNw+hkzXVmyaD4BfykWgUiF9peeNmhmYqF0z1JoGRotbdtzuwGeaGVkX86dPEt2pHJDeS3Pw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.0.0"
       },
@@ -6281,7 +6290,6 @@
       "resolved": "https://registry.npmjs.org/@ngx-formly/core/-/core-6.3.12.tgz",
       "integrity": "sha512-88MOfn9dM1B33t04jl8x0Glh0Ed0lUKMkhYajicRH7ZHTmwIdla1SQjiblp2C+EcCFvsY7XAU2/JUZQdl56aUw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.0.0"
       },
@@ -6295,7 +6303,6 @@
       "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-16.0.4.tgz",
       "integrity": "sha512-s8llTL2SJvROhqttxvEs7Cg+6qSf4kvZPFYO+cTOY1d8DWTjlutRkWAleZcPPoeX927Dm7ALfL07G7oYDJ7z6w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -6659,7 +6666,6 @@
       "integrity": "sha512-t54CUOsFMappY1Jbzb7fetWeO0n6K0k/4+/ZpkS+3Joz8I4VcvY9OiEBFRYISqaI2fq5sCiPtAjRDOzVYG8m+Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@octokit/auth-token": "^6.0.0",
         "@octokit/graphql": "^9.0.2",
@@ -7866,6 +7872,7 @@
       "resolved": "https://registry.npmjs.org/@rspack/binding/-/binding-1.4.6.tgz",
       "integrity": "sha512-rRc6sbKWxhomxxJeqi4QS3S/2T6pKf4JwC/VHXs7KXw7lHXHa3yxPynmn3xHstL0H6VLaM5xQj87Wh7lQYRAPg==",
       "license": "MIT",
+      "peer": true,
       "optionalDependencies": {
         "@rspack/binding-darwin-arm64": "1.4.6",
         "@rspack/binding-darwin-x64": "1.4.6",
@@ -7890,7 +7897,8 @@
       "optional": true,
       "os": [
         "darwin"
-      ]
+      ],
+      "peer": true
     },
     "node_modules/@rspack/binding-darwin-x64": {
       "version": "1.4.6",
@@ -7903,7 +7911,8 @@
       "optional": true,
       "os": [
         "darwin"
-      ]
+      ],
+      "peer": true
     },
     "node_modules/@rspack/binding-linux-arm64-gnu": {
       "version": "1.4.6",
@@ -7916,7 +7925,8 @@
       "optional": true,
       "os": [
         "linux"
-      ]
+      ],
+      "peer": true
     },
     "node_modules/@rspack/binding-linux-arm64-musl": {
       "version": "1.4.6",
@@ -7929,7 +7939,8 @@
       "optional": true,
       "os": [
         "linux"
-      ]
+      ],
+      "peer": true
     },
     "node_modules/@rspack/binding-linux-x64-gnu": {
       "version": "1.4.6",
@@ -7942,7 +7953,8 @@
       "optional": true,
       "os": [
         "linux"
-      ]
+      ],
+      "peer": true
     },
     "node_modules/@rspack/binding-linux-x64-musl": {
       "version": "1.4.6",
@@ -7955,7 +7967,8 @@
       "optional": true,
       "os": [
         "linux"
-      ]
+      ],
+      "peer": true
     },
     "node_modules/@rspack/binding-wasm32-wasi": {
       "version": "1.4.6",
@@ -7966,6 +7979,7 @@
       ],
       "license": "MIT",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "@napi-rs/wasm-runtime": "^0.2.11"
       }
@@ -7981,7 +7995,8 @@
       "optional": true,
       "os": [
         "win32"
-      ]
+      ],
+      "peer": true
     },
     "node_modules/@rspack/binding-win32-ia32-msvc": {
       "version": "1.4.6",
@@ -7994,7 +8009,8 @@
       "optional": true,
       "os": [
         "win32"
-      ]
+      ],
+      "peer": true
     },
     "node_modules/@rspack/binding-win32-x64-msvc": {
       "version": "1.4.6",
@@ -8007,7 +8023,8 @@
       "optional": true,
       "os": [
         "win32"
-      ]
+      ],
+      "peer": true
     },
     "node_modules/@rspack/core": {
       "version": "1.4.6",
@@ -8036,13 +8053,15 @@
       "version": "0.15.0",
       "resolved": "https://registry.npmjs.org/@module-federation/error-codes/-/error-codes-0.15.0.tgz",
       "integrity": "sha512-CFJSF+XKwTcy0PFZ2l/fSUpR4z247+Uwzp1sXVkdIfJ/ATsnqf0Q01f51qqSEA6MYdQi6FKos9FIcu3dCpQNdg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@rspack/core/node_modules/@module-federation/runtime": {
       "version": "0.15.0",
       "resolved": "https://registry.npmjs.org/@module-federation/runtime/-/runtime-0.15.0.tgz",
       "integrity": "sha512-dTPsCNum9Bhu3yPOcrPYq0YnM9eCMMMNB1wuiqf1+sFbQlNApF0vfZxooqz3ln0/MpgE0jerVvFsLVGfqvC9Ug==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@module-federation/error-codes": "0.15.0",
         "@module-federation/runtime-core": "0.15.0",
@@ -8054,6 +8073,7 @@
       "resolved": "https://registry.npmjs.org/@module-federation/runtime-core/-/runtime-core-0.15.0.tgz",
       "integrity": "sha512-RYzI61fRDrhyhaEOXH3AgIGlHiot0wPFXu7F43cr+ZnTi+VlSYWLdlZ4NBuT9uV6JSmH54/c+tEZm5SXgKR2sQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@module-federation/error-codes": "0.15.0",
         "@module-federation/sdk": "0.15.0"
@@ -8064,6 +8084,7 @@
       "resolved": "https://registry.npmjs.org/@module-federation/runtime-tools/-/runtime-tools-0.15.0.tgz",
       "integrity": "sha512-kzFn3ObUeBp5vaEtN1WMxhTYBuYEErxugu1RzFUERD21X3BZ+b4cWwdFJuBDlsmVjctIg/QSOoZoPXRKAO0foA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@module-federation/runtime": "0.15.0",
         "@module-federation/webpack-bundler-runtime": "0.15.0"
@@ -8073,13 +8094,15 @@
       "version": "0.15.0",
       "resolved": "https://registry.npmjs.org/@module-federation/sdk/-/sdk-0.15.0.tgz",
       "integrity": "sha512-PWiYbGcJrKUD6JZiEPihrXhV3bgXdll4bV7rU+opV7tHaun+Z0CdcawjZ82Xnpb8MCPGmqHwa1MPFeUs66zksw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@rspack/core/node_modules/@module-federation/webpack-bundler-runtime": {
       "version": "0.15.0",
       "resolved": "https://registry.npmjs.org/@module-federation/webpack-bundler-runtime/-/webpack-bundler-runtime-0.15.0.tgz",
       "integrity": "sha512-i+3wu2Ljh2TmuUpsnjwZVupOVqV50jP0ndA8PSP4gwMKlgdGeaZ4VH5KkHAXGr2eiYUxYLMrJXz1+eILJqeGDg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@module-federation/runtime": "0.15.0",
         "@module-federation/sdk": "0.15.0"
@@ -8090,6 +8113,7 @@
       "resolved": "https://registry.npmjs.org/@rspack/lite-tapable/-/lite-tapable-1.0.1.tgz",
       "integrity": "sha512-VynGOEsVw2s8TAlLf/uESfrgfrq2+rcXB1muPJYBWbsm1Oa6r5qVQhjA5ggM6z/coYPrsVMgovl3Ff7Q7OCp1w==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=16.0.0"
       }
@@ -8270,7 +8294,6 @@
       "integrity": "sha512-uNBIilq5bGnln3D7Nbm3/K+Ot++eGj4rygU0DCw//IZiTQU/iSyF3UAsN++iRetu/OMs+97T/RoGPjD22ryiZg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@angular-devkit/core": "21.0.5",
         "@angular-devkit/schematics": "21.0.5",
@@ -8968,7 +8991,6 @@
       "resolved": "https://registry.npmjs.org/@siemens/ngx-datatable/-/ngx-datatable-25.0.0.tgz",
       "integrity": "sha512-iK1/ESVGApP/V6WHMtwP1YkK0f+7JRbcD8hE/vL8SOrtn+blchiCOrGwPDIzOb8HFRXX5+ptrYpBL4IRnXz0QQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -9397,6 +9419,7 @@
       "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/deep-eql": "*",
         "assertion-error": "^2.0.1"
@@ -9458,7 +9481,8 @@
       "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
       "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/eslint": {
       "version": "9.6.1",
@@ -9570,6 +9594,13 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/@types/katex": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz",
+      "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -9583,7 +9614,6 @@
       "integrity": "sha512-ne4A0IpG3+2ETuREInjPNhUGis1SFjv1d5asp8MzEAGtOZeTeHVDOYqOgqfhvseqg/iXty2hjBf1zAOb7RNiNw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -9637,7 +9667,6 @@
       "integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -9663,7 +9692,8 @@
       "version": "7.5.8",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
       "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/send": {
       "version": "1.2.1",
@@ -9924,7 +9954,6 @@
       "integrity": "sha512-npiaib8XzbjtzS2N4HlqPvlpxpmZ14FjSJrteZpPxGUaYPlvhzlzUZ4mZyABo0EFrOWnvyd0Xxroq//hKhtAWg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.53.0",
         "@typescript-eslint/types": "8.53.0",
@@ -10316,7 +10345,6 @@
       "integrity": "sha512-USjyxm3gQEePdUwJBFjjGNG18xY9A2grDVGuk7/9AkjIF1L+ZrVnwR5VAU5JXtUnBL/Nwt3H31KlRDaksnM7/w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -10360,7 +10388,6 @@
       "integrity": "sha512-AbSv11fklGXV6T28dp2Me04Uw90R2iJ30g2bgLz529Koehrmkbs1r7paFqr1vPCZi7hHwYxYtxfyQMRC8QaVSg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.7.0",
         "@typescript-eslint/scope-manager": "8.46.4",
@@ -10429,6 +10456,7 @@
       "integrity": "sha512-eshqULT2It7McaJkQGLkPjPjNph+uevROGuIMJdG3V+0BSR2w9u6J9Lwu+E8cK5TETlfou8GRijhafIMhXsimA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@standard-schema/spec": "^1.0.0",
         "@types/chai": "^5.2.2",
@@ -10447,6 +10475,7 @@
       "integrity": "sha512-yb6k4AZxJTB+q9ycAvsoxGn+j/po0UaPgajllBgt1PzoMAAmJGYFdDk0uCcRcxb3BrME34I6u8gHZTQlkqSZpg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/spy": "4.0.16",
         "estree-walker": "^3.0.3",
@@ -10474,6 +10503,7 @@
       "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "^1.0.0"
       }
@@ -10484,6 +10514,7 @@
       "integrity": "sha512-eNCYNsSty9xJKi/UdVD8Ou16alu7AYiS2fCPRs0b1OdhJiV89buAXQLpTbe+X8V9L6qrs9CqyvU7OaAopJYPsA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tinyrainbow": "^3.0.3"
       },
@@ -10497,6 +10528,7 @@
       "integrity": "sha512-VWEDm5Wv9xEo80ctjORcTQRJ539EGPB3Pb9ApvVRAY1U/WkHXmmYISqU5E79uCwcW7xYUV38gwZD+RV755fu3Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/utils": "4.0.16",
         "pathe": "^2.0.3"
@@ -10511,6 +10543,7 @@
       "integrity": "sha512-sf6NcrYhYBsSYefxnry+DR8n3UV4xWZwWxYbCJUt2YdvtqzSPR7VfGrY0zsv090DAbjFZsi7ZaMi1KnSRyK1XA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/pretty-format": "4.0.16",
         "magic-string": "^0.30.21",
@@ -10526,6 +10559,7 @@
       "integrity": "sha512-4jIOWjKP0ZUaEmJm00E0cOBLU+5WE0BpeNr3XN6TEF05ltro6NJqHWxXD0kA8/Zc8Nh23AT8WQxwNG+WeROupw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
@@ -10536,6 +10570,7 @@
       "integrity": "sha512-h8z9yYhV3e1LEfaQ3zdypIrnAg/9hguReGZoS7Gl0aBG5xgA410zBqECqmaF/+RkTggRsfnzc1XaAHA6bmUufA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/pretty-format": "4.0.16",
         "tinyrainbow": "^3.0.3"
@@ -10764,7 +10799,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -10842,6 +10876,7 @@
       "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.16.tgz",
       "integrity": "sha512-TGw5yVi4saajsSEgz25grObGHEUaDrniwvA2qwSC060KfqGPdglhvPMA2lPIoxs3PQIItj2iag35fONcQqgUaQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12.0"
       }
@@ -10871,7 +10906,6 @@
       "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-34.3.1.tgz",
       "integrity": "sha512-PwlrPudsFOzGumphi2y9ihWeaUlIwKhOra/MXu2LjeV2U8DgLLcYS8CartE5Hszhn1poJHawwI9HWrxlKliwdw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ag-charts-types": "12.3.1"
       }
@@ -10906,7 +10940,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -10996,7 +11029,6 @@
       "integrity": "sha512-qXpIEBNYpfgpBaFblnyFegVSQjWCVUdCXTHvMcvtNtmMgtPwIDKvG8wuJo5BbQ/MNt2d8npmnRUaS2ddzdCzww==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@angular-devkit/core": ">= 21.0.0 < 22.0.0",
         "@angular-devkit/schematics": ">= 21.0.0 < 22.0.0",
@@ -11174,6 +11206,7 @@
       "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -11199,13 +11232,15 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": ">= 4.0.0"
       }
@@ -11254,7 +11289,6 @@
       "integrity": "sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==",
       "dev": true,
       "license": "MPL-2.0",
-      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -11280,6 +11314,7 @@
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
       "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.4",
@@ -11687,7 +11722,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -11707,6 +11741,7 @@
       "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
       "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
       "license": "(MIT OR Apache-2.0)",
+      "peer": true,
       "bin": {
         "btoa": "bin/btoa.js"
       },
@@ -11798,6 +11833,7 @@
       "resolved": "https://registry.npmjs.org/cache-content-type/-/cache-content-type-1.0.1.tgz",
       "integrity": "sha512-IKufZ1o4Ut42YUrZSo8+qnMTrFuKkvyoLXUywKz9GJ5BrhOFGhLdkx9sG4KAnVvbY6kEcSFjLQul+DVmBm2bgA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "mime-types": "^2.1.18",
         "ylru": "^1.2.0"
@@ -11904,6 +11940,7 @@
       "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -12458,6 +12495,7 @@
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "iojs": ">= 1.0.0",
         "node": ">= 0.12.0"
@@ -12527,6 +12565,7 @@
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -12867,6 +12906,7 @@
       "resolved": "https://registry.npmjs.org/cookies/-/cookies-0.9.1.tgz",
       "integrity": "sha512-TG2hpqe4ELx54QER/S3HQ9SRVnQnGBtKUz5bLQWtYAQ+o6GpgMs6sYUvaiJjVxb+UXwhRhAEP3m7LbsIZ77Hmw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "depd": "~2.0.0",
         "keygrip": "~1.1.0"
@@ -12980,7 +13020,6 @@
       "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "env-paths": "^2.2.1",
         "import-fresh": "^3.3.0",
@@ -13086,6 +13125,7 @@
       "resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-4.9.0.tgz",
       "integrity": "sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "luxon": "^3.2.1"
       },
@@ -13315,7 +13355,8 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
       "integrity": "sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/deep-extend": {
       "version": "0.6.0",
@@ -13382,6 +13423,7 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -13390,7 +13432,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/depd": {
       "version": "2.0.0",
@@ -13642,7 +13685,6 @@
       "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
       "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "2.3.0",
         "zrender": "6.0.0"
@@ -13700,6 +13742,29 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
+    "node_modules/encoding/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/engine.io": {
       "version": "6.6.4",
       "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.4.tgz",
@@ -14033,6 +14098,7 @@
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
       "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "get-intrinsic": "^1.2.6",
@@ -14150,7 +14216,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -14224,7 +14289,6 @@
       "integrity": "sha512-v8kAP8TarQYqDC4kxr343ZNi++/oOlBnmWovsUZpbJ7A/pq1VHGlgsf/fDh4CdEvEstzkrc8NLvoVKtfpsC4oA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/utils": "^8.52.0",
         "natural-orderby": "^5.0.0"
@@ -14396,7 +14460,6 @@
       "integrity": "sha512-J9I5PKCOJretVuiZRGvPQxCbllxGAV/viI20JO3LYblAodofBxyMnZAJ+WGeClHgANnSJberTNoFWWjrWKBuXQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "eslint": ">=2.0.0"
       }
@@ -14818,6 +14881,7 @@
       "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
       "integrity": "sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "homedir-polyfill": "^1.0.1"
       },
@@ -14831,6 +14895,7 @@
       "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">=12.0.0"
       }
@@ -15379,6 +15444,7 @@
       "resolved": "https://registry.npmjs.org/find-file-up/-/find-file-up-2.0.1.tgz",
       "integrity": "sha512-qVdaUhYO39zmh28/JLQM5CoYN9byEOKEH4qfa8K1eNV17W0UUMJ9WgbR/hHFH+t5rcl+6RTb5UC7ck/I+uRkpQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "resolve-dir": "^1.0.1"
       },
@@ -15391,6 +15457,7 @@
       "resolved": "https://registry.npmjs.org/find-pkg/-/find-pkg-2.0.0.tgz",
       "integrity": "sha512-WgZ+nKbELDa6N3i/9nrHeNznm+lY3z4YfhDDWgW+5P0pdmMj26bxaxU11ookgY3NyP9GC7HvZ9etp0jRFqGEeQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "find-file-up": "^2.0.1"
       },
@@ -15450,8 +15517,7 @@
       "version": "7.5.0",
       "resolved": "https://registry.npmjs.org/flag-icons/-/flag-icons-7.5.0.tgz",
       "integrity": "sha512-kd+MNXviFIg5hijH766tt+3x76ele1AXlo4zDdCxIvqWZhKt4T83bOtxUOOMlTx/EcFdUMH5yvQgYlFh1EqqFg==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/flat": {
       "version": "5.0.2",
@@ -15525,6 +15591,7 @@
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
       "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -15691,6 +15758,7 @@
       "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
       "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -16080,7 +16148,6 @@
       "resolved": "https://registry.npmjs.org/google-libphonenumber/-/google-libphonenumber-3.2.43.tgz",
       "integrity": "sha512-TbIX/UC3BFRJwCxbBeCPwuRC4Qws9Jz/CECmfTM1t9RFoI3X6eRThurv6AYr9wSrt640IA9KFIHuAD/vlyjqRw==",
       "license": "(MIT AND Apache-2.0)",
-      "peer": true,
       "engines": {
         "node": ">=0.10"
       }
@@ -16117,8 +16184,7 @@
           "url": "https://www.venmo.com/adumesny"
         }
       ],
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/handle-thing": {
       "version": "2.0.1",
@@ -16245,6 +16311,7 @@
       "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
       "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "parse-passwd": "^1.0.0"
       },
@@ -16423,6 +16490,7 @@
       "resolved": "https://registry.npmjs.org/http-assert/-/http-assert-1.5.0.tgz",
       "integrity": "sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "deep-equal": "~1.0.1",
         "http-errors": "~1.8.0"
@@ -16436,6 +16504,7 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
       "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -16445,6 +16514,7 @@
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
       "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "depd": "~1.1.2",
         "inherits": "2.0.4",
@@ -17020,6 +17090,7 @@
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
       "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "call-bound": "^1.0.4",
         "generator-function": "^2.0.0",
@@ -17227,6 +17298,7 @@
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
       "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -17285,6 +17357,7 @@
       "resolved": "https://registry.npmjs.org/isomorphic-rslog/-/isomorphic-rslog-0.0.7.tgz",
       "integrity": "sha512-n6/XnKnZ5eLEj6VllG4XmamXG7/F69nls8dcynHyhcTpsPUYgcgx4ifEaCo4lQJ2uzwfmIT+F0KBGwBcMKmt5g==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=14.17.6"
       }
@@ -17294,6 +17367,7 @@
       "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz",
       "integrity": "sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "ws": "*"
       }
@@ -17431,8 +17505,7 @@
       "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.13.0.tgz",
       "integrity": "sha512-vsYjfh7lyqvZX5QgqKc4YH8phs7g96Z8bsdIFNEU3VqXhlHaq+vov/Fgn/sr6MiUczdZkyXRC3TX369Ll4Nzbw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/jasmine/node_modules/glob": {
       "version": "10.5.0",
@@ -17679,7 +17752,6 @@
       "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@colors/colors": "1.5.0",
         "body-parser": "^1.19.0",
@@ -18174,12 +18246,40 @@
         "node": ">=10"
       }
     },
+    "node_modules/katex": {
+      "version": "0.16.27",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.27.tgz",
+      "integrity": "sha512-aeQoDkuRWSqQN6nSvVCEFvfXdqo1OQiCmmW1kc9xSdjutPv7BGO7pqY9sQRJpMOGrEdfDgF2TfRXe5eUAD2Waw==",
+      "dev": true,
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/keygrip": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
       "integrity": "sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==",
       "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tsscmp": "1.0.6"
       },
@@ -18219,6 +18319,7 @@
       "resolved": "https://registry.npmjs.org/koa/-/koa-2.15.4.tgz",
       "integrity": "sha512-7fNBIdrU2PEgLljXoPWoyY4r1e+ToWCmzS/wwMPbUNs7X+5MMET1ObhJBlUkF5uZG9B6QhM2zS1TsH6adegkiQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "accepts": "^1.3.5",
         "cache-content-type": "^1.0.0",
@@ -18252,13 +18353,15 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/koa-compose/-/koa-compose-4.1.0.tgz",
       "integrity": "sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/koa-convert": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/koa-convert/-/koa-convert-2.0.0.tgz",
       "integrity": "sha512-asOvN6bFlSnxewce2e/DK3p4tltyfC4VM7ZwuTuepI7dEQVcvpyFuBcEARu1+Hxg8DIwytce2n7jrZtRlPrARA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "co": "^4.6.0",
         "koa-compose": "^4.1.0"
@@ -18272,6 +18375,7 @@
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
       "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "safe-buffer": "5.2.1"
       },
@@ -18284,6 +18388,7 @@
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
       "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -18293,6 +18398,7 @@
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
       "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "depd": "~1.1.2",
         "inherits": "2.0.4",
@@ -18309,6 +18415,7 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
       "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -18336,7 +18443,6 @@
       "integrity": "sha512-j1n1IuTX1VQjIy3tT7cyGbX7nvQOsFLoIqobZv4ttI5axP923gA44zUj6miiA6R5Aoms4sEGVIIcucXUbRI14g==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "copy-anything": "^2.0.1",
         "parse-node-version": "^1.0.1",
@@ -18502,7 +18608,6 @@
       "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cli-truncate": "^5.0.0",
         "colorette": "^2.0.20",
@@ -18670,7 +18775,8 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeepwith/-/lodash.clonedeepwith-4.5.0.tgz",
       "integrity": "sha512-QRBRSxhbtsX1nc0baxSkkK5WlVTTm/s48DSukcGcWZwIyI8Zz+lB+kFiELJXtzfH4Aj6kMWQ1VWW4U5uUDgZMA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -18838,7 +18944,8 @@
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/long-timeout/-/long-timeout-0.1.1.tgz",
       "integrity": "sha512-BFRuQUqc7x2NWxfJBCyUrN8iYUYznzL9JROmRz1gZ6KlOIgmoD+njPVbb+VNn2nGMKggMsK79iUNErillsrx7w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lru-cache": {
       "version": "5.1.1",
@@ -18862,6 +18969,7 @@
       "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz",
       "integrity": "sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -18975,7 +19083,6 @@
       "integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "marked": "bin/marked.js"
       },
@@ -19616,7 +19723,6 @@
       "integrity": "sha512-IZGxuF226GF0d8FOZIfPvHsyBl53PrDEg/IB2+CVamsm3r4+gUw3mBp27eygpowBpdVLG0Sm2IbUiH4aSspzyA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.3.0",
         "@rollup/plugin-json": "^6.1.0",
@@ -20165,7 +20271,6 @@
       "resolved": "https://registry.npmjs.org/ngx-image-cropper/-/ngx-image-cropper-9.1.6.tgz",
       "integrity": "sha512-b250YJ+jZovfqIj8vdEOrpEFay34be5f1Hpvg6Db68VMlvdyyuzboJdR0gCupbXtVcG6qQ86L7YG+SYxXJwApw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -20332,6 +20437,7 @@
       "resolved": "https://registry.npmjs.org/node-schedule/-/node-schedule-2.1.1.tgz",
       "integrity": "sha512-OXdegQq03OmXEjt2hZP33W2YPs/E5BcFQks46+G2gAxs4gHOIVD1u7EqlYLYSKsaIpyKCK9Gbk0ta1/gjRSMRQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cron-parser": "^4.2.0",
         "long-timeout": "0.1.1",
@@ -22947,7 +23053,6 @@
       "dev": true,
       "inBundle": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -23232,14 +23337,14 @@
         "https://github.com/sponsors/sxzz",
         "https://opencollective.com/debug"
       ],
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/ol": {
       "version": "10.7.0",
       "resolved": "https://registry.npmjs.org/ol/-/ol-10.7.0.tgz",
       "integrity": "sha512-122U5gamPqNgLpLOkogFJhgpywvd/5en2kETIDW+Ubfi9lPnZ0G9HWRdG+CX0oP8od2d6u6ky3eewIYYlrVczw==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@types/rbush": "4.0.0",
         "earcut": "^3.0.0",
@@ -23257,7 +23362,6 @@
       "resolved": "https://registry.npmjs.org/ol-ext/-/ol-ext-4.0.37.tgz",
       "integrity": "sha512-RxzdgMWnNBDP9VZCza3oS3rl1+OCl+1SJLMjt7ATyDDLZl/zzrsQELfJ25WAL6HIWgjkQ2vYDh3nnHFupxOH4w==",
       "license": "BSD-3-Clause",
-      "peer": true,
       "peerDependencies": {
         "ol": ">= 5.3.0"
       }
@@ -23267,7 +23371,6 @@
       "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-13.2.0.tgz",
       "integrity": "sha512-7jKoejdVMBxdUk97DlaHy/7ZddGslBq8obnW1yGEMD705Eo+khqZiaVbaABpszzDLAf17fKeXn+fm+WWT9OYCQ==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@maplibre/maplibre-gl-style-spec": "^23.1.0",
         "mapbox-to-css-font": "^3.2.0"
@@ -23327,7 +23430,8 @@
     "node_modules/only": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/only/-/only-0.0.2.tgz",
-      "integrity": "sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ=="
+      "integrity": "sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ==",
+      "peer": true
     },
     "node_modules/open": {
       "version": "10.2.0",
@@ -23694,6 +23798,7 @@
       "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
       "integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -23893,7 +23998,8 @@
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/pbf": {
       "version": "4.0.1",
@@ -24088,7 +24194,6 @@
       "integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "playwright-core": "cli.js"
       },
@@ -24145,7 +24250,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -24311,7 +24415,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12.0"
       },
@@ -24325,7 +24428,6 @@
       "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -24357,7 +24459,6 @@
       "integrity": "sha512-yEPsovQfpxYfgWNhCfECjG5AQaO+K3dp6XERmOepyPDVqcJm+bjyCVO3pmU+nAPe0N5dDvekfGezt/EIiRe1TA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -24465,7 +24566,8 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/prr": {
       "version": "1.0.1",
@@ -24580,7 +24682,8 @@
       "version": "9.4.2",
       "resolved": "https://registry.npmjs.org/rambda/-/rambda-9.4.2.tgz",
       "integrity": "sha512-++euMfxnl7OgaEKwXh9QqThOjMeta2HH001N1v4mYQzBjJBnmXBh2BCK6dZAbICFVXOFUVD3xFG0R3ZPU0mxXw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/randombytes": {
       "version": "2.1.0",
@@ -24932,6 +25035,7 @@
       "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
       "integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "expand-tilde": "^2.0.0",
         "global-modules": "^1.0.0"
@@ -24945,6 +25049,7 @@
       "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
       "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "global-prefix": "^1.0.1",
         "is-windows": "^1.0.1",
@@ -24959,6 +25064,7 @@
       "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
       "integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "expand-tilde": "^2.0.2",
         "homedir-polyfill": "^1.0.1",
@@ -24974,13 +25080,15 @@
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/resolve-dir/node_modules/which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
       "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -25221,7 +25329,6 @@
       "integrity": "sha512-RIDh866U8agLgiIcdpB+COKnlCreHJLfIhWC3LVflku5YHfpnsIKigRZeFfMfCc4dVcqNVfQQ5gO/afOck064A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -25346,7 +25453,6 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -25401,7 +25507,6 @@
       "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -25470,7 +25575,8 @@
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
       "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/schema-utils": {
       "version": "4.3.3",
@@ -25544,7 +25650,6 @@
       "integrity": "sha512-6qGjWccl5yoyugHt3jTgztJ9Y0JVzyH8/Voc/D8PlLat9pwxQYXz7W1Dpnq5h0/G5GCYGUaDSlYcyk3AMh5A6g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@semantic-release/commit-analyzer": "^13.0.1",
         "@semantic-release/error": "^4.0.0",
@@ -26351,7 +26456,8 @@
       "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
       "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
       "dev": true,
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/signal-exit": {
       "version": "4.1.0",
@@ -26688,7 +26794,8 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/sorted-array-functions/-/sorted-array-functions-1.3.0.tgz",
       "integrity": "sha512-2sqgzeFlid6N4Z2fUQ1cvFmTOLRi/sEDzSQ0OKYchqgoPmQBVyM3959qYx3fpS6Esef80KjmpgPeEr028dP3OA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/source-map": {
       "version": "0.7.6",
@@ -26868,7 +26975,8 @@
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
       "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/statuses": {
       "version": "1.5.0",
@@ -26884,7 +26992,8 @@
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
       "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/stdin-discarder": {
       "version": "0.2.2",
@@ -27184,7 +27293,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-syntax-patches-for-csstree": "^1.0.19",
@@ -27239,7 +27347,6 @@
       "integrity": "sha512-ZKmHMZolxeuYsnB+PCYrTpFce0/QWX9i9gh0hPXzp73WjuIMqUpzdQaBCrKoLWh6XtCFSaNDErkMPqdjy1/8aA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "css-tree": "^3.0.1",
         "is-plain-object": "^5.0.0",
@@ -27887,7 +27994,8 @@
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
       "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tinyexec": {
       "version": "1.0.2",
@@ -27928,6 +28036,7 @@
       "integrity": "sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=14.0.0"
       }
@@ -28087,14 +28196,14 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
-      "peer": true
+      "license": "0BSD"
     },
     "node_modules/tsscmp": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/tsscmp/-/tsscmp-1.0.6.tgz",
       "integrity": "sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.6.x"
       }
@@ -28105,7 +28214,6 @@
       "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "~0.27.0",
         "get-tsconfig": "^4.7.5"
@@ -28674,7 +28782,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -28689,7 +28796,6 @@
       "integrity": "sha512-xHURCQNxZ1dsWn0sdOaOfCSQG0HKeqSj9OexIxrz6ypU6wHYOdX2I3D2b8s8wFSsSOYJb+6q283cLiLlkEsBYw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/eslint-plugin": "8.53.0",
         "@typescript-eslint/parser": "8.53.0",
@@ -29082,6 +29188,7 @@
       "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
       "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=4",
         "yarn": "*"
@@ -29235,7 +29342,6 @@
       "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -29873,7 +29979,8 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
       "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/void-elements": {
       "version": "2.0.1",
@@ -29935,7 +30042,6 @@
       "integrity": "sha512-5DeICTX8BVgNp6afSPYXAFjskIgWGlygQH58bcozPOXgo2r/6xx39Y1+cULZ3gTxUYQP88jmwLj2anu4Xaq84g==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.8",
@@ -30042,7 +30148,6 @@
       "integrity": "sha512-QcQ72gh8a+7JO63TAx/6XZf/CWhgMzu5m0QirvPfGvptOusAxG12w2+aua1Jkjr7hzaWDnJ2n6JFeexMHI+Zjg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/bonjour": "^3.5.13",
         "@types/connect-history-api-fallback": "^1.5.4",
@@ -30631,6 +30736,7 @@
       "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "siginfo": "^2.0.0",
         "stackback": "0.0.2"
@@ -30867,7 +30973,6 @@
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
       "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -31061,6 +31166,7 @@
       "resolved": "https://registry.npmjs.org/ylru/-/ylru-1.4.0.tgz",
       "integrity": "sha512-2OQsPNEmBCvXuFlIni/a+Rn+R2pHW9INm0BxXJ4hVDA8TirqMj+J/Rp9ItLatT/5pZqWwefVrTQcHpixsxnVlA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 4.0.0"
       }
@@ -31120,7 +31226,6 @@
       "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -31193,7 +31298,6 @@
       "name": "@siemens/element-ng",
       "version": "48.9.0",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@angular/animations": "21",
         "@angular/cdk": "21",
@@ -31238,8 +31342,7 @@
     "projects/element-theme": {
       "name": "@siemens/element-theme",
       "version": "48.9.0",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "projects/element-translate-cli": {
       "name": "@siemens/element-translate-cli",
@@ -31256,7 +31359,6 @@
       "name": "@siemens/element-translate-ng",
       "version": "48.9.0",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@angular/common": "21",
         "@angular/core": "21",
diff --git a/package.json b/package.json
index fa816bfdc..82ec76a1e 100644
--- a/package.json
+++ b/package.json
@@ -140,6 +140,7 @@
     "@types/geojson": "7946.0.16",
     "@types/google-libphonenumber": "7.4.30",
     "@types/jasmine": "5.1.15",
+    "@types/katex": "0.16.7",
     "@types/node": "24.10.9",
     "angular-eslint": "21.1.0",
     "axe-html-reporter": "2.2.11",
@@ -156,6 +157,7 @@
     "husky": "9.1.7",
     "jasmine": "5.13.0",
     "jasmine-core": "5.13.0",
+    "katex": "0.16.27",
     "karma": "6.4.4",
     "karma-chrome-launcher": "3.2.0",
     "karma-coverage": "2.2.1",
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png
index dc9ab7539..209f818b8 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1226683d7f271c163e51f305b54059d263456efc42b6a04fc0afdac9fcd26b87
-size 477971
+oid sha256:cb37760dabe3b79d51abc31a0cb25a5471720eab6a7f95efdc3dfa5a72abdb19
+size 500865
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png
index 53e7c592e..cfcffc612 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b3b7925adf2c8ee2dd53a22608b697c74ed13a21bd3bc9bbb801be6d55a36e41
-size 473756
+oid sha256:fed3e2f7e574ac2e6c8cf6efb2637d2471d38bb080778f55e5be9023510de374
+size 496561
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
index 15379810c..3abed602e 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
@@ -10,9 +10,11 @@
   - text: You can use inline code like
   - code: console.log('Hello World')
   - text: "or multi-line code blocks:"
+- paragraph:
+  - button "Copy"
+  - code: "function calculateSum(a, b) { return a + b; } const result = calculateSum(5, 3); console.log(`Result: ${result}`);"
 - paragraph
-- button "Copy"
-- code: "function calculateSum(a, b) { return a + b; } const result = calculateSum(5, 3); console.log(`Result: ${result}`);"
+- separator
 - paragraph
 - heading "Formatting Options" [level=2]
 - paragraph: Here's a paragraph explaining the formatting options available.
@@ -40,6 +42,9 @@
   - text: "Links are also automatically detected:"
   - link "https://angular.io":
     - /url: https://angular.io
+- paragraph
+- separator
+- paragraph
 - heading "Lists and Bullets" [level=2]
 - paragraph: "Here are the key features:"
 - list:
@@ -57,7 +62,10 @@
   - listitem: First, analyze the requirements
   - listitem: Then, implement the solution
   - listitem: Finally, test the implementation
+- paragraph
+- separator
 - blockquote: This is a blockquote that demonstrates how quoted text appears in the markdown content component.
+- paragraph
 - paragraph: This paragraph follows the blockquotes to demonstrate proper paragraph separation.
 - paragraph: This is a separate paragraph created by double line breaks.
 - list:
@@ -68,84 +76,100 @@
   - listitem: First ordered item
   - listitem: Second ordered item
 - paragraph: Final paragraph to show proper spacing.
+- paragraph
+- separator
+- paragraph
 - heading "Images" [level=2]
 - paragraph: "Images can be included as follows:"
 - paragraph:
   - img "Building Image"
+- paragraph
+- separator
+- paragraph
 - heading "Tables" [level=2]
 - paragraph: "Tables are also supported:"
+- paragraph:
+  - button "Download CSV"
+  - table:
+    - rowgroup:
+      - row "Feature Examples Status Notes":
+        - columnheader "Feature":
+          - paragraph: Feature
+        - columnheader "Examples":
+          - paragraph: Examples
+        - columnheader "Status":
+          - paragraph: Status
+        - columnheader "Notes":
+          - paragraph: Notes
+    - rowgroup:
+      - row "Basic content Alice Johnson Bob Smith ✓ Complete Simple text and line breaks":
+        - cell "Basic content":
+          - paragraph:
+            - strong: Basic content
+        - cell "Alice Johnson Bob Smith":
+          - paragraph: Alice Johnson Bob Smith
+        - cell "✓ Complete":
+          - paragraph: ✓ Complete
+        - cell "Simple text and line breaks":
+          - paragraph: Simple text and line breaks
+      - row "Formatting Bold and italic Plus code and multiline code ✓ Complete Multiple markdown formats":
+        - cell "Formatting":
+          - paragraph:
+            - emphasis: Formatting
+        - cell "Bold and italic Plus code and multiline code":
+          - paragraph:
+            - strong: Bold
+            - text: and
+            - emphasis: italic
+            - text: Plus
+            - code: code
+            - text: and
+            - code: multiline code
+        - cell "✓ Complete":
+          - paragraph: ✓ Complete
+        - cell "Multiple markdown formats":
+          - paragraph: Multiple markdown formats
+      - row "Lists in cells First item Second item Third item ✓ Complete Bullet lists work properly":
+        - cell "Lists in cells":
+          - paragraph: Lists in cells
+        - cell "First item Second item Third item":
+          - list:
+            - listitem: First item
+            - listitem: Second item
+            - listitem: Third item
+        - cell "✓ Complete":
+          - paragraph: ✓ Complete
+        - cell "Bullet lists work properly":
+          - paragraph: Bullet lists work properly
+      - 'row "Escaped pipes grep \"text|pattern\" awk ''{print 2}'' ✓ Complete Use | for literal pipes"':
+        - cell "Escaped pipes":
+          - paragraph: Escaped pipes
+        - 'cell "grep \"text|pattern\" awk ''{print 2}''"':
+          - paragraph: "grep \"text|pattern\" awk '{print 2}'"
+        - cell "✓ Complete":
+          - paragraph: ✓ Complete
+        - cell "Use | for literal pipes":
+          - paragraph: Use | for literal pipes
+      - row "Line breaks Line 1 Line 2 Line 3 ✓ Complete Uses <br> tags":
+        - cell "Line breaks":
+          - paragraph: Line breaks
+        - cell "Line 1 Line 2 Line 3":
+          - paragraph: Line 1 Line 2 Line 3
+        - cell "✓ Complete":
+          - paragraph: ✓ Complete
+        - cell "Uses <br> tags":
+          - paragraph:
+            - text: Uses
+            - code: <br>
+            - text: tags
+  - text: This paragraph appears after the tables to demonstrate proper spacing.
+- paragraph
+- separator
+- paragraph
+- heading "Math Expressions" [level=2]
+- paragraph: LaTeX math expressions are supported for mathematical notation.
+- paragraph: "Inline math can be written like this: or the quadratic formula ."
+- paragraph: "/You can escape dollar signs with a backslash to show literal prices: \\$\\d+, \\$\\d+, \\$\\d+\\./"
+- paragraph: "Display math uses double dollar signs for block equations:"
 - paragraph
-- button "Download CSV"
-- table:
-  - rowgroup:
-    - row "Feature Examples Status Notes":
-      - cell "Feature":
-        - paragraph: Feature
-      - cell "Examples":
-        - paragraph: Examples
-      - cell "Status":
-        - paragraph: Status
-      - cell "Notes":
-        - paragraph: Notes
-    - row "Basic content Alice Johnson Bob Smith ✓ Complete Simple text and line breaks":
-      - cell "Basic content":
-        - paragraph:
-          - strong: Basic content
-      - cell "Alice Johnson Bob Smith":
-        - paragraph: Alice Johnson Bob Smith
-      - cell "✓ Complete":
-        - paragraph: ✓ Complete
-      - cell "Simple text and line breaks":
-        - paragraph: Simple text and line breaks
-    - row "Formatting Bold and italic Plus code and multiline code ✓ Complete Multiple markdown formats":
-      - cell "Formatting":
-        - paragraph:
-          - emphasis: Formatting
-      - cell "Bold and italic Plus code and multiline code":
-        - paragraph:
-          - strong: Bold
-          - text: and
-          - emphasis: italic
-          - text: Plus
-          - code: code
-          - text: and
-          - code: multiline code
-      - cell "✓ Complete":
-        - paragraph: ✓ Complete
-      - cell "Multiple markdown formats":
-        - paragraph: Multiple markdown formats
-    - row "Lists in cells First item Second item Third item ✓ Complete Bullet lists work properly":
-      - cell "Lists in cells":
-        - paragraph: Lists in cells
-      - cell "First item Second item Third item":
-        - list:
-          - listitem: First item
-          - listitem: Second item
-          - listitem: Third item
-      - cell "✓ Complete":
-        - paragraph: ✓ Complete
-      - cell "Bullet lists work properly":
-        - paragraph: Bullet lists work properly
-    - 'row "Escaped pipes grep \"text|pattern\" awk ''{print $1|$2}'' ✓ Complete Use | for literal pipes"':
-      - cell "Escaped pipes":
-        - paragraph: Escaped pipes
-      - 'cell "grep \"text|pattern\" awk ''{print $1|$2}''"':
-        - paragraph: "grep \"text|pattern\" awk '{print $1|$2}'"
-      - cell "✓ Complete":
-        - paragraph: ✓ Complete
-      - cell "Use | for literal pipes":
-        - paragraph: Use | for literal pipes
-    - row "Line breaks Line 1 Line 2 Line 3 ✓ Complete Uses <br> tags":
-      - cell "Line breaks":
-        - paragraph: Line breaks
-      - cell "Line 1 Line 2 Line 3":
-        - paragraph: Line 1 Line 2 Line 3
-      - cell "✓ Complete":
-        - paragraph: ✓ Complete
-      - cell "Uses <br> tags":
-        - paragraph:
-          - text: Uses
-          - code: <br>
-          - text: tags
-- text: This paragraph appears after the tables to demonstrate proper spacing.
 - paragraph
\ No newline at end of file
diff --git a/projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts b/projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts
new file mode 100644
index 000000000..038de057f
--- /dev/null
+++ b/projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts
@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { SecurityContext } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+/**
+ * Sanitizes HTML while preserving inline style attributes.
+ * Uses class-based placeholders to preserve styles through sanitization.
+ * This prevents style attributes from being stripped while maintaining security.
+ */
+export const sanitizeHtmlWithStyles = (html: string, sanitizer: DomSanitizer): string | null => {
+  const styleMap = new Map<string, string>();
+  let counter = 0;
+  const styleId = `STYLE-PH-${Math.random().toString(36).substring(2, 15)}`;
+
+  // Step 1: Extract all style attributes and replace with placeholder classes
+  let processed = html;
+
+  // Match any element with a style attribute
+  processed = processed.replace(
+    /(<[a-z][a-z0-9]*[^>]*?)\s+style="([^"]*)"/gi,
+    (match, tagStart, styleContent) => {
+      const placeholder = `${styleId}-${counter++}`;
+      styleMap.set(placeholder, styleContent);
+
+      // Check if tag already has a class attribute
+      const hasClass = /\sclass="[^"]*"/.test(tagStart);
+
+      if (hasClass) {
+        // Add placeholder to existing class attribute
+        return tagStart.replace(/(\sclass=")([^"]*)"/i, `$1$2 ${placeholder}"`);
+      } else {
+        // Add new class attribute with placeholder
+        return `${tagStart} class="${placeholder}"`;
+      }
+    }
+  );
+
+  // Step 2: Remove any remaining style attributes (safety measure)
+  processed = processed.replace(/\s+style="[^"]*"/gi, '');
+
+  // Step 3: Sanitize the HTML structure (now without style attributes)
+  const sanitized = sanitizer.sanitize(SecurityContext.HTML, processed);
+  if (!sanitized) {
+    return null;
+  }
+
+  // Step 4: Restore style attributes from placeholders
+  let restored = sanitized;
+  styleMap.forEach((styleContent, placeholder) => {
+    // Sanitize individual style content
+    const sanitizedStyle = sanitizer.sanitize(SecurityContext.STYLE, styleContent);
+    if (sanitizedStyle) {
+      // Escape the sanitized style to prevent injection
+      const escapedStyle = sanitizedStyle
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+
+      // Find and replace the placeholder in class attributes
+      restored = restored.replace(new RegExp(`class="([^"]*)"`, 'g'), (match, classContent) => {
+        if (classContent.includes(placeholder)) {
+          // Remove the placeholder from class list
+          const remainingClasses = classContent
+            .split(/\s+/)
+            .filter((cls: string) => cls && cls !== placeholder)
+            .join(' ')
+            .trim();
+
+          // Add style attribute and keep remaining classes if any
+          if (remainingClasses) {
+            return `class="${remainingClasses}" style="${escapedStyle}"`;
+          }
+          return `style="${escapedStyle}"`;
+        }
+        return match;
+      });
+    }
+  });
+
+  return restored;
+};
+
+/**
+ * Gets a cached HTML element or creates a new one if not in cache.
+ * Implements LRU caching strategy.
+ */
+export const getCachedOrCreateElement = (
+  cache: Map<string, HTMLElement>,
+  cacheOrder: string[],
+  cacheSize: number,
+  key: string,
+  createHtml: () => string
+): HTMLElement => {
+  const cached = cache.get(key);
+  if (cached) {
+    const orderIndex = cacheOrder.indexOf(key);
+    if (orderIndex > -1) {
+      cacheOrder.splice(orderIndex, 1);
+    }
+    cacheOrder.push(key);
+    return cached;
+  }
+
+  const tempDiv = document.createElement('div');
+  tempDiv.innerHTML = createHtml();
+  const element = tempDiv.firstElementChild as HTMLElement;
+
+  cache.set(key, element);
+  cacheOrder.push(key);
+
+  if (cacheOrder.length > cacheSize) {
+    const oldestKey = cacheOrder.shift();
+    if (oldestKey) {
+      cache.delete(oldestKey);
+    }
+  }
+
+  return element;
+};
+
+/**
+ * Gets a cached string or creates a new one if not in cache.
+ * Implements LRU caching strategy.
+ */
+export const getCachedOrCreateString = (
+  cache: Map<string, string>,
+  cacheOrder: string[],
+  cacheSize: number,
+  key: string,
+  createString: () => string
+): string => {
+  const cached = cache.get(key);
+  if (cached) {
+    const orderIndex = cacheOrder.indexOf(key);
+    if (orderIndex > -1) {
+      cacheOrder.splice(orderIndex, 1);
+    }
+    cacheOrder.push(key);
+    return cached;
+  }
+
+  const result = createString();
+
+  cache.set(key, result);
+  cacheOrder.push(key);
+
+  if (cacheOrder.length > cacheSize) {
+    const oldestKey = cacheOrder.shift();
+    if (oldestKey) {
+      cache.delete(oldestKey);
+    }
+  }
+
+  return result;
+};
diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index 79b8f7345..959f77fc3 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -9,6 +9,12 @@ import type {
   TranslatableString
 } from '@siemens/element-translate-ng/translate';
 
+import {
+  sanitizeHtmlWithStyles,
+  getCachedOrCreateElement,
+  getCachedOrCreateString
+} from './markdown-renderer-helpers';
+
 const CACHE_SIZE = 50;
 
 export interface MarkdownRendererOptions {
@@ -32,6 +38,14 @@ export interface MarkdownRendererOptions {
    * @defaultValue undefined
    */
   syntaxHighlighter?: (code: string, language?: string) => string | undefined;
+  /**
+   * Optional LaTeX renderer function.
+   * Receives LaTeX content and display mode boolean, returns an HTML content string or undefined to use default rendering.
+   * The returned HTML is sanitized before insertion.
+   * Make sure that the required styles/scripts for the LaTeX renderer (e.g., KaTeX) are included in your application.
+   * @defaultValue undefined
+   */
+  latexRenderer?: (latex: string, displayMode: boolean) => string | undefined;
   /**
    * Optional translate sync function of a service instance for translating the copy button label and download button label.
    * @defaultValue undefined
@@ -58,8 +72,10 @@ export const getMarkdownRenderer = (
 ): ((text: string) => Node) => {
   const codeBlockCache = new Map<string, HTMLElement>();
   const tableCache = new Map<string, HTMLElement>();
+  const latexCache = new Map<string, string>();
   const codeBlockCacheOrder: string[] = [];
   const tableCacheOrder: string[] = [];
+  const latexCacheOrder: string[] = [];
 
   return (text: string): Node => {
     const div = document.createElement('div');
@@ -187,7 +203,9 @@ export const getMarkdownRenderer = (
             codeBlockCacheOrder,
             CACHE_SIZE,
             codeBlockCachePlaceholderMap,
-            codeBlockPlaceholderState
+            codeBlockPlaceholderState,
+            latexCache,
+            latexCacheOrder
           );
           // Store original cell text in the map
           rowData.set(index, cells[index]);
@@ -259,7 +277,9 @@ export const getMarkdownRenderer = (
       codeBlockCacheOrder,
       CACHE_SIZE,
       codeBlockCachePlaceholderMap,
-      codeBlockPlaceholderState
+      codeBlockPlaceholderState,
+      latexCache,
+      latexCacheOrder
     );
 
     div.innerHTML = html;
@@ -381,40 +401,6 @@ export const getMarkdownRenderer = (
   };
 };
 
-const getCachedOrCreateElement = (
-  cache: Map<string, HTMLElement>,
-  cacheOrder: string[],
-  cacheSize: number,
-  key: string,
-  createHtml: () => string
-): HTMLElement => {
-  const cached = cache.get(key);
-  if (cached) {
-    const orderIndex = cacheOrder.indexOf(key);
-    if (orderIndex > -1) {
-      cacheOrder.splice(orderIndex, 1);
-    }
-    cacheOrder.push(key);
-    return cached;
-  }
-
-  const tempDiv = document.createElement('div');
-  tempDiv.innerHTML = createHtml();
-  const element = tempDiv.firstElementChild as HTMLElement;
-
-  cache.set(key, element);
-  cacheOrder.push(key);
-
-  if (cacheOrder.length > cacheSize) {
-    const oldestKey = cacheOrder.shift();
-    if (oldestKey) {
-      cache.delete(oldestKey);
-    }
-  }
-
-  return element;
-};
-
 const transformMarkdownText = (
   html: string,
   keepAdditionalNewlines = true,
@@ -424,7 +410,9 @@ const transformMarkdownText = (
   codeBlockCacheOrder?: string[],
   cacheSize?: number,
   codeBlockCachePlaceholderMap?: Map<string, string>,
-  codeBlockPlaceholderState?: { counter: number }
+  codeBlockPlaceholderState?: { counter: number },
+  latexCache?: Map<string, string>,
+  latexCacheOrder?: string[]
 ): string => {
   // Generate a random placeholder for inner code blocks to prevent markdown processing inside them
   const innerCodeQuotePlaceholder = `--INNER-CODE-${Math.random().toString(36).substring(2, 15)}--`;
@@ -432,6 +420,7 @@ const transformMarkdownText = (
 
   const escapedAsteriskPlaceholder = `--ASTERISK-${Math.random().toString(36).substring(2, 15)}--`;
   const escapedUnderscorePlaceholder = `--UNDERSCORE-${Math.random().toString(36).substring(2, 15)}--`;
+  const escapedDollarPlaceholder = `--DOLLAR-${Math.random().toString(36).substring(2, 15)}--`;
 
   // Apply markdown transformations to the sanitized content
 
@@ -539,6 +528,92 @@ const transformMarkdownText = (
   // Remove temporary closing marker if it's still there (wasn't part of a code block)
   html = html.replace(tempClosingMarker, '').replace(/--TEMP-CLOSE--/g, '');
 
+  // Process LaTeX expressions after code blocks are extracted
+  const latexPlaceholderMap = new Map<string, string>();
+
+  // Replace escaped dollar signs before processing LaTeX
+  html = html.replace(/\\\$/g, escapedDollarPlaceholder);
+
+  // Display math: $$ ... $$
+  html = html.replace(/\$\$([\s\S]*?)\$\$/g, (match, latex) => {
+    if (options?.latexRenderer) {
+      try {
+        const cacheKey = `display|||${latex.trim()}`;
+
+        // Check cache first (if available)
+        const cached =
+          latexCache && latexCacheOrder
+            ? getCachedOrCreateString(latexCache, latexCacheOrder, CACHE_SIZE, cacheKey, () => {
+                const rendered = options.latexRenderer?.(latex.trim(), true);
+                if (rendered) {
+                  const sanitized = sanitizeHtmlWithStyles(rendered, sanitizer);
+                  if (sanitized) {
+                    return `<div class="latex-display-wrapper">${sanitized}</div>`;
+                  }
+                }
+                return '';
+              })
+            : (() => {
+                const rendered = options.latexRenderer?.(latex.trim(), true);
+                if (rendered) {
+                  const sanitized = sanitizeHtmlWithStyles(rendered, sanitizer);
+                  if (sanitized) {
+                    return `<div class="latex-display-wrapper">${sanitized}</div>`;
+                  }
+                }
+                return '';
+              })();
+
+        if (cached) {
+          const latexPlaceholder = `--LATEX-DISPLAY-${Math.random().toString(36).substring(2, 15)}--`;
+          latexPlaceholderMap.set(latexPlaceholder, cached);
+          return latexPlaceholder;
+        }
+      } catch {
+        // If rendering fails, return the original
+      }
+    }
+    return match;
+  });
+
+  // Inline math: $ ... $ (but not $$)
+  html = html.replace(/(?<!\$)\$(?!\$)((?:(?!\$)[\s\S])+?)\$(?!\$)/g, (match, latex) => {
+    if (options?.latexRenderer) {
+      try {
+        const cacheKey = `inline|||${latex.trim()}`;
+
+        // Check cache first (if available)
+        const cached =
+          latexCache && latexCacheOrder
+            ? getCachedOrCreateString(latexCache, latexCacheOrder, CACHE_SIZE, cacheKey, () => {
+                const rendered = options.latexRenderer?.(latex.trim(), false);
+                if (rendered) {
+                  const sanitized = sanitizeHtmlWithStyles(rendered, sanitizer);
+                  return sanitized ?? '';
+                }
+                return '';
+              })
+            : (() => {
+                const rendered = options.latexRenderer?.(latex.trim(), false);
+                if (rendered) {
+                  const sanitized = sanitizeHtmlWithStyles(rendered, sanitizer);
+                  return sanitized ?? '';
+                }
+                return '';
+              })();
+
+        if (cached) {
+          const latexPlaceholder = `--LATEX-INLINE-${Math.random().toString(36).substring(2, 15)}--`;
+          latexPlaceholderMap.set(latexPlaceholder, cached);
+          return latexPlaceholder;
+        }
+      } catch {
+        // If rendering fails, return the original
+      }
+    }
+    return match;
+  });
+
   html = html
 
     // Inline code `text`
@@ -655,6 +730,14 @@ const transformMarkdownText = (
   // Restore inner code block placeholders
   html = html.replace(new RegExp(innerCodeQuotePlaceholder, 'g'), '`');
 
+  // Restore LaTeX placeholders
+  latexPlaceholderMap.forEach((latex, placeholder) => {
+    html = html.replace(new RegExp(placeholder, 'g'), latex);
+  });
+
+  // Restore escaped dollar signs
+  html = html.replace(new RegExp(escapedDollarPlaceholder, 'g'), '$');
+
   return html;
 };
 
diff --git a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.ts b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.ts
index 474aaca5f..4336a1367 100644
--- a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.ts
+++ b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.ts
@@ -184,17 +184,21 @@ const example = "code block";
     const markdownDiv = hostElement.firstElementChild!;
     const tableElement = markdownDiv.querySelector('table')!;
     const trElements = markdownDiv.querySelectorAll('tr');
+    const thElements = markdownDiv.querySelectorAll('th');
     const tdElements = markdownDiv.querySelectorAll('td');
 
     expect(tableElement).toBeTruthy();
     expect(tableElement.classList).toContain('table');
     expect(tableElement.classList).toContain('table-hover');
     expect(trElements.length).toBe(3); // Header + 2 data rows
-    expect(tdElements.length).toBe(6); // 2 columns × 3 rows
-    expect(tdElements[0].textContent?.trim()).toBe('Name');
-    expect(tdElements[1].textContent?.trim()).toBe('Role');
-    expect(tdElements[2].textContent?.trim()).toBe('Alice');
-    expect(tdElements[3].textContent?.trim()).toBe('Developer');
+    expect(thElements.length).toBe(2); // 2 header cells
+    expect(tdElements.length).toBe(4); // 2 columns × 2 data rows
+    expect(thElements[0].textContent?.trim()).toBe('Name');
+    expect(thElements[1].textContent?.trim()).toBe('Role');
+    expect(tdElements[0].textContent?.trim()).toBe('Alice');
+    expect(tdElements[1].textContent?.trim()).toBe('Developer');
+    expect(tdElements[2].textContent?.trim()).toBe('Bob');
+    expect(tdElements[3].textContent?.trim()).toBe('Designer');
   });
 
   it('should escape HTML in table cells', () => {
@@ -208,9 +212,9 @@ const example = "code block";
     const markdownDiv = hostElement.firstElementChild!;
     const tdElements = markdownDiv.querySelectorAll('td');
 
-    expect(tdElements[2].innerHTML).not.toContain('<script>');
-    expect(tdElements[2].textContent).toBe('');
-    expect(tdElements[3].innerHTML).toContain('<b>Bold</b>');
+    expect(tdElements[0].innerHTML).not.toContain('<script>');
+    expect(tdElements[0].textContent).toBe('');
+    expect(tdElements[1].innerHTML).toContain('<b>Bold</b>');
   });
 
   it('should handle tables with markdown formatting inside cells', () => {
@@ -242,10 +246,10 @@ const example = "code block";
     const markdownDiv = hostElement.firstElementChild!;
     const tdElements = markdownDiv.querySelectorAll('td');
 
-    expect(tdElements[2].textContent?.trim()).toBe('grep "text|pattern"');
-    expect(tdElements[3].textContent?.trim()).toBe('Search for text OR pattern');
-    expect(tdElements[4].textContent?.trim()).toBe("awk '{print $1|$2}'");
-    expect(tdElements[5].textContent?.trim()).toBe('Print fields separated by pipe');
+    expect(tdElements[0].textContent?.trim()).toBe('grep "text|pattern"');
+    expect(tdElements[1].textContent?.trim()).toBe('Search for text OR pattern');
+    expect(tdElements[2].textContent?.trim()).toBe("awk '{print $1|$2}'");
+    expect(tdElements[3].textContent?.trim()).toBe('Print fields separated by pipe');
   });
 
   it('should handle lists and line breaks inside table cells', () => {
@@ -266,14 +270,14 @@ const example = "code block";
     expect(innerHTML).toContain('<em>Line breaks</em>');
 
     // Check that lists are properly formatted
-    expect(tdElements[3].innerHTML).toContain('<ul>');
-    expect(tdElements[3].innerHTML).toContain('<li>First item</li>');
-    expect(tdElements[3].innerHTML).toContain('<li>Second item</li>');
-    expect(tdElements[3].innerHTML).toContain('<li>Third item</li>');
+    expect(tdElements[1].innerHTML).toContain('<ul>');
+    expect(tdElements[1].innerHTML).toContain('<li>First item</li>');
+    expect(tdElements[1].innerHTML).toContain('<li>Second item</li>');
+    expect(tdElements[1].innerHTML).toContain('<li>Third item</li>');
 
     // Check that line breaks work in cells - <br> tags remain as <br> in innerHTML, don't convert to \n in textContent
-    expect(tdElements[5].innerHTML).toContain('<br>');
-    expect(tdElements[5].textContent).toBe('Line 1Line 2Line 3');
+    expect(tdElements[3].innerHTML).toContain('<br>');
+    expect(tdElements[3].textContent).toBe('Line 1Line 2Line 3');
   });
 
   it('should update content when input changes', () => {
@@ -290,4 +294,215 @@ const example = "code block";
     expect(markdownDiv.textContent).toContain('Updated content');
     expect(markdownDiv.querySelector('strong')).toBeTruthy();
   });
+
+  it('should render LaTeX inline math expressions with provided renderer', () => {
+    const latexRenderer = jasmine
+      .createSpy('latexRenderer')
+      .and.returnValue('<span class="katex">E=mc^2</span>');
+
+    fixture.componentRef.setInput('text', 'The formula is $E = mc^2$ in physics.');
+    fixture.componentRef.setInput('latexRenderer', latexRenderer);
+    fixture.detectChanges();
+
+    expect(latexRenderer).toHaveBeenCalledWith('E = mc^2', false);
+
+    const markdownDiv = hostElement.firstElementChild!;
+    expect(markdownDiv.innerHTML).toContain('<span class="katex">E=mc^2</span>');
+  });
+
+  it('should render LaTeX display math expressions with provided renderer', () => {
+    const latexRenderer = jasmine
+      .createSpy('latexRenderer')
+      .and.returnValue('<span class="katex-display">integral</span>');
+
+    fixture.componentRef.setInput('text', '$$\\int_{-\\infty}^{\\infty} e^{-x^2} dx$$');
+    fixture.componentRef.setInput('latexRenderer', latexRenderer);
+    fixture.detectChanges();
+
+    expect(latexRenderer).toHaveBeenCalledWith('\\int_{-\\infty}^{\\infty} e^{-x^2} dx', true);
+
+    const markdownDiv = hostElement.firstElementChild!;
+    expect(markdownDiv.innerHTML).toContain('<div class="latex-display-wrapper">');
+    expect(markdownDiv.innerHTML).toContain('<span class="katex-display">integral</span>');
+  });
+
+  it('should not render LaTeX when no renderer is provided', () => {
+    fixture.componentRef.setInput('text', 'The formula is $E = mc^2$ in physics.');
+    fixture.detectChanges();
+
+    const markdownDiv = hostElement.firstElementChild!;
+    expect(markdownDiv.textContent).toContain('$E = mc^2$');
+  });
+
+  it('should handle multiple inline LaTeX expressions', () => {
+    const latexRenderer = jasmine
+      .createSpy('latexRenderer')
+      .and.callFake((latex: string) => `<span class="katex">${latex}</span>`);
+
+    fixture.componentRef.setInput('text', 'First $x^2$ and second $y^3$ formulas.');
+    fixture.componentRef.setInput('latexRenderer', latexRenderer);
+    fixture.detectChanges();
+
+    expect(latexRenderer).toHaveBeenCalledWith('x^2', false);
+    expect(latexRenderer).toHaveBeenCalledWith('y^3', false);
+
+    const markdownDiv = hostElement.firstElementChild!;
+    expect(markdownDiv.innerHTML).toContain('<span class="katex">x^2</span>');
+    expect(markdownDiv.innerHTML).toContain('<span class="katex">y^3</span>');
+  });
+
+  it('should not treat $$ as inline math', () => {
+    const latexRenderer = jasmine
+      .createSpy('latexRenderer')
+      .and.returnValue('<span>rendered</span>');
+
+    fixture.componentRef.setInput('text', '$$x^2$$');
+    fixture.componentRef.setInput('latexRenderer', latexRenderer);
+    fixture.detectChanges();
+
+    // Should be called with displayMode true, not as inline
+    expect(latexRenderer).toHaveBeenCalledWith('x^2', true);
+    expect(latexRenderer).not.toHaveBeenCalledWith('x^2', false);
+  });
+
+  it('should handle LaTeX rendering errors gracefully', () => {
+    const latexRenderer = jasmine.createSpy('latexRenderer').and.throwError('Parse error');
+
+    fixture.componentRef.setInput('text', 'Formula: $E = mc^2$');
+    fixture.componentRef.setInput('latexRenderer', latexRenderer);
+    fixture.detectChanges();
+
+    const markdownDiv = hostElement.firstElementChild!;
+    // Should fall back to original text
+    expect(markdownDiv.textContent).toContain('$E = mc^2$');
+  });
+
+  it('should render LaTeX inside markdown with other formatting', () => {
+    const latexRenderer = jasmine
+      .createSpy('latexRenderer')
+      .and.returnValue('<span class="katex">formula</span>');
+
+    fixture.componentRef.setInput('text', 'This is **bold** with $x^2$ formula and `code`.');
+    fixture.componentRef.setInput('latexRenderer', latexRenderer);
+    fixture.detectChanges();
+
+    const markdownDiv = hostElement.firstElementChild!;
+    expect(markdownDiv.innerHTML).toContain('<strong>bold</strong>');
+    expect(markdownDiv.innerHTML).toContain('<span class="katex">formula</span>');
+    expect(markdownDiv.innerHTML).toContain('<code>code</code>');
+  });
+
+  it('should not treat dollar signs in code blocks as LaTeX', () => {
+    const latexRenderer = jasmine
+      .createSpy('latexRenderer')
+      .and.returnValue('<span class="katex">formula</span>');
+
+    const text = 'Formula: $x^2$\n\n```javascript\nconst price = "$100";\n```';
+    fixture.componentRef.setInput('text', text);
+    fixture.componentRef.setInput('latexRenderer', latexRenderer);
+    fixture.detectChanges();
+
+    // LaTeX renderer should only be called for the inline math, not the code block
+    expect(latexRenderer).toHaveBeenCalledTimes(1);
+    expect(latexRenderer).toHaveBeenCalledWith('x^2', false);
+
+    const markdownDiv = hostElement.firstElementChild!;
+    const codeElement = markdownDiv.querySelector('code')!;
+    expect(codeElement.textContent).toContain('$100');
+    expect(markdownDiv.innerHTML).toContain('<span class="katex">formula</span>');
+  });
+
+  it('should handle LaTeX and code blocks together in complex markdown', () => {
+    const latexRenderer = jasmine
+      .createSpy('latexRenderer')
+      .and.callFake((latex: string, displayMode: boolean) =>
+        displayMode
+          ? '<div class="katex-display">display</div>'
+          : '<span class="katex">inline</span>'
+      );
+
+    const text = `Inline: $a^2$
+
+$$\\sum_{i=1}^{n} i$$
+
+\`\`\`python
+cost = 50  # $50 per item
+print(f"Total: \${cost}")
+\`\`\`
+
+After: $b^2$`;
+
+    fixture.componentRef.setInput('text', text);
+    fixture.componentRef.setInput('latexRenderer', latexRenderer);
+    fixture.detectChanges();
+
+    // Should be called twice for inline math and once for display math
+    expect(latexRenderer).toHaveBeenCalledTimes(3);
+    expect(latexRenderer).toHaveBeenCalledWith('a^2', false);
+    expect(latexRenderer).toHaveBeenCalledWith('\\sum_{i=1}^{n} i', true);
+    expect(latexRenderer).toHaveBeenCalledWith('b^2', false);
+
+    const markdownDiv = hostElement.firstElementChild!;
+    const codeElement = markdownDiv.querySelector('code')!;
+    // Dollar signs in code should be preserved
+    expect(codeElement.textContent).toContain('$50');
+    expect(codeElement.textContent).toContain('${cost}');
+    // LaTeX should be rendered
+    expect(markdownDiv.innerHTML).toContain('<span class="katex">inline</span>');
+    expect(markdownDiv.innerHTML).toContain('<div class="latex-display-wrapper">');
+    expect(markdownDiv.innerHTML).toContain('<div class="katex-display">display</div>');
+  });
+
+  it('should not treat escaped dollar signs as LaTeX delimiters', () => {
+    const latexRenderer = jasmine
+      .createSpy('latexRenderer')
+      .and.returnValue('<span class="katex">formula</span>');
+
+    fixture.componentRef.setInput('text', 'The price is \\$100 and formula is $x^2$.');
+    fixture.componentRef.setInput('latexRenderer', latexRenderer);
+    fixture.detectChanges();
+
+    // Should only be called for the actual LaTeX, not the escaped dollar
+    expect(latexRenderer).toHaveBeenCalledTimes(1);
+    expect(latexRenderer).toHaveBeenCalledWith('x^2', false);
+
+    const markdownDiv = hostElement.firstElementChild!;
+    expect(markdownDiv.textContent).toContain('$100');
+    expect(markdownDiv.innerHTML).toContain('<span class="katex">formula</span>');
+  });
+
+  it('should handle multiple escaped dollar signs', () => {
+    const latexRenderer = jasmine
+      .createSpy('latexRenderer')
+      .and.returnValue('<span class="katex">formula</span>');
+
+    fixture.componentRef.setInput('text', 'Prices: \\$50, \\$100, \\$150 with math $a + b$.');
+    fixture.componentRef.setInput('latexRenderer', latexRenderer);
+    fixture.detectChanges();
+
+    expect(latexRenderer).toHaveBeenCalledTimes(1);
+    expect(latexRenderer).toHaveBeenCalledWith('a + b', false);
+
+    const markdownDiv = hostElement.firstElementChild!;
+    expect(markdownDiv.textContent).toContain('$50');
+    expect(markdownDiv.textContent).toContain('$100');
+    expect(markdownDiv.textContent).toContain('$150');
+  });
+
+  it('should not treat escaped $$ as display LaTeX', () => {
+    const latexRenderer = jasmine
+      .createSpy('latexRenderer')
+      .and.returnValue('<span>rendered</span>');
+
+    fixture.componentRef.setInput('text', 'Not math: \\$\\$ but this is: $$x^2$$');
+    fixture.componentRef.setInput('latexRenderer', latexRenderer);
+    fixture.detectChanges();
+
+    // Should only be called for the actual display math
+    expect(latexRenderer).toHaveBeenCalledTimes(1);
+    expect(latexRenderer).toHaveBeenCalledWith('x^2', true);
+
+    const markdownDiv = hostElement.firstElementChild!;
+    expect(markdownDiv.textContent).toContain('$$');
+  });
 });
diff --git a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
index 4b24a70bd..f6b18c720 100644
--- a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
+++ b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
@@ -50,6 +50,17 @@ export class SiMarkdownRendererComponent {
     ((code: string, language?: string) => string | undefined) | undefined
   >(undefined);
 
+  /**
+   * Optional LaTeX renderer function for math expressions.
+   * Receives LaTeX content and display mode boolean, returns an HTML content string or undefined to use default rendering.
+   * The returned HTML is sanitized before insertion.
+   * Make sure that the required styles/scripts for the LaTeX renderer (e.g., KaTeX) are included in your application.
+   * @defaultValue undefined
+   */
+  readonly latexRenderer = input<
+    ((latex: string, displayMode: boolean) => string | undefined) | undefined
+  >(undefined);
+
   /**
    * Label for the copy button.
    * @defaultValue
@@ -72,11 +83,13 @@ export class SiMarkdownRendererComponent {
 
   private readonly markdownRenderer = computed(() => {
     const highlighterFn = this.syntaxHighlighter();
+    const latexRendererFn = this.latexRenderer();
 
     const options: MarkdownRendererOptions | undefined = {
       copyCodeButton: !this.disableCopyButton() ? this.copyButtonLabel() : undefined,
       downloadTableButton: !this.disableDownloadButton() ? this.downloadButtonLabel() : undefined,
       syntaxHighlighter: highlighterFn,
+      latexRenderer: latexRendererFn,
       translateSync: this.translateService.translateSync.bind(this.translateService)
     };
 
diff --git a/projects/element-theme/src/styles/components/_markdown.scss b/projects/element-theme/src/styles/components/_markdown.scss
index 6288f7036..fe2fc2001 100644
--- a/projects/element-theme/src/styles/components/_markdown.scss
+++ b/projects/element-theme/src/styles/components/_markdown.scss
@@ -172,4 +172,18 @@
     display: block;
     margin-block: map.get(variables.$spacers, 4);
   }
+
+  .latex-display-wrapper {
+    display: block;
+    margin-block: map.get(variables.$spacers, 4);
+    overflow-x: auto;
+    max-inline-size: 100%;
+    text-align: center;
+
+    .katex,
+    .katex * {
+      // stylelint-disable-next-line declaration-no-important
+      box-sizing: content-box !important;
+    }
+  }
 }
diff --git a/src/app/examples/si-chat-messages/si-ai-message.ts b/src/app/examples/si-chat-messages/si-ai-message.ts
index d7e6dfc77..c71123a06 100644
--- a/src/app/examples/si-chat-messages/si-ai-message.ts
+++ b/src/app/examples/si-chat-messages/si-ai-message.ts
@@ -10,6 +10,7 @@ import { MenuItemAction } from '@siemens/element-ng/menu';
 import { injectSiTranslateService } from '@siemens/element-translate-ng/translate';
 import { LOG_EVENT } from '@siemens/live-preview';
 import hljs from 'highlight.js';
+import katex from 'katex';
 
 @Component({
   selector: 'app-sample',
@@ -40,6 +41,22 @@ export class SampleComponent {
         }
       }
       return undefined;
+    },
+    // Optional: LaTeX rendering with KaTeX
+    // This function returns rendered HTML for LaTeX math expressions.
+    // The returned HTML is sanitized before insertion.
+    // Make sure to include KaTeX styles in your application.
+    // Add to styles in angular.json: "node_modules/katex/dist/katex.min.css"
+    latexRenderer: (latex: string, displayMode: boolean): string | undefined => {
+      try {
+        return katex.renderToString(latex, {
+          displayMode,
+          throwOnError: false,
+          output: 'html'
+        });
+      } catch {
+        return undefined;
+      }
     }
   });
 
diff --git a/src/app/examples/si-chat-messages/si-chat-container.ts b/src/app/examples/si-chat-messages/si-chat-container.ts
index 8c330a599..04e34f563 100644
--- a/src/app/examples/si-chat-messages/si-chat-container.ts
+++ b/src/app/examples/si-chat-messages/si-chat-container.ts
@@ -35,6 +35,7 @@ import { SiToastNotificationService } from '@siemens/element-ng/toast-notificati
 import { injectSiTranslateService } from '@siemens/element-translate-ng/translate';
 import { LOG_EVENT } from '@siemens/live-preview';
 import hljs from 'highlight.js';
+import katex from 'katex';
 
 interface ChatMessage {
   type: 'user' | 'ai' | 'custom';
@@ -86,6 +87,22 @@ export class SampleComponent {
         }
       }
       return undefined;
+    },
+    // Optional: LaTeX rendering with KaTeX
+    // This function returns rendered HTML for LaTeX math expressions.
+    // The returned HTML is sanitized before insertion.
+    // Make sure to include KaTeX styles in your application.
+    // Add to styles in angular.json: "node_modules/katex/dist/katex.min.css"
+    latexRenderer: (latex: string, displayMode: boolean): string | undefined => {
+      try {
+        return katex.renderToString(latex, {
+          displayMode,
+          throwOnError: false,
+          output: 'html'
+        });
+      } catch {
+        return undefined;
+      }
     }
   });
 
diff --git a/src/app/examples/si-chat-messages/si-user-message.ts b/src/app/examples/si-chat-messages/si-user-message.ts
index 0838a260e..a8485bae9 100644
--- a/src/app/examples/si-chat-messages/si-user-message.ts
+++ b/src/app/examples/si-chat-messages/si-user-message.ts
@@ -13,6 +13,7 @@ import { getMarkdownRenderer } from '@siemens/element-ng/markdown-renderer';
 import { injectSiTranslateService } from '@siemens/element-translate-ng/translate';
 import { LOG_EVENT } from '@siemens/live-preview';
 import hljs from 'highlight.js';
+import katex from 'katex';
 
 @Component({
   selector: 'app-sample',
@@ -43,6 +44,22 @@ export class SampleComponent {
         }
       }
       return undefined;
+    },
+    // Optional: LaTeX rendering with KaTeX
+    // This function returns rendered HTML for LaTeX math expressions.
+    // The returned HTML is sanitized before insertion.
+    // Make sure to include KaTeX styles in your application.
+    // Add to styles in angular.json: "node_modules/katex/dist/katex.min.css"
+    latexRenderer: (latex: string, displayMode: boolean): string | undefined => {
+      try {
+        return katex.renderToString(latex, {
+          displayMode,
+          throwOnError: false,
+          output: 'html'
+        });
+      } catch {
+        return undefined;
+      }
     }
   });
 
diff --git a/src/app/examples/si-markdown-renderer/si-markdown-renderer.html b/src/app/examples/si-markdown-renderer/si-markdown-renderer.html
index 56494fbc3..8d030ec32 100644
--- a/src/app/examples/si-markdown-renderer/si-markdown-renderer.html
+++ b/src/app/examples/si-markdown-renderer/si-markdown-renderer.html
@@ -1,3 +1,7 @@
 <div class="p-4">
-  <si-markdown-renderer [text]="markdownText()" [syntaxHighlighter]="syntaxHighlighter" />
+  <si-markdown-renderer
+    [text]="markdownText()"
+    [syntaxHighlighter]="syntaxHighlighter"
+    [latexRenderer]="latexRenderer"
+  />
 </div>
diff --git a/src/app/examples/si-markdown-renderer/si-markdown-renderer.ts b/src/app/examples/si-markdown-renderer/si-markdown-renderer.ts
index 32d7619ef..cf1b3f214 100644
--- a/src/app/examples/si-markdown-renderer/si-markdown-renderer.ts
+++ b/src/app/examples/si-markdown-renderer/si-markdown-renderer.ts
@@ -13,6 +13,7 @@ import {
 } from '@angular/core';
 import { SiMarkdownRendererComponent } from '@siemens/element-ng/markdown-renderer';
 import hljs from 'highlight.js';
+import katex from 'katex';
 
 @Component({
   selector: 'app-sample',
@@ -41,6 +42,24 @@ export class SampleComponent implements OnInit {
     return undefined;
   };
 
+  // Optional: LaTeX rendering with KaTeX
+  // This function returns rendered HTML for LaTeX math expressions.
+  // The returned HTML is sanitized before insertion.
+  // Make sure to include KaTeX styles in your application.
+  // Add to styles in angular.json: "node_modules/katex/dist/katex.min.css"
+  readonly latexRenderer = (latex: string, displayMode: boolean): string | undefined => {
+    try {
+      return katex.renderToString(latex, {
+        displayMode,
+        throwOnError: false,
+        output: 'html'
+      });
+    } catch {
+      // If rendering fails, return undefined to use default rendering
+      return undefined;
+    }
+  };
+
   ngOnInit(): void {
     this.http.get('assets/sample-markdown.md', { responseType: 'text' }).subscribe(text => {
       this.markdownText.set(text);
diff --git a/src/assets/sample-markdown.md b/src/assets/sample-markdown.md
index c72640dc3..86d791dd8 100644
--- a/src/assets/sample-markdown.md
+++ b/src/assets/sample-markdown.md
@@ -102,3 +102,19 @@ Tables are also supported:
 | Line breaks       | Line 1<br>Line 2<br>Line 3                                   | ✓ Complete | Uses `<br>` tags            |
 
 This paragraph appears after the tables to demonstrate proper spacing.
+
+---
+
+## Math Expressions
+
+LaTeX math expressions are supported for mathematical notation.
+
+Inline math can be written like this: $E = mc^2$ or the quadratic formula $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$.
+
+You can escape dollar signs with a backslash to show literal prices: \$100, \$50, \$25.
+
+Display math uses double dollar signs for block equations:
+
+$$
+\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
+$$

From 9fd1561d42c00ffee404345055f004f96da96200 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Wed, 7 Jan 2026 19:18:54 +0100
Subject: [PATCH 15/30] fix(chat-messages): allow closing attachment modal on
 backdrop click

---
 .../element-ng/chat-messages/si-attachment-list.component.ts   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/projects/element-ng/chat-messages/si-attachment-list.component.ts b/projects/element-ng/chat-messages/si-attachment-list.component.ts
index 3dd12dfec..ee801ad69 100644
--- a/projects/element-ng/chat-messages/si-attachment-list.component.ts
+++ b/projects/element-ng/chat-messages/si-attachment-list.component.ts
@@ -103,7 +103,8 @@ export class SiAttachmentListComponent {
     if (template) {
       event.preventDefault();
       this.modalService.show(template, {
-        inputValues: { 'attachment': attachment }
+        inputValues: { 'attachment': attachment },
+        ignoreBackdropClick: false
       });
     }
   }

From dfaa2e0cd76b38669e1a9576db41f273c86416b3 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Thu, 8 Jan 2026 16:17:13 +0100
Subject: [PATCH 16/30] fix(chat-messages): expose method to scroll to top

---
 api-goldens/element-ng/chat-messages/index.api.md  |  1 +
 .../chat-messages/si-chat-container.component.ts   | 14 ++++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/api-goldens/element-ng/chat-messages/index.api.md b/api-goldens/element-ng/chat-messages/index.api.md
index df202efca..0d62a4766 100644
--- a/api-goldens/element-ng/chat-messages/index.api.md
+++ b/api-goldens/element-ng/chat-messages/index.api.md
@@ -68,6 +68,7 @@ export class SiChatContainerComponent implements AfterContentInit, OnDestroy {
     focus(): void;
     readonly noAutoScroll: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     scrollToBottom(): void;
+    scrollToTop(): void;
 }
 
 // @public
diff --git a/projects/element-ng/chat-messages/si-chat-container.component.ts b/projects/element-ng/chat-messages/si-chat-container.component.ts
index ebbc13e1d..a68175427 100644
--- a/projects/element-ng/chat-messages/si-chat-container.component.ts
+++ b/projects/element-ng/chat-messages/si-chat-container.component.ts
@@ -197,6 +197,20 @@ export class SiChatContainerComponent implements AfterContentInit, OnDestroy {
     this.scrollToBottomDuringStreaming();
   }
 
+  /**
+   * Scrolls to the top of the messages container immediately.
+   */
+  public scrollToTop(): void {
+    const container = this.messagesContainer();
+    if (!container) {
+      return;
+    }
+
+    const element = container.nativeElement;
+    element.scrollTop = 0;
+    this.isUserAtBottom = false;
+  }
+
   /**
    * Focuses the messages container element.
    */

From 01f9e4c752e6d63a26e796a08f278b3b9bf4f06b Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Thu, 8 Jan 2026 16:18:30 +0100
Subject: [PATCH 17/30] fixup(chat-messages): fix displaying of single line
 code blocks and multi-line formulas

---
 .../src/styles/components/_markdown.scss      | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/projects/element-theme/src/styles/components/_markdown.scss b/projects/element-theme/src/styles/components/_markdown.scss
index fe2fc2001..860f9844c 100644
--- a/projects/element-theme/src/styles/components/_markdown.scss
+++ b/projects/element-theme/src/styles/components/_markdown.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 
 @use '../variables';
+@use '../bootstrap/buttons' as buttons;
 
 @use './markdown-hljs-theme';
 
@@ -56,6 +57,7 @@
     padding-block: map.get(variables.$spacers, 4);
     padding-inline: map.get(variables.$spacers, 4);
     border-radius: variables.$element-radius-1;
+    vertical-align: middle;
     overflow-x: auto;
     margin-inline: 0;
     inline-size: max-content;
@@ -63,6 +65,7 @@
     box-sizing: border-box;
 
     code {
+      vertical-align: middle;
       background-color: transparent;
       padding-block: 0;
       padding-inline: 0;
@@ -74,6 +77,10 @@
     }
   }
 
+  .code-wrapper.has-copy-button pre {
+    min-block-size: buttons.$btn-circle-size-sm;
+  }
+
   .copy-code-btn {
     position: absolute;
     inset-block-start: 0;
@@ -174,11 +181,19 @@
   }
 
   .latex-display-wrapper {
-    display: block;
-    margin-block: map.get(variables.$spacers, 4);
-    overflow-x: auto;
-    max-inline-size: 100%;
+    display: flex;
     text-align: center;
+    inline-size: max-content;
+    block-size: max-content;
+    overflow-y: visible;
+    overflow-x: visible; // TODO: Support formulas wider than the container (currently not possible because it will create horizontal scrollbars)
+
+    .katex-display {
+      inline-size: max-content;
+      overflow: visible;
+      // stylelint-disable-next-line declaration-no-important
+      box-sizing: content-box !important;
+    }
 
     .katex,
     .katex * {

From e1bb8b9f01e904384a617b99ba594aef538e9c18 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Thu, 8 Jan 2026 16:20:26 +0100
Subject: [PATCH 18/30] refactor(chat-messages): restructure markdown renderer

---
 .../element-ng/markdown-renderer/index.api.md |    8 +-
 ...e-element-examples-chromium-dark-linux.png |    4 +-
 ...-element-examples-chromium-light-linux.png |    4 +-
 .../si-chat-messages--si-user-message.yaml    |    3 +-
 ...r-element-examples-chromium-dark-linux.png |    4 +-
 ...-element-examples-chromium-light-linux.png |    4 +-
 ...rkdown-renderer--si-markdown-renderer.yaml |  175 +--
 .../markdown-renderer/markdown-renderer.ts    | 1321 +++++++++--------
 .../src/styles/components/_markdown.scss      |   17 +-
 src/assets/sample-markdown.md                 |    2 +
 10 files changed, 832 insertions(+), 710 deletions(-)

diff --git a/api-goldens/element-ng/markdown-renderer/index.api.md b/api-goldens/element-ng/markdown-renderer/index.api.md
index c1634e395..a896aa3ca 100644
--- a/api-goldens/element-ng/markdown-renderer/index.api.md
+++ b/api-goldens/element-ng/markdown-renderer/index.api.md
@@ -6,9 +6,9 @@
 
 import * as _angular_core from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
+import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
 import { SiTranslateService } from '@siemens/element-translate-ng/translate';
-import { TranslatableString } from '@siemens/element-translate-ng/translate';
+import { TranslatableString } from '@siemens/element-translate-ng/translate-types';
 
 // @public
 export const getMarkdownRenderer: (sanitizer: DomSanitizer, options?: MarkdownRendererOptions) => ((text: string) => Node);
@@ -25,10 +25,10 @@ export interface MarkdownRendererOptions {
 // @public
 export class SiMarkdownRendererComponent {
     constructor();
-    readonly copyButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    readonly copyButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     readonly disableCopyButton: _angular_core.InputSignal<boolean>;
     readonly disableDownloadButton: _angular_core.InputSignal<boolean>;
-    readonly downloadButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    readonly downloadButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     readonly latexRenderer: _angular_core.InputSignal<((latex: string, displayMode: boolean) => string | undefined) | undefined>;
     readonly syntaxHighlighter: _angular_core.InputSignal<((code: string, language?: string) => string | undefined) | undefined>;
     readonly text: _angular_core.InputSignal<string>;
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png
index 68efca860..f48443a91 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1379c882cd0573abc7acb0e82d2c553abafdcbbbea5788e2da40975ee538aedb
-size 14586
+oid sha256:1e85bc8c00d1a06da1a0c4bc7f1f9df1e955f6560de523a394deec538b1bd9c3
+size 14604
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-light-linux.png
index 1102638f6..e0bbf1654 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fda5fb73f9a2374f211bc1075f757d2ed1ec57ec8a60387cd09d119fe2f68f07
-size 14269
+oid sha256:6928a9ff04d1d305bc344eb449b8bf6ae4277fb7c56855a360559fabcf6c3c7f
+size 14296
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message.yaml
index a4ba54ee1..08a98b568 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message.yaml
@@ -4,8 +4,7 @@
   - text: Can you help me with this
   - strong: code snippet
   - text: "?"
-- paragraph:
-  - code: console.log('Hello World')
+- code: console.log('Hello World')
 - paragraph: I'm getting an error when I run it.
 - button "Edit message"
 - button "Copy message"
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png
index 209f818b8..a447483de 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cb37760dabe3b79d51abc31a0cb25a5471720eab6a7f95efdc3dfa5a72abdb19
-size 500865
+oid sha256:8ecb89f6a778fbce2699867227a07f519befaa7160bd39ac71f097b53479de98
+size 178297
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png
index cfcffc612..f05585886 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fed3e2f7e574ac2e6c8cf6efb2637d2471d38bb080778f55e5be9023510de374
-size 496561
+oid sha256:c833bedf7a2de8cccea18ef3cadf22c7f288a4b8a2a29b5faefec3ae5e88ceb9
+size 173575
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
index 3abed602e..18616f196 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
@@ -10,12 +10,9 @@
   - text: You can use inline code like
   - code: console.log('Hello World')
   - text: "or multi-line code blocks:"
-- paragraph:
-  - button "Copy"
-  - code: "function calculateSum(a, b) { return a + b; } const result = calculateSum(5, 3); console.log(`Result: ${result}`);"
-- paragraph
+- button "Copy"
+- code: "function calculateSum(a, b) { return a + b; } const result = calculateSum(5, 3); console.log(`Result: ${result}`);"
 - separator
-- paragraph
 - heading "Formatting Options" [level=2]
 - paragraph: Here's a paragraph explaining the formatting options available.
 - paragraph: "Another paragraph with different formatting elements:"
@@ -42,9 +39,7 @@
   - text: "Links are also automatically detected:"
   - link "https://angular.io":
     - /url: https://angular.io
-- paragraph
 - separator
-- paragraph
 - heading "Lists and Bullets" [level=2]
 - paragraph: "Here are the key features:"
 - list:
@@ -62,10 +57,9 @@
   - listitem: First, analyze the requirements
   - listitem: Then, implement the solution
   - listitem: Finally, test the implementation
-- paragraph
 - separator
-- blockquote: This is a blockquote that demonstrates how quoted text appears in the markdown content component.
-- paragraph
+- blockquote:
+  - paragraph: This is a blockquote that demonstrates how quoted text appears in the markdown content component.
 - paragraph: This paragraph follows the blockquotes to demonstrate proper paragraph separation.
 - paragraph: This is a separate paragraph created by double line breaks.
 - list:
@@ -76,100 +70,89 @@
   - listitem: First ordered item
   - listitem: Second ordered item
 - paragraph: Final paragraph to show proper spacing.
-- paragraph
 - separator
-- paragraph
 - heading "Images" [level=2]
 - paragraph: "Images can be included as follows:"
-- paragraph:
-  - img "Building Image"
-- paragraph
 - separator
-- paragraph
 - heading "Tables" [level=2]
 - paragraph: "Tables are also supported:"
-- paragraph:
-  - button "Download CSV"
-  - table:
-    - rowgroup:
-      - row "Feature Examples Status Notes":
-        - columnheader "Feature":
-          - paragraph: Feature
-        - columnheader "Examples":
-          - paragraph: Examples
-        - columnheader "Status":
-          - paragraph: Status
-        - columnheader "Notes":
-          - paragraph: Notes
-    - rowgroup:
-      - row "Basic content Alice Johnson Bob Smith ✓ Complete Simple text and line breaks":
-        - cell "Basic content":
-          - paragraph:
-            - strong: Basic content
-        - cell "Alice Johnson Bob Smith":
-          - paragraph: Alice Johnson Bob Smith
-        - cell "✓ Complete":
-          - paragraph: ✓ Complete
-        - cell "Simple text and line breaks":
-          - paragraph: Simple text and line breaks
-      - row "Formatting Bold and italic Plus code and multiline code ✓ Complete Multiple markdown formats":
-        - cell "Formatting":
-          - paragraph:
-            - emphasis: Formatting
-        - cell "Bold and italic Plus code and multiline code":
-          - paragraph:
-            - strong: Bold
-            - text: and
-            - emphasis: italic
-            - text: Plus
-            - code: code
-            - text: and
-            - code: multiline code
-        - cell "✓ Complete":
-          - paragraph: ✓ Complete
-        - cell "Multiple markdown formats":
-          - paragraph: Multiple markdown formats
-      - row "Lists in cells First item Second item Third item ✓ Complete Bullet lists work properly":
-        - cell "Lists in cells":
-          - paragraph: Lists in cells
-        - cell "First item Second item Third item":
-          - list:
-            - listitem: First item
-            - listitem: Second item
-            - listitem: Third item
-        - cell "✓ Complete":
-          - paragraph: ✓ Complete
-        - cell "Bullet lists work properly":
-          - paragraph: Bullet lists work properly
-      - 'row "Escaped pipes grep \"text|pattern\" awk ''{print 2}'' ✓ Complete Use | for literal pipes"':
-        - cell "Escaped pipes":
-          - paragraph: Escaped pipes
-        - 'cell "grep \"text|pattern\" awk ''{print 2}''"':
-          - paragraph: "grep \"text|pattern\" awk '{print 2}'"
-        - cell "✓ Complete":
-          - paragraph: ✓ Complete
-        - cell "Use | for literal pipes":
-          - paragraph: Use | for literal pipes
-      - row "Line breaks Line 1 Line 2 Line 3 ✓ Complete Uses <br> tags":
-        - cell "Line breaks":
-          - paragraph: Line breaks
-        - cell "Line 1 Line 2 Line 3":
-          - paragraph: Line 1 Line 2 Line 3
-        - cell "✓ Complete":
-          - paragraph: ✓ Complete
-        - cell "Uses <br> tags":
-          - paragraph:
-            - text: Uses
-            - code: <br>
-            - text: tags
-  - text: This paragraph appears after the tables to demonstrate proper spacing.
-- paragraph
+- button "Download CSV"
+- table:
+  - rowgroup:
+    - row "Feature Examples Status Notes":
+      - columnheader "Feature":
+        - paragraph: Feature
+      - columnheader "Examples":
+        - paragraph: Examples
+      - columnheader "Status":
+        - paragraph: Status
+      - columnheader "Notes":
+        - paragraph: Notes
+  - rowgroup:
+    - row "Basic content Alice Johnson Bob Smith ✓ Complete Simple text and line breaks":
+      - cell "Basic content":
+        - paragraph:
+          - strong: Basic content
+      - cell "Alice Johnson Bob Smith":
+        - paragraph: Alice Johnson Bob Smith
+      - cell "✓ Complete":
+        - paragraph: ✓ Complete
+      - cell "Simple text and line breaks":
+        - paragraph: Simple text and line breaks
+    - row "Formatting Bold and italic Plus code and multiline code ✓ Complete Multiple markdown formats":
+      - cell "Formatting":
+        - paragraph:
+          - emphasis: Formatting
+      - cell "Bold and italic Plus code and multiline code":
+        - paragraph:
+          - strong: Bold
+          - text: and
+          - emphasis: italic
+          - text: Plus
+          - code: code
+          - text: and
+          - code: multiline code
+      - cell "✓ Complete":
+        - paragraph: ✓ Complete
+      - cell "Multiple markdown formats":
+        - paragraph: Multiple markdown formats
+    - row "Lists in cells First item Second item Third item ✓ Complete Bullet lists work properly":
+      - cell "Lists in cells":
+        - paragraph: Lists in cells
+      - cell "First item Second item Third item":
+        - list:
+          - listitem: First item
+          - listitem: Second item
+          - listitem: Third item
+      - cell "✓ Complete":
+        - paragraph: ✓ Complete
+      - cell "Bullet lists work properly":
+        - paragraph: Bullet lists work properly
+    - 'row "Escaped pipes grep \"text|pattern\" awk ''{print 2}'' ✓ Complete Use | for literal pipes"':
+      - cell "Escaped pipes":
+        - paragraph: Escaped pipes
+      - 'cell "grep \"text|pattern\" awk ''{print 2}''"':
+        - paragraph: "grep \"text|pattern\" awk '{print 2}'"
+      - cell "✓ Complete":
+        - paragraph: ✓ Complete
+      - cell "Use | for literal pipes":
+        - paragraph: Use | for literal pipes
+    - row "Line breaks Line 1 Line 2 Line 3 ✓ Complete Uses <br> tags":
+      - cell "Line breaks":
+        - paragraph: Line breaks
+      - cell "Line 1 Line 2 Line 3":
+        - paragraph: Line 1 Line 2 Line 3
+      - cell "✓ Complete":
+        - paragraph: ✓ Complete
+      - cell "Uses <br> tags":
+        - paragraph:
+          - text: Uses
+          - code: <br>
+          - text: tags
+- paragraph: This paragraph appears after the tables to demonstrate proper spacing.
 - separator
-- paragraph
 - heading "Math Expressions" [level=2]
 - paragraph: LaTeX math expressions are supported for mathematical notation.
 - paragraph: "Inline math can be written like this: or the quadratic formula ."
 - paragraph: "/You can escape dollar signs with a backslash to show literal prices: \\$\\d+, \\$\\d+, \\$\\d+\\./"
-- paragraph: "Display math uses double dollar signs for block equations:"
-- paragraph
-- paragraph
\ No newline at end of file
+- paragraph: "Display math uses double dollar signs for block equations:"
\ No newline at end of file
diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index 959f77fc3..b7d36483a 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -4,62 +4,59 @@
  */
 import { SecurityContext } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import type {
-  SiTranslateService,
-  TranslatableString
-} from '@siemens/element-translate-ng/translate';
+import { type SiTranslateService } from '@siemens/element-translate-ng/translate';
+import { type TranslatableString } from '@siemens/element-translate-ng/translate-types';
 
 import {
   sanitizeHtmlWithStyles,
-  getCachedOrCreateElement,
-  getCachedOrCreateString
+  getCachedOrCreateString,
+  getCachedOrCreateElement
 } from './markdown-renderer-helpers';
 
-const CACHE_SIZE = 50;
+const CACHE_SIZE = 100;
 
 export interface MarkdownRendererOptions {
   /**
    * Provide this to enable the copy code button functionality.
    * Label for the copy code button (will be translated internally if translateService is provided).
-   * @defaultValue undefined
    */
   copyCodeButton?: TranslatableString;
+
   /**
-   * Provide this to enable the table CSV download button functionality.
-   * Download button label for table CSV export (will be translated internally if translateService is provided).
-   * @defaultValue undefined
+   * Provide this to enable the download table button functionality.
+   * Label for the download table button (will be translated internally if translateService is provided).
    */
   downloadTableButton?: TranslatableString;
+
   /**
-   * Optional syntax highlighter function.
-   * Receives code content and optional language, returns an HTML content string to display inside of the code block or undefined to use default rendering.
-   * The returned code is sanitized before insertion.
-   * Make sure that the required styles/scripts for the syntax highlighter are included in your application.
-   * @defaultValue undefined
+   * Optional syntax highlighter function for code blocks.
+   * Receives code content and optional language, returns highlighted HTML or undefined.
    */
   syntaxHighlighter?: (code: string, language?: string) => string | undefined;
+
   /**
    * Optional LaTeX renderer function.
-   * Receives LaTeX content and display mode boolean, returns an HTML content string or undefined to use default rendering.
-   * The returned HTML is sanitized before insertion.
-   * Make sure that the required styles/scripts for the LaTeX renderer (e.g., KaTeX) are included in your application.
-   * @defaultValue undefined
+   * Receives LaTeX content and display mode, returns rendered HTML or undefined.
    */
   latexRenderer?: (latex: string, displayMode: boolean) => string | undefined;
+
   /**
-   * Optional translate sync function of a service instance for translating the copy button label and download button label.
-   * @defaultValue undefined
+   * Synchronous translation function for button labels.
    */
   translateSync?: SiTranslateService['translateSync'];
 }
 
+interface ProcessOptions {
+  allowCodeBlocks?: boolean;
+  allowBlockquotes?: boolean;
+  allowTables?: boolean;
+  allowLatex?: boolean;
+  allowInlineCode?: boolean;
+  allowLinks?: boolean;
+}
+
 /**
- * Returns a markdown renderer function which_
- * - Transforms markdown text into formatted HTML.
- * - Returns a DOM node containing the formatted content.
- *
- * **Warning:** The returned Node is inserted without additional sanitization.
- * Input content is sanitized before processing.
+ * Returns a function that transforms markdown text into a formatted HTML node.
  *
  * @experimental
  * @param sanitizer - Angular DomSanitizer instance
@@ -70,6 +67,7 @@ export const getMarkdownRenderer = (
   sanitizer: DomSanitizer,
   options?: MarkdownRendererOptions
 ): ((text: string) => Node) => {
+  // Persistent caches within this renderer instance
   const codeBlockCache = new Map<string, HTMLElement>();
   const tableCache = new Map<string, HTMLElement>();
   const latexCache = new Map<string, string>();
@@ -77,304 +75,772 @@ export const getMarkdownRenderer = (
   const tableCacheOrder: string[] = [];
   const latexCacheOrder: string[] = [];
 
-  return (text: string): Node => {
-    const div = document.createElement('div');
-    div.className = 'markdown-content text-break';
+  // Store table data for CSV export
+  const tableCellData = new Map<number, Map<number, Map<number, string>>>();
+  let tableCounter = 0;
 
-    // Map to store original table cell content: tableIndex -> rowIndex -> columnIndex -> original text
-    const tableCellData = new Map<number, Map<number, Map<number, string>>>();
+  // Placeholder maps for cached elements
+  const codeBlockPlaceholderMap = new Map<string, string>();
+  const tablePlaceholderMap = new Map<string, string>();
 
-    // Maps to track placeholder IDs to cache keys
-    const tablePlaceholderMap = new Map<string, string>();
-    const codeBlockCachePlaceholderMap = new Map<string, string>();
-    let tablePlaceholderCounter = 0;
-    const codeBlockPlaceholderState = { counter: 0 };
+  // Placeholder maps for inline elements
+  const inlineLatexPlaceholderMap = new Map<string, string>();
+  const linkPlaceholderMap = new Map<string, { text: string; url: string }>();
 
-    if (!text) {
-      return div;
+  /**
+   * Main recursive processing function
+   */
+  const processMarkdown = (
+    text: string,
+    processOpts: ProcessOptions = {
+      allowCodeBlocks: true,
+      allowBlockquotes: true,
+      allowTables: true,
+      allowLatex: true,
+      allowInlineCode: true,
+      allowLinks: true
     }
+  ): string => {
+    let result = text;
+
+    // Step 1: Extract and process code blocks (4+ backticks for nested markdown)
+    if (processOpts.allowCodeBlocks) {
+      const codeBlockMap = new Map<string, string>();
+
+      // Match standard code blocks (3 backticks)
+      // Only matches at line start (after optional whitespace), not after > prefix
+      // Add temporary closing marker for incomplete code blocks during streaming
+      const tempResult = result + '\n```--TEMP-CLOSE--\n';
+      result = tempResult.replace(
+        /(^|\n)([\s]*)(```)([^\n]*)\n?([\s\S]*?)(?:\n\s*```|```$)/gm,
+        (match, prefix, indent, backticks, language, content) => {
+          // Skip the temp closing marker
+          if (content.includes('--TEMP-CLOSE--')) {
+            return match;
+          }
+          const placeholder = `--CODE-BLOCK-${Math.random().toString(36).substring(2, 15)}--`;
+          const cacheKey = createCodeBlockCacheKey(language.trim(), content, false);
+          codeBlockPlaceholderMap.set(placeholder, cacheKey);
+          codeBlockMap.set(placeholder, `<!--CODE-BLOCK-PLACEHOLDER-${placeholder}-->`);
+          return prefix + indent + placeholder;
+        }
+      );
+      // Remove temp closing marker
+      result = result.replace(/\n```--TEMP-CLOSE--\n/g, '').replace(/--TEMP-CLOSE--/g, '');
 
-    // Generate a random placeholder for newlines to preserve them during HTML sanitization
-    const newlinePlaceholder = `--NEWLINE-${Math.random().toString(36).substring(2, 15)}--`;
+      // Restore code block placeholders
+      codeBlockMap.forEach((html, placeholder) => {
+        result = result.replace(placeholder, html);
+      });
+    }
 
-    // Replace newlines with placeholder before sanitization
-    let valueWithPlaceholders = text.replace(/\n/g, newlinePlaceholder);
+    // Step 2: Extract and process blockquotes (can contain code blocks and inline elements)
+    if (processOpts.allowBlockquotes) {
+      const blockquoteMap = new Map<string, string>();
+      const lines = result.split('\n');
+      let i = 0;
+
+      while (i < lines.length) {
+        if (lines[i].match(/^\s*>/)) {
+          const blockquoteLines: string[] = [];
+          while (i < lines.length && lines[i].match(/^\s*>/)) {
+            blockquoteLines.push(lines[i].replace(/^\s*>\s?/, ''));
+            i++;
+          }
+
+          const blockquoteContent = blockquoteLines.join('\n');
+          const processedContent = processMarkdown(blockquoteContent, {
+            ...processOpts,
+            allowBlockquotes: false, // Prevent nested blockquotes for simplicity
+            allowTables: false
+          });
+
+          const placeholder = `--BLOCKQUOTE-${Math.random().toString(36).substring(2, 15)}--`;
+          blockquoteMap.set(placeholder, `<blockquote>${processedContent}</blockquote>`);
+          lines.splice(i - blockquoteLines.length, blockquoteLines.length, placeholder);
+          i = i - blockquoteLines.length + 1;
+        } else {
+          i++;
+        }
+      }
 
-    // Replace code blocks with placeholders to preserve them during sanitization
-    const codeBlockPlaceholderMap = new Map<string, string>();
-    valueWithPlaceholders = valueWithPlaceholders
-      // Preserve code blocks by replacing them with placeholders
-      .replace(/```([\s\S]*?)```/g, match => {
-        const codePlaceholder = `--CODE-BLOCK-${Math.random().toString(36).substring(2, 15)}--`;
-        codeBlockPlaceholderMap.set(codePlaceholder, match);
-        return codePlaceholder;
+      result = lines.join('\n');
+
+      // Restore blockquotes
+      blockquoteMap.forEach((html, placeholder) => {
+        result = result.replace(placeholder, html);
       });
+    }
 
-    // Sanitize the input using Angular's HTML sanitizer
-    const sanitizedInput = sanitizer.sanitize(SecurityContext.HTML, valueWithPlaceholders) ?? '';
+    // Step 3: Extract and process tables (can contain inline code and inline latex)
+    if (processOpts.allowTables) {
+      result = processTables(result, processOpts);
+    }
 
-    // Restore newlines from placeholder for markdown processing.
-    let html = sanitizedInput.replace(new RegExp(newlinePlaceholder, 'g'), '\n');
+    // Step 4: Extract and process display LaTeX (multi-line formulas)
+    if (processOpts.allowLatex) {
+      const latexDisplayMap = new Map<string, string>();
 
-    // Restore code blocks from placeholders
-    codeBlockPlaceholderMap.forEach((codeBlock, placeholder) => {
-      // In the blocks, restore newlines from placeholder for markdown processing.
-      html = html.replace(
-        new RegExp(placeholder, 'g'),
-        codeBlock.replace(new RegExp(newlinePlaceholder, 'g'), '\n')
-      );
+      result = result.replace(/\$\$([\s\S]*?)\$\$/g, (match, latex) => {
+        const placeholder = `--LATEX-DISPLAY-${Math.random().toString(36).substring(2, 15)}--`;
+        const rendered = renderLatex(latex.trim(), true);
+        latexDisplayMap.set(placeholder, rendered);
+        return placeholder;
+      });
+
+      // Restore display LaTeX
+      latexDisplayMap.forEach((html, placeholder) => {
+        result = result.replace(placeholder, html);
+      });
+    }
+
+    // Step 5: Extract and process inline code (must be before inline LaTeX)
+    if (processOpts.allowInlineCode) {
+      const inlineCodeMap = new Map<string, string>();
+
+      // Handle escaped backticks properly (match odd number of backslashes before backtick)
+      result = result.replace(/(?<!\\)(?:\\\\)*`([^`]+)`/g, (match, content) => {
+        const placeholder = `--INLINE-CODE-${Math.random().toString(36).substring(2, 15)}--`;
+        const escaped = content.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        inlineCodeMap.set(placeholder, `<code>${escaped}</code>`);
+        return placeholder;
+      });
+
+      // Restore inline code
+      inlineCodeMap.forEach((html, placeholder) => {
+        result = result.replace(placeholder, html);
+      });
+    }
+
+    // Step 6: Extract and process inline LaTeX (keep as placeholder to protect from line breaks)
+    if (processOpts.allowLatex) {
+      // Escape dollar signs (handle properly with even number of backslashes)
+      result = result.replace(/(?<!\\)(?:\\\\)*\\\$/g, '___ESCAPED_DOLLAR___');
+
+      result = result.replace(/\$([^$\n]+?)\$/g, (match, latex) => {
+        const placeholder = `--LATEX-INLINE-${Math.random().toString(36).substring(2, 15)}--`;
+        inlineLatexPlaceholderMap.set(placeholder, latex.trim());
+        return placeholder;
+      });
+
+      // Restore escaped dollar signs
+      result = result.replace(/___ESCAPED_DOLLAR___/g, '$');
+    }
+
+    // Step 7: Process links (both formats, can contain inline code)
+    if (processOpts.allowLinks) {
+      // Images: ![alt](url)
+      result = result.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, url) => {
+        const sanitizedUrl = sanitizeUrl(url, sanitizer);
+        const escapedAlt = escapeHtml(alt);
+        return `<img src="${sanitizedUrl}" alt="${escapedAlt}">`;
+      });
+
+      // Links: [text](url) - keep as placeholder to protect from line breaks
+      result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, linkText, url) => {
+        const placeholder = `--LINK-${Math.random().toString(36).substring(2, 15)}--`;
+        linkPlaceholderMap.set(placeholder, { text: linkText, url });
+        return placeholder;
+      });
+
+      // Auto-detect URLs
+      result = result.replace(/(?<!["'=(])\b(https?:\/\/[^\s<]+[^\s<.,;!?"')\]])/g, match => {
+        const sanitizedUrl = sanitizeUrl(match, sanitizer);
+        return `<a href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer">${escapeHtml(match)}</a>`;
+      });
+    }
+
+    // Step 8: Process inline formatting only on text segments, not on block elements
+    result = processTextSegments(result, sanitizer);
+
+    return result;
+  };
+
+  /**
+   * Create cache key for code block
+   */
+  const createCodeBlockCacheKey = (
+    language: string,
+    content: string,
+    isMarkdown: boolean
+  ): string => {
+    return `${language}|||${content}|||${options?.copyCodeButton ?? ''}|||${isMarkdown}`;
+  };
+
+  /**
+   * Create a code block element with optional syntax highlighting (cached)
+   */
+  const createCodeBlockElement = (
+    language: string,
+    content: string,
+    isMarkdown: boolean
+  ): HTMLElement => {
+    const cacheKey = createCodeBlockCacheKey(language, content, isMarkdown);
+
+    return getCachedOrCreateElement(
+      codeBlockCache,
+      codeBlockCacheOrder,
+      CACHE_SIZE,
+      cacheKey,
+      () => {
+        let displayContent = content;
+
+        if (!isMarkdown) {
+          // Escape HTML for regular code blocks
+          displayContent = content.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+          // Apply syntax highlighting if available
+          if (options?.syntaxHighlighter && language) {
+            const highlighted = options.syntaxHighlighter(content, language);
+            if (highlighted) {
+              displayContent = highlighted;
+            }
+          }
+        }
+
+        // Sanitize the display content
+        const sanitized = sanitizer.sanitize(SecurityContext.HTML, displayContent) ?? '';
+
+        const codeId = `code-${Math.random().toString(36).substring(2, 15)}`;
+
+        // Create copy button if enabled
+        let copyButton = '';
+        if (options?.copyCodeButton) {
+          const translatedLabel = options.translateSync
+            ? options.translateSync(options.copyCodeButton)
+            : options.copyCodeButton;
+          const buttonLabel = escapeHtml(translatedLabel);
+          copyButton = `<button type="button" class="btn btn-circle btn-sm btn-tertiary element-copy copy-code-btn" data-code-id="${codeId}" aria-label="${buttonLabel}"></button>`;
+        }
+
+        const wrapperClass = copyButton ? 'code-wrapper has-copy-button' : 'code-wrapper';
+        return `<div class="${wrapperClass}">${copyButton}<pre><code id="${codeId}">${sanitized}</code></pre></div>`;
+      }
+    );
+  };
+
+  /**
+   * Render LaTeX formula
+   */
+  const renderLatex = (latex: string, displayMode: boolean): string => {
+    const cacheKey = `${displayMode ? 'display' : 'inline'}|||${latex}`;
+
+    return getCachedOrCreateString(latexCache, latexCacheOrder, CACHE_SIZE, cacheKey, () => {
+      if (!options?.latexRenderer) {
+        return escapeHtml(displayMode ? `$$${latex}$$` : `$${latex}$`);
+      }
+
+      let rendered: string | undefined;
+      try {
+        rendered = options.latexRenderer(latex, displayMode);
+      } catch {
+        return escapeHtml(displayMode ? `$$${latex}$$` : `$${latex}$`);
+      }
+
+      if (!rendered) {
+        return escapeHtml(displayMode ? `$$${latex}$$` : `$${latex}$`);
+      }
+
+      // Preserve HTML entities through sanitization
+      const withPlaceholders = rendered
+        .replace(/&amp;/g, '<!--AMP-->')
+        .replace(/&lt;/g, '<!--LT-->')
+        .replace(/&gt;/g, '<!--GT-->')
+        .replace(/&quot;/g, '<!--QUOT-->');
+
+      const sanitized = sanitizeHtmlWithStyles(withPlaceholders, sanitizer);
+      if (!sanitized) {
+        return escapeHtml(displayMode ? `$$${latex}$$` : `$${latex}$`);
+      }
+
+      // Restore HTML entities
+      const restored = sanitized
+        .replace(/<!--AMP-->/g, '&amp;')
+        .replace(/<!--LT-->/g, '&lt;')
+        .replace(/<!--GT-->/g, '&gt;')
+        .replace(/<!--QUOT-->/g, '&quot;');
+
+      return displayMode ? `<div class="latex-display-wrapper">${restored}</div>` : restored;
     });
+  };
 
-    // Process tables first
-    let tableIndex = -1;
-    const rowIndexMap = new Map<number, number>();
-    const tableHasSeparator = new Map<number, boolean>();
-
-    html = html
-      // Mark tables that have separator lines (these have headers)
-      .replace(/^\|(.+)\|\s*\n\|\s*[-:]+.*\|\s*$/gm, match => {
-        const nextTableIndex = tableIndex + 1;
-        tableHasSeparator.set(nextTableIndex, true);
-        return match;
-      })
-      // Remove table separator lines
-      .replace(/^\|\s*[-:]+.*\|\s*$/gm, '')
-      // Process table rows
-      .replace(/^\|(.+)\|\s*$/gm, (_match, htmlContent) => {
-        // Track which table we're in (increment on first row of each table)
-        const isFirstRow = rowIndexMap.get(tableIndex) === undefined;
-        if (isFirstRow) {
-          tableIndex++;
-          rowIndexMap.set(tableIndex, 0);
-          tableCellData.set(tableIndex, new Map());
+  /**
+   * Process tables
+   */
+  const processTables = (input: string, processOpts: ProcessOptions): string => {
+    const lines = input.split('\n');
+    const tableMap = new Map<string, string>();
+    let i = 0;
+
+    while (i < lines.length) {
+      // Check if line looks like a table row
+      if (lines[i].match(/^\|.+\|$/)) {
+        const tableLines: string[] = [];
+        let hasSeparator = false;
+
+        // Collect table lines
+        while (i < lines.length && lines[i].match(/^\|.+\|$/)) {
+          const line = lines[i];
+          if (line.match(/^\|\s*[-:]+.*\|$/)) {
+            hasSeparator = true;
+          } else {
+            tableLines.push(line);
+          }
+          i++;
         }
 
-        const currentRowIndex = rowIndexMap.get(tableIndex)!;
-        const tableData = tableCellData.get(tableIndex)!;
-        tableData.set(currentRowIndex, new Map());
-        const rowData = tableData.get(currentRowIndex)!;
-        const isHeaderRow = currentRowIndex === 0 && tableHasSeparator.get(tableIndex);
-
-        // Handle escaped pipes by temporarily replacing them
-        const escapedPipePlaceholder = `--ESCAPED-PIPE-${Math.random().toString(36).substring(2, 15)}--`;
-        const contentWithPlaceholders = htmlContent.replace(/\\\|/g, escapedPipePlaceholder);
-        const cells = contentWithPlaceholders.split('|').map((cell: string) => {
-          const trimmedCell = cell.trim();
-          // Restore escaped pipes
-          const cellWithPipes = trimmedCell.replace(new RegExp(escapedPipePlaceholder, 'g'), '|');
-
-          return cellWithPipes;
-        });
-        // Make cell ready for markdown processing by replacing code blocks with inline code and <br> with newlines
-        const cellsWithNewlines = cells.map((cell: string) => {
-          // Replace multiline code blocks with single line code blocks
-          const cellWithoutMultilineCode = cell.replace(
-            /```([\s\S]*?)```/g,
-            (_innerMatch, inlineCodeContent) => {
-              return '`' + inlineCodeContent.replace(/`/g, '') + '`';
-            }
-          );
-          // Temporarily replace single line code blocks to avoid replacing <br> inside them
-          const tableInlineCodeBrPlaceholder = `--INLINE-CODE-BR--${Math.random().toString(36).substring(2, 15)}--`;
-          const cellWithPlaceholders = cellWithoutMultilineCode.replace(
-            /(`[^`]*`)/g,
-            inlineCodeMatch => {
-              return inlineCodeMatch.replace(/<br>/g, tableInlineCodeBrPlaceholder);
-            }
+        if (tableLines.length > 0) {
+          const currentTableIndex = tableCounter++;
+          const placeholder = `--TABLE-${Math.random().toString(36).substring(2, 15)}--`;
+          // Store table index and metadata in placeholder map
+          tablePlaceholderMap.set(
+            placeholder,
+            JSON.stringify({
+              tableIndex: currentTableIndex,
+              hasSeparator,
+              tableLines
+            })
           );
-          // Replace <br> with newlines
-          const cellWithNewlines = cellWithPlaceholders.replace(/<br\s*\/?>/gi, '\n');
-          // Restore <br> in inline code placeholders
-          const preProcessedCell = cellWithNewlines.replace(
-            new RegExp(tableInlineCodeBrPlaceholder, 'g'),
-            '<br>'
+          tableMap.set(placeholder, `<!--TABLE-PLACEHOLDER-${placeholder}-->`);
+
+          // Initialize table data map for CSV export
+          tableCellData.set(currentTableIndex, new Map());
+
+          // Replace table lines with placeholder
+          lines.splice(
+            i - tableLines.length - (hasSeparator ? 1 : 0),
+            tableLines.length + (hasSeparator ? 1 : 0),
+            placeholder
           );
-          return preProcessedCell;
+          i = i - tableLines.length - (hasSeparator ? 1 : 0) + 1;
+        }
+      } else {
+        i++;
+      }
+    }
+
+    let result = lines.join('\n');
+
+    // Restore tables
+    tableMap.forEach((html, placeholder) => {
+      result = result.replace(placeholder, html);
+    });
+
+    return result;
+  };
+
+  /**
+   * Create cache key for table
+   */
+  const createTableCacheKey = (
+    tableLines: string[],
+    hasSeparator: boolean,
+    tableIndex: number
+  ): string => {
+    return `${tableLines.join('|||')}|||${hasSeparator}|||${tableIndex}|||${options?.downloadTableButton ?? ''}`;
+  };
+
+  /**
+   * Create table HTML element (cached)
+   */
+  const createTableElement = (
+    tableLines: string[],
+    hasSeparator: boolean,
+    tableIndex: number,
+    processOpts: ProcessOptions
+  ): HTMLElement => {
+    const cacheKey = createTableCacheKey(tableLines, hasSeparator, tableIndex);
+
+    return getCachedOrCreateElement(tableCache, tableCacheOrder, CACHE_SIZE, cacheKey, () => {
+      const rows: string[] = [];
+      const cellData = tableCellData.get(tableIndex);
+
+      tableLines.forEach((line, rowIndex) => {
+        if (!line.trim()) {
+          return;
+        }
+
+        const escapedPipePlaceholder = `___ESCAPED_PIPE___${Math.random().toString(36).substring(2, 15)}___`;
+        const contentWithPlaceholders = line.replace(/\\\|/g, escapedPipePlaceholder);
+        const parts = contentWithPlaceholders.split('|');
+        const cells = parts.slice(1, -1);
+
+        const processedCells = cells.map((cell, cellIndex) => {
+          // Restore escaped pipes and process cell content
+          let originalCell = cell.replace(new RegExp(escapedPipePlaceholder, 'g'), '|').trim();
+
+          // Extract inline code to protect <br> tags within code
+          const inlineCodeMap = new Map<string, string>();
+          originalCell = originalCell.replace(/(?<!\\)(?:\\\\)*`([^`]+)`/g, (match, content) => {
+            const placeholder = `___INLINE_CODE_${Math.random().toString(36).substring(2, 15)}___`;
+            inlineCodeMap.set(placeholder, match);
+            return placeholder;
+          });
+
+          // Convert <br> tags to newlines for table cells (outside of code)
+          originalCell = originalCell.replace(/<br\s*\/?>/gi, '\n');
+
+          // Restore inline code
+          inlineCodeMap.forEach((code, placeholder) => {
+            originalCell = originalCell.replace(placeholder, code);
+          });
+
+          // Store in cellData if available
+          if (cellData) {
+            const rowData = cellData.get(rowIndex) ?? new Map<number, string>();
+            rowData.set(cellIndex, originalCell);
+            cellData.set(rowIndex, rowData);
+          }
+
+          // Process cell content for inline elements
+          const processedContent = processMarkdown(originalCell, {
+            allowCodeBlocks: false,
+            allowBlockquotes: false,
+            allowTables: false,
+            allowLatex: true,
+            allowInlineCode: true,
+            allowLinks: true
+          });
+
+          return processedContent;
         });
 
-        // Recursively process cell content for markdown formatting and store original data
-        const processedCells = cellsWithNewlines.map((cell: string, index: number) => {
-          const formattedContent = transformMarkdownText(
-            cell,
-            false,
-            sanitizer,
-            options,
-            codeBlockCache,
-            codeBlockCacheOrder,
-            CACHE_SIZE,
-            codeBlockCachePlaceholderMap,
-            codeBlockPlaceholderState,
-            latexCache,
-            latexCacheOrder
-          );
-          // Store original cell text in the map
-          rowData.set(index, cells[index]);
-          return formattedContent;
+        const isHeader = hasSeparator && rowIndex === 0;
+        const tag = isHeader ? 'th' : 'td';
+        const rowHtml = `<tr>${processedCells.map(cell => `<${tag}>${cell}</${tag}>`).join('')}</tr>`;
+        rows.push(rowHtml);
+      });
+
+      // Filter out empty rows (check for text content OR innerHTML content)
+      const filteredRows = rows.filter(row => {
+        // Wrap in proper table structure for correct HTML parsing
+        const tempTable = document.createElement('table');
+        tempTable.innerHTML = `<tbody>${row}</tbody>`;
+        const cells = tempTable.querySelectorAll('td, th');
+        // Check if any cell has content
+        return Array.from(cells).some(cell => {
+          const hasText = !!cell.textContent?.trim();
+          const hasHtml = !!cell.innerHTML?.trim();
+          return hasText || hasHtml;
         });
+      });
 
-        // Increment row index for next row
-        rowIndexMap.set(tableIndex, currentRowIndex + 1);
+      if (filteredRows.length === 0) {
+        return '<div></div>';
+      }
 
-        const cellTag = isHeaderRow ? 'th' : 'td';
-        return `<tr>${processedCells.map((cell: string) => `<${cellTag}>${cell}</${cellTag}>`).join('')}</tr>`;
-      })
-      // Wrap header rows in thead
-      .replace(/(<tr><th>[\s\S]*?<\/th><\/tr>)/g, '<thead>$1</thead>')
-      // Wrap body rows in tbody (rows that are not already in thead)
-      .replace(
-        /(<tr><td>[\s\S]*?<\/td><\/tr>(?:\s*<tr><td>[\s\S]*?<\/td><\/tr>)*)/g,
-        '<tbody>$1</tbody>'
-      )
-      // Wrap table rows in table elements (match thead+tbody together or just tbody)
-      .replace(
-        /(?:<thead><tr><th>[\s\S]*?<\/th><\/tr><\/thead>\s*)?<tbody><tr><td>[\s\S]*?<\/td><\/tr>(?:\s*<tr><td>[\s\S]*?<\/td><\/tr>)*<\/tbody>/g,
-        (() => {
-          let currentTableWrapIndex = -1;
-
-          const translatedLabel =
-            options?.downloadTableButton && options?.translateSync
-              ? options.translateSync(options.downloadTableButton)
-              : options?.downloadTableButton
-                ? String(options.downloadTableButton)
-                : undefined;
-          const buttonLabel = translatedLabel
-            ?.replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;');
-
-          return (match: string) => {
-            currentTableWrapIndex++;
-            const cacheKey = `${match}|||${options?.downloadTableButton ?? ''}`;
-            const placeholderId = `table-${tablePlaceholderCounter++}`;
-            tablePlaceholderMap.set(placeholderId, cacheKey);
-
-            getCachedOrCreateElement(tableCache, tableCacheOrder, CACHE_SIZE, cacheKey, () => {
-              const tableId = `table-${Math.random().toString(36).substring(2, 15)}`;
-
-              const downloadTableCsvButton = buttonLabel
-                ? `<button type="button" class="btn btn-circle btn-sm btn-tertiary element-download download-table-btn" data-table-id="${tableId}" data-table-index="${currentTableWrapIndex}" aria-label="${buttonLabel}"></button>`
-                : '';
-
-              return `<div class="table-wrapper">${downloadTableCsvButton}<table class="table table-hover" id="${tableId}">${match}</table></div>`;
-            });
-            return `<!--TABLE-PLACEHOLDER-${placeholderId}-->`;
-          };
-        })()
-      )
-      // Remove duplicate table tags
-      .replace(
-        /<\/table><\/div>\s*<div class="table-wrapper"><button[^>]*><\/button><table class="table table-hover"[^>]*>/g,
-        ''
-      );
+      const tableId = `table-${Math.random().toString(36).substring(2, 15)}`;
+      let tableHtml = '<table class="table table-hover" id="' + tableId + '">';
 
-    html = transformMarkdownText(
-      html,
-      true,
-      sanitizer,
-      options,
-      codeBlockCache,
-      codeBlockCacheOrder,
-      CACHE_SIZE,
-      codeBlockCachePlaceholderMap,
-      codeBlockPlaceholderState,
-      latexCache,
-      latexCacheOrder
+      if (hasSeparator && filteredRows.length > 0) {
+        tableHtml += '<thead>' + filteredRows[0] + '</thead>';
+        if (filteredRows.length > 1) {
+          tableHtml += '<tbody>' + filteredRows.slice(1).join('') + '</tbody>';
+        }
+      } else {
+        tableHtml += '<tbody>' + filteredRows.join('') + '</tbody>';
+      }
+
+      tableHtml += '</table>';
+
+      // Add download button if enabled
+      let downloadButton = '';
+      if (options?.downloadTableButton) {
+        const translatedLabel = options.translateSync
+          ? options.translateSync(options.downloadTableButton)
+          : options.downloadTableButton;
+        const buttonLabel = escapeHtml(translatedLabel);
+        downloadButton = `<button type="button" class="btn btn-circle btn-sm btn-tertiary element-download download-table-btn" data-table-id="${tableId}" data-table-index="${tableIndex}" aria-label="${buttonLabel}"></button>`;
+      }
+
+      return `<div class="table-wrapper">${downloadButton}${tableHtml}</div>`;
+    });
+  };
+
+  /**
+   * Process text segments separately from block elements
+   */
+  const processTextSegments = (input: string, domSanitizer: DomSanitizer): string => {
+    // Split input by known block elements so we don't process text inside them
+    // This regex matches complete block elements with their content
+    const blockElementRegex =
+      /(<(pre|blockquote|ul|ol|hr|h[1-6]|table)[^>]*>[\s\S]*?<\/\2>)|(<!--(?:CODE-BLOCK|TABLE|BLOCKQUOTE|LATEX-DISPLAY)-PLACEHOLDER-[^>]+-->)/g;
+
+    const parts: string[] = [];
+    let lastIndex = 0;
+    let blockMatch;
+
+    // Find all block elements and capture text between them
+    while ((blockMatch = blockElementRegex.exec(input)) !== null) {
+      // Add text before this block element
+      if (blockMatch.index > lastIndex) {
+        parts.push(input.slice(lastIndex, blockMatch.index));
+      }
+      // Add the block element itself
+      parts.push(blockMatch[0]);
+      lastIndex = blockMatch.index + blockMatch[0].length;
+    }
+    // Add any remaining text after the last block element
+    if (lastIndex < input.length) {
+      parts.push(input.slice(lastIndex));
+    }
+
+    const processedParts = parts.map(part => {
+      // Keep block elements and placeholders as-is
+      if (part.match(/^<(pre|blockquote|ul|ol|hr|h[1-6]|table)|^<!--/)) {
+        return part;
+      }
+
+      // Only process text that's NOT inside block elements
+      return processInlineFormatting(part, domSanitizer);
+    });
+
+    // Now restore inline LaTeX and links after inline formatting
+    let result = processedParts.join('');
+
+    // Restore inline LaTeX
+    inlineLatexPlaceholderMap.forEach((latex, placeholder) => {
+      const rendered = renderLatex(latex, false);
+      result = result.replace(placeholder, rendered);
+    });
+
+    // Restore links
+    linkPlaceholderMap.forEach((linkData, placeholder) => {
+      const sanitizedUrl = sanitizeUrl(linkData.url, sanitizer);
+      // Process link text for inline code only (no line breaks, no blocks)
+      let linkText = linkData.text;
+
+      // Process inline code in link text
+      linkText = linkText.replace(/(?<!\\)(?:\\\\)*`([^`]+)`/g, (match, content) => {
+        const escaped = content.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        return `<code>${escaped}</code>`;
+      });
+
+      // Sanitize the link text
+      const sanitizedText = domSanitizer.sanitize(SecurityContext.HTML, linkText) ?? '';
+      const linkHtml = `<a href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer">${sanitizedText}</a>`;
+      result = result.replace(placeholder, linkHtml);
+    });
+
+    return result;
+  };
+
+  /**
+   * Process inline formatting (headings, bold, italic, lists, etc.) on plain text
+   */
+  const processInlineFormatting = (input: string, domSanitizer: DomSanitizer): string => {
+    let result = input;
+
+    // Preserve escaped characters
+    result = result.replace(/\\\*/g, '___ESCAPED_ASTERISK___');
+    result = result.replace(/\\_/g, '___ESCAPED_UNDERSCORE___');
+
+    // Headings
+    result = result.replace(/^###### (.+)$/gm, '<strong>$1</strong>');
+    result = result.replace(/^##### (.+)$/gm, '<h5>$1</h5>');
+    result = result.replace(/^#### (.+)$/gm, '<h4>$1</h4>');
+    result = result.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+    result = result.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+    result = result.replace(/^# (.+)$/gm, '<h2><strong>$1</strong></h2>');
+
+    // Horizontal rule
+    result = result.replace(/^---+$/gm, '<hr>');
+
+    // Bold and italic
+    result = result.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    result = result.replace(/__(.+?)__/g, '<strong>$1</strong>');
+    result = result.replace(/\*(.+?)\*/g, '<em>$1</em>');
+    result = result.replace(/_(.+?)_/g, '<em>$1</em>');
+
+    // Lists (handle bullet character • which sanitizer converts to &#8226;)
+    result = result.replace(/^[•\-*] (.+)$/gm, '<li class="unordered">$1</li>');
+    result = result.replace(/^&#8226; (.+)$/gm, '<li class="unordered">$1</li>');
+    result = result.replace(/^\d+\. (.+)$/gm, '<li class="ordered">$1</li>');
+
+    // Wrap lists (remove whitespace between items to prevent spacing issues)
+    result = result.replace(
+      /(<li class="ordered">.*?<\/li>)\s*\n\s*(?=<li class="ordered">)/gs,
+      '$1'
     );
+    result = result.replace(
+      /(<li class="unordered">.*?<\/li>)\s*\n\s*(?=<li class="unordered">)/gs,
+      '$1'
+    );
+
+    result = result.replace(
+      /(<li class="ordered">.*?<\/li>(?:<li class="ordered">.*?<\/li>)*)/gs,
+      '<ol>$1</ol>'
+    );
+    result = result.replace(
+      /(<li class="unordered">.*?<\/li>(?:<li class="unordered">.*?<\/li>)*)/gs,
+      '<ul>$1</ul>'
+    );
+
+    // Clean up list classes
+    result = result.replace(/ class="ordered"/g, '');
+    result = result.replace(/ class="unordered"/g, '');
+
+    // Paragraphs - convert double newlines to paragraph breaks
+    const paragraphPlaceholder = '___PARAGRAPH_BREAK___';
+    const segments = result.split(/\n{2,}/g);
+
+    result = segments
+      .map(segment => {
+        const trimmed = segment.trim();
+        // Skip empty segments entirely - don't render them
+        if (!trimmed) {
+          return '';
+        }
+        // If the segment starts with a block element, return as is
+        if (/^\s*<(h[1-6]|pre|blockquote|ul|ol|hr|div|code|li|p)/.test(trimmed)) {
+          // Replace newlines inside blocks with the placeholder
+          return segment.replace(/\n/g, paragraphPlaceholder);
+        }
+
+        // Check if segment has actual text content (not just HTML tags/whitespace)
+        const withoutTags = trimmed.replace(/<[^>]*>/g, '').trim();
+        if (!withoutTags) {
+          return '';
+        }
+
+        // Otherwise, wrap in <p> tags only if there's content
+        return '<p>' + segment + '</p>';
+      })
+      .filter(segment => segment !== '') // Remove empty segments
+      // Use newline placeholder so as not to replace newlines between blocks
+      .join(paragraphPlaceholder)
+      // Convert remaining newlines to line breaks
+      .replace(/\n/g, '<br>')
+      // Restore newline placeholders
+      .replace(new RegExp(paragraphPlaceholder, 'g'), ' ');
+
+    // Restore escaped characters
+    result = result.replace(/___ESCAPED_ASTERISK___/g, '*');
+    result = result.replace(/___ESCAPED_UNDERSCORE___/g, '_');
+
+    // Sanitize the final result
+    const sanitized = domSanitizer.sanitize(SecurityContext.HTML, result);
+    return sanitized ?? '';
+  };
+
+  /**
+   * Main render function
+   */
+  return (text: string): HTMLElement => {
+    const div = document.createElement('div');
+    div.className = 'markdown-content text-break';
+
+    if (text === null || text === undefined) {
+      return div;
+    }
 
-    div.innerHTML = html;
+    const processedHtml = processMarkdown(text);
+    div.innerHTML = processedHtml;
 
-    // Replace placeholders with cached elements
+    // Replace comment placeholders with cached elements
     const walker = document.createTreeWalker(div, NodeFilter.SHOW_COMMENT);
     const commentsToReplace: { comment: Comment; element: HTMLElement }[] = [];
 
     let currentNode = walker.nextNode();
     while (currentNode) {
       const comment = currentNode as Comment;
-      const tableMatch = comment.textContent?.match(/TABLE-PLACEHOLDER-(.*)/);
-      if (tableMatch) {
-        const placeholderId = tableMatch[1];
-        const cacheKey = tablePlaceholderMap.get(placeholderId);
-        if (cacheKey) {
-          const cachedElement = tableCache.get(cacheKey);
-          if (cachedElement) {
-            commentsToReplace.push({ comment, element: cachedElement });
-          }
-        }
-      }
 
+      // Handle code block placeholders
       const codeMatch = comment.textContent?.match(/CODE-BLOCK-PLACEHOLDER-(.*)/);
       if (codeMatch) {
         const placeholderId = codeMatch[1];
-        const cacheKey = codeBlockCachePlaceholderMap.get(placeholderId);
+        const cacheKey = codeBlockPlaceholderMap.get(placeholderId);
         if (cacheKey) {
-          const cachedElement = codeBlockCache.get(cacheKey);
+          const parts = cacheKey.split('|||');
+          const language = parts[0];
+          const content = parts[1];
+          const isMarkdown = parts[3] === 'true';
+          const cachedElement = createCodeBlockElement(language, content, isMarkdown);
           if (cachedElement) {
             commentsToReplace.push({ comment, element: cachedElement });
           }
         }
       }
 
+      // Handle table placeholders
+      const tableMatch = comment.textContent?.match(/TABLE-PLACEHOLDER-(.*)/);
+      if (tableMatch) {
+        const placeholderId = tableMatch[1];
+        const tableDataJson = tablePlaceholderMap.get(placeholderId);
+        if (tableDataJson) {
+          try {
+            const { tableIndex, hasSeparator, tableLines } = JSON.parse(tableDataJson);
+            const cachedElement = createTableElement(tableLines, hasSeparator, tableIndex, {
+              allowCodeBlocks: false,
+              allowBlockquotes: false,
+              allowTables: false,
+              allowLatex: true,
+              allowInlineCode: true,
+              allowLinks: true
+            });
+            if (cachedElement) {
+              commentsToReplace.push({ comment, element: cachedElement });
+            }
+          } catch (e) {
+            console.warn('Failed to parse table placeholder data', e);
+          }
+        }
+      }
+
       currentNode = walker.nextNode();
     }
 
-    // Replace all comments with their cached elements
+    // Replace all comment placeholders with their cached elements
     commentsToReplace.forEach(({ comment, element }) => {
-      comment.parentNode?.replaceChild(element, comment);
+      if (comment.parentNode && element) {
+        comment.parentNode.replaceChild(element.cloneNode(true), comment);
+      }
     });
 
-    // Add copy functionality to code blocks
+    // Add event listeners for copy buttons
     div.querySelectorAll('.copy-code-btn').forEach(btn => {
       btn.addEventListener('click', e => {
         const button = e.target as HTMLButtonElement;
         const codeId = button.getAttribute('data-code-id');
-        if (!codeId) {
-          return;
-        }
+        if (!codeId) return;
 
         const codeElement = div.querySelector(`#${codeId}`);
-        if (!codeElement) {
-          return;
-        }
+        if (!codeElement) return;
 
         const code = codeElement.textContent ?? '';
-
         navigator.clipboard.writeText(code).catch(() => {
-          // Clipboard API may fail if not in a secure context or permissions denied
           console.warn('Failed to copy code to clipboard');
         });
       });
     });
 
-    // Add download functionality to tables (CSV export)
+    // Add event listeners for table download buttons
     div.querySelectorAll('.download-table-btn').forEach(btn => {
       btn.addEventListener('click', e => {
         const button = e.target as HTMLButtonElement;
         const tableId = button.getAttribute('data-table-id');
         const tableIndexStr = button.getAttribute('data-table-index');
-        if (!tableId || tableIndexStr === null) {
-          return;
-        }
+        if (!tableId || tableIndexStr === null) return;
 
         const tableElement = div.querySelector(`#${tableId}`) as HTMLTableElement;
-        if (!tableElement) {
-          return;
-        }
+        if (!tableElement) return;
 
-        const currentTableIndex = parseInt(tableIndexStr, 10);
-        const tableData = tableCellData.get(currentTableIndex);
+        const tableIndex = parseInt(tableIndexStr, 10);
+        const tableData = tableCellData.get(tableIndex);
 
         // Convert table to CSV
         const rows = Array.from(tableElement.querySelectorAll('tr'));
         const csv = rows
+          .filter(row => {
+            const cells = Array.from(row.querySelectorAll('td, th'));
+            return cells.some(cell => (cell.textContent ?? '').trim().length > 0);
+          })
           .map((row, rowIndex) => {
             const cells = Array.from(row.querySelectorAll('td, th'));
             return cells
               .map((cell, columnIndex) => {
-                // Use original text from map, fallback to textContent
                 const cellText =
                   tableData?.get(rowIndex)?.get(columnIndex) ?? cell.textContent ?? '';
-                // Escape quotes and wrap in quotes if contains comma, quote, or newline
                 if (cellText.includes(',') || cellText.includes('"') || cellText.includes('\n')) {
                   return `"${cellText.replace(/"/g, '""')}"`;
                 }
@@ -397,371 +863,34 @@ export const getMarkdownRenderer = (
         URL.revokeObjectURL(url);
       });
     });
+
     return div;
   };
 };
 
-const transformMarkdownText = (
-  html: string,
-  keepAdditionalNewlines = true,
-  sanitizer: DomSanitizer,
-  options?: MarkdownRendererOptions,
-  codeBlockCache?: Map<string, HTMLElement>,
-  codeBlockCacheOrder?: string[],
-  cacheSize?: number,
-  codeBlockCachePlaceholderMap?: Map<string, string>,
-  codeBlockPlaceholderState?: { counter: number },
-  latexCache?: Map<string, string>,
-  latexCacheOrder?: string[]
-): string => {
-  // Generate a random placeholder for inner code blocks to prevent markdown processing inside them
-  const innerCodeQuotePlaceholder = `--INNER-CODE-${Math.random().toString(36).substring(2, 15)}--`;
-  const codeSectionPlaceholderMap = new Map<string, string>();
-
-  const escapedAsteriskPlaceholder = `--ASTERISK-${Math.random().toString(36).substring(2, 15)}--`;
-  const escapedUnderscorePlaceholder = `--UNDERSCORE-${Math.random().toString(36).substring(2, 15)}--`;
-  const escapedDollarPlaceholder = `--DOLLAR-${Math.random().toString(36).substring(2, 15)}--`;
-
-  // Apply markdown transformations to the sanitized content
-
-  // Add temporary closing backticks at the end to handle incomplete code blocks during streaming
-  const tempClosingMarker = `\n\`\`\`--TEMP-CLOSE--\n`;
-  html = html + tempClosingMarker;
-
-  html = html
-    // Multiline code blocks ```code``` with placeholder
-    .replace(/```([^\n]*)\n?([\s\S]*?)\n?```/g, (match, language, content) => {
-      const cacheKey = `${language}|||${content}|||${options?.copyCodeButton ?? ''}`;
-
-      if (
-        codeBlockCache &&
-        codeBlockCacheOrder &&
-        cacheSize &&
-        codeBlockCachePlaceholderMap &&
-        codeBlockPlaceholderState
-      ) {
-        const placeholderId = `code-${codeBlockPlaceholderState.counter++}`;
-        codeBlockCachePlaceholderMap.set(placeholderId, cacheKey);
-
-        getCachedOrCreateElement(codeBlockCache, codeBlockCacheOrder, cacheSize, cacheKey, () => {
-          // Escape HTML special characters in code blocks (not for security, but for correct display) and preserve inner backticks
-          const escapedCode = content
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/`/g, innerCodeQuotePlaceholder);
-
-          const codeId = `code-${Math.random().toString(36).substring(2, 15)}`;
-
-          // Apply syntax highlighting if highlighter is provided
-          const highlightedCode = options?.syntaxHighlighter
-            ? // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-              options.syntaxHighlighter(content, language?.trim() || undefined)
-            : undefined;
-
-          // Apply sanitization to the final code content
-          const codeBlockContent = sanitizer.sanitize(
-            SecurityContext.HTML,
-            highlightedCode ?? escapedCode
-          );
-
-          const translatedLabel =
-            options?.copyCodeButton && options?.translateSync
-              ? options.translateSync(options.copyCodeButton)
-              : options?.copyCodeButton
-                ? String(options.copyCodeButton)
-                : undefined;
-          const buttonLabel = translatedLabel
-            ?.replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;');
-          const codeCopyButton = buttonLabel
-            ? `<button type="button" class="btn btn-circle btn-sm btn-tertiary element-copy copy-code-btn" data-code-id="${codeId}" aria-label="${buttonLabel}"></button>`
-            : '';
-
-          return `<div class="code-wrapper">${codeCopyButton}<pre><code id="${codeId}">${codeBlockContent}</code></pre></div>`;
-        });
-        return `<!--CODE-BLOCK-PLACEHOLDER-${placeholderId}-->`;
-      } else {
-        // Escape HTML special characters in code blocks (not for security, but for correct display) and preserve inner backticks
-        const escapedCode = content
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;')
-          .replace(/`/g, innerCodeQuotePlaceholder);
-
-        const codeId = `code-${Math.random().toString(36).substring(2, 15)}`;
-
-        // Apply syntax highlighting if highlighter is provided
-        const highlightedCode = options?.syntaxHighlighter
-          ? // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-            options.syntaxHighlighter(content, language?.trim() || undefined)
-          : undefined;
-
-        // Apply sanitization to the final code content
-        const codeBlockContent = sanitizer.sanitize(
-          SecurityContext.HTML,
-          highlightedCode ?? escapedCode
-        );
-
-        const translatedLabel =
-          options?.copyCodeButton && options?.translateSync
-            ? options.translateSync(options.copyCodeButton)
-            : options?.copyCodeButton
-              ? String(options.copyCodeButton)
-              : undefined;
-        const buttonLabel = translatedLabel
-          ?.replace(/&/g, '&amp;')
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;')
-          .replace(/"/g, '&quot;');
-        const codeCopyButton = buttonLabel
-          ? `<button type="button" class="btn btn-circle btn-sm btn-tertiary element-copy copy-code-btn" data-code-id="${codeId}" aria-label="${buttonLabel}"></button>`
-          : '';
-
-        const code = `<div class="code-wrapper">${codeCopyButton}<pre><code id="${codeId}">${codeBlockContent}</code></pre></div>`;
-        const codePlaceholder = `--CODE-BLOCK-${Math.random().toString(36).substring(2, 15)}--`;
-        codeSectionPlaceholderMap.set(codePlaceholder, code);
-        return codePlaceholder;
-      }
-    });
-
-  // Remove temporary closing marker if it's still there (wasn't part of a code block)
-  html = html.replace(tempClosingMarker, '').replace(/--TEMP-CLOSE--/g, '');
-
-  // Process LaTeX expressions after code blocks are extracted
-  const latexPlaceholderMap = new Map<string, string>();
-
-  // Replace escaped dollar signs before processing LaTeX
-  html = html.replace(/\\\$/g, escapedDollarPlaceholder);
-
-  // Display math: $$ ... $$
-  html = html.replace(/\$\$([\s\S]*?)\$\$/g, (match, latex) => {
-    if (options?.latexRenderer) {
-      try {
-        const cacheKey = `display|||${latex.trim()}`;
-
-        // Check cache first (if available)
-        const cached =
-          latexCache && latexCacheOrder
-            ? getCachedOrCreateString(latexCache, latexCacheOrder, CACHE_SIZE, cacheKey, () => {
-                const rendered = options.latexRenderer?.(latex.trim(), true);
-                if (rendered) {
-                  const sanitized = sanitizeHtmlWithStyles(rendered, sanitizer);
-                  if (sanitized) {
-                    return `<div class="latex-display-wrapper">${sanitized}</div>`;
-                  }
-                }
-                return '';
-              })
-            : (() => {
-                const rendered = options.latexRenderer?.(latex.trim(), true);
-                if (rendered) {
-                  const sanitized = sanitizeHtmlWithStyles(rendered, sanitizer);
-                  if (sanitized) {
-                    return `<div class="latex-display-wrapper">${sanitized}</div>`;
-                  }
-                }
-                return '';
-              })();
-
-        if (cached) {
-          const latexPlaceholder = `--LATEX-DISPLAY-${Math.random().toString(36).substring(2, 15)}--`;
-          latexPlaceholderMap.set(latexPlaceholder, cached);
-          return latexPlaceholder;
-        }
-      } catch {
-        // If rendering fails, return the original
-      }
-    }
-    return match;
-  });
-
-  // Inline math: $ ... $ (but not $$)
-  html = html.replace(/(?<!\$)\$(?!\$)((?:(?!\$)[\s\S])+?)\$(?!\$)/g, (match, latex) => {
-    if (options?.latexRenderer) {
-      try {
-        const cacheKey = `inline|||${latex.trim()}`;
-
-        // Check cache first (if available)
-        const cached =
-          latexCache && latexCacheOrder
-            ? getCachedOrCreateString(latexCache, latexCacheOrder, CACHE_SIZE, cacheKey, () => {
-                const rendered = options.latexRenderer?.(latex.trim(), false);
-                if (rendered) {
-                  const sanitized = sanitizeHtmlWithStyles(rendered, sanitizer);
-                  return sanitized ?? '';
-                }
-                return '';
-              })
-            : (() => {
-                const rendered = options.latexRenderer?.(latex.trim(), false);
-                if (rendered) {
-                  const sanitized = sanitizeHtmlWithStyles(rendered, sanitizer);
-                  return sanitized ?? '';
-                }
-                return '';
-              })();
-
-        if (cached) {
-          const latexPlaceholder = `--LATEX-INLINE-${Math.random().toString(36).substring(2, 15)}--`;
-          latexPlaceholderMap.set(latexPlaceholder, cached);
-          return latexPlaceholder;
-        }
-      } catch {
-        // If rendering fails, return the original
-      }
-    }
-    return match;
-  });
-
-  html = html
-
-    // Inline code `text`
-    .replace(/`(.*?)`/g, (match, content) => {
-      // Escape HTML special characters in inline code (not for security, but for correct display)
-      const code = `<code>${content.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code>`;
-      const codePlaceholder = `--INLINE-CODE-${Math.random().toString(36).substring(2, 15)}--`;
-      codeSectionPlaceholderMap.set(codePlaceholder, code);
-      return codePlaceholder;
-    })
-
-    // Images ![alt](url)
-    .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_match, alt, url) => {
-      const sanitizedUrl = sanitizeUrl(url, sanitizer);
-      const escapedAlt = alt
-        .replace(/&/g, '&amp;')
-        .replace(/"/g, '&quot;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-      return `<img src="${sanitizedUrl}" alt="${escapedAlt}">`;
-    })
-
-    // Links [text](url)
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, url) => {
-      const sanitizedUrl = sanitizeUrl(url, sanitizer);
-      return `<a href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer">${text}</a>`;
-    })
-
-    // Auto-detect URLs and convert to links
-    .replace(/(?<!["'=(])\b(https?:\/\/[^\s<]+[^\s<.,;!?"')\]])/g, match => {
-      const sanitizedUrl = sanitizeUrl(match, sanitizer);
-      return `<a href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer">${match}</a>`;
-    })
-
-    .replace(/(?<!\\)\\\*/g, escapedAsteriskPlaceholder)
-    .replace(/(?<!\\)\\_/g, escapedUnderscorePlaceholder)
-
-    // Bold **text** or __text__
-    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-    .replace(/__(.*?)__/g, '<strong>$1</strong>')
-
-    // Italic *text* or _text_
-    .replace(/\*(.*?)\*/g, '<em>$1</em>')
-    .replace(/_(.*?)_/g, '<em>$1</em>')
-
-    .replace(new RegExp(escapedAsteriskPlaceholder, 'g'), '*')
-    .replace(new RegExp(escapedUnderscorePlaceholder, 'g'), '_')
-
-    // Headings #, ##, ###, etc.
-    .replace(/^###### (.*$)/gm, '<strong>$1</strong>')
-    .replace(/^##### (.*$)/gm, '<h5>$1</h5>')
-    .replace(/^#### (.*$)/gm, '<h4>$1</h4>')
-    .replace(/^### (.*$)/gm, '<h3>$1</h3>')
-    .replace(/^## (.*$)/gm, '<h2>$1</h2>')
-    .replace(/^# (.*$)/gm, '<h2><strong>$1</strong></h2>')
-
-    // Horizontal rule ---
-    .replace(/^---+$/gm, '<hr>');
-
-  html = html
-    // Bullet points - handle each type separately (• gets converted to &#8226; by sanitizer)
-    .replace(/^&#8226; (.*$)/gm, '<li class="unordered">$1</li>')
-    .replace(/^- (.*$)/gm, '<li class="unordered">$1</li>')
-    .replace(/^\* (.*$)/gm, '<li class="unordered">$1</li>')
-
-    // Ordered list items (1., 2., 3., etc.)
-    .replace(/^\d+\. (.*$)/gm, '<li class="ordered">$1</li>');
-
-  html = html.replace(/^\s*(?:>|&gt;)\s*(.*)$/gm, '<blockquote>$1</blockquote>');
-
-  // Generate a random placeholder for newlines to differentiate them from those used for paragraphs
-  const finalNewlinePlaceholder = `--NEWLINE-${Math.random().toString(36).substring(2, 15)}--`;
-
-  html = html
-    // Wrap ordered lists
-    .replace(/(<li class="ordered">.*?<\/li>)/gs, '<ol>$1</ol>')
-
-    // Wrap unordered lists
-    .replace(/(<li class="unordered">.*?<\/li>)/gs, '<ul>$1</ul>')
-
-    // Remove duplicate ol/ul tags
-    .replace(/<\/ol>\s*<ol>/g, '')
-    .replace(/<\/ul>\s*<ul>/g, '')
-
-    // Clean up class attributes
-    .replace(/ class="ordered"/g, '')
-    .replace(/ class="unordered"/g, '');
-
-  html = html
-    // Convert double newlines to paragraphs (before single line breaks)
-    .split(/\n{2}/g)
-    // Wrap non-block elements in <p> tags
-    .map(segment => {
-      // If the segment starts with a block element, return as is
-      if (!segment.trim() || /^\s*<(h[1-6]|pre|blockquote|ul|ol)/.test(segment.trim())) {
-        // Replace newlines inside blocks with the placeholder
-        return segment.replace(/\n/g, finalNewlinePlaceholder);
-      }
-      // Otherwise, wrap in <p> tags
-      return `<p>${segment}</p>`;
-    })
-    // Use newline placeholder again so as not to replace newlines between blocks
-    .join(finalNewlinePlaceholder)
-    // Convert remaining newlines to line breaks (do this LAST)
-    .replace(/\n/g, '<br>')
-    // Restore newline placeholders
-    .replace(new RegExp(finalNewlinePlaceholder, 'g'), keepAdditionalNewlines ? '\n' : ' ');
-
-  // Restore code placeholders
-  codeSectionPlaceholderMap.forEach((code, placeholder) => {
-    html = html.replace(new RegExp(placeholder, 'g'), code);
-  });
-
-  // Restore inner code block placeholders
-  html = html.replace(new RegExp(innerCodeQuotePlaceholder, 'g'), '`');
-
-  // Restore LaTeX placeholders
-  latexPlaceholderMap.forEach((latex, placeholder) => {
-    html = html.replace(new RegExp(placeholder, 'g'), latex);
-  });
-
-  // Restore escaped dollar signs
-  html = html.replace(new RegExp(escapedDollarPlaceholder, 'g'), '$');
-
-  return html;
-};
-
 /**
- * Sanitizes a URL to prevent XSS attacks
- * @param url - The URL to sanitize
- * @param sanitizer - Angular DomSanitizer instance
- * @returns The sanitized URL or '#' if invalid
+ * Sanitize URL to prevent XSS attacks
  */
 const sanitizeUrl = (url: string, sanitizer: DomSanitizer): string => {
-  // Remove any whitespace
   url = url.trim();
-
-  // Allow only http, https, and mailto protocols
   const allowed = /^(https?:\/\/|mailto:|\/(?!\/)|\.{1,2}\/|#)/i;
 
-  // Sanitize the URL using Angular's sanitizer
   if (!allowed.test(url)) {
     return '#';
   }
 
-  // Sanitize the URL using Angular's sanitizer
   const sanitized = sanitizer.sanitize(SecurityContext.URL, url);
+  return sanitized ?? '#';
+};
 
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-  return sanitized || '#';
+/**
+ * Escape HTML special characters
+ */
+const escapeHtml = (text: string): string => {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
 };
diff --git a/projects/element-theme/src/styles/components/_markdown.scss b/projects/element-theme/src/styles/components/_markdown.scss
index 860f9844c..c940a6e0b 100644
--- a/projects/element-theme/src/styles/components/_markdown.scss
+++ b/projects/element-theme/src/styles/components/_markdown.scss
@@ -112,16 +112,24 @@
   > *:last-child {
     // stylelint-disable-next-line declaration-no-important
     margin-block-end: 0 !important;
+
+    &.code-wrapper > pre {
+      // stylelint-disable-next-line declaration-no-important
+      margin-block-end: 0 !important;
+    }
+
+    &.table-wrapper > table {
+      // stylelint-disable-next-line declaration-no-important
+      margin-block-end: 0 !important;
+    }
   }
 
   .table-wrapper {
     position: relative;
     inline-size: max-content;
     max-inline-size: 100%;
-    // stylelint-disable-next-line declaration-no-important
-    margin-block-start: map.get(variables.$spacers, 6) !important;
-    // stylelint-disable-next-line declaration-no-important
-    margin-block-end: 0 !important;
+    margin-block-start: map.get(variables.$spacers, 6);
+    margin-block-end: map.get(variables.$spacers, 6);
   }
 
   .download-table-btn {
@@ -187,6 +195,7 @@
     block-size: max-content;
     overflow-y: visible;
     overflow-x: visible; // TODO: Support formulas wider than the container (currently not possible because it will create horizontal scrollbars)
+    margin-block-end: map.get(variables.$spacers, 6);
 
     .katex-display {
       inline-size: max-content;
diff --git a/src/assets/sample-markdown.md b/src/assets/sample-markdown.md
index 86d791dd8..8866f4037 100644
--- a/src/assets/sample-markdown.md
+++ b/src/assets/sample-markdown.md
@@ -118,3 +118,5 @@ Display math uses double dollar signs for block equations:
 $$
 \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
 $$
+
+UML is not supported in this markdown component.

From 06c938e0ce69074e01286c57515343bc0d779a1c Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Thu, 8 Jan 2026 16:20:49 +0100
Subject: [PATCH 19/30] fix(chat-messages): support nested code blocks

---
 .../markdown-renderer/markdown-renderer.ts         | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index b7d36483a..db64a0743 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -107,6 +107,20 @@ export const getMarkdownRenderer = (
     if (processOpts.allowCodeBlocks) {
       const codeBlockMap = new Map<string, string>();
 
+      // Match code blocks with 4 or more backticks (for displaying nested code blocks)
+      // Only matches at line start (after optional whitespace), not after > prefix
+      result = result.replace(
+        /(^|\n)([\s]*)(````+)([^\n]*)\n?([\s\S]*?)\n?\s*\3/gm,
+        (match, prefix, indent, backticks, language, content) => {
+          const placeholder = `--CODE-BLOCK-${Math.random().toString(36).substring(2, 15)}--`;
+          // Don't process content as markdown - keep it as plain text for code display
+          const cacheKey = createCodeBlockCacheKey(language.trim(), content, false);
+          codeBlockPlaceholderMap.set(placeholder, cacheKey);
+          codeBlockMap.set(placeholder, `<!--CODE-BLOCK-PLACEHOLDER-${placeholder}-->`);
+          return prefix + indent + placeholder;
+        }
+      );
+
       // Match standard code blocks (3 backticks)
       // Only matches at line start (after optional whitespace), not after > prefix
       // Add temporary closing marker for incomplete code blocks during streaming

From 792f96b3d90ec7e9e977543299b400eecbab75df Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Thu, 8 Jan 2026 16:21:11 +0100
Subject: [PATCH 20/30] fix(chat-messages): support angle bracket links

---
 projects/element-ng/markdown-renderer/markdown-renderer.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index db64a0743..ef1615e5d 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -243,6 +243,11 @@ export const getMarkdownRenderer = (
 
     // Step 7: Process links (both formats, can contain inline code)
     if (processOpts.allowLinks) {
+      result = result.replace(/<(https?:\/\/[^\s>]+)>/g, (match, url) => {
+        const sanitizedUrl = sanitizeUrl(url, sanitizer);
+        return `<a href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer">${escapeHtml(url)}</a>`;
+      });
+
       // Images: ![alt](url)
       result = result.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, url) => {
         const sanitizedUrl = sanitizeUrl(url, sanitizer);

From 1a333147827125a3c42e36c1fefa2a36b26522f7 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Fri, 9 Jan 2026 13:15:06 +0100
Subject: [PATCH 21/30] fix(chat-messages): make table parsing more forgiving

---
 .../element-ng/markdown-renderer/markdown-renderer.ts     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index ef1615e5d..70ad87ccc 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -392,15 +392,15 @@ export const getMarkdownRenderer = (
     let i = 0;
 
     while (i < lines.length) {
-      // Check if line looks like a table row
-      if (lines[i].match(/^\|.+\|$/)) {
+      // Check if line looks like a table row (starts with |, may or may not end with |)
+      if (lines[i].match(/^\|.+/)) {
         const tableLines: string[] = [];
         let hasSeparator = false;
 
         // Collect table lines
-        while (i < lines.length && lines[i].match(/^\|.+\|$/)) {
+        while (i < lines.length && lines[i].match(/^\|.+/)) {
           const line = lines[i];
-          if (line.match(/^\|\s*[-:]+.*\|$/)) {
+          if (line.match(/^\|\s*[-:]+/)) {
             hasSeparator = true;
           } else {
             tableLines.push(line);

From 60627ae0d92ed9ac8a4c3104fdeec87990a01fc6 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Wed, 14 Jan 2026 15:18:16 +0100
Subject: [PATCH 22/30] fixup(chat-messages): use new design for code blocks

---
 api-goldens/element-ng/translate/index.api.md |  2 +-
 .../markdown-renderer/markdown-renderer.ts    | 13 +++-
 .../si-markdown-renderer.component.ts         |  4 +-
 .../si-translatable-keys.interface.ts         |  2 +-
 .../src/styles/components/_markdown.scss      | 59 ++++++++++++-------
 .../si-chat-messages/si-ai-message.ts         |  2 +-
 .../si-chat-messages/si-chat-container.ts     |  2 +-
 .../si-chat-messages/si-user-message.ts       |  2 +-
 8 files changed, 56 insertions(+), 30 deletions(-)

diff --git a/api-goldens/element-ng/translate/index.api.md b/api-goldens/element-ng/translate/index.api.md
index a2aac848f..8d5d4c4cc 100644
--- a/api-goldens/element-ng/translate/index.api.md
+++ b/api-goldens/element-ng/translate/index.api.md
@@ -334,7 +334,7 @@ export interface SiTranslatableKeys {
     // (undocumented)
     'SI_MAIN_DETAIL_CONTAINER.BACK'?: string;
     // (undocumented)
-    'SI_MARKDOWN_RENDERER.COPY'?: string;
+    'SI_MARKDOWN_RENDERER.COPY_CODE'?: string;
     // (undocumented)
     'SI_MARKDOWN_RENDERER.DOWNLOAD'?: string;
     // (undocumented)
diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index 70ad87ccc..17a8b21a6 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -329,11 +329,18 @@ export const getMarkdownRenderer = (
             ? options.translateSync(options.copyCodeButton)
             : options.copyCodeButton;
           const buttonLabel = escapeHtml(translatedLabel);
-          copyButton = `<button type="button" class="btn btn-circle btn-sm btn-tertiary element-copy copy-code-btn" data-code-id="${codeId}" aria-label="${buttonLabel}"></button>`;
+          copyButton = `<button type="button" class="btn btn-tertiary btn-sm copy-code-btn" data-code-id="${codeId}" aria-label="${buttonLabel}"><i class="icon element-copy" aria-hidden="true"></i><span class="copy-code-label">${buttonLabel}</span></button>`;
         }
 
-        const wrapperClass = copyButton ? 'code-wrapper has-copy-button' : 'code-wrapper';
-        return `<div class="${wrapperClass}">${copyButton}<pre><code id="${codeId}">${sanitized}</code></pre></div>`;
+        const languageLabel = language
+          ? `<span class="code-language">${escapeHtml(language)}</span>`
+          : '';
+        const headerContent =
+          copyButton || languageLabel
+            ? `<div class="code-header">${languageLabel}${copyButton}</div>`
+            : '';
+        const wrapperClass = headerContent ? 'code-wrapper has-header' : 'code-wrapper';
+        return `<div class="${wrapperClass}">${headerContent}<pre><code id="${codeId}">${sanitized}</code></pre></div>`;
       }
     );
   };
diff --git a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
index f6b18c720..2cd371783 100644
--- a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
+++ b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
@@ -65,10 +65,10 @@ export class SiMarkdownRendererComponent {
    * Label for the copy button.
    * @defaultValue
    * ```
-   * t(() => $localize`:@@SI_MARKDOWN_RENDERER.COPY:Copy`)
+   * t(() => $localize`:@@SI_MARKDOWN_RENDERER.COPY_CODE:Copy code`)
    * ```
    */
-  readonly copyButtonLabel = input(t(() => $localize`:@@SI_MARKDOWN_RENDERER.COPY:Copy`));
+  readonly copyButtonLabel = input(t(() => $localize`:@@SI_MARKDOWN_RENDERER.COPY_CODE:Copy code`));
 
   /**
    * Label for the download CSV button.
diff --git a/projects/element-ng/translate/si-translatable-keys.interface.ts b/projects/element-ng/translate/si-translatable-keys.interface.ts
index e4e0390a5..d40293cc5 100644
--- a/projects/element-ng/translate/si-translatable-keys.interface.ts
+++ b/projects/element-ng/translate/si-translatable-keys.interface.ts
@@ -165,7 +165,7 @@ export interface SiTranslatableKeys {
   'SI_LOGIN_BASIC.USERNAME'?: string;
   'SI_LOGIN_SINGLE-SIGN-ON.LOGIN_SIGN_UP'?: string;
   'SI_MAIN_DETAIL_CONTAINER.BACK'?: string;
-  'SI_MARKDOWN_RENDERER.COPY'?: string;
+  'SI_MARKDOWN_RENDERER.COPY_CODE'?: string;
   'SI_MARKDOWN_RENDERER.DOWNLOAD'?: string;
   'SI_NAVBAR.OPEN_LAUNCHPAD'?: string;
   'SI_NAVBAR.TOGGLE_NAVIGATION'?: string;
diff --git a/projects/element-theme/src/styles/components/_markdown.scss b/projects/element-theme/src/styles/components/_markdown.scss
index c940a6e0b..fc707edf8 100644
--- a/projects/element-theme/src/styles/components/_markdown.scss
+++ b/projects/element-theme/src/styles/components/_markdown.scss
@@ -18,7 +18,7 @@
 
   code {
     color: variables.$element-text-primary;
-    background-color: variables.$element-ui-4;
+    background-color: variables.$element-base-1-hover;
     padding-block: map.get(variables.$spacers, 1);
     padding-inline: map.get(variables.$spacers, 2);
     border-radius: variables.$element-radius-1;
@@ -47,21 +47,41 @@
   }
 
   .code-wrapper {
-    position: relative;
-    inline-size: max-content;
-    max-inline-size: 100%;
+    display: flex;
+    flex-direction: column;
+    inline-size: 100%;
+    margin-block: map.get(variables.$spacers, 4);
+    background-color: transparent;
+    border: 1px solid variables.$element-ui-4;
+    border-radius: variables.$element-radius-2;
+    overflow: hidden;
+  }
+
+  .code-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: map.get(variables.$spacers, 4);
+    padding-block: map.get(variables.$spacers, 5);
+    padding-inline: map.get(variables.$spacers, 6);
+    padding-block-end: 0;
+  }
+
+  .code-language {
+    font-weight: variables.$si-font-weight-semibold;
   }
 
   pre {
-    background-color: variables.$element-ui-4;
-    padding-block: map.get(variables.$spacers, 4);
-    padding-inline: map.get(variables.$spacers, 4);
-    border-radius: variables.$element-radius-1;
+    background-color: transparent;
+    padding-block: map.get(variables.$spacers, 5);
+    padding-inline: map.get(variables.$spacers, 6);
+    border-radius: 0;
     vertical-align: middle;
     overflow-x: auto;
     margin-inline: 0;
-    inline-size: max-content;
-    max-inline-size: 100%;
+    margin-block: 0;
+    inline-size: 100%;
+    font-size: variables.$si-font-size-caption;
     box-sizing: border-box;
 
     code {
@@ -77,18 +97,17 @@
     }
   }
 
-  .code-wrapper.has-copy-button pre {
-    min-block-size: buttons.$btn-circle-size-sm;
+  .copy-code-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: map.get(variables.$spacers, 2);
+    margin-inline-start: auto;
+    padding-block: map.get(variables.$spacers, 1);
+    padding-inline: map.get(variables.$spacers, 2);
   }
 
-  .copy-code-btn {
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    z-index: 1;
+  .copy-code-btn .icon {
+    margin-block: 0;
   }
 
   em {
diff --git a/src/app/examples/si-chat-messages/si-ai-message.ts b/src/app/examples/si-chat-messages/si-ai-message.ts
index c71123a06..41e4ebcbc 100644
--- a/src/app/examples/si-chat-messages/si-ai-message.ts
+++ b/src/app/examples/si-chat-messages/si-ai-message.ts
@@ -24,7 +24,7 @@ export class SampleComponent {
   private translate = injectSiTranslateService();
 
   protected markdownRenderer = getMarkdownRenderer(this.sanitizer, {
-    copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY',
+    copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY_CODE',
     downloadTableButton: 'SI_MARKDOWN_RENDERER.DOWNLOAD',
     translateSync: this.translate.translateSync.bind(this.translate),
     // Optional: Syntax highlighting with highlight.js
diff --git a/src/app/examples/si-chat-messages/si-chat-container.ts b/src/app/examples/si-chat-messages/si-chat-container.ts
index 04e34f563..792698c17 100644
--- a/src/app/examples/si-chat-messages/si-chat-container.ts
+++ b/src/app/examples/si-chat-messages/si-chat-container.ts
@@ -70,7 +70,7 @@ export class SampleComponent {
   private translate = injectSiTranslateService();
 
   protected markdownRenderer = getMarkdownRenderer(this.sanitizer, {
-    copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY',
+    copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY_CODE',
     downloadTableButton: 'SI_MARKDOWN_RENDERER.DOWNLOAD',
     translateSync: this.translate.translateSync.bind(this.translate),
     // Optional: Syntax highlighting with highlight.js
diff --git a/src/app/examples/si-chat-messages/si-user-message.ts b/src/app/examples/si-chat-messages/si-user-message.ts
index a8485bae9..711c286ba 100644
--- a/src/app/examples/si-chat-messages/si-user-message.ts
+++ b/src/app/examples/si-chat-messages/si-user-message.ts
@@ -27,7 +27,7 @@ export class SampleComponent {
   private translate = injectSiTranslateService();
 
   protected markdownRenderer = getMarkdownRenderer(this.sanitizer, {
-    copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY',
+    copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY_CODE',
     downloadTableButton: 'SI_MARKDOWN_RENDERER.DOWNLOAD',
     translateSync: this.translate.translateSync.bind(this.translate),
     // Optional: Syntax highlighting with highlight.js

From 9d64c9b4b0eae81a3c28adcfeffef194f519cf27 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Wed, 14 Jan 2026 15:21:48 +0100
Subject: [PATCH 23/30] fix(chat-messages): underline links in markdown

---
 projects/element-ng/markdown-renderer/markdown-renderer.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index 17a8b21a6..e62cc81c8 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -265,7 +265,7 @@ export const getMarkdownRenderer = (
       // Auto-detect URLs
       result = result.replace(/(?<!["'=(])\b(https?:\/\/[^\s<]+[^\s<.,;!?"')\]])/g, match => {
         const sanitizedUrl = sanitizeUrl(match, sanitizer);
-        return `<a href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer">${escapeHtml(match)}</a>`;
+        return `<a class="link-text" href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer">${escapeHtml(match)}</a>`;
       });
     }
 
@@ -644,7 +644,7 @@ export const getMarkdownRenderer = (
 
       // Sanitize the link text
       const sanitizedText = domSanitizer.sanitize(SecurityContext.HTML, linkText) ?? '';
-      const linkHtml = `<a href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer">${sanitizedText}</a>`;
+      const linkHtml = `<a class="link-text" class="link-text" href="${sanitizedUrl}" target="_blank" rel="noopener noreferrer">${sanitizedText}</a>`;
       result = result.replace(placeholder, linkHtml);
     });
 

From 9e68baa4aba17b63f695a93773084e01cfd46357 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Wed, 14 Jan 2026 15:22:07 +0100
Subject: [PATCH 24/30] fixup(chat-messages): use nicer table download button
 design

---
 .../markdown-renderer/markdown-renderer.ts    |  4 +-
 .../src/styles/components/_markdown.scss      | 52 +++++++++++--------
 2 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index e62cc81c8..d4f461a69 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -576,10 +576,10 @@ export const getMarkdownRenderer = (
           ? options.translateSync(options.downloadTableButton)
           : options.downloadTableButton;
         const buttonLabel = escapeHtml(translatedLabel);
-        downloadButton = `<button type="button" class="btn btn-circle btn-sm btn-tertiary element-download download-table-btn" data-table-id="${tableId}" data-table-index="${tableIndex}" aria-label="${buttonLabel}"></button>`;
+        downloadButton = `<button type="button" class="btn btn-circle btn-sm btn-tertiary download-table-btn" data-table-id="${tableId}" data-table-index="${tableIndex}" aria-label="${buttonLabel}"><i class="icon element-download" aria-hidden="true"></i></button>`;
       }
 
-      return `<div class="table-wrapper">${downloadButton}${tableHtml}</div>`;
+      return `<div class="table-wrapper"><div class="table-scroll-container">${tableHtml}</div>${downloadButton}</div>`;
     });
   };
 
diff --git a/projects/element-theme/src/styles/components/_markdown.scss b/projects/element-theme/src/styles/components/_markdown.scss
index fc707edf8..f9c61e88d 100644
--- a/projects/element-theme/src/styles/components/_markdown.scss
+++ b/projects/element-theme/src/styles/components/_markdown.scss
@@ -1,7 +1,6 @@
 @use 'sass:map';
 
 @use '../variables';
-@use '../bootstrap/buttons' as buttons;
 
 @use './markdown-hljs-theme';
 
@@ -136,40 +135,45 @@
       // stylelint-disable-next-line declaration-no-important
       margin-block-end: 0 !important;
     }
-
-    &.table-wrapper > table {
-      // stylelint-disable-next-line declaration-no-important
-      margin-block-end: 0 !important;
-    }
   }
 
   .table-wrapper {
-    position: relative;
-    inline-size: max-content;
-    max-inline-size: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: map.get(variables.$spacers, 1);
+    inline-size: 100%;
     margin-block-start: map.get(variables.$spacers, 6);
-    margin-block-end: map.get(variables.$spacers, 6);
+    margin-block-end: map.get(variables.$spacers, 1);
+  }
+
+  .table-scroll-container {
+    inline-size: 100%;
+    overflow-x: auto;
   }
 
   .download-table-btn {
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border-radius: variables.$element-radius-1;
+  }
+
+  .download-table-btn .icon {
+    margin-block: 0;
   }
 
   table {
-    inline-size: max-content;
-    max-inline-size: 100%;
+    inline-size: 100%;
+    min-inline-size: 100%;
+    align-self: stretch;
     // stylelint-disable-next-line declaration-no-important
     margin-block-start: 0 !important;
     // stylelint-disable-next-line declaration-no-important
     margin-block-end: 0 !important;
-    overflow: auto;
-    display: block;
+    display: table;
+    table-layout: auto;
     white-space: nowrap;
 
     ul,
@@ -177,11 +181,15 @@
       // stylelint-disable-next-line declaration-no-important
       padding-inline-start: map.get(variables.$spacers, 6) !important;
     }
+
+    td:last-child,
+    th:last-child {
+      inline-size: 100%;
+    }
   }
 
   table td,
   table th {
-    max-inline-size: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
 

From 2147017b3d5b18580429572153e992a7dd38b612 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Wed, 14 Jan 2026 18:19:06 +0100
Subject: [PATCH 25/30] test(e2e): update vrt snapshots

---
 ...si-ai-message-element-examples-chromium-dark-linux.png | 4 ++--
 ...-user-message-element-examples-chromium-dark-linux.png | 4 ++--
 ...down-renderer-element-examples-chromium-dark-linux.png | 4 ++--
 ...own-renderer-element-examples-chromium-light-linux.png | 4 ++--
 .../si-markdown-renderer--si-markdown-renderer.yaml       | 8 +++++---
 5 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-dark-linux.png
index e02e5d25a..b0c9b11a6 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5a429c543b99cac0b06944e2ada718f7fe778dfe90b933c588b5a3cb27704323
-size 14027
+oid sha256:8af4683c1e999db6b4b92557c64a8b05bbdf1c9db6b53b05e2248a510bf58b6e
+size 13941
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png
index f48443a91..4561541ec 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1e85bc8c00d1a06da1a0c4bc7f1f9df1e955f6560de523a394deec538b1bd9c3
-size 14604
+oid sha256:5d14d41a205b238d9444bf58126bb08ddec78f082be8c2b6b6f87c98620b667b
+size 14587
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png
index a447483de..4466df14a 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8ecb89f6a778fbce2699867227a07f519befaa7160bd39ac71f097b53479de98
-size 178297
+oid sha256:d39ee44e92a90228027e1a0088425c275110f89fef718ac6f8e25fbe5ab5b071
+size 178856
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png
index f05585886..09d29788e 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c833bedf7a2de8cccea18ef3cadf22c7f288a4b8a2a29b5faefec3ae5e88ceb9
-size 173575
+oid sha256:3c628201a0112b677b9f630fad6616ff9850cbbdca37044bcccf6689ed2f431a
+size 175289
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
index 18616f196..1185f2c69 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
@@ -10,7 +10,8 @@
   - text: You can use inline code like
   - code: console.log('Hello World')
   - text: "or multi-line code blocks:"
-- button "Copy"
+- text: javascript
+- button "Copy code"
 - code: "function calculateSum(a, b) { return a + b; } const result = calculateSum(5, 3); console.log(`Result: ${result}`);"
 - separator
 - heading "Formatting Options" [level=2]
@@ -76,7 +77,6 @@
 - separator
 - heading "Tables" [level=2]
 - paragraph: "Tables are also supported:"
-- button "Download CSV"
 - table:
   - rowgroup:
     - row "Feature Examples Status Notes":
@@ -149,10 +149,12 @@
           - text: Uses
           - code: <br>
           - text: tags
+- button "Download CSV"
 - paragraph: This paragraph appears after the tables to demonstrate proper spacing.
 - separator
 - heading "Math Expressions" [level=2]
 - paragraph: LaTeX math expressions are supported for mathematical notation.
 - paragraph: "Inline math can be written like this: or the quadratic formula ."
 - paragraph: "/You can escape dollar signs with a backslash to show literal prices: \\$\\d+, \\$\\d+, \\$\\d+\\./"
-- paragraph: "Display math uses double dollar signs for block equations:"
\ No newline at end of file
+- paragraph: "Display math uses double dollar signs for block equations:"
+- paragraph: UML is not supported in this markdown component.
\ No newline at end of file

From 36aaea39f641aad019270ecdc67807d1b91fd9b2 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Fri, 16 Jan 2026 17:02:16 +0100
Subject: [PATCH 26/30] fixup(chat-components): allow pre-rendering in SSR
 enviroments

---
 .../element-ng/markdown-renderer/index.api.md |   2 +-
 .../si-ai-message.component.spec.ts           |   4 +-
 .../si-user-message.component.spec.ts         |   4 +-
 .../markdown-renderer-helpers.ts              |   5 +-
 .../markdown-renderer/markdown-renderer.ts    | 405 ++++++++++--------
 .../si-markdown-renderer.component.ts         |   8 +-
 .../si-chat-messages/si-ai-message.ts         |  72 ++--
 .../si-chat-messages/si-chat-container.ts     |  73 ++--
 .../si-chat-messages/si-user-message.ts       |  72 ++--
 9 files changed, 352 insertions(+), 293 deletions(-)

diff --git a/api-goldens/element-ng/markdown-renderer/index.api.md b/api-goldens/element-ng/markdown-renderer/index.api.md
index a896aa3ca..6aad95cf6 100644
--- a/api-goldens/element-ng/markdown-renderer/index.api.md
+++ b/api-goldens/element-ng/markdown-renderer/index.api.md
@@ -11,7 +11,7 @@ import { SiTranslateService } from '@siemens/element-translate-ng/translate';
 import { TranslatableString } from '@siemens/element-translate-ng/translate-types';
 
 // @public
-export const getMarkdownRenderer: (sanitizer: DomSanitizer, options?: MarkdownRendererOptions) => ((text: string) => Node);
+export const getMarkdownRenderer: (sanitizer: DomSanitizer, options?: MarkdownRendererOptions, doc?: Document, isBrowser?: boolean) => ((text: string) => Node);
 
 // @public (undocumented)
 export interface MarkdownRendererOptions {
diff --git a/projects/element-ng/chat-messages/si-ai-message.component.spec.ts b/projects/element-ng/chat-messages/si-ai-message.component.spec.ts
index d97b0456c..9d97b0290 100644
--- a/projects/element-ng/chat-messages/si-ai-message.component.spec.ts
+++ b/projects/element-ng/chat-messages/si-ai-message.component.spec.ts
@@ -2,6 +2,7 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+import { DOCUMENT } from '@angular/common';
 import { DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By, DomSanitizer } from '@angular/platform-browser';
@@ -18,7 +19,8 @@ describe('SiAiMessageComponent', () => {
     fixture = TestBed.createComponent(TestComponent);
     debugElement = fixture.debugElement;
     const sanitizer = TestBed.inject(DomSanitizer);
-    markdownRenderer = getMarkdownRenderer(sanitizer);
+    const doc = TestBed.inject(DOCUMENT);
+    markdownRenderer = getMarkdownRenderer(sanitizer, undefined, doc, true);
   });
 
   it('should render markdown content', () => {
diff --git a/projects/element-ng/chat-messages/si-user-message.component.spec.ts b/projects/element-ng/chat-messages/si-user-message.component.spec.ts
index 5a4ab41ae..eee9ba52a 100644
--- a/projects/element-ng/chat-messages/si-user-message.component.spec.ts
+++ b/projects/element-ng/chat-messages/si-user-message.component.spec.ts
@@ -2,6 +2,7 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+import { DOCUMENT } from '@angular/common';
 import { DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By, DomSanitizer } from '@angular/platform-browser';
@@ -20,7 +21,8 @@ describe('SiUserMessageComponent', () => {
     fixture = TestBed.createComponent(TestComponent);
     debugElement = fixture.debugElement;
     const sanitizer = TestBed.inject(DomSanitizer);
-    markdownRenderer = getMarkdownRenderer(sanitizer);
+    const doc = TestBed.inject(DOCUMENT);
+    markdownRenderer = getMarkdownRenderer(sanitizer, undefined, doc, true);
   });
 
   it('should render markdown content', () => {
diff --git a/projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts b/projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts
index 038de057f..98d2ba0a6 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts
@@ -93,7 +93,8 @@ export const getCachedOrCreateElement = (
   cacheOrder: string[],
   cacheSize: number,
   key: string,
-  createHtml: () => string
+  createHtml: () => string,
+  doc: Document
 ): HTMLElement => {
   const cached = cache.get(key);
   if (cached) {
@@ -105,7 +106,7 @@ export const getCachedOrCreateElement = (
     return cached;
   }
 
-  const tempDiv = document.createElement('div');
+  const tempDiv = doc.createElement('div');
   tempDiv.innerHTML = createHtml();
   const element = tempDiv.firstElementChild as HTMLElement;
 
diff --git a/projects/element-ng/markdown-renderer/markdown-renderer.ts b/projects/element-ng/markdown-renderer/markdown-renderer.ts
index d4f461a69..fe6db8fb9 100644
--- a/projects/element-ng/markdown-renderer/markdown-renderer.ts
+++ b/projects/element-ng/markdown-renderer/markdown-renderer.ts
@@ -58,15 +58,26 @@ interface ProcessOptions {
 /**
  * Returns a function that transforms markdown text into a formatted HTML node.
  *
+ * **Important for SSR**: When using this function in an SSR context, you must provide the `doc` and `isBrowser` parameters.
+ * Call this within an Angular injection context and pass `inject(DOCUMENT)` and `isPlatformBrowser(inject(PLATFORM_ID))`.
+ *
  * @experimental
  * @param sanitizer - Angular DomSanitizer instance
  * @param options - Optional configuration for the markdown renderer
+ * @param doc - Document instance (optional for browser-only apps, required for SSR - pass inject(DOCUMENT))
+ * @param isBrowser - Whether running in browser (optional for browser-only apps, required for SSR - pass isPlatformBrowser(inject(PLATFORM_ID)))
  * @returns A function taking the markdown text to transform and returning a DOM div element containing the formatted HTML
  */
 export const getMarkdownRenderer = (
   sanitizer: DomSanitizer,
-  options?: MarkdownRendererOptions
+  options?: MarkdownRendererOptions,
+  doc?: Document,
+  isBrowser?: boolean
 ): ((text: string) => Node) => {
+  // Use provided document or fall back to global document for backwards compatibility
+  const docRef = doc ?? document;
+  const isInBrowser = isBrowser ?? true;
+
   // Persistent caches within this renderer instance
   const codeBlockCache = new Map<string, HTMLElement>();
   const tableCache = new Map<string, HTMLElement>();
@@ -341,7 +352,8 @@ export const getMarkdownRenderer = (
             : '';
         const wrapperClass = headerContent ? 'code-wrapper has-header' : 'code-wrapper';
         return `<div class="${wrapperClass}">${headerContent}<pre><code id="${codeId}">${sanitized}</code></pre></div>`;
-      }
+      },
+      docRef
     );
   };
 
@@ -477,110 +489,117 @@ export const getMarkdownRenderer = (
   ): HTMLElement => {
     const cacheKey = createTableCacheKey(tableLines, hasSeparator, tableIndex);
 
-    return getCachedOrCreateElement(tableCache, tableCacheOrder, CACHE_SIZE, cacheKey, () => {
-      const rows: string[] = [];
-      const cellData = tableCellData.get(tableIndex);
+    return getCachedOrCreateElement(
+      tableCache,
+      tableCacheOrder,
+      CACHE_SIZE,
+      cacheKey,
+      () => {
+        const rows: string[] = [];
+        const cellData = tableCellData.get(tableIndex);
 
-      tableLines.forEach((line, rowIndex) => {
-        if (!line.trim()) {
-          return;
-        }
+        tableLines.forEach((line, rowIndex) => {
+          if (!line.trim()) {
+            return;
+          }
 
-        const escapedPipePlaceholder = `___ESCAPED_PIPE___${Math.random().toString(36).substring(2, 15)}___`;
-        const contentWithPlaceholders = line.replace(/\\\|/g, escapedPipePlaceholder);
-        const parts = contentWithPlaceholders.split('|');
-        const cells = parts.slice(1, -1);
-
-        const processedCells = cells.map((cell, cellIndex) => {
-          // Restore escaped pipes and process cell content
-          let originalCell = cell.replace(new RegExp(escapedPipePlaceholder, 'g'), '|').trim();
-
-          // Extract inline code to protect <br> tags within code
-          const inlineCodeMap = new Map<string, string>();
-          originalCell = originalCell.replace(/(?<!\\)(?:\\\\)*`([^`]+)`/g, (match, content) => {
-            const placeholder = `___INLINE_CODE_${Math.random().toString(36).substring(2, 15)}___`;
-            inlineCodeMap.set(placeholder, match);
-            return placeholder;
-          });
+          const escapedPipePlaceholder = `___ESCAPED_PIPE___${Math.random().toString(36).substring(2, 15)}___`;
+          const contentWithPlaceholders = line.replace(/\\\|/g, escapedPipePlaceholder);
+          const parts = contentWithPlaceholders.split('|');
+          const cells = parts.slice(1, -1);
+
+          const processedCells = cells.map((cell, cellIndex) => {
+            // Restore escaped pipes and process cell content
+            let originalCell = cell.replace(new RegExp(escapedPipePlaceholder, 'g'), '|').trim();
+
+            // Extract inline code to protect <br> tags within code
+            const inlineCodeMap = new Map<string, string>();
+            originalCell = originalCell.replace(/(?<!\\)(?:\\\\)*`([^`]+)`/g, (match, content) => {
+              const placeholder = `___INLINE_CODE_${Math.random().toString(36).substring(2, 15)}___`;
+              inlineCodeMap.set(placeholder, match);
+              return placeholder;
+            });
 
-          // Convert <br> tags to newlines for table cells (outside of code)
-          originalCell = originalCell.replace(/<br\s*\/?>/gi, '\n');
+            // Convert <br> tags to newlines for table cells (outside of code)
+            originalCell = originalCell.replace(/<br\s*\/?>/gi, '\n');
 
-          // Restore inline code
-          inlineCodeMap.forEach((code, placeholder) => {
-            originalCell = originalCell.replace(placeholder, code);
-          });
+            // Restore inline code
+            inlineCodeMap.forEach((code, placeholder) => {
+              originalCell = originalCell.replace(placeholder, code);
+            });
 
-          // Store in cellData if available
-          if (cellData) {
-            const rowData = cellData.get(rowIndex) ?? new Map<number, string>();
-            rowData.set(cellIndex, originalCell);
-            cellData.set(rowIndex, rowData);
-          }
+            // Store in cellData if available
+            if (cellData) {
+              const rowData = cellData.get(rowIndex) ?? new Map<number, string>();
+              rowData.set(cellIndex, originalCell);
+              cellData.set(rowIndex, rowData);
+            }
 
-          // Process cell content for inline elements
-          const processedContent = processMarkdown(originalCell, {
-            allowCodeBlocks: false,
-            allowBlockquotes: false,
-            allowTables: false,
-            allowLatex: true,
-            allowInlineCode: true,
-            allowLinks: true
+            // Process cell content for inline elements
+            const processedContent = processMarkdown(originalCell, {
+              allowCodeBlocks: false,
+              allowBlockquotes: false,
+              allowTables: false,
+              allowLatex: true,
+              allowInlineCode: true,
+              allowLinks: true
+            });
+
+            return processedContent;
           });
 
-          return processedContent;
+          const isHeader = hasSeparator && rowIndex === 0;
+          const tag = isHeader ? 'th' : 'td';
+          const rowHtml = `<tr>${processedCells.map(cell => `<${tag}>${cell}</${tag}>`).join('')}</tr>`;
+          rows.push(rowHtml);
         });
 
-        const isHeader = hasSeparator && rowIndex === 0;
-        const tag = isHeader ? 'th' : 'td';
-        const rowHtml = `<tr>${processedCells.map(cell => `<${tag}>${cell}</${tag}>`).join('')}</tr>`;
-        rows.push(rowHtml);
-      });
-
-      // Filter out empty rows (check for text content OR innerHTML content)
-      const filteredRows = rows.filter(row => {
-        // Wrap in proper table structure for correct HTML parsing
-        const tempTable = document.createElement('table');
-        tempTable.innerHTML = `<tbody>${row}</tbody>`;
-        const cells = tempTable.querySelectorAll('td, th');
-        // Check if any cell has content
-        return Array.from(cells).some(cell => {
-          const hasText = !!cell.textContent?.trim();
-          const hasHtml = !!cell.innerHTML?.trim();
-          return hasText || hasHtml;
+        // Filter out empty rows (check for text content OR innerHTML content)
+        const filteredRows = rows.filter(row => {
+          // Wrap in proper table structure for correct HTML parsing
+          const tempTable = docRef.createElement('table');
+          tempTable.innerHTML = `<tbody>${row}</tbody>`;
+          const cells = tempTable.querySelectorAll('td, th');
+          // Check if any cell has content
+          return Array.from(cells).some(cell => {
+            const hasText = !!cell.textContent?.trim();
+            const hasHtml = !!cell.innerHTML?.trim();
+            return hasText || hasHtml;
+          });
         });
-      });
 
-      if (filteredRows.length === 0) {
-        return '<div></div>';
-      }
+        if (filteredRows.length === 0) {
+          return '<div></div>';
+        }
 
-      const tableId = `table-${Math.random().toString(36).substring(2, 15)}`;
-      let tableHtml = '<table class="table table-hover" id="' + tableId + '">';
+        const tableId = `table-${Math.random().toString(36).substring(2, 15)}`;
+        let tableHtml = '<table class="table table-hover" id="' + tableId + '">';
 
-      if (hasSeparator && filteredRows.length > 0) {
-        tableHtml += '<thead>' + filteredRows[0] + '</thead>';
-        if (filteredRows.length > 1) {
-          tableHtml += '<tbody>' + filteredRows.slice(1).join('') + '</tbody>';
+        if (hasSeparator && filteredRows.length > 0) {
+          tableHtml += '<thead>' + filteredRows[0] + '</thead>';
+          if (filteredRows.length > 1) {
+            tableHtml += '<tbody>' + filteredRows.slice(1).join('') + '</tbody>';
+          }
+        } else {
+          tableHtml += '<tbody>' + filteredRows.join('') + '</tbody>';
         }
-      } else {
-        tableHtml += '<tbody>' + filteredRows.join('') + '</tbody>';
-      }
 
-      tableHtml += '</table>';
+        tableHtml += '</table>';
 
-      // Add download button if enabled
-      let downloadButton = '';
-      if (options?.downloadTableButton) {
-        const translatedLabel = options.translateSync
-          ? options.translateSync(options.downloadTableButton)
-          : options.downloadTableButton;
-        const buttonLabel = escapeHtml(translatedLabel);
-        downloadButton = `<button type="button" class="btn btn-circle btn-sm btn-tertiary download-table-btn" data-table-id="${tableId}" data-table-index="${tableIndex}" aria-label="${buttonLabel}"><i class="icon element-download" aria-hidden="true"></i></button>`;
-      }
+        // Add download button if enabled
+        let downloadButton = '';
+        if (options?.downloadTableButton) {
+          const translatedLabel = options.translateSync
+            ? options.translateSync(options.downloadTableButton)
+            : options.downloadTableButton;
+          const buttonLabel = escapeHtml(translatedLabel);
+          downloadButton = `<button type="button" class="btn btn-circle btn-sm btn-tertiary download-table-btn" data-table-id="${tableId}" data-table-index="${tableIndex}" aria-label="${buttonLabel}"><i class="icon element-download" aria-hidden="true"></i></button>`;
+        }
 
-      return `<div class="table-wrapper"><div class="table-scroll-container">${tableHtml}</div>${downloadButton}</div>`;
-    });
+        return `<div class="table-wrapper"><div class="table-scroll-container">${tableHtml}</div>${downloadButton}</div>`;
+      },
+      docRef
+    );
   };
 
   /**
@@ -753,7 +772,7 @@ export const getMarkdownRenderer = (
    * Main render function
    */
   return (text: string): HTMLElement => {
-    const div = document.createElement('div');
+    const div = docRef.createElement('div');
     div.className = 'markdown-content text-break';
 
     if (text === null || text === undefined) {
@@ -764,56 +783,60 @@ export const getMarkdownRenderer = (
     div.innerHTML = processedHtml;
 
     // Replace comment placeholders with cached elements
-    const walker = document.createTreeWalker(div, NodeFilter.SHOW_COMMENT);
+    // Only use TreeWalker in browser environment
     const commentsToReplace: { comment: Comment; element: HTMLElement }[] = [];
 
-    let currentNode = walker.nextNode();
-    while (currentNode) {
-      const comment = currentNode as Comment;
-
-      // Handle code block placeholders
-      const codeMatch = comment.textContent?.match(/CODE-BLOCK-PLACEHOLDER-(.*)/);
-      if (codeMatch) {
-        const placeholderId = codeMatch[1];
-        const cacheKey = codeBlockPlaceholderMap.get(placeholderId);
-        if (cacheKey) {
-          const parts = cacheKey.split('|||');
-          const language = parts[0];
-          const content = parts[1];
-          const isMarkdown = parts[3] === 'true';
-          const cachedElement = createCodeBlockElement(language, content, isMarkdown);
-          if (cachedElement) {
-            commentsToReplace.push({ comment, element: cachedElement });
+    if (isInBrowser) {
+      const walker = docRef.createTreeWalker(div, NodeFilter.SHOW_COMMENT);
+
+      let currentNode = walker.nextNode();
+      while (currentNode) {
+        const comment = currentNode as Comment;
+
+        // Handle code block placeholders
+        const codeMatch = comment.textContent?.match(/CODE-BLOCK-PLACEHOLDER-(.*)/);
+        if (codeMatch) {
+          const placeholderId = codeMatch[1];
+          const cacheKey = codeBlockPlaceholderMap.get(placeholderId);
+          if (cacheKey) {
+            const parts = cacheKey.split('|||');
+            const language = parts[0];
+            const content = parts[1];
+            const isMarkdown = parts[3] === 'true';
+            const cachedElement = createCodeBlockElement(language, content, isMarkdown);
+            if (cachedElement) {
+              commentsToReplace.push({ comment, element: cachedElement });
+            }
           }
         }
-      }
 
-      // Handle table placeholders
-      const tableMatch = comment.textContent?.match(/TABLE-PLACEHOLDER-(.*)/);
-      if (tableMatch) {
-        const placeholderId = tableMatch[1];
-        const tableDataJson = tablePlaceholderMap.get(placeholderId);
-        if (tableDataJson) {
-          try {
-            const { tableIndex, hasSeparator, tableLines } = JSON.parse(tableDataJson);
-            const cachedElement = createTableElement(tableLines, hasSeparator, tableIndex, {
-              allowCodeBlocks: false,
-              allowBlockquotes: false,
-              allowTables: false,
-              allowLatex: true,
-              allowInlineCode: true,
-              allowLinks: true
-            });
-            if (cachedElement) {
-              commentsToReplace.push({ comment, element: cachedElement });
+        // Handle table placeholders
+        const tableMatch = comment.textContent?.match(/TABLE-PLACEHOLDER-(.*)/);
+        if (tableMatch) {
+          const placeholderId = tableMatch[1];
+          const tableDataJson = tablePlaceholderMap.get(placeholderId);
+          if (tableDataJson) {
+            try {
+              const { tableIndex, hasSeparator, tableLines } = JSON.parse(tableDataJson);
+              const cachedElement = createTableElement(tableLines, hasSeparator, tableIndex, {
+                allowCodeBlocks: false,
+                allowBlockquotes: false,
+                allowTables: false,
+                allowLatex: true,
+                allowInlineCode: true,
+                allowLinks: true
+              });
+              if (cachedElement) {
+                commentsToReplace.push({ comment, element: cachedElement });
+              }
+            } catch (e) {
+              console.warn('Failed to parse table placeholder data', e);
             }
-          } catch (e) {
-            console.warn('Failed to parse table placeholder data', e);
           }
         }
-      }
 
-      currentNode = walker.nextNode();
+        currentNode = walker.nextNode();
+      }
     }
 
     // Replace all comment placeholders with their cached elements
@@ -823,72 +846,74 @@ export const getMarkdownRenderer = (
       }
     });
 
-    // Add event listeners for copy buttons
-    div.querySelectorAll('.copy-code-btn').forEach(btn => {
-      btn.addEventListener('click', e => {
-        const button = e.target as HTMLButtonElement;
-        const codeId = button.getAttribute('data-code-id');
-        if (!codeId) return;
+    // Add event listeners for copy buttons (browser-only)
+    if (isBrowser) {
+      div.querySelectorAll('.copy-code-btn').forEach(btn => {
+        btn.addEventListener('click', e => {
+          const button = e.target as HTMLButtonElement;
+          const codeId = button.getAttribute('data-code-id');
+          if (!codeId) return;
 
-        const codeElement = div.querySelector(`#${codeId}`);
-        if (!codeElement) return;
+          const codeElement = div.querySelector(`#${codeId}`);
+          if (!codeElement) return;
 
-        const code = codeElement.textContent ?? '';
-        navigator.clipboard.writeText(code).catch(() => {
-          console.warn('Failed to copy code to clipboard');
+          const code = codeElement.textContent ?? '';
+          navigator.clipboard.writeText(code).catch(() => {
+            console.warn('Failed to copy code to clipboard');
+          });
         });
       });
-    });
 
-    // Add event listeners for table download buttons
-    div.querySelectorAll('.download-table-btn').forEach(btn => {
-      btn.addEventListener('click', e => {
-        const button = e.target as HTMLButtonElement;
-        const tableId = button.getAttribute('data-table-id');
-        const tableIndexStr = button.getAttribute('data-table-index');
-        if (!tableId || tableIndexStr === null) return;
-
-        const tableElement = div.querySelector(`#${tableId}`) as HTMLTableElement;
-        if (!tableElement) return;
-
-        const tableIndex = parseInt(tableIndexStr, 10);
-        const tableData = tableCellData.get(tableIndex);
-
-        // Convert table to CSV
-        const rows = Array.from(tableElement.querySelectorAll('tr'));
-        const csv = rows
-          .filter(row => {
-            const cells = Array.from(row.querySelectorAll('td, th'));
-            return cells.some(cell => (cell.textContent ?? '').trim().length > 0);
-          })
-          .map((row, rowIndex) => {
-            const cells = Array.from(row.querySelectorAll('td, th'));
-            return cells
-              .map((cell, columnIndex) => {
-                const cellText =
-                  tableData?.get(rowIndex)?.get(columnIndex) ?? cell.textContent ?? '';
-                if (cellText.includes(',') || cellText.includes('"') || cellText.includes('\n')) {
-                  return `"${cellText.replace(/"/g, '""')}"`;
-                }
-                return cellText;
-              })
-              .join(',');
-          })
-          .join('\n');
-
-        // Create and trigger download
-        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
-        const link = document.createElement('a');
-        const url = URL.createObjectURL(blob);
-        link.setAttribute('href', url);
-        link.setAttribute('download', 'table.csv');
-        link.style.visibility = 'hidden';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
+      // Add event listeners for table download buttons (browser-only)
+      div.querySelectorAll('.download-table-btn').forEach(btn => {
+        btn.addEventListener('click', e => {
+          const button = e.target as HTMLButtonElement;
+          const tableId = button.getAttribute('data-table-id');
+          const tableIndexStr = button.getAttribute('data-table-index');
+          if (!tableId || tableIndexStr === null) return;
+
+          const tableElement = div.querySelector(`#${tableId}`) as HTMLTableElement;
+          if (!tableElement) return;
+
+          const tableIndex = parseInt(tableIndexStr, 10);
+          const tableData = tableCellData.get(tableIndex);
+
+          // Convert table to CSV
+          const rows = Array.from(tableElement.querySelectorAll('tr'));
+          const csv = rows
+            .filter(row => {
+              const cells = Array.from(row.querySelectorAll('td, th'));
+              return cells.some(cell => (cell.textContent ?? '').trim().length > 0);
+            })
+            .map((row, rowIndex) => {
+              const cells = Array.from(row.querySelectorAll('td, th'));
+              return cells
+                .map((cell, columnIndex) => {
+                  const cellText =
+                    tableData?.get(rowIndex)?.get(columnIndex) ?? cell.textContent ?? '';
+                  if (cellText.includes(',') || cellText.includes('"') || cellText.includes('\n')) {
+                    return `"${cellText.replace(/"/g, '""')}"`;
+                  }
+                  return cellText;
+                })
+                .join(',');
+            })
+            .join('\n');
+
+          // Create and trigger download
+          const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+          const link = docRef.createElement('a');
+          const url = URL.createObjectURL(blob);
+          link.setAttribute('href', url);
+          link.setAttribute('download', 'table.csv');
+          link.style.visibility = 'hidden';
+          docRef.body.appendChild(link);
+          link.click();
+          docRef.body.removeChild(link);
+          URL.revokeObjectURL(url);
+        });
       });
-    });
+    }
 
     return div;
   };
diff --git a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
index 2cd371783..60716b30d 100644
--- a/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
+++ b/projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
@@ -2,7 +2,8 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-import { Component, computed, effect, inject, input, ElementRef } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { Component, computed, effect, inject, input, ElementRef, PLATFORM_ID } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { injectSiTranslateService, t } from '@siemens/element-translate-ng/translate';
 
@@ -20,6 +21,9 @@ export class SiMarkdownRendererComponent {
   private sanitizer = inject(DomSanitizer);
   private hostElement = inject(ElementRef<HTMLElement>);
   private translateService = injectSiTranslateService();
+  private platformId = inject(PLATFORM_ID);
+  private isBrowser = isPlatformBrowser(this.platformId);
+  private doc = inject(DOCUMENT);
 
   /**
    * The markdown text to transform and display
@@ -93,7 +97,7 @@ export class SiMarkdownRendererComponent {
       translateSync: this.translateService.translateSync.bind(this.translateService)
     };
 
-    return getMarkdownRenderer(this.sanitizer, options);
+    return getMarkdownRenderer(this.sanitizer, options, this.doc, this.isBrowser);
   });
 
   constructor() {
diff --git a/src/app/examples/si-chat-messages/si-ai-message.ts b/src/app/examples/si-chat-messages/si-ai-message.ts
index 41e4ebcbc..d06b75327 100644
--- a/src/app/examples/si-chat-messages/si-ai-message.ts
+++ b/src/app/examples/si-chat-messages/si-ai-message.ts
@@ -2,7 +2,8 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, PLATFORM_ID } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MessageAction, SiAiMessageComponent } from '@siemens/element-ng/chat-messages';
 import { getMarkdownRenderer } from '@siemens/element-ng/markdown-renderer';
@@ -22,43 +23,50 @@ export class SampleComponent {
   logEvent = inject(LOG_EVENT);
   private sanitizer = inject(DomSanitizer);
   private translate = injectSiTranslateService();
+  private doc = inject(DOCUMENT);
+  private isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 
-  protected markdownRenderer = getMarkdownRenderer(this.sanitizer, {
-    copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY_CODE',
-    downloadTableButton: 'SI_MARKDOWN_RENDERER.DOWNLOAD',
-    translateSync: this.translate.translateSync.bind(this.translate),
-    // Optional: Syntax highlighting with highlight.js
-    // This function returns highlighted HTML markup for the code content.
-    // The returned HTML is sanitized before insertion.
-    // Element provides a built-in highlight.js theme that adapts to light/dark mode.
-    // Make sure to include highlight.js as a dependency.
-    syntaxHighlighter: (code: string, language?: string): string | undefined => {
-      if (language && hljs.getLanguage(language)) {
+  protected markdownRenderer = getMarkdownRenderer(
+    this.sanitizer,
+    {
+      copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY_CODE',
+      downloadTableButton: 'SI_MARKDOWN_RENDERER.DOWNLOAD',
+      translateSync: this.translate.translateSync.bind(this.translate),
+      // Optional: Syntax highlighting with highlight.js
+      // This function returns highlighted HTML markup for the code content.
+      // The returned HTML is sanitized before insertion.
+      // Element provides a built-in highlight.js theme that adapts to light/dark mode.
+      // Make sure to include highlight.js as a dependency.
+      syntaxHighlighter: (code: string, language?: string): string | undefined => {
+        if (language && hljs.getLanguage(language)) {
+          try {
+            return hljs.highlight(code, { language }).value;
+          } catch {
+            // If highlighting fails, fall back to no highlighting
+          }
+        }
+        return undefined;
+      },
+      // Optional: LaTeX rendering with KaTeX
+      // This function returns rendered HTML for LaTeX math expressions.
+      // The returned HTML is sanitized before insertion.
+      // Make sure to include KaTeX styles in your application.
+      // Add to styles in angular.json: "node_modules/katex/dist/katex.min.css"
+      latexRenderer: (latex: string, displayMode: boolean): string | undefined => {
         try {
-          return hljs.highlight(code, { language }).value;
+          return katex.renderToString(latex, {
+            displayMode,
+            throwOnError: false,
+            output: 'html'
+          });
         } catch {
-          // If highlighting fails, fall back to no highlighting
+          return undefined;
         }
       }
-      return undefined;
     },
-    // Optional: LaTeX rendering with KaTeX
-    // This function returns rendered HTML for LaTeX math expressions.
-    // The returned HTML is sanitized before insertion.
-    // Make sure to include KaTeX styles in your application.
-    // Add to styles in angular.json: "node_modules/katex/dist/katex.min.css"
-    latexRenderer: (latex: string, displayMode: boolean): string | undefined => {
-      try {
-        return katex.renderToString(latex, {
-          displayMode,
-          throwOnError: false,
-          output: 'html'
-        });
-      } catch {
-        return undefined;
-      }
-    }
-  });
+    this.doc,
+    this.isBrowser
+  );
 
   content = `Here's a **simple response** with basic formatting.
 
diff --git a/src/app/examples/si-chat-messages/si-chat-container.ts b/src/app/examples/si-chat-messages/si-chat-container.ts
index 792698c17..456215775 100644
--- a/src/app/examples/si-chat-messages/si-chat-container.ts
+++ b/src/app/examples/si-chat-messages/si-chat-container.ts
@@ -2,13 +2,15 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   inject,
   signal,
   TemplateRef,
-  viewChild
+  viewChild,
+  PLATFORM_ID
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import {
@@ -68,43 +70,50 @@ export class SampleComponent {
   private sanitizer = inject(DomSanitizer);
   private readonly toastService = inject(SiToastNotificationService);
   private translate = injectSiTranslateService();
+  private doc = inject(DOCUMENT);
+  private isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 
-  protected markdownRenderer = getMarkdownRenderer(this.sanitizer, {
-    copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY_CODE',
-    downloadTableButton: 'SI_MARKDOWN_RENDERER.DOWNLOAD',
-    translateSync: this.translate.translateSync.bind(this.translate),
-    // Optional: Syntax highlighting with highlight.js
-    // This function returns highlighted HTML markup for the code content.
-    // The returned HTML is sanitized before insertion.
-    // Element provides a built-in highlight.js theme that adapts to light/dark mode.
-    // Make sure to include highlight.js as a dependency.
-    syntaxHighlighter: (code: string, language?: string): string | undefined => {
-      if (language && hljs.getLanguage(language)) {
+  protected markdownRenderer = getMarkdownRenderer(
+    this.sanitizer,
+    {
+      copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY_CODE',
+      downloadTableButton: 'SI_MARKDOWN_RENDERER.DOWNLOAD',
+      translateSync: this.translate.translateSync.bind(this.translate),
+      // Optional: Syntax highlighting with highlight.js
+      // This function returns highlighted HTML markup for the code content.
+      // The returned HTML is sanitized before insertion.
+      // Element provides a built-in highlight.js theme that adapts to light/dark mode.
+      // Make sure to include highlight.js as a dependency.
+      syntaxHighlighter: (code: string, language?: string): string | undefined => {
+        if (language && hljs.getLanguage(language)) {
+          try {
+            return hljs.highlight(code, { language }).value;
+          } catch {
+            // If highlighting fails, fall back to no highlighting
+          }
+        }
+        return undefined;
+      },
+      // Optional: LaTeX rendering with KaTeX
+      // This function returns rendered HTML for LaTeX math expressions.
+      // The returned HTML is sanitized before insertion.
+      // Make sure to include KaTeX styles in your application.
+      // Add to styles in angular.json: "node_modules/katex/dist/katex.min.css"
+      latexRenderer: (latex: string, displayMode: boolean): string | undefined => {
         try {
-          return hljs.highlight(code, { language }).value;
+          return katex.renderToString(latex, {
+            displayMode,
+            throwOnError: false,
+            output: 'html'
+          });
         } catch {
-          // If highlighting fails, fall back to no highlighting
+          return undefined;
         }
       }
-      return undefined;
     },
-    // Optional: LaTeX rendering with KaTeX
-    // This function returns rendered HTML for LaTeX math expressions.
-    // The returned HTML is sanitized before insertion.
-    // Make sure to include KaTeX styles in your application.
-    // Add to styles in angular.json: "node_modules/katex/dist/katex.min.css"
-    latexRenderer: (latex: string, displayMode: boolean): string | undefined => {
-      try {
-        return katex.renderToString(latex, {
-          displayMode,
-          throwOnError: false,
-          output: 'html'
-        });
-      } catch {
-        return undefined;
-      }
-    }
-  });
+    this.doc,
+    this.isBrowser
+  );
 
   readonly preAttachedFiles: ChatInputAttachment[] = [
     {
diff --git a/src/app/examples/si-chat-messages/si-user-message.ts b/src/app/examples/si-chat-messages/si-user-message.ts
index 711c286ba..12cba2776 100644
--- a/src/app/examples/si-chat-messages/si-user-message.ts
+++ b/src/app/examples/si-chat-messages/si-user-message.ts
@@ -2,7 +2,8 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, PLATFORM_ID } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import {
   SiUserMessageComponent,
@@ -25,43 +26,50 @@ export class SampleComponent {
   logEvent = inject(LOG_EVENT);
   private sanitizer = inject(DomSanitizer);
   private translate = injectSiTranslateService();
+  private doc = inject(DOCUMENT);
+  private isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 
-  protected markdownRenderer = getMarkdownRenderer(this.sanitizer, {
-    copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY_CODE',
-    downloadTableButton: 'SI_MARKDOWN_RENDERER.DOWNLOAD',
-    translateSync: this.translate.translateSync.bind(this.translate),
-    // Optional: Syntax highlighting with highlight.js
-    // This function returns highlighted HTML markup for the code content.
-    // The returned HTML is sanitized before insertion.
-    // Element provides a built-in highlight.js theme that adapts to light/dark mode.
-    // Make sure to include highlight.js as a dependency.
-    syntaxHighlighter: (code: string, language?: string): string | undefined => {
-      if (language && hljs.getLanguage(language)) {
+  protected markdownRenderer = getMarkdownRenderer(
+    this.sanitizer,
+    {
+      copyCodeButton: 'SI_MARKDOWN_RENDERER.COPY_CODE',
+      downloadTableButton: 'SI_MARKDOWN_RENDERER.DOWNLOAD',
+      translateSync: this.translate.translateSync.bind(this.translate),
+      // Optional: Syntax highlighting with highlight.js
+      // This function returns highlighted HTML markup for the code content.
+      // The returned HTML is sanitized before insertion.
+      // Element provides a built-in highlight.js theme that adapts to light/dark mode.
+      // Make sure to include highlight.js as a dependency.
+      syntaxHighlighter: (code: string, language?: string): string | undefined => {
+        if (language && hljs.getLanguage(language)) {
+          try {
+            return hljs.highlight(code, { language }).value;
+          } catch {
+            // If highlighting fails, fall back to no highlighting
+          }
+        }
+        return undefined;
+      },
+      // Optional: LaTeX rendering with KaTeX
+      // This function returns rendered HTML for LaTeX math expressions.
+      // The returned HTML is sanitized before insertion.
+      // Make sure to include KaTeX styles in your application.
+      // Add to styles in angular.json: "node_modules/katex/dist/katex.min.css"
+      latexRenderer: (latex: string, displayMode: boolean): string | undefined => {
         try {
-          return hljs.highlight(code, { language }).value;
+          return katex.renderToString(latex, {
+            displayMode,
+            throwOnError: false,
+            output: 'html'
+          });
         } catch {
-          // If highlighting fails, fall back to no highlighting
+          return undefined;
         }
       }
-      return undefined;
     },
-    // Optional: LaTeX rendering with KaTeX
-    // This function returns rendered HTML for LaTeX math expressions.
-    // The returned HTML is sanitized before insertion.
-    // Make sure to include KaTeX styles in your application.
-    // Add to styles in angular.json: "node_modules/katex/dist/katex.min.css"
-    latexRenderer: (latex: string, displayMode: boolean): string | undefined => {
-      try {
-        return katex.renderToString(latex, {
-          displayMode,
-          throwOnError: false,
-          output: 'html'
-        });
-      } catch {
-        return undefined;
-      }
-    }
-  });
+    this.doc,
+    this.isBrowser
+  );
 
   content = `Can you help me with this **code snippet**?
 

From 17f2d29c28ab368cc0e961a0cfd86f69225bdbe5 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Fri, 19 Dec 2025 17:00:01 +0100
Subject: [PATCH 27/30] feat(chat-messages): add ai-welcome-screen component

---
 .../element-ng/chat-messages/index.api.md     |  20 ++++
 docs/patterns/ai/ai-chat.md                   |  10 +-
 .../e2e/element-examples/static.spec.ts       |   1 +
 ...n-element-examples-chromium-dark-linux.png |   3 +
 ...-element-examples-chromium-light-linux.png |   3 +
 ...i-chat-messages--si-ai-welcome-screen.yaml |  12 +++
 ...r-element-examples-chromium-dark-linux.png |   4 +-
 ...-element-examples-chromium-light-linux.png |   4 +-
 .../si-chat-messages--si-chat-container.yaml  |   5 +-
 projects/element-ng/chat-messages/index.ts    |   1 +
 .../si-ai-welcome-screen.component.html       |  34 ++++++
 .../si-ai-welcome-screen.component.scss       |  53 +++++++++
 .../si-ai-welcome-screen.component.spec.ts    |  90 ++++++++++++++++
 .../si-ai-welcome-screen.component.ts         | 101 ++++++++++++++++++
 .../si-chat-container.component.scss          |  28 ++++-
 .../styles/variables/_semantic-tokens.scss    |   1 +
 .../src/theme/_theme-element.scss             |   8 +-
 .../si-ai-welcome-screen.html                 |  11 ++
 .../si-chat-messages/si-ai-welcome-screen.ts  |  42 ++++++++
 .../si-chat-messages/si-chat-container.html   |  35 ++++--
 .../si-chat-messages/si-chat-container.ts     |  62 +++++++++--
 21 files changed, 500 insertions(+), 28 deletions(-)
 create mode 100644 playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-dark-linux.png
 create mode 100644 playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-light-linux.png
 create mode 100644 playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen.yaml
 create mode 100644 projects/element-ng/chat-messages/si-ai-welcome-screen.component.html
 create mode 100644 projects/element-ng/chat-messages/si-ai-welcome-screen.component.scss
 create mode 100644 projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts
 create mode 100644 projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts
 create mode 100644 src/app/examples/si-chat-messages/si-ai-welcome-screen.html
 create mode 100644 src/app/examples/si-chat-messages/si-ai-welcome-screen.ts

diff --git a/api-goldens/element-ng/chat-messages/index.api.md b/api-goldens/element-ng/chat-messages/index.api.md
index 0d62a4766..26acda975 100644
--- a/api-goldens/element-ng/chat-messages/index.api.md
+++ b/api-goldens/element-ng/chat-messages/index.api.md
@@ -40,6 +40,18 @@ export interface MessageAction {
     label: TranslatableString;
 }
 
+// @public (undocumented)
+export interface PromptCategory {
+    // (undocumented)
+    label: string;
+}
+
+// @public (undocumented)
+export interface PromptSuggestion {
+    // (undocumented)
+    text: string;
+}
+
 // @public
 export class SiAiMessageComponent {
     constructor();
@@ -52,6 +64,14 @@ export class SiAiMessageComponent {
     readonly secondaryActionsLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
 }
 
+// @public
+export class SiAiWelcomeScreenComponent {
+    readonly categories: _angular_core.InputSignal<PromptCategory[]>;
+    readonly promptSelected: _angular_core.OutputEmitterRef<PromptSuggestion>;
+    readonly promptSuggestions: _angular_core.InputSignal<PromptSuggestion[] | Record<string, PromptSuggestion[]>>;
+    readonly selectedCategory: _angular_core.ModelSignal<string | undefined>;
+}
+
 // @public
 export class SiAttachmentListComponent {
     readonly alignment: _angular_core.InputSignal<"start" | "end">;
diff --git a/docs/patterns/ai/ai-chat.md b/docs/patterns/ai/ai-chat.md
index b61531b1f..08fbfdb0e 100644
--- a/docs/patterns/ai/ai-chat.md
+++ b/docs/patterns/ai/ai-chat.md
@@ -94,7 +94,7 @@ The **si-chat-container** component is a wrapper component, it has slots for
 
 The slots are:
 
-- default -> chat messages or empty state
+- default -> chat messages or initial screen (`si-welcome-screen`)
 - `si-chat-input/siChatContainerInput (helper directive)` -> For the input (whether default or custom).
 - `si-inline-notification` -> Slotted above the input for displaying the status.
 
@@ -102,4 +102,12 @@ The slots are:
 
 <si-docs-api component="SiChatContainerComponent"></si-docs-api>
 
+### Initial Screen
+
+When initially displaying a chat interface use the initial **si-welcome-screen** component that displays when there are no messages. It can be slotted into the **si-chat-container** component. It accepts prompt suggestions as an input.
+
+<si-docs-component example="si-chat-messages/si-ai-welcome-screen" height="600"></si-docs-component>
+
+<si-docs-api component="SiAiWelcomeScreenComponent"></si-docs-api>
+
 <si-docs-types></si-docs-types>
diff --git a/playwright/e2e/element-examples/static.spec.ts b/playwright/e2e/element-examples/static.spec.ts
index 7002c8182..ee5de8009 100644
--- a/playwright/e2e/element-examples/static.spec.ts
+++ b/playwright/e2e/element-examples/static.spec.ts
@@ -117,6 +117,7 @@ test('si-chat-messages/si-chat-message', ({ si }) => si.static());
 test('si-chat-messages/si-attachment-list', ({ si }) => si.static());
 test('si-chat-messages/si-chat-input', ({ si }) => si.static());
 test('si-chat-messages/si-chat-container', ({ si }) => si.static());
+test('si-chat-messages/si-ai-welcome-screen', ({ si }) => si.static());
 test('ag-grid/ag-grid-empty-state', async ({ si }) => {
   await si.static({ disabledA11yRules: ['aria-required-children'] });
 });
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-dark-linux.png
new file mode 100644
index 000000000..80b81f07f
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-dark-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cd97f4f374bd5dd61d79ae6d2d464afae647328798c009c7d4fa409d5c49a7b1
+size 47972
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-light-linux.png
new file mode 100644
index 000000000..1e25d8711
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-light-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:300c4ee4160d094e2db8839ac2dc2685763da3f08590034f64cbedd7e7bee69d
+size 48558
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen.yaml
new file mode 100644
index 000000000..f377feca1
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen.yaml
@@ -0,0 +1,12 @@
+- paragraph:
+  - strong: Hello
+  - text: ","
+- paragraph: how can I help you today?
+- checkbox "All prompts"
+- checkbox "Maintenance"
+- checkbox "Analytics"
+- checkbox "Troubleshooting"
+- button "How do I optimize performance for large datasets?"
+- button "What are the best practices for data validation?"
+- button "Help me troubleshoot this error message"
+- button "Explain the difference between async and sync operations"
\ No newline at end of file
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png
index 2c5ea0c2a..25039fddd 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d6696befb87b5c6cd435010497600c8be7867e6103c8ef01b8412198fb2e547c
-size 45722
+oid sha256:5e8ac26883f565a36ff44a23bc63499714aeb4895038f5c124ab70d5f7c95cd0
+size 46614
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.png
index 786b30a00..e0ddde630 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b16bc15018cbc13fbfbe34523b95fde06d7a8431034b6f8666fdc423a8b08c56
-size 44368
+oid sha256:4cb77388b66b148c87375b84c78f0d1ab30696f6c969baafb8406e13ae6f9118
+size 45377
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml
index 03f27a49c..df112676b 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml
@@ -23,9 +23,8 @@
   - text: mockup.png
   - button "Remove attachment mockup.png"
 - textbox "Chat message input":
-  - /placeholder: Enter a command, question or topic...
+  - /placeholder: Enter a command, question or topic…
 - button "Attach file"
-- button "Format text"
-- button "Use template"
+- button "Clear messages"
 - button "Send"
 - text: The content is AI generated. Always verify the information for accuracy.
\ No newline at end of file
diff --git a/projects/element-ng/chat-messages/index.ts b/projects/element-ng/chat-messages/index.ts
index d0442eb14..752bdfe52 100644
--- a/projects/element-ng/chat-messages/index.ts
+++ b/projects/element-ng/chat-messages/index.ts
@@ -12,3 +12,4 @@ export * from './si-chat-message-action.directive';
 export * from './si-chat-message.component';
 export * from './si-user-message.component';
 export * from './message-action.model';
+export * from './si-ai-welcome-screen.component';
diff --git a/projects/element-ng/chat-messages/si-ai-welcome-screen.component.html b/projects/element-ng/chat-messages/si-ai-welcome-screen.component.html
new file mode 100644
index 000000000..8a68039b3
--- /dev/null
+++ b/projects/element-ng/chat-messages/si-ai-welcome-screen.component.html
@@ -0,0 +1,34 @@
+<div class="d-flex flex-column gap-10 align-items-center w-100">
+  <!-- Welcome Header -->
+  <div class="welcome-header d-flex flex-column gap-4 w-100 pt-10 pb-8">
+    <ng-content />
+  </div>
+
+  <!-- Prompt Categories and Suggestions -->
+  <div class="prompt-suggestions d-flex flex-column gap-6 align-items-center w-100">
+    @if (categories().length > 0) {
+      <div class="d-flex gap-4 align-items-center w-100">
+        @for (category of categories(); track $index) {
+          <si-summary-chip
+            class="user-select-none"
+            [label]="category.label"
+            [selected]="selectedCategory() === category.label"
+            (selectedChange)="onCategoryClick(category.label)"
+          />
+        }
+      </div>
+    }
+
+    @if (filteredPromptSuggestions().length > 0) {
+      <div class="d-flex flex-column gap-4 w-100">
+        @for (suggestion of filteredPromptSuggestions(); track $index) {
+          <button si-action-card type="button" class="w-100" (click)="onPromptClick(suggestion)">
+            <div body class="card-body card-text text-white">
+              {{ suggestion.text }}
+            </div>
+          </button>
+        }
+      </div>
+    }
+  </div>
+</div>
diff --git a/projects/element-ng/chat-messages/si-ai-welcome-screen.component.scss b/projects/element-ng/chat-messages/si-ai-welcome-screen.component.scss
new file mode 100644
index 000000000..1c43e6d33
--- /dev/null
+++ b/projects/element-ng/chat-messages/si-ai-welcome-screen.component.scss
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:map';
+
+@use '@siemens/element-theme/src/styles/variables';
+
+.welcome-header {
+  max-inline-size: 720px;
+  overflow-x: visible;
+  position: relative;
+
+  &::before {
+    position: absolute;
+    content: '';
+    inset-inline-start: -104px;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    inline-size: 168px;
+    block-size: 168px;
+    background-image: variables.$element-brand-ai-key-visual;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+}
+
+:host {
+  &.si-container-xs,
+  &.si-container-sm {
+    .welcome-header::before {
+      display: none;
+    }
+  }
+}
+
+.prompt-suggestions {
+  max-inline-size: 720px;
+
+  > div:first-child {
+    flex-wrap: wrap;
+  }
+}
+
+:host {
+  inline-size: 100%;
+
+  ::ng-deep button[si-action-card] {
+    background-color: variables.$element-base-input-experimental;
+  }
+}
diff --git a/projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts b/projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts
new file mode 100644
index 000000000..20b0e3dad
--- /dev/null
+++ b/projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { provideZonelessChangeDetection } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SiAiWelcomeScreenComponent } from './si-ai-welcome-screen.component';
+
+describe('SiAiWelcomeScreenComponent', () => {
+  let component: SiAiWelcomeScreenComponent;
+  let fixture: ComponentFixture<SiAiWelcomeScreenComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SiAiWelcomeScreenComponent],
+      providers: [provideZonelessChangeDetection()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SiAiWelcomeScreenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display categories when provided', () => {
+    const categories = [{ label: 'Category 1' }, { label: 'Category 2' }];
+    fixture.componentRef.setInput('categories', categories);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    expect(compiled.textContent).toContain('Category 1');
+    expect(compiled.textContent).toContain('Category 2');
+  });
+
+  it('should display prompt suggestions when provided', () => {
+    const suggestions = [{ text: 'Suggestion 1' }, { text: 'Suggestion 2' }];
+    fixture.componentRef.setInput('promptSuggestions', suggestions);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    expect(compiled.textContent).toContain('Suggestion 1');
+    expect(compiled.textContent).toContain('Suggestion 2');
+  });
+
+  it('should emit categorySelected when category is clicked', () => {
+    const categories = [{ label: 'Category 1' }];
+    fixture.componentRef.setInput('categories', categories);
+    fixture.detectChanges();
+
+    const categoryChip = fixture.nativeElement.querySelector('si-summary-chip .chip');
+    categoryChip?.click();
+    fixture.detectChanges();
+
+    expect(component.selectedCategory()).toBe('Category 1');
+  });
+
+  it('should emit promptSelected when suggestion is clicked', () => {
+    const suggestion = { text: 'Suggestion 1' };
+    fixture.componentRef.setInput('promptSuggestions', [suggestion]);
+    fixture.detectChanges();
+
+    const emitSpy = spyOn(component.promptSelected, 'emit');
+    const suggestionButton = fixture.nativeElement.querySelector('button');
+    suggestionButton?.click();
+
+    expect(emitSpy).toHaveBeenCalledWith(suggestion);
+  });
+
+  it('should hide categories when no categories provided', () => {
+    fixture.componentRef.setInput('categories', []);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    const categoryChips = compiled.querySelectorAll('si-summary-chip');
+    expect(categoryChips.length).toBe(0);
+  });
+
+  it('should hide suggestions when no suggestions provided', () => {
+    fixture.componentRef.setInput('promptSuggestions', []);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    const actionCards = compiled.querySelectorAll('[si-action-card]');
+    expect(actionCards.length).toBe(0);
+  });
+});
diff --git a/projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts b/projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts
new file mode 100644
index 000000000..8db1d7fe2
--- /dev/null
+++ b/projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { Component, computed, input, model, output } from '@angular/core';
+import { SiActionCardComponent } from '@siemens/element-ng/card';
+import { SiIconComponent } from '@siemens/element-ng/icon';
+import { SiResponsiveContainerDirective } from '@siemens/element-ng/resize-observer';
+import { SiSummaryChipComponent } from '@siemens/element-ng/summary-chip';
+
+export interface PromptCategory {
+  label: string;
+}
+
+export interface PromptSuggestion {
+  text: string;
+}
+
+/**
+ * AI welcome screen component for displaying initial state in AI chat interfaces.
+ *
+ * The AI welcome screen component provides an engaging initial state for AI chat interfaces,
+ * featuring a welcome message, optional prompt categories for filtering, and suggested prompts
+ * that users can click to start conversations.
+ *
+ * The component includes:
+ * - Welcome header with AI branding and customizable greeting
+ * - Optional category pills for filtering prompt suggestions
+ * - Clickable prompt suggestion cards
+ * - Optional refresh button to regenerate suggestions
+ *
+ * @see {@link SiAiChatContainerComponent} for the AI chat container which uses this component
+ * @see {@link SiChatContainerComponent} for the base chat container
+ *
+ * @experimental
+ */
+@Component({
+  selector: 'si-ai-welcome-screen',
+  imports: [SiActionCardComponent, SiSummaryChipComponent, SiIconComponent],
+  templateUrl: './si-ai-welcome-screen.component.html',
+  styleUrl: './si-ai-welcome-screen.component.scss',
+  host: {
+    class: 'd-block'
+  },
+  hostDirectives: [SiResponsiveContainerDirective]
+})
+export class SiAiWelcomeScreenComponent {
+  /**
+   * The list of prompt categories
+   * @defaultValue []
+   */
+  readonly categories = input<PromptCategory[]>([]);
+
+  /**
+   * The currently selected category ID
+   * @defaultValue undefined
+   */
+  readonly selectedCategory = model<string | undefined>(undefined);
+
+  /**
+   * The list of prompt suggestions, either as an array or a record mapping category labels to suggestion arrays
+   * @defaultValue []
+   */
+  readonly promptSuggestions = input<PromptSuggestion[] | Record<string, PromptSuggestion[]>>([]);
+
+  /**
+   * Computed list of filtered prompt suggestions based on selected category
+   */
+  protected readonly filteredPromptSuggestions = computed(() => {
+    const suggestions = this.promptSuggestions();
+    const selected = this.selectedCategory();
+
+    // If suggestions is an array, return as-is (no filtering)
+    if (Array.isArray(suggestions)) {
+      return suggestions;
+    }
+
+    // If suggestions is a record and a category is selected, return that category's suggestions
+    if (selected && suggestions[selected]) {
+      return suggestions[selected];
+    }
+
+    // If no category selected, return all suggestions flattened
+    return Object.values(suggestions).flat();
+  });
+
+  /**
+   * Emitted when a prompt suggestion is clicked
+   */
+  readonly promptSelected = output<PromptSuggestion>();
+
+  protected onCategoryClick(categoryLabel: string): void {
+    this.selectedCategory.set(
+      this.selectedCategory() === categoryLabel ? undefined : categoryLabel
+    );
+  }
+
+  protected onPromptClick(suggestion: PromptSuggestion): void {
+    this.promptSelected.emit(suggestion);
+  }
+}
diff --git a/projects/element-ng/chat-messages/si-chat-container.component.scss b/projects/element-ng/chat-messages/si-chat-container.component.scss
index b47fdab0a..a0b4b412d 100644
--- a/projects/element-ng/chat-messages/si-chat-container.component.scss
+++ b/projects/element-ng/chat-messages/si-chat-container.component.scss
@@ -20,6 +20,20 @@
     scroll-behavior: smooth;
   }
 
+  ::ng-deep &:has(si-ai-welcome-screen) {
+    inline-size: 100%;
+    // stylelint-disable-next-line declaration-no-important
+    padding-inline-start: 0 !important;
+    // stylelint-disable-next-line declaration-no-important
+    padding-inline-end: 0 !important;
+
+    .chat-input-area,
+    si-ai-welcome-screen {
+      padding-inline-start: map.get(variables.$spacers, 6);
+      padding-inline-end: map.get(variables.$spacers, 6);
+    }
+  }
+
   // Ensure the container can grow to fill available space
   min-block-size: 0;
   overflow-y: hidden;
@@ -27,7 +41,6 @@
 }
 
 .messages-container {
-  max-inline-size: 720px;
   overflow-y: auto;
   overflow-x: visible;
   gap: map.get(variables.$spacers, 9) + map.get(variables.$spacers, 4);
@@ -36,6 +49,14 @@
   ::ng-deep si-user-message:not(.last) {
     margin-block-end: -1 * (map.get(variables.$spacers, 9) + map.get(variables.$spacers, 4));
   }
+
+  ::ng-deep &:not(:has(si-ai-welcome-screen)) {
+    max-inline-size: 720px;
+  }
+
+  ::ng-deep &:has(si-ai-welcome-screen) {
+    inline-size: 100%;
+  }
 }
 
 .chat-input-area {
@@ -43,7 +64,10 @@
   align-self: center;
   overflow: visible;
   inline-size: 100%;
-  max-inline-size: 720px;
+
+  > ::ng-deep * {
+    max-inline-size: 720px;
+  }
 
   &:empty,
   &:has([sichatcontainerinput]:empty) {
diff --git a/projects/element-theme/src/styles/variables/_semantic-tokens.scss b/projects/element-theme/src/styles/variables/_semantic-tokens.scss
index f5e88fe35..b5a038597 100644
--- a/projects/element-theme/src/styles/variables/_semantic-tokens.scss
+++ b/projects/element-theme/src/styles/variables/_semantic-tokens.scss
@@ -88,6 +88,7 @@ $element-brand-logo: var(--element-brand-logo);
 $element-brand-logo-width: var(--element-brand-logo-width);
 $element-brand-logo-height: var(--element-brand-logo-height);
 $element-brand-logo-text: var(--element-brand-logo-text);
+$element-brand-ai-key-visual: var(--element-brand-ai-key-visual);
 
 $element-company-name: var(--element-company-name);
 
diff --git a/projects/element-theme/src/theme/_theme-element.scss b/projects/element-theme/src/theme/_theme-element.scss
index 45561deb6..35441ab31 100644
--- a/projects/element-theme/src/theme/_theme-element.scss
+++ b/projects/element-theme/src/theme/_theme-element.scss
@@ -217,7 +217,9 @@ $theme-element-light: (
   element-feedback-icon-valid:
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231c703f' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M222.25 345.88c-5.12 0-10.24-1.95-14.14-5.86l-56.25-56.25c-7.81-7.81-7.81-20.47 0-28.28s20.47-7.81 28.28 0l42.11 42.11 109.61-109.61c7.81-7.81 20.47-7.81 28.28 0s7.81 20.47 0 28.28L236.39 340.02a19.92 19.92 0 0 1-14.14 5.86Z'/%3E%3Cpath d='M256 448c-105.87 0-192-86.13-192-192S150.13 64 256 64s192 86.13 192 192-86.13 192-192 192Zm0-348c-86.02 0-156 69.98-156 156s69.98 156 156 156 156-69.98 156-156-69.98-156-156-156Z'/%3E%3C/svg%3E"),
   element-launchpad-app-background: base.$color-blue-300,
-  element-launchpad-app-color: base.$color-black
+  element-launchpad-app-color: base.$color-black,
+  element-ai-key-visual:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168' fill='none'><path d='M97.2819 76.1142L95.3187 76.5196C94.4108 76.7071 93.7007 77.4165 93.5132 78.3251L93.1077 80.2884C92.971 80.9493 92.0272 80.9493 91.8905 80.2884L91.4851 78.3251C91.2976 77.4173 90.5882 76.7071 89.6796 76.5196L87.7163 76.1142C87.0554 75.9774 87.0554 75.0337 87.7163 74.897L89.6796 74.4915C90.5874 74.304 91.2976 73.5946 91.4851 72.686L91.8905 70.7228C92.0272 70.0618 92.971 70.0618 93.1077 70.7228L93.5132 72.686C93.7007 73.5938 94.4101 74.304 95.3187 74.4915L97.2819 74.897C97.9429 75.0337 97.9429 75.9774 97.2819 76.1142Z' fill='black'/><path d='M91.3179 86.7454L87.046 87.979C85.8296 88.3306 84.8788 89.2813 84.5288 90.4978L83.2976 94.772C83.0241 95.722 81.678 95.722 81.4046 94.772L80.1733 90.4978C79.8226 89.2813 78.8726 88.3298 77.6562 87.979L73.3843 86.7454C72.4351 86.4712 72.4351 85.1267 73.3843 84.8524L77.6562 83.6188C78.8726 83.2673 79.8233 82.3165 80.1733 81.1001L81.4046 76.8259C81.678 75.8759 83.0241 75.8759 83.2976 76.8259L84.5288 81.1001C84.8796 82.3165 85.8296 83.2681 87.046 83.6188L91.3179 84.8524C92.2671 85.1267 92.2671 86.4712 91.3179 86.7454Z' fill='black'/></svg>")
 );
 
 $theme-element-dark: (
@@ -366,5 +368,7 @@ $theme-element-dark: (
   element-feedback-icon-valid:
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328bf66' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M222.25 345.88c-5.12 0-10.24-1.95-14.14-5.86l-56.25-56.25c-7.81-7.81-7.81-20.47 0-28.28s20.47-7.81 28.28 0l42.11 42.11 109.61-109.61c7.81-7.81 20.47-7.81 28.28 0s7.81 20.47 0 28.28L236.39 340.02a19.92 19.92 0 0 1-14.14 5.86Z'/%3E%3Cpath d='M256 448c-105.87 0-192-86.13-192-192S150.13 64 256 64s192 86.13 192 192-86.13 192-192 192Zm0-348c-86.02 0-156 69.98-156 156s69.98 156 156 156 156-69.98 156-156-69.98-156-156-156Z'/%3E%3C/svg%3E"),
   element-launchpad-app-background: base.$color-blue-300,
-  element-launchpad-app-color: base.$color-black
+  element-launchpad-app-color: base.$color-black,
+  element-ai-key-visual:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168' fill='none'><path d='M97.2819 76.1142L95.3187 76.5196C94.4108 76.7071 93.7007 77.4165 93.5132 78.3251L93.1077 80.2884C92.971 80.9493 92.0272 80.9493 91.8905 80.2884L91.4851 78.3251C91.2976 77.4173 90.5882 76.7071 89.6796 76.5196L87.7163 76.1142C87.0554 75.9774 87.0554 75.0337 87.7163 74.897L89.6796 74.4915C90.5874 74.304 91.2976 73.5946 91.4851 72.686L91.8905 70.7228C92.0272 70.0618 92.971 70.0618 93.1077 70.7228L93.5132 72.686C93.7007 73.5938 94.4101 74.304 95.3187 74.4915L97.2819 74.897C97.9429 75.0337 97.9429 75.9774 97.2819 76.1142Z' fill='white'/><path d='M91.3179 86.7454L87.046 87.979C85.8296 88.3306 84.8788 89.2813 84.5288 90.4978L83.2976 94.772C83.0241 95.722 81.678 95.722 81.4046 94.772L80.1733 90.4978C79.8226 89.2813 78.8726 88.3298 77.6562 87.979L73.3843 86.7454C72.4351 86.4712 72.4351 85.1267 73.3843 84.8524L77.6562 83.6188C78.8726 83.2673 79.8233 82.3165 80.1733 81.1001L81.4046 76.8259C81.678 75.8759 83.0241 75.8759 83.2976 76.8259L84.5288 81.1001C84.8796 82.3165 85.8296 83.2681 87.046 83.6188L91.3179 84.8524C92.2671 85.1267 92.2671 86.4712 91.3179 86.7454Z' fill='white'/></svg>")
 );
diff --git a/src/app/examples/si-chat-messages/si-ai-welcome-screen.html b/src/app/examples/si-chat-messages/si-ai-welcome-screen.html
new file mode 100644
index 000000000..b6c9dc16f
--- /dev/null
+++ b/src/app/examples/si-chat-messages/si-ai-welcome-screen.html
@@ -0,0 +1,11 @@
+<div class="p-5">
+  <si-ai-welcome-screen
+    [categories]="promptCategories"
+    [promptSuggestions]="promptSuggestions()"
+    [(selectedCategory)]="selectedCategory"
+    (promptSelected)="onPromptSelected($event)"
+  >
+    <p class="h1 mb-0 text-white"> <strong>Hello</strong>, </p>
+    <p class="h1 mb-0 text-white">how can I help you today?</p>
+  </si-ai-welcome-screen>
+</div>
diff --git a/src/app/examples/si-chat-messages/si-ai-welcome-screen.ts b/src/app/examples/si-chat-messages/si-ai-welcome-screen.ts
new file mode 100644
index 000000000..acccb5517
--- /dev/null
+++ b/src/app/examples/si-chat-messages/si-ai-welcome-screen.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { Component, inject, signal } from '@angular/core';
+import {
+  SiAiWelcomeScreenComponent,
+  PromptCategory,
+  PromptSuggestion
+} from '@siemens/element-ng/chat-messages';
+import { LOG_EVENT } from '@siemens/live-preview';
+
+@Component({
+  selector: 'app-sample',
+  imports: [SiAiWelcomeScreenComponent],
+  templateUrl: './si-ai-welcome-screen.html'
+})
+export class SampleComponent {
+  private logEvent = inject(LOG_EVENT);
+
+  readonly promptCategories: PromptCategory[] = [
+    { label: 'All prompts' },
+    { label: 'Maintenance' },
+    { label: 'Analytics' },
+    { label: 'Troubleshooting' }
+  ];
+
+  readonly selectedCategory = signal<string>('All prompts');
+
+  readonly allSuggestions: PromptSuggestion[] = [
+    { text: 'How do I optimize performance for large datasets?' },
+    { text: 'What are the best practices for data validation?' },
+    { text: 'Help me troubleshoot this error message' },
+    { text: 'Explain the difference between async and sync operations' }
+  ];
+
+  readonly promptSuggestions = signal<PromptSuggestion[]>(this.allSuggestions);
+
+  onPromptSelected(suggestion: PromptSuggestion): void {
+    this.logEvent(`Prompt selected: ${suggestion.text}`);
+  }
+}
diff --git a/src/app/examples/si-chat-messages/si-chat-container.html b/src/app/examples/si-chat-messages/si-chat-container.html
index f9beb0363..74ed91db6 100644
--- a/src/app/examples/si-chat-messages/si-chat-container.html
+++ b/src/app/examples/si-chat-messages/si-chat-container.html
@@ -38,6 +38,16 @@
           }
         </si-chat-message>
       }
+    } @empty {
+      <si-ai-welcome-screen
+        [categories]="promptCategories"
+        [promptSuggestions]="filteredPromptSuggestions()"
+        [(selectedCategory)]="selectedCategory"
+        (promptSelected)="onPromptSelected($event)"
+      >
+        <p class="h1 mb-0 text-white"> <strong>Hello</strong>, </p>
+        <p class="h1 mb-0 text-white">how can I help you today?</p>
+      </si-ai-welcome-screen>
     }
 
     @if (
@@ -46,11 +56,13 @@
       <si-ai-message content="" [loading]="true" />
     }
 
-    <si-inline-notification
-      class="mb-6 w-100 overflow-hidden"
-      severity="info"
-      message="AI responses are for demonstration purposes."
-    />
+    @if (!firstMessageSent() && messages().length) {
+      <si-inline-notification
+        class="mb-6 w-100 overflow-hidden"
+        severity="info"
+        message="AI responses are for demonstration purposes."
+      />
+    }
 
     <si-chat-input
       class="w-100"
@@ -68,7 +80,18 @@
       (send)="onMessageSent($event)"
       (interrupt)="onInterrupt()"
       (fileError)="onFileError($event)"
-    />
+    >
+      @if (messages().length) {
+        <button
+          type="button"
+          class="btn btn-tertiary btn-sm"
+          title="Show welcome screen"
+          (click)="onShowWelcomeScreen()"
+        >
+          Show Welcome Screen
+        </button>
+      }
+    </si-chat-input>
   </si-chat-container>
 </div>
 
diff --git a/src/app/examples/si-chat-messages/si-chat-container.ts b/src/app/examples/si-chat-messages/si-chat-container.ts
index 456215775..abb22b536 100644
--- a/src/app/examples/si-chat-messages/si-chat-container.ts
+++ b/src/app/examples/si-chat-messages/si-chat-container.ts
@@ -23,7 +23,10 @@ import {
   MessageAction,
   SiChatMessageActionDirective,
   SiAttachmentListComponent,
-  Attachment
+  Attachment,
+  SiAiWelcomeScreenComponent,
+  PromptCategory,
+  PromptSuggestion
 } from '@siemens/element-ng/chat-messages';
 import { FileUploadError } from '@siemens/element-ng/file-uploader';
 import { SiIconComponent } from '@siemens/element-ng/icon';
@@ -58,7 +61,8 @@ interface ChatMessage {
     SiIconComponent,
     SiMarkdownRendererComponent,
     SiChatMessageActionDirective,
-    SiAttachmentListComponent
+    SiAttachmentListComponent,
+    SiAiWelcomeScreenComponent
   ],
   templateUrl: './si-chat-container.html',
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -209,17 +213,13 @@ export class SampleComponent {
   readonly disableInterrupt = signal(false);
   readonly interrupting = signal(false);
   readonly inputValue = signal('');
+  readonly firstMessageSent = signal(false);
 
   inputActions: MessageAction[] = [
     {
-      label: 'Format text',
-      icon: 'element-brush',
-      action: () => this.logEvent('Format text clicked')
-    },
-    {
-      label: 'Use template',
-      icon: 'element-template',
-      action: () => this.logEvent('Use template clicked')
+      label: 'Clear messages',
+      icon: 'element-delete',
+      action: () => this.onClearMessages()
     }
   ];
 
@@ -251,8 +251,50 @@ export class SampleComponent {
     }
   ];
 
+  readonly promptCategories: PromptCategory[] = [
+    { label: 'All prompts' },
+    { label: 'Maintenance' },
+    { label: 'Category 2' },
+    { label: 'Category 3' }
+  ];
+
+  readonly selectedCategory = signal<string>('All prompts');
+
+  readonly allPromptSuggestions: PromptSuggestion[] = [
+    { text: 'How do I optimize performance for large datasets?' },
+    { text: 'What are the best practices for data validation?' },
+    { text: 'Help me troubleshoot this error message' },
+    { text: 'Explain the difference between async and sync operations' }
+  ];
+
+  readonly filteredPromptSuggestions = signal<PromptSuggestion[]>(this.allPromptSuggestions);
+
+  onPromptSelected(suggestion: PromptSuggestion): void {
+    this.logEvent(`Prompt selected: ${suggestion.text}`);
+    this.inputValue.set('');
+    this.firstMessageSent.set(true);
+    this.onMessageSent({ content: suggestion.text, attachments: [] });
+  }
+
+  onClearMessages(): void {
+    this.logEvent('Clear messages clicked');
+    this.messages.set([]);
+    setTimeout(() => {
+      this.chatContainer()?.scrollToTop();
+    });
+  }
+
+  onShowWelcomeScreen(): void {
+    this.logEvent('Show welcome screen clicked');
+    this.messages.set([]);
+    setTimeout(() => {
+      this.chatContainer()?.scrollToTop();
+    });
+  }
+
   onMessageSent(event: { content: string; attachments: ChatInputAttachment[] }): void {
     this.logEvent(`Message sent: "${event.content}" with ${event.attachments.length} attachments`);
+    this.firstMessageSent.set(true);
     this.messages.update(current => [
       ...current,
       {

From 534316eae7faeaa996a868c48bff74b4a031947e Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Thu, 15 Jan 2026 10:53:19 +0100
Subject: [PATCH 28/30] feat(chat-messages): add ai chat container

---
 .../element-ng/chat-messages/index.api.md     |  80 ++-
 api-goldens/element-ng/translate/index.api.md |   6 +
 .../chat-messages/chat-message.model.ts       | 132 +++++
 projects/element-ng/chat-messages/index.ts    |   5 +-
 .../chat-messages/message-action.model.ts     |  29 -
 .../si-ai-chat-container.component.html       |  69 +++
 .../si-ai-chat-container.component.spec.ts    | 462 ++++++++++++++++
 .../si-ai-chat-container.component.ts         | 509 ++++++++++++++++++
 .../si-ai-message.component.spec.ts           |   2 +-
 .../chat-messages/si-ai-message.component.ts  |   5 +-
 .../si-attachment-list.component.spec.ts      |   6 +-
 .../si-attachment-list.component.ts           |  18 +-
 .../si-chat-container.component.scss          |  10 -
 .../si-chat-container.component.ts            |   3 +-
 .../si-chat-input.component.spec.ts           |   2 +-
 .../chat-messages/si-chat-input.component.ts  |  61 ++-
 .../si-chat-message.component.ts              |   6 +-
 .../si-user-message.component.spec.ts         |   3 +-
 .../si-user-message.component.ts              |   5 +-
 .../si-translatable-keys.interface.ts         |   3 +
 20 files changed, 1335 insertions(+), 81 deletions(-)
 create mode 100644 projects/element-ng/chat-messages/chat-message.model.ts
 delete mode 100644 projects/element-ng/chat-messages/message-action.model.ts
 create mode 100644 projects/element-ng/chat-messages/si-ai-chat-container.component.html
 create mode 100644 projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
 create mode 100644 projects/element-ng/chat-messages/si-ai-chat-container.component.ts

diff --git a/api-goldens/element-ng/chat-messages/index.api.md b/api-goldens/element-ng/chat-messages/index.api.md
index 26acda975..cd7b100b6 100644
--- a/api-goldens/element-ng/chat-messages/index.api.md
+++ b/api-goldens/element-ng/chat-messages/index.api.md
@@ -7,24 +7,41 @@
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
 import * as _angular_core from '@angular/core';
+import { BackgroundColorVariant } from '@siemens/element-ng/common';
 import { ElementRef } from '@angular/core';
 import { FileUploadError } from '@siemens/element-ng/file-uploader';
 import * as i1 from '@siemens/element-ng/resize-observer';
+import { isSignal } from '@angular/core';
 import { MenuItem } from '@siemens/element-ng/menu';
 import { OnDestroy } from '@angular/core';
 import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
+import { Signal } from '@angular/core';
 import { SiModalService } from '@siemens/element-ng/modal';
 import { TemplateRef } from '@angular/core';
 import { TranslatableString } from '@siemens/element-translate-ng/translate-types';
 import { TranslatableString as TranslatableString_2 } from '@siemens/element-translate-ng/translate';
 import { UploadFile } from '@siemens/element-ng/file-uploader';
 
+// @public
+export interface AiChatMessage extends BaseChatMessage {
+    actions?: MessageAction[];
+    content: string | Signal<string>;
+    type: 'ai';
+}
+
 // @public
 export interface Attachment {
     name: string;
     previewTemplate?: TemplateRef<any> | (() => TemplateRef<any>);
 }
 
+// @public
+export interface BaseChatMessage {
+    content?: string | Signal<string>;
+    loading?: boolean | Signal<boolean>;
+    type: 'user' | 'ai';
+}
+
 // @public
 export interface ChatInputAttachment extends Attachment {
     file: File;
@@ -32,6 +49,9 @@ export interface ChatInputAttachment extends Attachment {
     type: string;
 }
 
+// @public
+export type ChatMessage = UserChatMessage | AiChatMessage | TemplateChatMessage;
+
 // @public
 export interface MessageAction {
     action: (actionParam: any, source: this) => void;
@@ -52,6 +72,43 @@ export interface PromptSuggestion {
     text: string;
 }
 
+// @public
+export class SiAiChatContainerComponent {
+    constructor();
+    readonly aiIcon: _angular_core.InputSignal<string>;
+    readonly colorVariant: _angular_core.InputSignal<BackgroundColorVariant>;
+    readonly copyCodeButtonLabel: _angular_core.InputSignal<TranslatableString_2>;
+    readonly disableCopyCodeButton: _angular_core.InputSignal<boolean>;
+    readonly disableDownloadTableButton: _angular_core.InputSignal<boolean>;
+    readonly disableInterrupt: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly downloadTableButtonLabel: _angular_core.InputSignal<TranslatableString_2>;
+    focus(): void;
+    readonly greeting: _angular_core.InputSignal<TranslatableString_2>;
+    readonly interrupting: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly latexRenderer: _angular_core.InputSignal<((latex: string, displayMode: boolean) => string | undefined) | undefined>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly messages: _angular_core.InputSignal<ChatMessage[] | undefined>;
+    readonly messageSent: _angular_core.OutputEmitterRef<{
+        content: string;
+        attachments: ChatInputAttachment[];
+    }>;
+    readonly noAutoScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly promptSuggestions: _angular_core.InputSignal<PromptSuggestion[] | Record<string, PromptSuggestion[]>>;
+    scrollToBottom(): void;
+    readonly secondaryActionsLabel: _angular_core.InputSignal<TranslatableString_2>;
+    readonly sending: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly statusAction: _angular_core.InputSignal<{
+        title: string;
+        href: string;
+        target?: string;
+    } | undefined>;
+    readonly statusHeading: _angular_core.InputSignal<string | undefined>;
+    readonly statusMessage: _angular_core.InputSignal<string | undefined>;
+    readonly statusSeverity: _angular_core.InputSignal<"info" | "success" | "warning" | "danger" | "caution" | "critical" | undefined>;
+    readonly syntaxHighlighter: _angular_core.InputSignal<((code: string, language?: string) => string | undefined) | undefined>;
+    readonly welcomeMessage: _angular_core.InputSignal<TranslatableString_2>;
+}
+
 // @public
 export class SiAiMessageComponent {
     constructor();
@@ -96,7 +153,8 @@ export class SiChatContainerInputDirective {
 }
 
 // @public
-export class SiChatInputComponent implements AfterViewInit {
+export class SiChatInputComponent implements AfterViewInit, OnDestroy {
+    constructor();
     readonly accept: _angular_core.InputSignal<string | undefined>;
     readonly actionParam: _angular_core.InputSignal<any>;
     readonly actions: _angular_core.InputSignal<MessageAction[]>;
@@ -110,11 +168,13 @@ export class SiChatInputComponent implements AfterViewInit {
     focus(): void;
     readonly interrupt: _angular_core.OutputEmitterRef<void>;
     readonly interruptButtonLabel: _angular_core.InputSignal<TranslatableString_2>;
-    readonly interruptible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly interruptible: _angular_core.ModelSignal<boolean>;
     readonly label: _angular_core.InputSignal<string>;
     readonly maxFileSize: _angular_core.InputSignal<number>;
     readonly maxLength: _angular_core.InputSignal<number | undefined>;
     readonly placeholder: _angular_core.InputSignal<TranslatableString_2>;
+    // (undocumented)
+    registerParent(sending: Signal<boolean>, interruptible: Signal<boolean>, sendListener?: () => void): void;
     readonly removeAttachmentLabel: _angular_core.InputSignal<TranslatableString_2>;
     readonly secondaryActions: _angular_core.InputSignal<MenuItem[]>;
     readonly secondaryActionsLabel: _angular_core.InputSignal<TranslatableString_2>;
@@ -124,7 +184,7 @@ export class SiChatInputComponent implements AfterViewInit {
     }>;
     readonly sendButtonIcon: _angular_core.InputSignal<string>;
     readonly sendButtonLabel: _angular_core.InputSignal<TranslatableString_2>;
-    readonly sending: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly sending: _angular_core.ModelSignal<boolean>;
     readonly value: _angular_core.ModelSignal<string>;
 }
 
@@ -155,6 +215,20 @@ export class SiUserMessageComponent {
     readonly secondaryActionsLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
 }
 
+// @public
+export interface TemplateChatMessage {
+    template: TemplateRef<any>;
+    templateContext?: any;
+}
+
+// @public
+export interface UserChatMessage extends BaseChatMessage {
+    actions?: MessageAction[];
+    attachments?: Attachment[];
+    content: string;
+    type: 'user';
+}
+
 // (No @packageDocumentation comment for this package)
 
 ```
diff --git a/api-goldens/element-ng/translate/index.api.md b/api-goldens/element-ng/translate/index.api.md
index 8d5d4c4cc..0e2950a37 100644
--- a/api-goldens/element-ng/translate/index.api.md
+++ b/api-goldens/element-ng/translate/index.api.md
@@ -11,6 +11,12 @@ export const provideSiTranslatableOverrides: (values: SiTranslatableKeys) => Pro
 
 // @public (undocumented)
 export interface SiTranslatableKeys {
+    // (undocumented)
+    'SI_AI_CHAT_CONTAINER.SECONDARY_ACTIONS'?: string;
+    // (undocumented)
+    'SI_AI_CHAT_CONTAINER.WELCOME_GREETING'?: string;
+    // (undocumented)
+    'SI_AI_CHAT_CONTAINER.WELCOME_MESSAGE'?: string;
     // (undocumented)
     'SI_AI_MESSAGE.SECONDARY_ACTIONS'?: string;
     // (undocumented)
diff --git a/projects/element-ng/chat-messages/chat-message.model.ts b/projects/element-ng/chat-messages/chat-message.model.ts
new file mode 100644
index 000000000..4ab42a547
--- /dev/null
+++ b/projects/element-ng/chat-messages/chat-message.model.ts
@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import type { Signal, TemplateRef } from '@angular/core';
+import type { TranslatableString } from '@siemens/element-translate-ng/translate-types';
+
+/**
+ * Actions for messages representing an action with icon, label (for accessibility), and handler.
+ * Only the icon will be displayed.
+ *
+ * @see {@link SiUserMessageComponent} for the user message where this is used
+ * @see {@link SiAiMessageComponent} for the AI message where this is used
+ * @see {@link SiAiChatContainerComponent} for the AI chat container where these actions are used
+ *
+ * @experimental
+ */
+export interface MessageAction {
+  /** Label that is shown to the user. */
+  label: TranslatableString;
+  /**
+   * Icon used to represent the action
+   */
+  icon: string;
+  /**
+   * Action that is called when the item is triggered.
+   */
+  action: (actionParam: any, source: this) => void;
+  /** Whether the menu item is disabled. */
+  disabled?: boolean;
+}
+
+/**
+ * Attachment item interface for file attachments in chat messages, used by {@link SiAttachmentListComponent} and inside {@link SiUserMessageComponent} as well as {@link SiChatInputComponent}.
+ *
+ * @see {@link SiAttachmentListComponent} for the attachment list component
+ * @see {@link SiUserMessageComponent} for the user message
+ * @see {@link SiChatInputComponent} for the chat input component
+ *
+ * @experimental
+ */
+export interface Attachment {
+  /** File name */
+  name: string;
+  /** Optionally show a preview of the attachment by providing a template that is shown in a modal when clicked (optional) */
+  previewTemplate?: TemplateRef<any> | (() => TemplateRef<any>);
+}
+
+/**
+ * Base interface for all chat messages. Messages can be rendered either with content
+ * or with a custom template for advanced styling and functionality.
+ *
+ * @see {@link ChatMessage} for the chat message type union
+ * @see {@link UserChatMessage} for user messages
+ * @see {@link AiChatMessage} for AI messages
+ * @see {@link TemplateChatMessage} for template-based messages
+ *
+ * @experimental
+ */
+export interface BaseChatMessage {
+  /** Type of message */
+  type: 'user' | 'ai';
+  /** Message content - can be a string or a Signal<string>, empty string shows loading state */
+  content?: string | Signal<string>;
+  /** Whether the message is currently loading/being generated - can be a boolean or Signal<boolean> */
+  loading?: boolean | Signal<boolean>;
+}
+
+/**
+ * User chat message for AI chats
+ *
+ * @see {@link SiAiChatContainerComponent} for the AI chat container where this is used
+ *
+ * @experimental
+ */
+export interface UserChatMessage extends BaseChatMessage {
+  /** Type of message */
+  type: 'user';
+  /** Message content, should be a string, empty string shows loading state */
+  content: string;
+  /** Attachments (for user messages) */
+  attachments?: Attachment[];
+  /** Actions available for this message */
+  actions?: MessageAction[];
+}
+
+/**
+ * AI chat message
+ *
+ * @see {@link SiAiChatContainerComponent} for the AI chat container where this is used
+ *
+ * @experimental
+ */
+export interface AiChatMessage extends BaseChatMessage {
+  /** Type of message */
+  type: 'ai';
+  /** Message content - can be a string or a Signal<string>, empty string shows loading state, set signal back to string to end "streaming" state */
+  content: string | Signal<string>;
+  /** Actions available for this message */
+  actions?: MessageAction[];
+}
+
+/**
+ * Render custom chat message via template, consider using {@link SiChatMessageComponent} inside the template for consistent styling
+ *
+ * @see {@link SiAiChatContainerComponent} for the AI chat container where this is used
+ * @see {@link SiChatMessageComponent} for the chat message wrapper component which can be used inside the template
+ *
+ * @experimental
+ */
+export interface TemplateChatMessage {
+  /**
+   * Template to render the message
+   */
+  template: TemplateRef<any>;
+
+  /** Context data to pass to the template */
+  templateContext?: any;
+}
+
+/**
+ * Chat message type union of all supported message types in the AI chat container.
+ *
+ * @see {@link UserChatMessage} for user messages
+ * @see {@link AiChatMessage} for AI messages
+ * @see {@link TemplateChatMessage} for template-based messages
+ * @see {@link BaseChatMessage} for the base chat message interface
+ * @see {@link SiAiChatContainerComponent} for the AI chat container where this is used
+ *
+ * @experimental
+ */
+export type ChatMessage = UserChatMessage | AiChatMessage | TemplateChatMessage;
diff --git a/projects/element-ng/chat-messages/index.ts b/projects/element-ng/chat-messages/index.ts
index 752bdfe52..551f8da51 100644
--- a/projects/element-ng/chat-messages/index.ts
+++ b/projects/element-ng/chat-messages/index.ts
@@ -2,6 +2,7 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+export * from './chat-message.model';
 export * from './si-ai-message.component';
 export * from './si-attachment-list.component';
 export * from './si-chat-container.component';
@@ -11,5 +12,7 @@ export * from './si-chat-input-disclaimer.directive';
 export * from './si-chat-message-action.directive';
 export * from './si-chat-message.component';
 export * from './si-user-message.component';
-export * from './message-action.model';
+export * from './chat-message.model';
+export * from './si-ai-welcome-screen.component';
+export * from './si-ai-chat-container.component';
 export * from './si-ai-welcome-screen.component';
diff --git a/projects/element-ng/chat-messages/message-action.model.ts b/projects/element-ng/chat-messages/message-action.model.ts
deleted file mode 100644
index aa7b25239..000000000
--- a/projects/element-ng/chat-messages/message-action.model.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-import type { TranslatableString } from '@siemens/element-translate-ng/translate-types';
-
-/**
- * Actions for messages representing an action with icon, label (for accessibility), and handler, for use within {@link SiAiMessageComponent} and {@link SiUserMessageComponent}.
- * Only the icon will be displayed.
- *
- * @see {@link SiAiMessageComponent} for the AI message
- * @see {@link SiUserMessageComponent} for thee user message
- *
- * @experimental
- */
-export interface MessageAction {
-  /** Label that is shown to the user. */
-  label: TranslatableString;
-  /**
-   * Icon used to represent the action
-   */
-  icon: string;
-  /**
-   * Action that is called when the item is triggered.
-   */
-  action: (actionParam: any, source: this) => void;
-  /** Whether the menu item is disabled. */
-  disabled?: boolean;
-}
diff --git a/projects/element-ng/chat-messages/si-ai-chat-container.component.html b/projects/element-ng/chat-messages/si-ai-chat-container.component.html
new file mode 100644
index 000000000..6571fc7af
--- /dev/null
+++ b/projects/element-ng/chat-messages/si-ai-chat-container.component.html
@@ -0,0 +1,69 @@
+<si-chat-container [colorVariant]="colorVariant()" [noAutoScroll]="noAutoScroll() || isEmpty()">
+  @if (isEmpty()) {
+    <si-ai-welcome-screen
+      [categories]="promptCategories()"
+      [selectedCategory]="selectedCategory()"
+      [promptSuggestions]="promptSuggestions()"
+      (selectedCategoryChange)="selectedCategory.set($event)"
+      (promptSelected)="onPromptSelected($event)"
+    >
+      <p class="h1 mb-0 text-white">
+        <strong>{{ greeting() | translate }}</strong>
+      </p>
+      <p class="h1 mb-0 text-white">{{ welcomeMessage() | translate }}</p>
+      <ng-content select="[welcomeScreen]" />
+    </si-ai-welcome-screen>
+  }
+
+  @if (displayMessages() !== undefined) {
+    @for (message of displayMessages(); track $index) {
+      @if (isTemplateMessage(message)) {
+        <ng-container
+          [ngTemplateOutlet]="message.template"
+          [ngTemplateOutletContext]="message.templateContext ?? message"
+        />
+      } @else {
+        @if (message.type === 'user') {
+          <si-user-message
+            [class.last]="$last"
+            [content]="getContentValue(message.content)"
+            [attachments]="message.attachments || []"
+            [actions]="getMessagePrimaryActions(message)"
+            [secondaryActions]="getMessageSecondaryActions(message)"
+            [actionParam]="message"
+            [secondaryActionsLabel]="secondaryActionsLabel()"
+            [contentFormatter]="markdownRenderer()"
+          />
+        }
+
+        @if (message.type === 'ai') {
+          <si-ai-message
+            [content]="getContentValue(message.content)"
+            [loading]="
+              getLoadingState(message.loading, message.content, isLatestMessage(message), false)
+            "
+            [actions]="getMessagePrimaryActions(message)"
+            [secondaryActions]="getMessageSecondaryActions(message)"
+            [actionParam]="message"
+            [secondaryActionsLabel]="secondaryActionsLabel()"
+            [contentFormatter]="markdownRenderer()"
+          />
+        }
+      }
+    }
+  }
+
+  @if (statusSeverity() && statusMessage()) {
+    <si-inline-notification
+      class="mb-6 w-100 overflow-hidden"
+      [severity]="statusSeverity()!"
+      [heading]="statusHeading()"
+      [message]="statusMessage()!"
+      [action]="statusAction()"
+    />
+  }
+
+  <div siChatContainerInput class="w-100">
+    <ng-content select="si-chat-input" />
+  </div>
+</si-chat-container>
diff --git a/projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts b/projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
new file mode 100644
index 000000000..03908db5e
--- /dev/null
+++ b/projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
@@ -0,0 +1,462 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { DebugElement, provideZonelessChangeDetection, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import {
+  ChatMessage,
+  MessageAction,
+  SiAiChatContainerComponent
+} from '@siemens/element-ng/chat-messages';
+
+describe('SiAiChatContainerComponent', () => {
+  let fixture: ComponentFixture<SiAiChatContainerComponent>;
+  let debugElement: DebugElement;
+  let component: SiAiChatContainerComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SiAiChatContainerComponent],
+      providers: [provideNoopAnimations(), provideZonelessChangeDetection()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SiAiChatContainerComponent);
+    debugElement = fixture.debugElement;
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have default sending state of false', () => {
+    expect(component.sending()).toBe(false);
+  });
+
+  it('should have default loading state of false', () => {
+    expect(component.loading()).toBe(false);
+  });
+
+  it('should have default disableInterrupt state of false', () => {
+    expect(component.disableInterrupt()).toBe(false);
+  });
+
+  it('should have default interrupting state of false', () => {
+    expect(component.interrupting()).toBe(false);
+  });
+
+  it('should have default noAutoScroll of false', () => {
+    expect(component.noAutoScroll()).toBe(false);
+  });
+
+  it('should have default empty messages array', () => {
+    expect(component.messages()).toBeUndefined();
+  });
+
+  it('should have default colorVariant of base-0', () => {
+    expect(component.colorVariant()).toBe('base-0');
+  });
+
+  it('should have default aiIcon of element-ai', () => {
+    expect(component.aiIcon()).toBe('element-ai');
+  });
+
+  it('should render empty state when no messages', () => {
+    fixture.componentRef.setInput('messages', []);
+    fixture.detectChanges();
+
+    const welcomeScreen = debugElement.query(By.css('si-ai-welcome-screen'));
+    expect(welcomeScreen).toBeTruthy();
+  });
+
+  it('should not render empty state when messages exist', () => {
+    const messages: ChatMessage[] = [
+      {
+        type: 'user',
+        content: 'Hello'
+      }
+    ];
+
+    fixture.componentRef.setInput('messages', messages);
+    fixture.detectChanges();
+
+    const welcomeScreen = debugElement.query(By.css('si-ai-welcome-screen'));
+    expect(welcomeScreen).toBeFalsy();
+  });
+
+  it('should render user messages', () => {
+    const messages: ChatMessage[] = [
+      {
+        type: 'user',
+        content: 'Hello'
+      }
+    ];
+
+    fixture.componentRef.setInput('messages', messages);
+    fixture.detectChanges();
+
+    const userMessage = debugElement.query(By.css('si-user-message'));
+    expect(userMessage).toBeTruthy();
+  });
+
+  it('should render AI messages', () => {
+    const messages: ChatMessage[] = [
+      {
+        type: 'ai',
+        content: 'Hello there!'
+      }
+    ];
+
+    fixture.componentRef.setInput('messages', messages);
+    fixture.detectChanges();
+
+    const aiMessage = debugElement.query(By.css('si-ai-message'));
+    expect(aiMessage).toBeTruthy();
+  });
+
+  it('should render loading AI message when loading is true', () => {
+    fixture.componentRef.setInput('messages', []);
+    fixture.componentRef.setInput('loading', true);
+    fixture.detectChanges();
+
+    const aiMessages = debugElement.queryAll(By.css('si-ai-message'));
+    expect(aiMessages.length).toBeGreaterThan(0);
+  });
+
+  it('should handle user message with attachments', () => {
+    const messages: ChatMessage[] = [
+      {
+        type: 'user',
+        content: 'Here are some files',
+        attachments: [{ name: 'file1.txt' }, { name: 'file2.pdf' }]
+      }
+    ];
+
+    fixture.componentRef.setInput('messages', messages);
+    fixture.detectChanges();
+
+    const userMessage = debugElement.query(By.css('si-user-message'));
+    expect(userMessage.componentInstance.attachments().length).toBe(2);
+  });
+
+  it('should handle signal content in AI messages', () => {
+    const contentSignal = signal('Streaming content...');
+    const messages: ChatMessage[] = [
+      {
+        type: 'ai',
+        content: contentSignal
+      }
+    ];
+
+    fixture.componentRef.setInput('messages', messages);
+    fixture.detectChanges();
+
+    const aiMessage = debugElement.query(By.css('si-ai-message'));
+    expect(aiMessage.componentInstance.content()).toBe('Streaming content...');
+  });
+
+  it('should compute inputInterruptible correctly', () => {
+    fixture.componentRef.setInput('loading', true);
+    fixture.componentRef.setInput('disableInterrupt', false);
+    fixture.componentRef.setInput('sending', false);
+    fixture.componentRef.setInput('interrupting', false);
+    fixture.detectChanges();
+
+    expect((component as any).inputInterruptible()).toBe(true);
+
+    fixture.componentRef.setInput('interrupting', true);
+    fixture.componentRef.setInput('loading', false);
+    fixture.componentRef.setInput('disableInterrupt', true);
+    fixture.componentRef.setInput('sending', true);
+    fixture.detectChanges();
+
+    expect((component as any).inputInterruptible()).toBe(true);
+
+    fixture.componentRef.setInput('loading', false);
+    fixture.componentRef.setInput('interrupting', false);
+    fixture.detectChanges();
+
+    expect((component as any).inputInterruptible()).toBe(false);
+  });
+
+  it('should compute inputSending correctly', () => {
+    fixture.componentRef.setInput('sending', true);
+    fixture.componentRef.setInput('interrupting', false);
+    fixture.detectChanges();
+
+    expect((component as any).inputSending()).toBe(true);
+
+    fixture.componentRef.setInput('sending', false);
+    fixture.componentRef.setInput('interrupting', true);
+    fixture.detectChanges();
+
+    expect((component as any).inputSending()).toBe(true);
+
+    fixture.componentRef.setInput('sending', false);
+    fixture.componentRef.setInput('interrupting', false);
+    fixture.detectChanges();
+
+    expect((component as any).inputSending()).toBe(false);
+  });
+
+  it('should handle multiple message types in sequence', () => {
+    const messages: ChatMessage[] = [
+      {
+        type: 'user',
+        content: 'Question'
+      },
+      {
+        type: 'ai',
+        content: 'Answer'
+      }
+    ];
+
+    fixture.componentRef.setInput('messages', messages);
+    fixture.detectChanges();
+
+    const userMessages = debugElement.queryAll(By.css('si-user-message'));
+    const aiMessages = debugElement.queryAll(By.css('si-ai-message'));
+
+    expect(userMessages.length).toBe(1);
+    expect(aiMessages.length).toBe(1);
+  });
+
+  it('should render welcome screen with custom greeting', () => {
+    const customGreeting = 'Hello there!';
+    fixture.componentRef.setInput('messages', []);
+    fixture.componentRef.setInput('greeting', customGreeting);
+    fixture.detectChanges();
+
+    const welcomeScreen = debugElement.query(By.css('si-ai-welcome-screen'));
+    expect(welcomeScreen.nativeElement.textContent).toContain(customGreeting);
+  });
+
+  it('should render welcome screen with custom welcome message', () => {
+    const customMessage = 'How can I help you today?';
+    fixture.componentRef.setInput('messages', []);
+    fixture.componentRef.setInput('welcomeMessage', customMessage);
+    fixture.detectChanges();
+
+    const welcomeScreen = debugElement.query(By.css('si-ai-welcome-screen'));
+    expect(welcomeScreen.nativeElement.textContent).toContain(customMessage);
+  });
+
+  it('should display prompt suggestions in welcome screen', () => {
+    const suggestions = [{ text: 'What can you do?' }];
+    fixture.componentRef.setInput('messages', []);
+    fixture.componentRef.setInput('promptSuggestions', suggestions);
+    fixture.detectChanges();
+
+    const welcomeScreen = debugElement.query(By.css('si-ai-welcome-screen'));
+    expect(welcomeScreen.nativeElement.textContent).toContain('What can you do?');
+  });
+
+  it('should handle AI message with actions', () => {
+    const actions: MessageAction[] = [
+      {
+        label: 'Copy',
+        icon: 'element-export',
+        action: () => {}
+      }
+    ];
+
+    const messages: ChatMessage[] = [
+      {
+        type: 'ai',
+        content: 'AI response',
+        actions
+      }
+    ];
+
+    fixture.componentRef.setInput('messages', messages);
+    fixture.detectChanges();
+
+    const aiMessage = debugElement.query(By.css('si-ai-message'));
+    expect(aiMessage.componentInstance.actions()).toEqual(actions);
+  });
+
+  it('should render status notification when statusSeverity is set', () => {
+    fixture.componentRef.setInput('statusSeverity', 'warning');
+    fixture.componentRef.setInput('statusMessage', 'Warning message');
+    fixture.detectChanges();
+
+    const notification = debugElement.query(By.css('si-inline-notification'));
+    expect(notification).toBeTruthy();
+  });
+
+  it('should not render status notification when statusSeverity is not set', () => {
+    fixture.detectChanges();
+
+    const notification = debugElement.query(By.css('si-inline-notification'));
+    expect(notification).toBeFalsy();
+  });
+
+  it('should have focus method', () => {
+    expect(typeof component.focus).toBe('function');
+  });
+
+  it('should compute inputSending with both true', () => {
+    fixture.componentRef.setInput('sending', true);
+    fixture.componentRef.setInput('interrupting', true);
+    fixture.detectChanges();
+
+    expect((component as any).inputSending()).toBe(true);
+  });
+
+  it('should not be interruptible when disableInterrupt is true', () => {
+    fixture.componentRef.setInput('loading', true);
+    fixture.componentRef.setInput('disableInterrupt', true);
+    fixture.componentRef.setInput('sending', false);
+    fixture.detectChanges();
+
+    expect((component as any).inputInterruptible()).toBe(false);
+  });
+
+  it('should not be interruptible when sending is true', () => {
+    fixture.componentRef.setInput('loading', true);
+    fixture.componentRef.setInput('disableInterrupt', false);
+    fixture.componentRef.setInput('sending', true);
+    fixture.detectChanges();
+
+    expect((component as any).inputInterruptible()).toBe(false);
+  });
+
+  it('should handle loading state with existing messages', () => {
+    const messages: ChatMessage[] = [
+      {
+        type: 'user',
+        content: 'Question'
+      }
+    ];
+
+    fixture.componentRef.setInput('messages', messages);
+    fixture.componentRef.setInput('loading', true);
+    fixture.detectChanges();
+
+    const aiMessages = debugElement.queryAll(By.css('si-ai-message'));
+    expect(aiMessages.length).toBeGreaterThan(0);
+  });
+
+  it('should handle signal content updates', () => {
+    const contentSignal = signal('Initial content');
+    const messages: ChatMessage[] = [
+      {
+        type: 'ai',
+        content: contentSignal
+      }
+    ];
+
+    fixture.componentRef.setInput('messages', messages);
+    fixture.detectChanges();
+
+    const aiMessage = debugElement.query(By.css('si-ai-message'));
+    expect(aiMessage.componentInstance.content()).toBe('Initial content');
+
+    contentSignal.set('Updated content');
+    fixture.detectChanges();
+
+    expect(aiMessage.componentInstance.content()).toBe('Updated content');
+  });
+
+  it('should handle empty content signal', () => {
+    const contentSignal = signal('');
+    const messages: ChatMessage[] = [
+      {
+        type: 'ai',
+        content: contentSignal
+      }
+    ];
+
+    fixture.componentRef.setInput('messages', messages);
+    fixture.detectChanges();
+
+    const aiMessage = debugElement.query(By.css('si-ai-message'));
+    expect(aiMessage).toBeTruthy();
+  });
+
+  it('should apply color variant to underlying container', () => {
+    fixture.componentRef.setInput('colorVariant', 'base-1');
+    fixture.detectChanges();
+
+    const chatContainer = debugElement.query(By.css('si-chat-container'));
+    expect(chatContainer.componentInstance.colorVariant()).toBe('base-1');
+  });
+
+  it('should pass noAutoScroll to underlying container', () => {
+    fixture.componentRef.setInput('noAutoScroll', true);
+    fixture.detectChanges();
+
+    const chatContainer = debugElement.query(By.css('si-chat-container'));
+    expect(chatContainer.componentInstance.noAutoScroll()).toBe(true);
+  });
+
+  it('should handle user messages with actions', () => {
+    const actions: MessageAction[] = [
+      {
+        label: 'Edit',
+        icon: 'element-edit',
+        action: () => {}
+      }
+    ];
+
+    const messages: ChatMessage[] = [
+      {
+        type: 'user',
+        content: 'User message',
+        actions
+      }
+    ];
+
+    fixture.componentRef.setInput('messages', messages);
+    fixture.detectChanges();
+
+    const userMessage = debugElement.query(By.css('si-user-message'));
+    expect(userMessage.componentInstance.actions()).toEqual(actions);
+  });
+
+  it('should handle messages with more than 3 actions', () => {
+    const actions: MessageAction[] = [
+      { label: 'Action 1', icon: 'element-icon1', action: () => {} },
+      { label: 'Action 2', icon: 'element-icon2', action: () => {} },
+      { label: 'Action 3', icon: 'element-icon3', action: () => {} },
+      { label: 'Action 4', icon: 'element-icon4', action: () => {} },
+      { label: 'Action 5', icon: 'element-icon5', action: () => {} }
+    ];
+
+    const messages: ChatMessage[] = [
+      {
+        type: 'ai',
+        content: 'AI response',
+        actions
+      }
+    ];
+
+    fixture.componentRef.setInput('messages', messages);
+    fixture.detectChanges();
+
+    const primaryActions = (component as any).getMessagePrimaryActions(messages[0]);
+    const secondaryActions = (component as any).getMessageSecondaryActions(messages[0]);
+
+    expect(primaryActions.length).toBe(3);
+    expect(secondaryActions.length).toBe(2);
+  });
+
+  it('should cache message actions', () => {
+    const actions: MessageAction[] = [{ label: 'Action', icon: 'element-icon', action: () => {} }];
+
+    const message: ChatMessage = {
+      type: 'ai',
+      content: 'Content',
+      actions
+    };
+
+    const result1 = (component as any).getMessageActions(message);
+    const result2 = (component as any).getMessageActions(message);
+
+    expect(result1).toBe(result2);
+  });
+});
diff --git a/projects/element-ng/chat-messages/si-ai-chat-container.component.ts b/projects/element-ng/chat-messages/si-ai-chat-container.component.ts
new file mode 100644
index 000000000..e887da5dd
--- /dev/null
+++ b/projects/element-ng/chat-messages/si-ai-chat-container.component.ts
@@ -0,0 +1,509 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import {
+  Component,
+  computed,
+  input,
+  output,
+  booleanAttribute,
+  inject,
+  contentChild,
+  Signal,
+  isSignal,
+  effect,
+  viewChild,
+  signal,
+  PLATFORM_ID,
+  DOCUMENT
+} from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { BackgroundColorVariant } from '@siemens/element-ng/common';
+import { SiInlineNotificationComponent } from '@siemens/element-ng/inline-notification';
+import {
+  getMarkdownRenderer,
+  MarkdownRendererOptions
+} from '@siemens/element-ng/markdown-renderer';
+import { MenuItem } from '@siemens/element-ng/menu';
+import {
+  SiTranslatePipe,
+  TranslatableString,
+  injectSiTranslateService,
+  t
+} from '@siemens/element-translate-ng/translate';
+
+import {
+  AiChatMessage,
+  ChatMessage,
+  MessageAction,
+  TemplateChatMessage
+} from './chat-message.model';
+import { SiAiMessageComponent } from './si-ai-message.component';
+import { PromptSuggestion, SiAiWelcomeScreenComponent } from './si-ai-welcome-screen.component';
+import { SiChatContainerInputDirective } from './si-chat-container-input.directive';
+import { SiChatContainerComponent } from './si-chat-container.component';
+import { ChatInputAttachment, SiChatInputComponent } from './si-chat-input.component';
+import { SiUserMessageComponent } from './si-user-message.component';
+
+/**
+ * A model-driven chat container component for displaying an AI chat interface with automatic scroll-to-bottom behavior.
+ *
+ * This component provides an AI chat interface, managing scrolling behavior
+ * to keep the newest messages visible while respecting user scrolling actions. It automatically
+ * scrolls to the bottom when new content is added, unless the user has scrolled up to view older messages.
+ *
+ * Required content projection:
+ * - `si-chat-input`: Input controls for composing messages
+ *
+ * @see {@link ChatMessage} for the chat message model
+ * @see {@link AiChatMessage} for the AI chat message model
+ * @see {@link UserChatMessage} for the user chat message model
+ * @see {@link TemplateChatMessage} for the template chat message model
+ * @see {@link SiChatInputComponent} for the chat input component
+ * @see {@link SiChatContainerComponent} for the base chat container component
+ * @see {@link SiAiMessageComponent} for the used AI message component
+ * @see {@link SiUserMessageComponent} for the used user message component
+ * @see {@link SiChatMessageComponent} for the base wrapper chat message component used by AI and user message components
+ *
+ * @experimental
+ */
+@Component({
+  selector: 'si-ai-chat-container',
+  imports: [
+    NgTemplateOutlet,
+    SiInlineNotificationComponent,
+    SiAiMessageComponent,
+    SiUserMessageComponent,
+    SiChatContainerComponent,
+    SiChatContainerInputDirective,
+    SiTranslatePipe,
+    SiAiWelcomeScreenComponent
+  ],
+  templateUrl: './si-ai-chat-container.component.html',
+  host: {
+    class: 'd-flex si-layout-inner flex-grow-1 flex-column h-100 w-100'
+  }
+})
+export class SiAiChatContainerComponent {
+  private readonly chatInput = contentChild<SiChatInputComponent>(SiChatInputComponent);
+  private readonly chatContainer = viewChild<SiChatContainerComponent>(SiChatContainerComponent);
+  private sanitizer = inject(DomSanitizer);
+  private translateService = injectSiTranslateService();
+  private platformId = inject(PLATFORM_ID);
+  private isBrowser = isPlatformBrowser(this.platformId);
+  private doc = inject(DOCUMENT);
+
+  constructor() {
+    effect(() => {
+      const inputComponent = this.chatInput();
+      if (inputComponent) {
+        inputComponent.registerParent(this.inputSending, this.inputInterruptible, () => {
+          this.scrollToBottom();
+        });
+      }
+    });
+
+    effect(() => {
+      if (this.isEmpty()) {
+        this.chatContainer()?.scrollToTop();
+      }
+    });
+  }
+
+  private messageActionsCache = new WeakMap<
+    ChatMessage,
+    { primary: MessageAction[]; secondary: MenuItem[]; version: number }
+  >();
+
+  private messageVersions = new WeakMap<ChatMessage, number>();
+
+  /**
+   * List of chat messages to display. Messages can contain either content (string)
+   * or a template (TemplateRef) for custom rendering. When both content and template
+   * are provided, the template takes precedence.
+   * Leave undefined to manage messages via ng-content instead.
+   */
+  readonly messages = input<ChatMessage[] | undefined>();
+
+  /**
+   * Whether a message is currently being sent, disables input and shows a loading state in the input area.
+   * If you want to show a loading state for the latest AI message, set {@link loading} to true instead.
+   * @defaultValue false
+   */
+  readonly sending = input(false, { transform: booleanAttribute });
+
+  /**
+   * Whether a pending loading AI message should be shown (e.g. while waiting for response).
+   * If you also want to prevent the user from sending new messages, set {@link sending} to true as well.
+   * @defaultValue false
+   */
+  readonly loading = input(false, { transform: booleanAttribute });
+
+  /**
+   * Whether to disable the interrupt functionality
+   * @defaultValue false
+   */
+  readonly disableInterrupt = input(false, { transform: booleanAttribute });
+
+  /**
+   * Whether the system is currently interrupting an operation. When true,
+   * forces interruptible mode and shows sending state on the input.
+   * @defaultValue false
+   */
+  readonly interrupting = input(false, { transform: booleanAttribute });
+
+  /**
+   * Disable auto-scroll to bottom when new messages are added
+   * @defaultValue false
+   */
+  readonly noAutoScroll = input(false, { transform: booleanAttribute });
+
+  /**
+   * Custom AI icon name, used for empty state
+   * @defaultValue 'element-ai'
+   */
+  readonly aiIcon = input('element-ai');
+
+  /**
+   * Color to use for component background.
+   * @defaultValue 'base-0'
+   */
+  readonly colorVariant = input<BackgroundColorVariant>('base-0');
+
+  /**
+   * Do not display the copy code button.
+   * @defaultValue false
+   */
+  readonly disableCopyCodeButton = input<boolean>(false);
+
+  /**
+   * Do not display the download CSV button for tables.
+   * @defaultValue false
+   */
+  readonly disableDownloadTableButton = input<boolean>(false);
+
+  /**
+   * Optional syntax highlighter function for code blocks.
+   * Receives code content and optional language, returns an HTML content string to display inside of the code block or undefined to use default rendering.
+   * The returned code is sanitized before insertion.
+   * Make sure that the required styles/scripts for the syntax highlighter are included in your application.
+   * @defaultValue undefined
+   */
+  readonly syntaxHighlighter = input<
+    ((code: string, language?: string) => string | undefined) | undefined
+  >(undefined);
+
+  /**
+   * Optional LaTeX renderer function for math expressions.
+   * Receives LaTeX string and display mode flag, returns an HTML content string to display or undefined to use default rendering.
+   * The returned HTML is sanitized before insertion.
+   * Make sure that the required styles/scripts for the LaTeX renderer are included in your application.
+   * @defaultValue undefined
+   */
+  readonly latexRenderer = input<
+    ((latex: string, displayMode: boolean) => string | undefined) | undefined
+  >(undefined);
+
+  /**
+   * Label for the copy button.
+   * @defaultValue
+   * ```
+   * t(() => $localize`:@@SI_MARKDOWN_RENDERER.COPY_CODE:Copy code`)
+   * ```
+   */
+  readonly copyCodeButtonLabel = input(
+    t(() => $localize`:@@SI_MARKDOWN_RENDERER.COPY_CODE:Copy code`)
+  );
+
+  /**
+   * Label for the download CSV button.
+   * @defaultValue
+   * ```
+   * t(() => $localize`:@@SI_MARKDOWN_RENDERER.DOWNLOAD:Download CSV`)
+   * ```
+   */
+  readonly downloadTableButtonLabel = input(
+    t(() => $localize`:@@SI_MARKDOWN_RENDERER.DOWNLOAD:Download CSV`)
+  );
+
+  /**
+   * The greeting text for the welcome screen
+   * @defaultValue
+   * ```
+   * t(() => $localize`:@@SI_AI_CHAT_CONTAINER.WELCOME_GREETING:Hello,`)
+   * ```
+   */
+  readonly greeting = input(t(() => $localize`:@@SI_AI_CHAT_CONTAINER.WELCOME_GREETING:Hello,`));
+
+  /**
+   * The welcome message text for the welcome screen
+   * @defaultValue
+   * ```
+   * t(() => $localize`:@@SI_AI_CHAT_CONTAINER.WELCOME_MESSAGE:how can I help you today?`)
+   * ```
+   */
+  readonly welcomeMessage = input(
+    t(() => $localize`:@@SI_AI_CHAT_CONTAINER.WELCOME_MESSAGE:how can I help you today?`)
+  );
+
+  /**
+   * The list of prompt suggestions for the welcome screen, either as an array or a record mapping category labels to suggestion arrays
+   * @defaultValue []
+   */
+  readonly promptSuggestions = input<PromptSuggestion[] | Record<string, PromptSuggestion[]>>([]);
+
+  /**
+   * Internal selected category state
+   */
+  protected readonly selectedCategory = signal<string | undefined>(undefined);
+
+  /**
+   * Computed list of categories derived from promptSuggestions
+   */
+  protected readonly promptCategories = computed(() => {
+    const suggestions = this.promptSuggestions();
+    if (Array.isArray(suggestions)) {
+      return [];
+    }
+    return Object.keys(suggestions).map(label => ({ label }));
+  });
+
+  /**
+   * More actions button aria label
+   *
+   * @defaultValue
+   * ```
+   * t(() => $localize`:@@SI_AI_CHAT_CONTAINER.SECONDARY_ACTIONS:More actions`)
+   * ```
+   */
+  readonly secondaryActionsLabel = input<TranslatableString>(
+    t(() => $localize`:@@SI_AI_CHAT_CONTAINER.SECONDARY_ACTIONS:More actions`)
+  );
+
+  /**
+   * Status notification severity
+   */
+  readonly statusSeverity = input<
+    'info' | 'success' | 'caution' | 'warning' | 'danger' | 'critical'
+  >();
+
+  /**
+   * Status notification heading
+   */
+  readonly statusHeading = input<string>();
+
+  /**
+   * Status notification message
+   */
+  readonly statusMessage = input<string>();
+
+  /**
+   * Status notification action link
+   */
+  readonly statusAction = input<{ title: string; href: string; target?: string }>();
+
+  /**
+   * Emitted when a new message is sent
+   */
+  readonly messageSent = output<{
+    content: string;
+    attachments: ChatInputAttachment[];
+  }>();
+
+  protected readonly markdownRenderer = computed(() => {
+    const highlighterFn = this.syntaxHighlighter();
+    const latexFn = this.latexRenderer();
+
+    const options: MarkdownRendererOptions | undefined = {
+      copyCodeButton: !this.disableCopyCodeButton() ? this.copyCodeButtonLabel() : undefined,
+      downloadTableButton: !this.disableDownloadTableButton()
+        ? this.downloadTableButtonLabel()
+        : undefined,
+      syntaxHighlighter: highlighterFn,
+      latexRenderer: latexFn,
+      translateSync: this.translateService.translateSync.bind(this.translateService)
+    };
+
+    return getMarkdownRenderer(this.sanitizer, options, this.doc, this.isBrowser);
+  });
+
+  protected readonly isEmpty = computed(() => this.messages()?.length === 0 && !this.loading());
+
+  protected readonly inputInterruptible = computed(() => {
+    return this.interrupting() || (this.loading() && !this.disableInterrupt() && !this.sending());
+  });
+
+  protected readonly inputSending = computed(() => {
+    return this.sending() || this.interrupting();
+  });
+
+  protected readonly displayMessages = computed(() => {
+    const messages = this.messages();
+    if (!messages?.length) {
+      if (this.loading()) {
+        const loadingMessage: AiChatMessage = {
+          type: 'ai',
+          content: '',
+          loading: true
+        };
+        return [loadingMessage];
+      }
+      return [];
+    }
+
+    if (this.loading() && messages.length > 0) {
+      const latestMessage = messages[messages.length - 1];
+
+      const shouldAddAiMessage =
+        this.isTemplateMessage(latestMessage) ||
+        (latestMessage.type === 'ai' &&
+          this.getContentValue(latestMessage.content) &&
+          !this.getLoadingState(latestMessage.loading, latestMessage.content, false) &&
+          !this.isStreamingContent(latestMessage.content)) ||
+        latestMessage.type === 'user';
+
+      if (shouldAddAiMessage) {
+        const newMessages = [...messages];
+        const loadingMessage: AiChatMessage = {
+          type: 'ai',
+          content: '',
+          loading: true
+        };
+        newMessages.push(loadingMessage);
+        return newMessages;
+      }
+    }
+
+    return messages;
+  });
+
+  private getMessageActions(message: ChatMessage): {
+    primary: MessageAction[];
+    secondary: MenuItem[];
+    version: number;
+  } {
+    if (this.isTemplateMessage(message)) {
+      return { primary: [], secondary: [], version: 0 };
+    }
+
+    const actions = message.actions ?? [];
+
+    // Get or create version number for this message
+    const version = this.messageVersions.get(message) ?? 0;
+
+    // Check if we have a cached version that matches
+    const cached = this.messageActionsCache.get(message);
+    if (cached?.version === version) {
+      return cached;
+    }
+
+    // Build primary and secondary actions
+    const primary = actions.slice(0, 3);
+    const secondary = actions.slice(3).map(
+      action =>
+        ({
+          ...action,
+          action: action.action as unknown as (actionParam: any, source: MenuItem) => void,
+          type: 'action'
+        }) as MenuItem
+    );
+
+    const result = { primary, secondary, version };
+    this.messageActionsCache.set(message, result);
+
+    // Return the cached object to maintain reference equality
+    return result;
+  }
+
+  protected isTemplateMessage(message: ChatMessage): message is TemplateChatMessage {
+    return 'template' in message && message.template !== undefined;
+  }
+
+  protected getMessagePrimaryActions(message: ChatMessage): MessageAction[] {
+    return this.getMessageActions(message).primary;
+  }
+
+  protected getMessageSecondaryActions(message: ChatMessage): MenuItem[] {
+    return this.getMessageActions(message).secondary;
+  }
+
+  /**
+   * Scrolls to the bottom of the messages container immediately.
+   * This method forces a scroll even if the user has scrolled up.
+   */
+  public scrollToBottom(): void {
+    this.chatContainer()?.scrollToBottom();
+  }
+
+  /**
+   * Focuses the chat input component if it exists.
+   */
+  public focus(): void {
+    const inputComponent = this.chatInput();
+    if (inputComponent) {
+      inputComponent.focus();
+    }
+  }
+
+  protected getContentValue(content: string | Signal<string> | undefined): string {
+    if (isSignal(content)) {
+      return content();
+    }
+    return content ?? '';
+  }
+
+  protected getOutputValue(content: string | Signal<string> | undefined): string | Signal<string> {
+    return content ?? '';
+  }
+
+  private isEmptyContent(content: string | Signal<string> | undefined): boolean {
+    const contentValue = this.getContentValue(content);
+    return !contentValue || contentValue.trim().length === 0;
+  }
+
+  private getLoadingValue(loading: boolean | Signal<boolean> | undefined): boolean {
+    if (isSignal(loading)) {
+      return loading();
+    }
+    return loading ?? false;
+  }
+
+  private isStreamingContent(content: string | Signal<string> | undefined): boolean {
+    return isSignal(content) && this.getContentValue(content).trim().length > 0;
+  }
+
+  protected getLoadingState(
+    messageLoading: boolean | Signal<boolean> | undefined,
+    content: string | Signal<string> | undefined,
+    isLatest: boolean,
+    globalLoading: boolean = false
+  ): boolean {
+    const messageLoadingValue = this.getLoadingValue(messageLoading);
+    const isEmptyContent = this.isEmptyContent(content);
+
+    return messageLoadingValue || (isLatest && globalLoading && isEmptyContent);
+  }
+
+  protected isLatestMessage(message: ChatMessage): boolean {
+    const messages = this.displayMessages();
+    return messages[messages.length - 1] === message;
+  }
+
+  protected readonly isSignal = isSignal;
+
+  protected onPromptSelected(suggestion: PromptSuggestion): void {
+    // Set the input value and emit the send event
+    const inputComponent = this.chatInput();
+    if (inputComponent) {
+      inputComponent.value.set(suggestion.text);
+      // Programmatically trigger the send output
+      inputComponent.send.emit({
+        content: suggestion.text,
+        attachments: []
+      });
+      inputComponent.value.set('');
+    }
+  }
+}
diff --git a/projects/element-ng/chat-messages/si-ai-message.component.spec.ts b/projects/element-ng/chat-messages/si-ai-message.component.spec.ts
index 9d97b0290..04003f9ba 100644
--- a/projects/element-ng/chat-messages/si-ai-message.component.spec.ts
+++ b/projects/element-ng/chat-messages/si-ai-message.component.spec.ts
@@ -8,7 +8,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By, DomSanitizer } from '@angular/platform-browser';
 import { getMarkdownRenderer } from '@siemens/element-ng/markdown-renderer';
 
-import { MessageAction } from './message-action.model';
+import { MessageAction } from './chat-message.model';
 import { SiAiMessageComponent as TestComponent } from './si-ai-message.component';
 
 describe('SiAiMessageComponent', () => {
diff --git a/projects/element-ng/chat-messages/si-ai-message.component.ts b/projects/element-ng/chat-messages/si-ai-message.component.ts
index 2326963fd..4480769d8 100644
--- a/projects/element-ng/chat-messages/si-ai-message.component.ts
+++ b/projects/element-ng/chat-messages/si-ai-message.component.ts
@@ -16,7 +16,7 @@ import { SiIconComponent } from '@siemens/element-ng/icon';
 import { MenuItem, SiMenuFactoryComponent } from '@siemens/element-ng/menu';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 
-import { MessageAction } from './message-action.model';
+import { MessageAction } from './chat-message.model';
 import { SiChatMessageActionDirective } from './si-chat-message-action.directive';
 import { SiChatMessageComponent } from './si-chat-message.component';
 
@@ -37,7 +37,8 @@ import { SiChatMessageComponent } from './si-chat-message.component';
  * @see {@link SiChatMessageComponent} for the base message wrapper component
  * @see {@link SiUserMessageComponent} for the user message component
  * @see {@link getMarkdownRenderer} for markdown formatting support
- * @see {@link SiChatContainerComponent} for the chat container to use this within
+ * @see {@link SiChatContainerComponent} for the base chat container to use this within
+ * @see {@link SiAiChatContainerComponent} for the AI chat container which uses this component
  *
  * @experimental
  */
diff --git a/projects/element-ng/chat-messages/si-attachment-list.component.spec.ts b/projects/element-ng/chat-messages/si-attachment-list.component.spec.ts
index a9a1baabd..2e8daf5d3 100644
--- a/projects/element-ng/chat-messages/si-attachment-list.component.spec.ts
+++ b/projects/element-ng/chat-messages/si-attachment-list.component.spec.ts
@@ -7,10 +7,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { SiModalService } from '@siemens/element-ng/modal';
 
-import {
-  SiAttachmentListComponent as TestComponent,
-  Attachment
-} from './si-attachment-list.component';
+import { Attachment } from './chat-message.model';
+import { SiAttachmentListComponent as TestComponent } from './si-attachment-list.component';
 
 describe('SiAttachmentListComponent', () => {
   let fixture: ComponentFixture<TestComponent>;
diff --git a/projects/element-ng/chat-messages/si-attachment-list.component.ts b/projects/element-ng/chat-messages/si-attachment-list.component.ts
index ee801ad69..3bd0b1e66 100644
--- a/projects/element-ng/chat-messages/si-attachment-list.component.ts
+++ b/projects/element-ng/chat-messages/si-attachment-list.component.ts
@@ -2,26 +2,12 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-import { booleanAttribute, Component, inject, input, output, TemplateRef } from '@angular/core';
+import { booleanAttribute, Component, inject, input, output } from '@angular/core';
 import { SiIconComponent } from '@siemens/element-ng/icon';
 import { SiModalService } from '@siemens/element-ng/modal';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 
-/**
- * Attachment item interface for file attachments in chat messages, used by {@link SiAttachmentListComponent} and inside {@link SiUserMessageComponent} as well as {@link SiChatInputComponent}.
- *
- * @see {@link SiAttachmentListComponent} for the attachment list component
- * @see {@link SiUserMessageComponent} for the user message
- * @see {@link SiChatInputComponent} for the chat input component
- *
- * @experimental
- */
-export interface Attachment {
-  /** File name */
-  name: string;
-  /** Optionally show a preview of the attachment by providing a template that is shown in a modal when clicked (optional) */
-  previewTemplate?: TemplateRef<any> | (() => TemplateRef<any>);
-}
+import { Attachment } from './chat-message.model';
 
 /**
  * Attachment list component for displaying file attachments in chat messages.
diff --git a/projects/element-ng/chat-messages/si-chat-container.component.scss b/projects/element-ng/chat-messages/si-chat-container.component.scss
index a0b4b412d..1af53732b 100644
--- a/projects/element-ng/chat-messages/si-chat-container.component.scss
+++ b/projects/element-ng/chat-messages/si-chat-container.component.scss
@@ -88,13 +88,3 @@
   // stylelint-disable-next-line declaration-no-important
   display: none !important;
 }
-
-// In mobile mode the inline-notification is massive compared to the scrollable area
-:host-context(.si-container-xs, .si-container-sm) ::ng-deep {
-  si-inline-notification {
-    .alert,
-    .alert-link {
-      font-size: variables.$si-font-size-body;
-    }
-  }
-}
diff --git a/projects/element-ng/chat-messages/si-chat-container.component.ts b/projects/element-ng/chat-messages/si-chat-container.component.ts
index a68175427..1e2758def 100644
--- a/projects/element-ng/chat-messages/si-chat-container.component.ts
+++ b/projects/element-ng/chat-messages/si-chat-container.component.ts
@@ -23,11 +23,12 @@ import {
  * scrolls to the bottom when new content is added, unless the user has scrolled up to view older messages.
  *
  * Use via content projection:
+ *
  * - Default content: Chat messages displayed in the scrollable messages container or something like an empty state.
  * - `si-inline-notification` selector: Notification component displayed above the input area
  * - `si-chat-input` or `[siChatContainerInput]` selector: Input controls for composing messages
  *
- * @see {@link SiChatInputComponent} for the chat input wrapper component
+ * @see {@link SiChatInputComponent} for the chat input component
  * @see {@link SiChatContainerInputDirective} for other input controls to slot in
  * @see {@link SiAiMessageComponent} for AI messages to slot in
  * @see {@link SiUserMessageComponent} for user messages (in AI chats) to slot in
diff --git a/projects/element-ng/chat-messages/si-chat-input.component.spec.ts b/projects/element-ng/chat-messages/si-chat-input.component.spec.ts
index 2791668ef..ab4a3ef21 100644
--- a/projects/element-ng/chat-messages/si-chat-input.component.spec.ts
+++ b/projects/element-ng/chat-messages/si-chat-input.component.spec.ts
@@ -8,7 +8,7 @@ import { By } from '@angular/platform-browser';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { FileUploadError, UploadFile } from '@siemens/element-ng/file-uploader';
 
-import { MessageAction } from './message-action.model';
+import { MessageAction } from './chat-message.model';
 import {
   ChatInputAttachment,
   SiChatInputComponent as TestComponent
diff --git a/projects/element-ng/chat-messages/si-chat-input.component.ts b/projects/element-ng/chat-messages/si-chat-input.component.ts
index cfe1724d7..3893695e7 100644
--- a/projects/element-ng/chat-messages/si-chat-input.component.ts
+++ b/projects/element-ng/chat-messages/si-chat-input.component.ts
@@ -11,8 +11,12 @@ import {
   ElementRef,
   input,
   model,
+  OnDestroy,
   output,
-  viewChild
+  viewChild,
+  signal,
+  Signal,
+  effect
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
@@ -24,8 +28,8 @@ import { SiIconComponent } from '@siemens/element-ng/icon';
 import { MenuItem, SiMenuFactoryComponent } from '@siemens/element-ng/menu';
 import { SiTranslatePipe, TranslatableString, t } from '@siemens/element-translate-ng/translate';
 
-import { MessageAction } from './message-action.model';
-import { Attachment, SiAttachmentListComponent } from './si-attachment-list.component';
+import { Attachment, MessageAction } from './chat-message.model';
+import { SiAttachmentListComponent } from './si-attachment-list.component';
 
 /**
  * Attachment item interface for file attachments in chat messages, extension of {@link Attachment} for {@link SiAttachmentListComponent} to use within {@link SiChatInputComponent}.
@@ -35,7 +39,8 @@ import { Attachment, SiAttachmentListComponent } from './si-attachment-list.comp
  * @see {@link Attachment} for base attachment interface
  * @see {@link SiAttachmentListComponent} for the attachment list component
  * @see {@link SiChatInputComponent} for the chat input component
- * @see {@link SiChatContainerComponent} for the chat container component
+ * @see {@link SiChatContainerComponent} for the base chat container component where this can be used
+ * @see {@link SiAiChatContainerComponent} for the AI chat container where this needs to be used
  *
  * @experimental
  */
@@ -62,6 +67,7 @@ export interface ChatInputAttachment extends Attachment {
  * - Displaying primary and secondary actions.
  *
  * Additionally to the inputs and outputs documented here, the component supports content projection via the following slots:
+ *
  * - Default content: Custom action buttons to display inline, prefer using the `actions` input for buttons, can be used in addition.
  * - `siChatInputDisclaimer` selector: Custom disclaimer content to display below the input area, prefer using the `disclaimer` input for simple text disclaimers.
  *
@@ -84,12 +90,32 @@ export interface ChatInputAttachment extends Attachment {
   templateUrl: './si-chat-input.component.html',
   styleUrl: './si-chat-input.component.scss'
 })
-export class SiChatInputComponent implements AfterViewInit {
+export class SiChatInputComponent implements AfterViewInit, OnDestroy {
   private static idCounter = 0;
   private readonly textInput = viewChild<ElementRef<HTMLTextAreaElement>>('textInput');
   private readonly projectedContent = viewChild<ElementRef>('projected');
   private readonly fileUploadDirective = viewChild(SiFileUploadDirective);
 
+  private readonly registeredSending = signal<Signal<boolean> | null>(null);
+  private readonly registeredInterruptible = signal<Signal<boolean> | null>(null);
+  private sendSubscription: { unsubscribe: () => void } | null = null;
+
+  constructor() {
+    effect(() => {
+      const sendingSignal = this.registeredSending();
+      if (sendingSignal) {
+        this.sending.set(sendingSignal());
+      }
+    });
+
+    effect(() => {
+      const interruptibleSignal = this.registeredInterruptible();
+      if (interruptibleSignal) {
+        this.interruptible.set(interruptibleSignal());
+      }
+    });
+  }
+
   /**
    * Current input value
    * @defaultValue ''
@@ -118,7 +144,7 @@ export class SiChatInputComponent implements AfterViewInit {
    * Whether a message is currently being sent, also prevent the sending of new ones while still allowing the user to type
    * @defaultValue false
    */
-  readonly sending = input(false, { transform: booleanAttribute });
+  readonly sending = model(false);
 
   /**
    * Whether the input supports interrupting ongoing operations. When active,
@@ -126,7 +152,7 @@ export class SiChatInputComponent implements AfterViewInit {
    * If sending is true, the interrupt button will be disabled.
    * @defaultValue false
    */
-  readonly interruptible = input(false, { transform: booleanAttribute });
+  readonly interruptible = model(false);
 
   /**
    * Maximum number of characters allowed
@@ -373,6 +399,23 @@ export class SiChatInputComponent implements AfterViewInit {
     });
   }
 
+  public registerParent(
+    sending: Signal<boolean>,
+    interruptible: Signal<boolean>,
+    sendListener?: () => void
+  ): void {
+    this.registeredSending.set(sending);
+    this.registeredInterruptible.set(interruptible);
+
+    this.sendSubscription?.unsubscribe();
+
+    if (sendListener) {
+      this.sendSubscription = this.send.subscribe(() => {
+        sendListener();
+      });
+    }
+  }
+
   protected onContainerClick(event: Event): void {
     const target = event.target as HTMLElement;
 
@@ -406,6 +449,10 @@ export class SiChatInputComponent implements AfterViewInit {
     }
   }
 
+  ngOnDestroy(): void {
+    this.sendSubscription?.unsubscribe();
+  }
+
   protected adjustTextareaHeight(event: Event): void {
     const textarea = event.target as HTMLTextAreaElement;
     this.setTextareaHeight(textarea);
diff --git a/projects/element-ng/chat-messages/si-chat-message.component.ts b/projects/element-ng/chat-messages/si-chat-message.component.ts
index 76d6f14b1..820575b50 100644
--- a/projects/element-ng/chat-messages/si-chat-message.component.ts
+++ b/projects/element-ng/chat-messages/si-chat-message.component.ts
@@ -22,17 +22,19 @@ import { SiResponsiveContainerDirective } from '@siemens/element-ng/resize-obser
  * - Responsive behavior that adapts to container size
  *
  * This is a low-level component designed for slotting in custom content, it provides slots via content projection:
+ *
  * - Default content: Main message content area (consider using {@link SiMarkdownRendererComponent} for markdown support)
  * - `si-avatar/si-icon/img` selector: Avatar or icon representing the message sender
  * - `si-chat-message-action` selector: Action buttons related to the message
  * - `si-attachment-list` selector: Attachment list component for displaying file attachments
  *
- * @see {@link SiUserMessageComponent} for user message display
- * @see {@link SiAiMessageComponent} for AI message display
+ * @see {@link SiUserMessageComponent} for the user message component
+ * @see {@link SiAiMessageComponent} for the AI message component
  * @see {@link SiAttachmentListComponent} for attachment list to slot in
  * @see {@link SiChatMessageActionDirective} for action buttons to slot in
  * @see {@link SiMarkdownRendererComponent} for markdown content rendering
  * @see {@link SiChatContainerComponent} for the chat container to use this within
+ * @see {@link SiAiChatContainerComponent} for the AI chat container which uses this component
  *
  * @experimental
  */
diff --git a/projects/element-ng/chat-messages/si-user-message.component.spec.ts b/projects/element-ng/chat-messages/si-user-message.component.spec.ts
index eee9ba52a..1f9f71b48 100644
--- a/projects/element-ng/chat-messages/si-user-message.component.spec.ts
+++ b/projects/element-ng/chat-messages/si-user-message.component.spec.ts
@@ -8,8 +8,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By, DomSanitizer } from '@angular/platform-browser';
 import { getMarkdownRenderer } from '@siemens/element-ng/markdown-renderer';
 
-import { MessageAction } from './message-action.model';
-import { Attachment } from './si-attachment-list.component';
+import { Attachment, MessageAction } from './chat-message.model';
 import { SiUserMessageComponent as TestComponent } from './si-user-message.component';
 
 describe('SiUserMessageComponent', () => {
diff --git a/projects/element-ng/chat-messages/si-user-message.component.ts b/projects/element-ng/chat-messages/si-user-message.component.ts
index 3c45acd66..6660e6b86 100644
--- a/projects/element-ng/chat-messages/si-user-message.component.ts
+++ b/projects/element-ng/chat-messages/si-user-message.component.ts
@@ -8,8 +8,8 @@ import { SiIconComponent } from '@siemens/element-ng/icon';
 import { MenuItem, SiMenuFactoryComponent } from '@siemens/element-ng/menu';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 
-import { MessageAction } from './message-action.model';
-import { Attachment, SiAttachmentListComponent } from './si-attachment-list.component';
+import { Attachment, MessageAction } from './chat-message.model';
+import { SiAttachmentListComponent } from './si-attachment-list.component';
 import { SiChatMessageActionDirective } from './si-chat-message-action.directive';
 import { SiChatMessageComponent } from './si-chat-message.component';
 
@@ -32,6 +32,7 @@ import { SiChatMessageComponent } from './si-chat-message.component';
  * @see {@link SiAttachmentListComponent} for the base attachment component
  * @see {@link getMarkdownRenderer} for markdown formatting support
  * @see {@link SiChatContainerComponent} for the chat container to use this within
+ * @see {@link SiAiChatContainerComponent} for the AI chat container which uses this component
  *
  * @experimental
  */
diff --git a/projects/element-ng/translate/si-translatable-keys.interface.ts b/projects/element-ng/translate/si-translatable-keys.interface.ts
index d40293cc5..666740f2b 100644
--- a/projects/element-ng/translate/si-translatable-keys.interface.ts
+++ b/projects/element-ng/translate/si-translatable-keys.interface.ts
@@ -3,6 +3,9 @@
 // Auto-generated file. Run 'npx update-translatable-keys' to update.
 
 export interface SiTranslatableKeys {
+  'SI_AI_CHAT_CONTAINER.SECONDARY_ACTIONS'?: string;
+  'SI_AI_CHAT_CONTAINER.WELCOME_GREETING'?: string;
+  'SI_AI_CHAT_CONTAINER.WELCOME_MESSAGE'?: string;
   'SI_AI_MESSAGE.SECONDARY_ACTIONS'?: string;
   'SI_ALERT_DIALOG.OK'?: string;
   'SI_APPLICATION_HEADER.LAUNCHPAD'?: string;

From 5dc1569dee5b97aea81c3e73b490a402ec405db4 Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Thu, 15 Jan 2026 10:53:48 +0100
Subject: [PATCH 29/30] docs(chat-messages): add example for ai-chat-container

---
 docs/patterns/ai/ai-chat.md                   |  41 ++-
 .../si-ai-chat-container.html                 |  47 +++
 .../si-chat-messages/si-ai-chat-container.ts  | 299 ++++++++++++++++++
 .../si-chat-messages/si-chat-container.html   |   2 +-
 .../si-chat-messages/si-chat-input.html       |   2 +-
 5 files changed, 388 insertions(+), 3 deletions(-)
 create mode 100644 src/app/examples/si-chat-messages/si-ai-chat-container.html
 create mode 100644 src/app/examples/si-chat-messages/si-ai-chat-container.ts

diff --git a/docs/patterns/ai/ai-chat.md b/docs/patterns/ai/ai-chat.md
index 08fbfdb0e..5b724150d 100644
--- a/docs/patterns/ai/ai-chat.md
+++ b/docs/patterns/ai/ai-chat.md
@@ -86,7 +86,46 @@ These are not treated as errors and do not require a separate notification.
 
 ## Code ---
 
-Use the chat container with the chat messages to build chat message interfaces.
+The **si-ai-chat-container** component provides a complete AI chat interface, it should be inserted into a layout with fixed height, if no fixed height is provided, please set a height in pixels.
+
+<si-docs-component example="si-chat-messages/si-ai-chat-container" height="750"></si-docs-component>
+
+<si-docs-api component="SiAiChatContainerComponent"></si-docs-api>
+
+### Initial Screen
+
+The AI chat container includes a built-in initial welcome screen component that displays when there are no messages. It can be slotted into the **si-chat-container** component. It accepts prompt suggestions as an input.
+
+<si-docs-component example="si-chat-messages/si-ai-welcome-screen" height="600"></si-docs-component>
+
+<si-docs-api component="SiAiWelcomeScreenComponent"></si-docs-api>
+
+#### Prompt Suggestions
+
+Prompt suggestions can be provided as either:
+
+- A simple array of suggestions (no categories)
+- A record mapping category labels to arrays of suggestions
+
+When using a record, categories are automatically displayed as filter pills.
+
+```typescript
+// Simple array (no categories)
+promptSuggestions = [
+  { text: 'How do I optimize performance?' },
+  { text: 'What are best practices?' }
+];
+
+// Record with categories
+promptSuggestions = {
+  'All prompts': [{ text: 'How do I optimize performance?' }, { text: 'What are best practices?' }],
+  'Maintenance': [{ text: 'Schedule preventive maintenance' }, { text: 'Track equipment downtime' }]
+};
+```
+
+### Base Chat Container
+
+Use this base container with the chat messages to build custom chat message interfaces.
 
 The **si-chat-container** component is a wrapper component, it has slots for
 [chat messages](../../components/chat-messages/chat-message.md) and a
diff --git a/src/app/examples/si-chat-messages/si-ai-chat-container.html b/src/app/examples/si-chat-messages/si-ai-chat-container.html
new file mode 100644
index 000000000..e4eb4eac7
--- /dev/null
+++ b/src/app/examples/si-chat-messages/si-ai-chat-container.html
@@ -0,0 +1,47 @@
+<div class="si-layout-fixed-height w-100 h-100">
+  <si-ai-chat-container
+    statusSeverity="info"
+    statusMessage="AI responses are for demonstration purposes."
+    colorVariant="base-0"
+    [messages]="messages()"
+    [sending]="sending()"
+    [loading]="loading()"
+    [disableInterrupt]="disableInterrupt()"
+    [interrupting]="interrupting()"
+    [syntaxHighlighter]="syntaxHighlighter"
+    [promptSuggestions]="promptSuggestionsByCategory"
+  >
+    <si-chat-input
+      class="w-100"
+      placeholder="Enter a command, question or topic…"
+      disclaimer="The content is AI generated. Always verify the information for accuracy."
+      accept="image/*,.pdf,.doc,.docx,.txt"
+      [disabled]="disabled()"
+      [allowAttachments]="true"
+      [actions]="inputActions"
+      [autoFocus]="true"
+      [attachments]="preAttachedFiles"
+      [maxFileSize]="5242880"
+      [value]="inputValue()"
+      (send)="onMessageSent($event)"
+      (interrupt)="onInterrupt()"
+      (fileError)="onFileError($event)"
+    />
+  </si-ai-chat-container>
+</div>
+
+<ng-template #modalTemplate let-modalRef="modalRef" let-attachment="attachment">
+  <div class="modal-header">
+    <h4 class="modal-title" id="sample-modal-title">{{ attachment.name }}</h4>
+    <button
+      type="button"
+      class="btn btn-circle btn-sm btn-ghost element-cancel"
+      aria-label="Close modal"
+      (click)="modalRef.hide('cancel')"
+    >
+    </button>
+  </div>
+  <div class="modal-body">
+    <span>This is a sample modal to demonstrate attachment preview functionality.</span>
+  </div>
+</ng-template>
diff --git a/src/app/examples/si-chat-messages/si-ai-chat-container.ts b/src/app/examples/si-chat-messages/si-ai-chat-container.ts
new file mode 100644
index 000000000..c6e1d8cba
--- /dev/null
+++ b/src/app/examples/si-chat-messages/si-ai-chat-container.ts
@@ -0,0 +1,299 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { Component, inject, signal, TemplateRef, viewChild, WritableSignal } from '@angular/core';
+import {
+  AiChatMessage,
+  ChatMessage,
+  ChatInputAttachment,
+  MessageAction,
+  SiAiChatContainerComponent,
+  SiChatInputComponent,
+  UserChatMessage,
+  PromptSuggestion
+} from '@siemens/element-ng/chat-messages';
+import { FileUploadError } from '@siemens/element-ng/file-uploader';
+import { SiToastNotificationService } from '@siemens/element-ng/toast-notification';
+import { LOG_EVENT } from '@siemens/live-preview';
+import hljs from 'highlight.js';
+import katex from 'katex';
+
+@Component({
+  selector: 'app-sample',
+  imports: [SiAiChatContainerComponent, SiChatInputComponent],
+  templateUrl: './si-ai-chat-container.html'
+})
+export class SampleComponent {
+  private logEvent = inject(LOG_EVENT);
+  private readonly modalTemplate = viewChild<TemplateRef<any>>('modalTemplate');
+  private readonly toastService = inject(SiToastNotificationService);
+
+  // Optional: Syntax highlighting with highlight.js
+  // This function returns highlighted HTML markup for the code content.
+  // The returned HTML is sanitized before insertion.
+  // Element provides a built-in highlight.js theme that adapts to light/dark mode.
+  // Make sure to include highlight.js as a dependency.
+  readonly syntaxHighlighter = (code: string, language?: string): string | undefined => {
+    if (language && hljs.getLanguage(language)) {
+      try {
+        return hljs.highlight(code, { language }).value;
+      } catch {
+        // If highlighting fails, fall back to no highlighting
+      }
+    }
+    return undefined;
+  };
+
+  // Optional: LaTeX rendering with KaTeX
+  // This function returns rendered HTML for LaTeX math expressions.
+  // The returned HTML is sanitized before insertion.
+  // Make sure to include KaTeX styles in your application.
+  // Add to styles in angular.json: "node_modules/katex/dist/katex.min.css"
+  readonly latexRenderer = (latex: string, displayMode: boolean): string | undefined => {
+    try {
+      return katex.renderToString(latex, {
+        displayMode,
+        throwOnError: false,
+        output: 'html'
+      });
+    } catch {
+      return undefined;
+    }
+  };
+
+  readonly preAttachedFiles: ChatInputAttachment[] = [
+    {
+      name: 'requirements.pdf',
+      size: 1234567,
+      type: 'application/pdf',
+      file: new File([''], 'requirements.pdf', { type: 'application/pdf' })
+    },
+    {
+      name: 'mockup.png',
+      size: 654321,
+      type: 'image/png',
+      file: new File([''], 'mockup.png', { type: 'image/png' })
+    }
+  ];
+
+  readonly messages = signal<ChatMessage[]>([
+    {
+      type: 'user',
+      content: `Can you help me analyze these files?
+
+I'm having trouble understanding the data structure
+and need assistance with the implementation.`,
+      attachments: [
+        {
+          name: 'data-analysis.py',
+          previewTemplate: () => this.modalTemplate()!
+        },
+        {
+          name: 'dataset.csv',
+          previewTemplate: () => this.modalTemplate()!
+        }
+      ],
+      actions: [
+        {
+          label: 'Copy message',
+          icon: 'element-export',
+          action: (message: UserChatMessage) =>
+            this.logEvent(`Copy user message ${message.content.slice(0, 20)}...`)
+        }
+      ]
+    },
+    {
+      type: 'ai',
+      content: `I'd be happy to help you analyze your files! I can see you've shared a Python script and a CSV dataset.
+
+Let me examine the structure and provide guidance.`,
+      actions: [
+        {
+          label: 'Good response',
+          icon: 'element-plus',
+          action: (_message: AiChatMessage) => this.logEvent('Thumbs up for AI message')
+        },
+        {
+          label: 'Copy response',
+          icon: 'element-export',
+          action: (_message: AiChatMessage) => this.logEvent('Copy AI message')
+        },
+        {
+          label: 'Retry response',
+          icon: 'element-refresh',
+          action: (_message: AiChatMessage) => this.logEvent('Retry AI message')
+        },
+        {
+          label: 'Bookmark',
+          icon: 'element-bookmark',
+          action: (_message: AiChatMessage) => this.logEvent('Bookmark AI message')
+        }
+      ]
+    },
+    {
+      type: 'user',
+      content:
+        'Perfect! What should I focus on first\n\nI also want to make sure the performance is optimized for large datasets since this will be used in production with potentially millions of rows?',
+      actions: [
+        {
+          label: 'Copy message',
+          icon: 'element-export',
+          action: (_message: UserChatMessage) =>
+            this.logEvent(`Copy user message ${_message.content.slice(0, 20)}...`)
+        }
+      ]
+    },
+    {
+      type: 'ai',
+      content: "Great question! When analyzing large datasets, it's crucial to focus on..."
+    }
+  ]);
+
+  readonly loading = signal(false);
+  readonly sending = signal(false);
+  readonly disabled = signal(false);
+  readonly disableInterrupt = signal(false);
+  readonly interrupting = signal(false);
+  readonly inputValue = signal('');
+
+  readonly promptSuggestionsByCategory: Record<string, PromptSuggestion[]> = {
+    Maintenance: [
+      { text: 'Schedule preventive maintenance tasks' },
+      { text: 'Generate maintenance reports' },
+      { text: 'Track equipment downtime' }
+    ],
+    Analytics: [
+      { text: 'Analyze performance metrics' },
+      { text: 'Generate data visualizations' },
+      { text: 'Create predictive models' }
+    ],
+    Troubleshooting: [
+      { text: 'Debug connection issues' },
+      { text: 'Investigate performance bottlenecks' },
+      { text: 'Resolve configuration errors' }
+    ]
+  };
+
+  inputActions: MessageAction[] = [
+    {
+      label: 'Clear messages',
+      icon: 'element-delete',
+      action: () => this.onClearMessages()
+    }
+  ];
+
+  userActions: MessageAction[] = [
+    {
+      label: 'Copy message',
+      icon: 'element-export',
+      action: (_message: UserChatMessage) =>
+        this.logEvent(`Copy user message ${_message.content.slice(0, 20)}...`)
+    },
+    {
+      label: 'Delete message',
+      icon: 'element-delete',
+      action: (_message: UserChatMessage) =>
+        this.logEvent(`Delete user message ${_message.content.slice(0, 20)}...`)
+    }
+  ];
+
+  aiActions: MessageAction[] = [
+    {
+      label: 'Good response',
+      icon: 'element-plus',
+      action: (_message: AiChatMessage) => this.logEvent('Thumbs up for AI message')
+    },
+    {
+      label: 'Copy response',
+      icon: 'element-export',
+      action: (_message: AiChatMessage) => this.logEvent('Copy AI message')
+    }
+  ];
+
+  onClearMessages(): void {
+    this.logEvent('Clear messages clicked');
+    this.messages.set([]);
+  }
+
+  onMessageSent(event: { content: string; attachments: ChatInputAttachment[] }): void {
+    this.logEvent(`Message sent: "${event.content}" with ${event.attachments.length} attachments`);
+    this.addMessage(this.messages, event);
+  }
+
+  onInterrupt(): void {
+    this.logEvent('Interrupt clicked');
+    this.loading.set(false);
+    this.interrupting.set(false);
+  }
+
+  onFileError(error: FileUploadError): void {
+    this.logEvent(`File error: ${error.errorText} - ${error.fileName}`);
+    this.toastService.queueToastNotification('danger', error.errorText, error.fileName);
+  }
+
+  toggleLoading(): void {
+    this.loading.update(current => !current);
+  }
+
+  toggleSending(): void {
+    this.sending.update(current => !current);
+  }
+
+  toggleDisabled(): void {
+    this.disabled.update(current => !current);
+  }
+
+  toggleDisableInterrupt(): void {
+    this.disableInterrupt.update(current => !current);
+  }
+
+  toggleInterrupting(): void {
+    this.interrupting.update(current => !current);
+  }
+
+  private addMessage(
+    messagesSignal: WritableSignal<ChatMessage[]>,
+    event: { content: string; attachments: ChatInputAttachment[] }
+  ): void {
+    const userMessage: ChatMessage = {
+      type: 'user',
+      content: event.content,
+      attachments: event.attachments.map(att => ({
+        ...att,
+        previewTemplate: this.modalTemplate()
+      })),
+      actions: this.userActions
+    };
+
+    messagesSignal.update((current: ChatMessage[]) => [...current, userMessage]);
+    this.simulateAiResponse(event.content, event.attachments, messagesSignal);
+  }
+
+  simulateAiResponse(
+    userInput: string,
+    attachments: ChatInputAttachment[],
+    messagesSignal: any
+  ): void {
+    this.sending.set(true);
+
+    setTimeout(() => {
+      this.sending.set(false);
+      this.loading.set(true);
+
+      setTimeout(() => {
+        const response = `Thanks for your message: "${userInput}". I can help with that!`;
+
+        messagesSignal.update((current: ChatMessage[]) => [
+          ...current,
+          {
+            type: 'ai',
+            content: response,
+            actions: this.aiActions
+          }
+        ]);
+        this.loading.set(false);
+      }, 2000);
+    }, 1000);
+  }
+}
diff --git a/src/app/examples/si-chat-messages/si-chat-container.html b/src/app/examples/si-chat-messages/si-chat-container.html
index 74ed91db6..d4159cdb3 100644
--- a/src/app/examples/si-chat-messages/si-chat-container.html
+++ b/src/app/examples/si-chat-messages/si-chat-container.html
@@ -67,7 +67,7 @@
     <si-chat-input
       class="w-100"
       accept="image/*,.pdf,.doc,.docx,.txt"
-      placeholder="Enter a command, question or topic..."
+      placeholder="Enter a command, question or topic…"
       disclaimer="The content is AI generated. Always verify the information for accuracy."
       [allowAttachments]="true"
       [actions]="inputActions"
diff --git a/src/app/examples/si-chat-messages/si-chat-input.html b/src/app/examples/si-chat-messages/si-chat-input.html
index 697330395..d4a53fb77 100644
--- a/src/app/examples/si-chat-messages/si-chat-input.html
+++ b/src/app/examples/si-chat-messages/si-chat-input.html
@@ -1,6 +1,6 @@
 <div class="p-2">
   <si-chat-input
-    placeholder="Enter a command, question or topic..."
+    placeholder="Enter a command, question or topic…"
     disclaimer="The content is AI generated. Always verify the information for accuracy."
     accept="image/*,.pdf,.doc,.docx,.txt,.xlsx,.csv"
     sendButtonLabel="Send Message"

From 9b9f9d7c6ab06610268c709a9a2c87bd5db0104d Mon Sep 17 00:00:00 2001
From: Linus Schlumberger <linus.schlumberger@siemens.com>
Date: Fri, 16 Jan 2026 17:34:28 +0100
Subject: [PATCH 30/30] test(chat-messages): add static VRT for
 ai-chat-container

---
 .../e2e/element-examples/static.spec.ts       |  1 +
 ...r-element-examples-chromium-dark-linux.png |  3 ++
 ...-element-examples-chromium-light-linux.png |  3 ++
 ...i-chat-messages--si-ai-chat-container.yaml | 30 +++++++++++++++++++
 .../si-chat-messages--si-chat-input.yaml      |  4 +--
 5 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-dark-linux.png
 create mode 100644 playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-light-linux.png
 create mode 100644 playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container.yaml

diff --git a/playwright/e2e/element-examples/static.spec.ts b/playwright/e2e/element-examples/static.spec.ts
index ee5de8009..27a64e1e4 100644
--- a/playwright/e2e/element-examples/static.spec.ts
+++ b/playwright/e2e/element-examples/static.spec.ts
@@ -118,6 +118,7 @@ test('si-chat-messages/si-attachment-list', ({ si }) => si.static());
 test('si-chat-messages/si-chat-input', ({ si }) => si.static());
 test('si-chat-messages/si-chat-container', ({ si }) => si.static());
 test('si-chat-messages/si-ai-welcome-screen', ({ si }) => si.static());
+test('si-chat-messages/si-ai-chat-container', ({ si }) => si.static());
 test('ag-grid/ag-grid-empty-state', async ({ si }) => {
   await si.static({ disabledA11yRules: ['aria-required-children'] });
 });
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-dark-linux.png
new file mode 100644
index 000000000..a07cdf723
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-dark-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6138cbedf9fb22bb1954adcd327d015e858f0504fd318e99a8e90fab22959bdd
+size 45051
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-light-linux.png
new file mode 100644
index 000000000..730a3e010
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-light-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2dce4146b77bd3b8b8bcb9468f31c9446bc3769c2e77366dbba10d16e982da0a
+size 43721
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container.yaml
new file mode 100644
index 000000000..d42fee505
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container.yaml
@@ -0,0 +1,30 @@
+- group:
+  - button "data-analysis.py"
+- group:
+  - button "dataset.csv"
+- paragraph: Can you help me analyze these files?
+- paragraph: I'm having trouble understanding the data structure and need assistance with the implementation.
+- button "Copy message"
+- paragraph: I'd be happy to help you analyze your files! I can see you've shared a Python script and a CSV dataset.
+- paragraph: Let me examine the structure and provide guidance.
+- button "Good response"
+- button "Copy response"
+- button "Retry response"
+- button "More actions"
+- paragraph: Perfect! What should I focus on first
+- paragraph: I also want to make sure the performance is optimized for large datasets since this will be used in production with potentially millions of rows?
+- button "Copy message"
+- paragraph: Great question! When analyzing large datasets, it's crucial to focus on...
+- alert: Info AI responses are for demonstration purposes.
+- group:
+  - text: requirements.pdf
+  - button "Remove attachment requirements.pdf"
+- group:
+  - text: mockup.png
+  - button "Remove attachment mockup.png"
+- textbox "Chat message input":
+  - /placeholder: Enter a command, question or topic…
+- button "Attach file"
+- button "Clear messages"
+- button "Send"
+- text: The content is AI generated. Always verify the information for accuracy.
\ No newline at end of file
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input.yaml
index 6b45be157..80195857f 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input.yaml
@@ -5,11 +5,11 @@
   - text: mockup.png
   - button "Remove attachment mockup.png"
 - textbox "Chat message input":
-  - /placeholder: Enter a command, question or topic...
+  - /placeholder: Enter a command, question or topic…
 - button "Attach files"
 - button "Take photo"
 - button "Text formatting"
 - button "More actions"
 - button "Insert emoji"
 - button "Send Message"
-- text: The content is AI generated. Always verify the information for accuracy.
\ No newline at end of file
+- text: The content is AI generated. Always verify the information for accuracy.