siemens · Killusions · Apr 2, 2026 · Apr 2, 2026 · Apr 2, 2026
@@ -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 from '@siemens/element-translate-ng/translate';
+import { SiTranslateService } from '@siemens/element-translate-ng/translate';
+import { TranslatableString } from '@siemens/element-translate-ng/translate-types';
 
 // @public
-export const getMarkdownRenderer: (sanitizer: DomSanitizer) => ((text: string) => Node);
+export const getMarkdownRenderer: (sanitizer: DomSanitizer, options?: MarkdownRendererOptions, doc?: Document, isBrowser?: boolean) => ((text: string) => Node);
+
+// @public (undocumented)
+export interface MarkdownRendererOptions {
+    downloadTableButton?: TranslatableString;
+    translateSync?: SiTranslateService['translateSync'];
+}
 
 // @public
 export class SiMarkdownRendererComponent {
     constructor();
-    readonly text: i0.InputSignal<string | undefined>;
+    readonly disableDownloadButton: _angular_core.InputSignal<boolean>;
+    readonly downloadButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    readonly text: _angular_core.InputSignal<string | undefined>;
 }
 
 // (No @packageDocumentation comment for this package)

@@ -350,6 +350,8 @@ export interface SiTranslatableKeys {
     // (undocumented)
     'SI_MAIN_DETAIL_CONTAINER.BACK'?: string;
     // (undocumented)
+    'SI_MARKDOWN_RENDERER.DOWNLOAD'?: string;
+    // (undocumented)
     'SI_NAVBAR.OPEN_LAUNCHPAD'?: string;
     // (undocumented)
     'SI_NAVBAR.TOGGLE_NAVIGATION'?: string;

@@ -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:

@@ -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"

@@ -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
@@ -10,9 +10,9 @@
   - text: You can use inline code like
   - code: console.log('Hello World')
   - text: "or multi-line code blocks:"
-- paragraph
+- text: javascript
 - code: "function calculateSum(a, b) { return a + b; } const result = calculateSum(5, 3); console.log(`Result: ${result}`);"
-- paragraph
+- separator
 - heading "Formatting Options" [level=2]
 - paragraph: Here's a paragraph explaining the formatting options available.
 - paragraph: "Another paragraph with different formatting elements:"
@@ -39,6 +39,7 @@
   - text: "Links are also automatically detected:"
   - link "https://angular.io":
     - /url: https://angular.io
+- separator
 - heading "Lists and Bullets" [level=2]
 - paragraph: "Here are the key features:"
 - list:
@@ -47,14 +48,18 @@
   - 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:"
 - list:
   - listitem: First, analyze the requirements
   - listitem: Then, implement the solution
   - listitem: Finally, test the implementation
-- blockquote: This is a blockquote that demonstrates how quoted text appears in the markdown content component.
+- separator
+- 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:
@@ -65,20 +70,24 @@
   - listitem: First ordered item
   - listitem: Second ordered item
 - paragraph: Final paragraph to show proper spacing.
+- separator
+- heading "Images" [level=2]
+- paragraph: "Images can be included as follows:"
+- separator
 - heading "Tables" [level=2]
 - paragraph: "Tables are also supported:"
-- paragraph
 - table:
   - rowgroup:
     - row "Feature Examples Status Notes":
-      - cell "Feature":
+      - columnheader "Feature":
         - paragraph: Feature
-      - cell "Examples":
+      - columnheader "Examples":
         - paragraph: Examples
-      - cell "Status":
+      - columnheader "Status":
         - paragraph: Status
-      - cell "Notes":
+      - columnheader "Notes":
         - paragraph: Notes
+  - rowgroup:
     - row "Basic content Alice Johnson Bob Smith ✓ Complete Simple text and line breaks":
       - cell "Basic content":
         - paragraph:
@@ -139,5 +148,4 @@
           - text: Uses
           - code: <br>
           - text: tags
-- text: This paragraph appears after the tables to demonstrate proper spacing.
-- paragraph
+- paragraph: This paragraph appears after the tables to demonstrate proper spacing.
@@ -2,6 +2,7 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
+import { DOCUMENT } from '@angular/common';
 import { DebugElement, inputBinding, signal, WritableSignal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By, DomSanitizer } from '@angular/platform-browser';
@@ -42,7 +43,8 @@ describe('SiAiMessageComponent', () => {
     });
     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', async () => {

@@ -105,7 +105,8 @@ export class SiAttachmentListComponent {
     if (template) {
       event.preventDefault();
       this.modalService.show(template, {
-        inputValues: { 'attachment': attachment }
+        inputValues: { 'attachment': attachment },
+        ignoreBackdropClick: false
       });
     }
   }

@@ -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 {

@@ -2,6 +2,7 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
+import { DOCUMENT } from '@angular/common';
 import { DebugElement, inputBinding, signal, WritableSignal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By, DomSanitizer } from '@angular/platform-browser';
@@ -43,7 +44,8 @@ describe('SiUserMessageComponent', () => {
     });
     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', async () => {

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * 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,
+  doc: Document
+): 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 = doc.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;
+};