feat: message-list markdown support (#9080)

tomivirkki · web-flow · commit df7e51771af5 · 2025-05-08T16:19:59.000+03:00
diff --git a/dev/messages-ai-chat.html b/dev/messages-ai-chat.html
@@ -0,0 +1,162 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Messages AI Chat</title>
+    <script type="module" src="./common.js"></script>
+
+    <style>
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+      }
+
+      #chat {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      vaadin-scroller {
+        flex: 1;
+        scroll-snap-type: y proximity;
+      }
+
+      vaadin-scroller::after {
+        display: block;
+        content: '';
+        scroll-snap-align: end;
+        min-height: 1px;
+      }
+    </style>
+
+    <script type="module">
+      import '@vaadin/message-input';
+      import '@vaadin/message-list';
+      import '@vaadin/scroller';
+
+      /**
+       * Simulates streaming text from an AI model
+       * @returns {Object} Subscription object with onNext and onComplete methods
+       */
+      function simulateMessageStream() {
+        // Sample response to simulate an AI assistant message
+        const answerMarkdown = `
+I can help you with:
+
+1. **Answering questions** – from quick facts to in-depth explanations.  
+2. **Explaining concepts** – breaking down complex ideas into clear, step-by-step logic.  
+3. **Brainstorming & creativity** – generating outlines, stories, code snippets, or design ideas.  
+4. **Guidance & troubleshooting** – walking you through processes or helping debug issues.  
+
+---
+
+### How to get the most out of me 🛠️
+
+| Step | What to do | Why it matters |
+|------|------------|----------------|
+| 1️⃣ | **State your goal clearly.** | A precise prompt yields a precise answer. |
+| 2️⃣ | **Add constraints or context.** <br>*(e.g., audience, length, tone)* | Tailors the response to your needs. |
+| 3️⃣ | **Ask follow-ups.** | We can iterate until you're satisfied. |
+
+---
+
+#### Example
+
+> **You:** "Explain quantum entanglement in simple terms."
+
+> **Me:**  
+> *Imagine two coins spun so perfectly in sync that the moment you look at one and see "heads," the other coin—no matter how far away—will instantly show "tails." In quantum physics, particles can become linked in just that way…*  
+
+---
+
+Need anything else? Just let me know, and I'll jump right in! ✨`;
+
+        let onNextCallback = null;
+        let onCompleteCallback = null;
+
+        // Create subscription interface
+        const subscription = {
+          onNext: (callback) => {
+            onNextCallback = callback;
+
+            // Simulate token-by-token streaming with a small delay
+            const tokenLength = 10;
+
+            setTimeout(async () => {
+              let tokenIndex = 0;
+              while (tokenIndex < answerMarkdown.length) {
+                const token = answerMarkdown.substring(tokenIndex, tokenIndex + tokenLength);
+                tokenIndex += tokenLength;
+                onNextCallback(token);
+                await new Promise((resolve) => setTimeout(resolve, 100));
+              }
+              if (onCompleteCallback) {
+                onCompleteCallback();
+              }
+            }, 1000);
+
+            return subscription;
+          },
+          onComplete: (callback) => {
+            onCompleteCallback = callback;
+            return subscription;
+          },
+        };
+
+        return subscription;
+      }
+
+      function createItem(text, assistant = false) {
+        return {
+          text,
+          time: 'Just now',
+          userName: assistant ? 'Assistant' : 'User',
+          userColorIndex: assistant ? 2 : 1,
+        };
+      }
+
+      const list = document.querySelector('vaadin-message-list');
+      const input = document.querySelector('vaadin-message-input');
+
+      // Set initial messages
+      list.items = [
+        createItem('Hello! Can you help me with a question?'),
+        createItem("Of course! I'm here to help. What's your question?", true),
+      ];
+
+      // Handle new messages from user
+      input.addEventListener('submit', async (e) => {
+        // Add user message to the list
+        list.items = [...list.items, createItem(e.detail.value)];
+        input.disabled = true;
+
+        // Create empty assistant message that will be populated gradually
+        const newAssistantItem = createItem('', true);
+
+        // Simulate AI typing response token by token
+        simulateMessageStream()
+          .onNext((token) => {
+            newAssistantItem.text += token;
+            // Force UI update by creating a new array
+            list.items = list.items.includes(newAssistantItem) ? [...list.items] : [...list.items, newAssistantItem];
+          })
+          .onComplete(() => {
+            input.disabled = false;
+          });
+      });
+    </script>
+  </head>
+
+  <body>
+    <div id="chat">
+      <vaadin-scroller>
+        <vaadin-message-list markdown></vaadin-message-list>
+      </vaadin-scroller>
+      <vaadin-message-input></vaadin-message-input>
+    </div>
+  </body>
+</html>
diff --git a/packages/message-list/package.json b/packages/message-list/package.json
@@ -42,6 +42,7 @@
     "@vaadin/a11y-base": "24.8.0-alpha15",
     "@vaadin/avatar": "24.8.0-alpha15",
     "@vaadin/component-base": "24.8.0-alpha15",
+    "@vaadin/markdown": "24.8.0-alpha15",
     "@vaadin/vaadin-lumo-styles": "24.8.0-alpha15",
     "@vaadin/vaadin-material-styles": "24.8.0-alpha15",
     "@vaadin/vaadin-themable-mixin": "24.8.0-alpha15",
diff --git a/packages/message-list/src/vaadin-message-list-mixin.d.ts b/packages/message-list/src/vaadin-message-list-mixin.d.ts
@@ -39,4 +39,9 @@ export declare class MessageListMixinClass {
    * ```
    */
   items: MessageListItem[] | null | undefined;
+
+  /**
+   * When set to `true`, the message text is parsed as Markdown.
+   */
+  markdown: boolean | undefined;
 }
diff --git a/packages/message-list/src/vaadin-message-list-mixin.js b/packages/message-list/src/vaadin-message-list-mixin.js
@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import '@vaadin/markdown/src/vaadin-markdown.js';
 import { html, render } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { KeyboardDirectionMixin } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
@@ -37,6 +38,16 @@ export const MessageListMixin = (superClass) =>
           observer: '_itemsChanged',
           sync: true,
         },
+
+        /**
+         * When set to `true`, the message text is parsed as Markdown.
+         * @type {boolean}
+         */
+        markdown: {
+          type: Boolean,
+          observer: '__markdownChanged',
+          reflectToAttribute: true,
+        },
       };
     }
 
@@ -86,6 +97,11 @@ export const MessageListMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    __markdownChanged(_markdown) {
+      this._renderMessages(this.items);
+    }
+
     /** @private */
     _renderMessages(items) {
       render(
@@ -102,7 +118,9 @@ export const MessageListMixin = (superClass) =>
                 theme="${ifDefined(item.theme)}"
                 class="${ifDefined(item.className)}"
                 @focusin="${this._onMessageFocusIn}"
-                >${item.text}<vaadin-avatar slot="avatar"></vaadin-avatar
+                >${this.markdown
+                  ? html`<vaadin-markdown .content=${item.text}></vaadin-markdown>`
+                  : item.text}<vaadin-avatar slot="avatar"></vaadin-avatar
               ></vaadin-message>
             `,
           )}
diff --git a/packages/message-list/src/vaadin-message-styles.js b/packages/message-list/src/vaadin-message-styles.js
@@ -40,4 +40,8 @@ export const messageStyles = css`
     --vaadin-avatar-outline-width: 0;
     flex-shrink: 0;
   }
+
+  ::slotted(vaadin-markdown) {
+    white-space: normal;
+  }
 `;
diff --git a/packages/message-list/test/message-list-markdown.test.js b/packages/message-list/test/message-list-markdown.test.js
@@ -0,0 +1,53 @@
+import { expect } from '@vaadin/chai-plugins';
+import { fixtureSync, nextUpdate } from '@vaadin/testing-helpers';
+import '../src/vaadin-message-list.js';
+
+describe('message-list-markdown', () => {
+  let messageList;
+  const messages = [
+    {
+      text: 'This is a **bold text** in Markdown',
+      time: '10:00 AM',
+      userName: 'Markdown User',
+      userAbbr: 'MU',
+    },
+  ];
+
+  beforeEach(async () => {
+    messageList = fixtureSync('<vaadin-message-list markdown></vaadin-message-list>');
+    messageList.items = messages;
+    await nextUpdate(messageList);
+  });
+
+  it('should render the message items as markdown', () => {
+    const strongElement = messageList.querySelector('vaadin-message strong');
+    expect(strongElement).to.exist;
+    expect(strongElement.textContent).to.equal('bold text');
+  });
+
+  it('should toggle markdown rendering when property changes', async () => {
+    // First check with markdown enabled
+    expect(messageList.querySelector('vaadin-message strong')).to.exist;
+
+    // Disable markdown
+    messageList.markdown = false;
+    await nextUpdate(messageList);
+
+    // Verify markdown is disabled on messages
+    expect(messageList.querySelector('vaadin-message strong')).to.not.exist;
+
+    // Re-enable markdown
+    messageList.markdown = true;
+    await nextUpdate(messageList);
+
+    // Verify markdown is re-enabled
+    expect(messageList.querySelector('vaadin-message strong')).to.exist;
+  });
+
+  it('should toggle markdown attribute', async () => {
+    expect(messageList.hasAttribute('markdown')).to.be.true;
+    messageList.markdown = false;
+    await nextUpdate(messageList);
+    expect(messageList.hasAttribute('markdown')).to.be.false;
+  });
+});
diff --git a/packages/message-list/test/typings/message-list.types.ts b/packages/message-list/test/typings/message-list.types.ts
@@ -12,6 +12,7 @@ const list = document.createElement('vaadin-message-list');
 
 // Properties
 assertType<MessageListItem[] | null | undefined>(list.items);
+assertType<boolean | undefined>(list.markdown);
 
 // Item properties
 const item: MessageListItem = list.items ? list.items[0] : {};
diff --git a/packages/message-list/test/visual/lumo/message-list.test.js b/packages/message-list/test/visual/lumo/message-list.test.js
@@ -59,6 +59,13 @@ describe('message-list', () => {
           await sendKeys({ press: 'ArrowDown' });
           await visualDiff(div, `${dir}-focused`);
         });
+
+        it('markdown', async () => {
+          element.items[0].text = 'This is a **bold text** in Markdown';
+          element.items = [...element.items];
+          element.markdown = true;
+          await visualDiff(div, `${dir}-markdown`);
+        });
       });
     });
   });
diff --git a/packages/message-list/test/visual/lumo/screenshots/message-list/baseline/ltr-markdown.png b/packages/message-list/test/visual/lumo/screenshots/message-list/baseline/ltr-markdown.png
diff --git a/packages/message-list/test/visual/lumo/screenshots/message-list/baseline/rtl-markdown.png b/packages/message-list/test/visual/lumo/screenshots/message-list/baseline/rtl-markdown.png
diff --git a/packages/message-list/test/visual/material/message-list.test.js b/packages/message-list/test/visual/material/message-list.test.js
@@ -59,6 +59,13 @@ describe('message-list', () => {
           await sendKeys({ press: 'ArrowDown' });
           await visualDiff(div, `${dir}-focused`);
         });
+
+        it('markdown', async () => {
+          element.items[0].text = 'This is a **bold text** in Markdown';
+          element.items = [...element.items];
+          element.markdown = true;
+          await visualDiff(div, `${dir}-markdown`);
+        });
       });
     });
   });
diff --git a/packages/message-list/test/visual/material/screenshots/message-list/baseline/ltr-markdown.png b/packages/message-list/test/visual/material/screenshots/message-list/baseline/ltr-markdown.png
diff --git a/packages/message-list/test/visual/material/screenshots/message-list/baseline/rtl-markdown.png b/packages/message-list/test/visual/material/screenshots/message-list/baseline/rtl-markdown.png
diff --git a/packages/message-list/theme/lumo/vaadin-message-list.js b/packages/message-list/theme/lumo/vaadin-message-list.js
@@ -1,2 +1,3 @@
+import '@vaadin/markdown/theme/lumo/vaadin-markdown.js';
 import './vaadin-message-list-styles.js';
 import '../../src/vaadin-message-list.js';
diff --git a/packages/message-list/theme/material/vaadin-message-list.js b/packages/message-list/theme/material/vaadin-message-list.js
@@ -1,2 +1,3 @@
+import '@vaadin/markdown/theme/material/vaadin-markdown.js';
 import './vaadin-message-list-styles.js';
 import '../../src/vaadin-message-list.js';
