diff --git a/CHANGELOG.md b/CHANGELOG.md
index 25adec2d30..3e4fa57799 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -121,7 +121,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    - `@msinternal/botframework-webchat-react-hooks` for helpers for React hooks
 - Added link sanitization and ESLint rules, in PR [#5564](https://github.com/microsoft/BotFramework-WebChat/pull/5564), by [@compulim](https://github.com/compulim)
 - Added blob URL sanitization and ESLint rules, in PR [#5568](https://github.com/microsoft/BotFramework-WebChat/pull/5568), by [@compulim](https://github.com/compulim)
-- Added visual message grouping following the `isPartOf` property of the `Message` entity, in PR [#5553](https://github.com/microsoft/BotFramework-WebChat/pull/5553), in PR [#5585](https://github.com/microsoft/BotFramework-WebChat/pull/5585), by [@OEvgeny](https://github.com/OEvgeny)
+- Added visual message grouping following the `isPartOf` property of the `Message` entity, in PR [#5553](https://github.com/microsoft/BotFramework-WebChat/pull/5553), in PR [#5585](https://github.com/microsoft/BotFramework-WebChat/pull/5585), in PR [#5590](https://github.com/microsoft/BotFramework-WebChat/pull/5590), by [@OEvgeny](https://github.com/OEvgeny)
    - The mode is suitable for providing chain-of-thought reasoning
    - Added visual indication of `creativeWorkStatus` property in `Message` entity:
       - `undefined` - no indicator is shown
diff --git a/__tests__/html/assets/custom-element/custom-element.js b/__tests__/html/assets/custom-element/custom-element.js
new file mode 100644
index 0000000000..f3ffb99f14
--- /dev/null
+++ b/__tests__/html/assets/custom-element/custom-element.js
@@ -0,0 +1,127 @@
+/* eslint-env browser */
+
+// #region TODO: Remove me after we bump Chrome to v117+
+const customElementNames = customElements.getName instanceof Function ? null : new WeakMap();
+
+export function getCustomElementName(customElementConstructor) {
+  if (customElementNames) {
+    return customElementNames.get(customElementConstructor);
+  }
+  return customElements.getName(customElementConstructor);
+}
+
+function setCustomElementName(customElementConstructor, name) {
+  if (customElementNames) {
+    customElementNames.set(customElementConstructor, name);
+  }
+  // No need to set for browsers that support customElements.getName()
+}
+// #endregion
+
+export function customElement(elementKey, createElementClass) {
+  const elementRegistration = document.querySelector(`element-registration[element-key="${elementKey}"]`);
+  elementRegistration.elementConstructor = createElementClass(elementRegistration);
+}
+
+function addSourceMapToExtractedScript(scriptContent, originalFileUrl) {
+  const sourceMap = {
+    version: 3,
+    sources: [originalFileUrl],
+    names: [],
+    mappings: 'AAAA', // Simple mapping - entire script maps to original file
+    file: originalFileUrl.split('/').pop(),
+    sourceRoot: '',
+    sourcesContent: [scriptContent]
+  };
+
+  const base64Map = btoa(JSON.stringify(sourceMap));
+  const dataUrl = `data:application/json;charset=utf-8;base64,${base64Map}`;
+
+  // TODO: Figure out how to make setting breakpoints work
+  return scriptContent + `\n//# sourceMappingURL=${dataUrl}`;
+}
+
+function fixScript(script, url) {
+  const newScript = document.createElement('script');
+
+  Array.from(script.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
+  newScript.text = addSourceMapToExtractedScript(script.text, url);
+
+  return newScript;
+}
+
+function initDocument(elementRegistration, currentDocument) {
+  const moduleUrl = new URL(`./${elementRegistration.getAttribute('element-key')}.ce.js`, import.meta.url).toString();
+  const allowedElementNames = ['link', 'style', 'script'];
+
+  if (!currentDocument) {
+    throw new Error('Custom element must be registered within a <element-registration> element.');
+  }
+
+  const result = Promise.withResolvers();
+
+  Object.defineProperty(elementRegistration, 'elementConstructor', {
+    set(constructor) {
+      if (!constructor) {
+        throw new Error('Custom element constructor is required.');
+      }
+
+      const elementName = elementRegistration.getAttribute('element-name');
+
+      if (!elementName) {
+        throw new Error('Custom element must have a name.');
+      }
+
+      customElements.define(elementName, constructor, constructor.options);
+      setCustomElementName(constructor, elementName);
+
+      result.resolve(constructor);
+    },
+    get() {
+      return customElement.get(elementRegistration.getAttribute('element-name'));
+    }
+  });
+
+  document.head.append(
+    ...Array.from(currentDocument.head.children)
+      .filter(element => allowedElementNames.includes(element.localName))
+      .map(element => (element.localName === 'script' ? fixScript(element, moduleUrl) : element))
+  );
+
+  elementRegistration.append(
+    ...Array.from(currentDocument.body.children).map(element =>
+      element.localName === 'script' ? fixScript(element, moduleUrl) : element
+    )
+  );
+  document.body.appendChild(elementRegistration);
+
+  return result.promise;
+}
+
+export function registerElements(...elementNames) {
+  const parser = new DOMParser();
+  const entries = elementNames.map(entry => (typeof entry === 'string' ? [entry, entry] : Object.entries(entry).at(0)));
+
+  const raceInit = (key, initPromise) =>
+    Promise.race([
+      new Promise((_resolve, reject) => {
+        setTimeout(
+          () => reject(new Error(`Could not initialize custom element "${key}". Did you call customElement()?`)),
+          5000
+        );
+      }),
+      initPromise
+    ]);
+
+  return Promise.all(
+    entries.map(async ([key, elementName]) => {
+      const content = await fetch(new URL(`./${key}.ce`, import.meta.url)).then(response => response.text());
+
+      const elementRegistration = document.createElement('element-registration');
+      elementRegistration.setAttribute('element-key', key);
+      elementRegistration.setAttribute('element-name', elementName);
+
+      return raceInit(key, initDocument(elementRegistration, parser.parseFromString(content, 'text/html')));
+    })
+  );
+}
diff --git a/__tests__/html/assets/custom-element/event-stream.ce.html b/__tests__/html/assets/custom-element/event-stream.ce.html
new file mode 100644
index 0000000000..836df83944
--- /dev/null
+++ b/__tests__/html/assets/custom-element/event-stream.ce.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Event Stream Custom Element</title>
+</head>
+<body>
+  <template>
+    <style>
+      .event-list {
+        align-items: center;
+        display: flex;
+        gap: 0.5em;
+        left: 0.5em;
+        padding: 0.5em;
+        position: fixed;
+        top: 0.5em;
+        z-index: 1;
+        font-size: 3rem;
+        counter-reset: event-count;
+      }
+      .event-list > * {
+        counter-increment: event-count;
+        --event-count: counter(event-count);
+      }
+      .event-list > *:nth-last-child(n + 4) {
+        pointer-events: none;
+        position: absolute;
+        visibility: hidden;
+        inset: 0 100% 100% 0;
+      }
+    </style>
+    <div class="event-list"></div>
+  </template>
+  <script type="module">
+    import { customElement } from '/assets/custom-element/custom-element.js';
+
+    customElement('event-stream', currentDocument =>
+      class EventStreamElement extends HTMLElement {
+        constructor() {
+          super();
+          const template = currentDocument.querySelector('template');
+          const fragment = template.content.cloneNode(true);
+  
+          const shadowRoot = this.attachShadow({ mode: 'open' });
+          this.eventList = fragment.querySelector('.event-list');
+          shadowRoot.appendChild(fragment);
+        }
+  
+        connectedCallback() {
+          this.controller = new AbortController();
+          document.addEventListener('event-stream:event', this.handleEvent, { signal: this.controller.signal });
+        }
+
+        disconnectedCallback() {
+          this.controller.abort();
+        }
+  
+        handleEvent = event => {
+          const { content } = event.detail;
+
+          // TODO: Remove when we reach Chrome v133+
+          content.style.setProperty('--event-count', this.eventList.children.length);
+
+          this.eventList.append(content);
+        };
+      }
+    );
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/__tests__/html/assets/custom-element/keyboard-event.ce.html b/__tests__/html/assets/custom-element/keyboard-event.ce.html
new file mode 100644
index 0000000000..8396000302
--- /dev/null
+++ b/__tests__/html/assets/custom-element/keyboard-event.ce.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Keyboard Event Custom Element</title>
+</head>
+<body>
+  <template>
+    <style>
+      /* TODO this is not needed after Chrome v133+, just use var(--event-count) */
+      :host kbd::after {
+        counter-set: event-index var(--event-count);
+        --event-counter: counter(event-index);
+      }
+
+      kbd {
+        background-color: #f7f7f7;
+        border-radius: 6px;
+        border: 1px solid #ccc;
+        box-shadow: 0 1px 0 #aaaaaa44, 0 2px 0 #ffffff44 inset;
+        color: #3e3e3e;
+        font-family: ui-monospace;
+        font-weight: bold;
+        line-height: 1;
+        padding: 0.2em 0.4em;
+        position: relative;
+        text-align: center;
+      }
+
+      kbd::after {
+        content: var(--event-counter, var(--event-count));
+        font-size: 16px;
+        inset: 6px auto auto 6px;
+        position: absolute;
+      }
+
+      :host(:last-of-type) kbd {
+        background-color: #e4e8ec;
+      }
+      
+      kbd[data-key]::before {
+        content: attr(data-key);
+        display: inline-block;
+        height: 1em;
+        text-align: center;
+        width: 1em;
+      }
+      kbd[data-key="Enter"]::before {
+        content: "⏎";
+      }
+      kbd[data-key="Backspace"]::before {
+        content: "⌫";
+      }
+      kbd[data-key="Tab"]::before {
+        content: "⇥";
+      }
+      kbd[data-key="Escape"]::before {
+        content: "⎋";
+      }
+      kbd[data-key=" "]::before {
+        content: "␣";
+      }
+      kbd[data-key="ArrowUp"]::before {
+        content: "↑";
+      }
+      kbd[data-key="ArrowDown"]::before {
+        content: "↓";
+      }
+      kbd[data-key="ArrowLeft"]::before {
+        content: "←";
+      }
+      kbd[data-key="ArrowRight"]::before {
+        content: "→";
+      }
+      kbd[data-key="Delete"]::before {
+        content: "⌦";
+      }
+      kbd[data-key="Home"]::before {
+        content: "⇱";
+      }
+      kbd[data-key="End"]::before {
+        content: "⇲";
+      }
+      kbd[data-key="PageUp"]::before {
+        content: "⇈";
+      }
+      kbd[data-key="PageDown"]::before {
+        content: "⇊";
+      }
+      kbd[data-key="Insert"]::before {
+        content: "⎀";
+      }
+      kbd[data-key="Meta"]::before {
+        content: "⌘";
+      }
+      kbd[data-key="Control"]::before {
+        content: "⌃";
+      }
+      kbd[data-key="Alt"]::before {
+        content: "⎇";
+      }
+      kbd[data-key="Shift"]::before {
+        content: "⇧";
+      }
+    </style>
+    <kbd></kbd>
+  </template>
+  <script type="module">
+    import { customElement, getCustomElementName } from '/assets/custom-element/custom-element.js';
+
+    customElement('keyboard-event', currentDocument =>
+      class KeyboardEventElement extends HTMLElement {
+        constructor() {
+          super();
+          const template = currentDocument.querySelector('template');
+          const fragment = template.content.cloneNode(true);
+  
+          const shadowRoot = this.attachShadow({ mode: 'open' });
+          shadowRoot.appendChild(fragment);
+
+          this.kbd = shadowRoot.querySelector('kbd');
+        }
+
+        set key(value) {
+          this.kbd.setAttribute('data-key', value);
+        }
+
+        get key() {
+          return this.kbd.getAttribute('data-key');
+        }
+  
+        static listenKeyboardEvents(scope = window) {
+          // const myTagName = customElements.getName(this)
+          const myTagName = getCustomElementName(this);
+          const abortController = new AbortController();
+          scope.addEventListener('keydown', event => {
+            const element = document.createElement(myTagName);
+            element.key = event.key;
+            document.dispatchEvent(new CustomEvent('event-stream:event', {
+              detail: {
+                content: element
+              }
+            }));
+          }, { capture: true, signal: abortController.signal });
+
+          return abortController;
+        }
+      }
+    )
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/__tests__/html2/activity/message-status.copilot.html b/__tests__/html2/activity/message-status.copilot.html
new file mode 100644
index 0000000000..dbb6b17fa7
--- /dev/null
+++ b/__tests__/html2/activity/message-status.copilot.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Message status (copilot)</title>
+    <script>
+      location = './message-status?variant=copilot';
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/__tests__/html2/activity/message-status.copilot.html.snap-1.png b/__tests__/html2/activity/message-status.copilot.html.snap-1.png
new file mode 100644
index 0000000000..bd90d72bc8
Binary files /dev/null and b/__tests__/html2/activity/message-status.copilot.html.snap-1.png differ
diff --git a/__tests__/html2/activity/message-status.copilot.html.snap-2.png b/__tests__/html2/activity/message-status.copilot.html.snap-2.png
new file mode 100644
index 0000000000..71482d295f
Binary files /dev/null and b/__tests__/html2/activity/message-status.copilot.html.snap-2.png differ
diff --git a/__tests__/html2/activity/message-status.copilot.html.snap-3.png b/__tests__/html2/activity/message-status.copilot.html.snap-3.png
new file mode 100644
index 0000000000..26fd25c9ec
Binary files /dev/null and b/__tests__/html2/activity/message-status.copilot.html.snap-3.png differ
diff --git a/__tests__/html2/activity/message-status.copilot.html.snap-4.png b/__tests__/html2/activity/message-status.copilot.html.snap-4.png
new file mode 100644
index 0000000000..1b992429eb
Binary files /dev/null and b/__tests__/html2/activity/message-status.copilot.html.snap-4.png differ
diff --git a/__tests__/html2/activity/message-status.copilot.html.snap-5.png b/__tests__/html2/activity/message-status.copilot.html.snap-5.png
new file mode 100644
index 0000000000..7eaf2ac39f
Binary files /dev/null and b/__tests__/html2/activity/message-status.copilot.html.snap-5.png differ
diff --git a/__tests__/html2/activity/message-status.copilot.html.snap-6.png b/__tests__/html2/activity/message-status.copilot.html.snap-6.png
new file mode 100644
index 0000000000..fa76652a3d
Binary files /dev/null and b/__tests__/html2/activity/message-status.copilot.html.snap-6.png differ
diff --git a/__tests__/html2/activity/message-status.copilot.html.snap-7.png b/__tests__/html2/activity/message-status.copilot.html.snap-7.png
new file mode 100644
index 0000000000..060f173e33
Binary files /dev/null and b/__tests__/html2/activity/message-status.copilot.html.snap-7.png differ
diff --git a/__tests__/html2/activity/message-status.fluent.html b/__tests__/html2/activity/message-status.fluent.html
new file mode 100644
index 0000000000..a53b00db3f
--- /dev/null
+++ b/__tests__/html2/activity/message-status.fluent.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Message status (fluent)</title>
+    <script>
+      location = './message-status?variant=fluent';
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/__tests__/html2/activity/message-status.fluent.html.snap-1.png b/__tests__/html2/activity/message-status.fluent.html.snap-1.png
new file mode 100644
index 0000000000..1a2f133bec
Binary files /dev/null and b/__tests__/html2/activity/message-status.fluent.html.snap-1.png differ
diff --git a/__tests__/html2/activity/message-status.fluent.html.snap-2.png b/__tests__/html2/activity/message-status.fluent.html.snap-2.png
new file mode 100644
index 0000000000..0048562d03
Binary files /dev/null and b/__tests__/html2/activity/message-status.fluent.html.snap-2.png differ
diff --git a/__tests__/html2/activity/message-status.fluent.html.snap-3.png b/__tests__/html2/activity/message-status.fluent.html.snap-3.png
new file mode 100644
index 0000000000..80db1cd42d
Binary files /dev/null and b/__tests__/html2/activity/message-status.fluent.html.snap-3.png differ
diff --git a/__tests__/html2/activity/message-status.fluent.html.snap-4.png b/__tests__/html2/activity/message-status.fluent.html.snap-4.png
new file mode 100644
index 0000000000..4aac4563cd
Binary files /dev/null and b/__tests__/html2/activity/message-status.fluent.html.snap-4.png differ
diff --git a/__tests__/html2/activity/message-status.fluent.html.snap-5.png b/__tests__/html2/activity/message-status.fluent.html.snap-5.png
new file mode 100644
index 0000000000..fe9cb42701
Binary files /dev/null and b/__tests__/html2/activity/message-status.fluent.html.snap-5.png differ
diff --git a/__tests__/html2/activity/message-status.fluent.html.snap-6.png b/__tests__/html2/activity/message-status.fluent.html.snap-6.png
new file mode 100644
index 0000000000..16ae91e6ed
Binary files /dev/null and b/__tests__/html2/activity/message-status.fluent.html.snap-6.png differ
diff --git a/__tests__/html2/activity/message-status.fluent.html.snap-7.png b/__tests__/html2/activity/message-status.fluent.html.snap-7.png
new file mode 100644
index 0000000000..7bb434b0ab
Binary files /dev/null and b/__tests__/html2/activity/message-status.fluent.html.snap-7.png differ
diff --git a/__tests__/html2/activity/message-status.html b/__tests__/html2/activity/message-status.html
new file mode 100644
index 0000000000..e07cb05554
--- /dev/null
+++ b/__tests__/html2/activity/message-status.html
@@ -0,0 +1,365 @@
+<!doctype html>
+<html lang="en-US">
+
+<head>
+  <title>Message status</title>
+  <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  <script type="importmap">
+    {
+      "imports": {
+        "@fluentui/react-provider": "https://esm.sh/@fluentui/react-provider?deps=react@18&exports=FluentProvider",
+        "@fluentui/tokens": "https://esm.sh/@fluentui/tokens?deps=react@18&exports=createDarkTheme,webLightTheme",
+        "@testduet/wait-for": "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs",
+        "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+        "botframework-webchat/decorator": "/__dist__/packages/bundle/static/botframework-webchat/decorator.js",
+        "botframework-webchat/internal": "/__dist__/packages/bundle/static/botframework-webchat/internal.js",
+        "botframework-webchat-fluent-theme": "/__dist__/packages/fluent-theme/static/botframework-webchat-fluent-theme.js",
+        "react": "https://esm.sh/react@18",
+        "react-dom": "https://esm.sh/react-dom@18",
+        "react-dom/": "https://esm.sh/react-dom@18/"
+      }
+    }
+  </script>
+  <script crossorigin="anonymous" src="/test-harness.js"></script>
+  <script crossorigin="anonymous" src="/test-page-object.js"></script>
+  <style type="text/css">
+    #webchat {
+      width: 640px;
+    }
+
+    .fui-FluentProvider {
+      height: 100%;
+    }
+
+    .theme.variant-copilot {
+      --webchat__color--surface: var(--colorGrey98);
+    }
+  </style>
+</head>
+
+<body>
+  <main id="webchat"></main>
+  <script type="module">
+    import '/test-harness.mjs';
+    import '/test-page-object.mjs';
+
+    import { createDarkTheme, webLightTheme } from '@fluentui/tokens';
+    import { FluentProvider } from '@fluentui/react-provider';
+    import { waitFor } from '@testduet/wait-for';
+    import { createDirectLine, createStoreWithOptions, ReactWebChat } from 'botframework-webchat';
+    import { FluentThemeProvider } from 'botframework-webchat-fluent-theme';
+    import { createElement } from 'react';
+    import { createRoot } from 'react-dom/client';
+
+    const {
+      testHelpers: { createDirectLineEmulator }
+    } = window;
+
+    // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+    window.WebChat = { createStoreWithOptions };
+    
+    run(async function () {
+      const { directLine, store } = createDirectLineEmulator();
+
+      const searchParams = new URLSearchParams(location.search);
+      const variant = searchParams.get('variant');
+      const theme = searchParams.get('fluent-theme');
+
+      await host.windowSize(640, 1024, document.getElementById('webchat'));
+      await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
+        features: [
+          { name: 'prefers-reduced-motion', value: 'reduce' },
+          ...(theme === 'dark' || theme === 'light'
+            ? [{ name: 'prefers-color-scheme', value: theme }]
+            : [])
+        ]
+      });
+
+      const root = createRoot(document.getElementById('webchat'));
+
+      let fluentTheme;
+      let codeBlockTheme;
+
+      if (theme === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches && theme !== 'light') {
+        fluentTheme = {
+          ...createDarkTheme({
+            10: '#12174c',
+            20: '#1a1f5b',
+            30: '#21276a',
+            40: '#293079',
+            50: '#303788',
+            60: '#384097',
+            70: '#4049a7',
+            80: '#151e80',
+            90: '#4f59c5',
+            100: '#5661d4',
+            110: '#5e69e3',
+            120: '#7982e8',
+            130: '#949bec',
+            140: '#afb5f1',
+            150: '#c9cdf6',
+            160: '#e4e6fa'
+          }),
+          colorNeutralBackground1Disabled: '#101010',
+          colorNeutralBackground1Hover: '#101010',
+          colorNeutralForeground5: '#424242',
+          colorGrey98: '#1b1b1b'
+        };
+        codeBlockTheme = 'github-dark-default';
+      } else {
+        fluentTheme = {
+          ...webLightTheme,
+          colorNeutralForeground1: '#1b1b1b',
+          colorGrey98: '#fafafa'
+        };
+        codeBlockTheme = 'github-light-default';
+      }
+
+      if (variant) {
+        window.checkAccessibility = async () => { }
+      }
+
+      const webChatProps = { directLine, store, styleOptions: { codeBlockTheme } };
+
+      root.render(
+        variant === 'copilot' || variant === 'fluent' ?
+          createElement(
+            FluentProvider,
+            { className: 'fui-FluentProvider', theme: fluentTheme },
+            createElement(
+              FluentThemeProvider,
+              { variant: variant },
+              createElement(ReactWebChat, webChatProps)
+            )
+          ) :
+          createElement(ReactWebChat, webChatProps)
+      );
+
+      await pageConditions.uiConnected();
+
+      const botIcon = 'data:image/png;base64,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';
+
+      const author = {
+        '@context': 'https://schema.org',
+        '@type': 'Person',
+        image: botIcon,
+        name: 'Agent',
+      };
+
+      directLine.emulateIncomingActivity({
+        from: { role: 'user' },
+        type: 'message',
+        text: `Message from user.`
+      });
+
+      directLine.emulateIncomingActivity({
+        from: { role: 'bot', name: 'Bot' },
+        type: 'message',
+        text: '',
+        id: 'msg-000',
+        entities: [{
+          '@id': '',
+          '@context': 'https://schema.org',
+          '@type': 'Message',
+          type: 'https://schema.org/Message',
+          abstract: 'Response without status',
+          author
+        }]
+      });
+
+      // Test Case 1: Single activity with different statuses
+      // When: sending a message without status
+      directLine.emulateIncomingActivity({
+        from: { role: 'bot', name: 'Bot' },
+        type: 'message',
+        text: '',
+        id: 'msg-001',
+        entities: [{
+          '@id': '',
+          '@context': 'https://schema.org',
+          '@type': 'Message',
+          type: 'https://schema.org/Message',
+          abstract: 'Another response without status',
+          author
+        }]
+      });
+
+      await pageConditions.numActivitiesShown(3);
+      await host.snapshot('local');
+
+      // When: updating to incomplete status (loading)
+      directLine.emulateIncomingActivity({
+        from: { role: 'bot', name: 'Bot' },
+        type: 'message',
+        text: '',
+        id: 'msg-001',
+        entities: [{
+          '@id': '',
+          '@context': 'https://schema.org',
+          '@type': 'Message',
+          type: 'https://schema.org/Message',
+          abstract: 'Response in progress...',
+          creativeWorkStatus: 'incomplete',
+          author
+        }]
+      });
+
+      await pageConditions.numActivitiesShown(3);
+      await host.snapshot('local');
+
+      // When: updating to published status (complete)
+      directLine.emulateIncomingActivity({
+        from: { role: 'bot', name: 'Bot' },
+        type: 'message',
+        text: '',
+        id: 'msg-001',
+        entities: [{
+          '@id': '',
+          '@context': 'https://schema.org',
+          '@type': 'Message',
+          type: 'https://schema.org/Message',
+          abstract: 'Response completed!',
+          creativeWorkStatus: 'published',
+          author
+        }]
+      });
+
+      await pageConditions.numActivitiesShown(3);
+      await host.snapshot('local');
+
+      // Test Case 2: Multiple activities with mixed statuses
+      // When: adding multiple activities with different statuses
+      directLine.emulateIncomingActivity({
+        from: { role: 'bot', name: 'Bot' },
+        type: 'message',
+        text: '',
+        id: 'msg-002',
+        entities: [{
+          '@id': '',
+          '@context': 'https://schema.org',
+          '@type': 'Message',
+          type: 'https://schema.org/Message',
+          abstract: 'Second message - published',
+          creativeWorkStatus: 'published',
+          author
+        }]
+      });
+
+      directLine.emulateIncomingActivity({
+        from: { role: 'bot', name: 'Bot' },
+        type: 'message',
+        text: '',
+        id: 'msg-003',
+        entities: [{
+          '@id': '',
+          '@context': 'https://schema.org',
+          '@type': 'Message',
+          type: 'https://schema.org/Message',
+          abstract: 'Third message - in progress',
+          creativeWorkStatus: 'incomplete',
+          author
+        }]
+      });
+
+      directLine.emulateIncomingActivity({
+        from: { role: 'bot', name: 'Bot' },
+        type: 'message',
+        text: '',
+        id: 'msg-004',
+        entities: [{
+          '@id': '',
+          '@context': 'https://schema.org',
+          '@type': 'Message',
+          type: 'https://schema.org/Message',
+          abstract: 'Fourth message - no status',
+          creativeWorkStatus: 'incomplete',
+          author
+        }]
+      });
+      
+      await pageConditions.numActivitiesShown(6);
+      await host.snapshot('local');
+
+      // Test Case 3: Status transitions
+      // When: changing status from incomplete to published
+      directLine.emulateIncomingActivity({
+        from: { role: 'bot', name: 'Bot' },
+        type: 'message',
+        text: '',
+        id: 'msg-003',
+        entities: [{
+          '@id': '',
+          '@context': 'https://schema.org',
+          '@type': 'Message',
+          type: 'https://schema.org/Message',
+          abstract: 'Third message - now complete',
+          creativeWorkStatus: 'published',
+          author
+        }]
+      });
+
+      // When: adding status to previously statusless message
+      directLine.emulateIncomingActivity({
+        from: { role: 'bot', name: 'Bot' },
+        type: 'message',
+        text: '',
+        id: 'msg-004',
+        entities: [{
+          '@id': '',
+          '@context': 'https://schema.org',
+          '@type': 'Message',
+          type: 'https://schema.org/Message',
+          abstract: 'Fourth message - now loading',
+          creativeWorkStatus: 'incomplete',
+          author
+        }]
+      });
+
+      await pageConditions.numActivitiesShown(6);
+      await host.snapshot('local');
+
+      // Test Case 4: Final completion
+      // When: completing all remaining work
+      directLine.emulateIncomingActivity({
+        from: { role: 'bot', name: 'Bot' },
+        type: 'message',
+        text: '',
+        id: 'msg-004',
+        entities: [{
+          '@id': '',
+          '@context': 'https://schema.org',
+          '@type': 'Message',
+          type: 'https://schema.org/Message',
+          abstract: 'Fourth message - final completion',
+          creativeWorkStatus: 'published',
+          author
+        }]
+      });
+
+      await pageConditions.numActivitiesShown(6);
+      await host.snapshot('local');
+
+      // Test Case 5: With text and status but no abstract
+      // When: completing all remaining work
+      directLine.emulateIncomingActivity({
+        from: { role: 'bot', name: 'Bot' },
+        type: 'message',
+        text: 'Some text with published status',
+        id: 'msg-005',
+        entities: [{
+          '@id': '',
+          '@context': 'https://schema.org',
+          '@type': 'Message',
+          type: 'https://schema.org/Message',
+          creativeWorkStatus: 'published',
+          author
+        }]
+      });
+
+      await pageConditions.numActivitiesShown(7);
+      await host.snapshot('local');
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/__tests__/html2/activity/message-status.html.snap-1.png b/__tests__/html2/activity/message-status.html.snap-1.png
new file mode 100644
index 0000000000..ab18346df0
Binary files /dev/null and b/__tests__/html2/activity/message-status.html.snap-1.png differ
diff --git a/__tests__/html2/activity/message-status.html.snap-2.png b/__tests__/html2/activity/message-status.html.snap-2.png
new file mode 100644
index 0000000000..8b347a90c3
Binary files /dev/null and b/__tests__/html2/activity/message-status.html.snap-2.png differ
diff --git a/__tests__/html2/activity/message-status.html.snap-3.png b/__tests__/html2/activity/message-status.html.snap-3.png
new file mode 100644
index 0000000000..a8e1d00d11
Binary files /dev/null and b/__tests__/html2/activity/message-status.html.snap-3.png differ
diff --git a/__tests__/html2/activity/message-status.html.snap-4.png b/__tests__/html2/activity/message-status.html.snap-4.png
new file mode 100644
index 0000000000..8164410486
Binary files /dev/null and b/__tests__/html2/activity/message-status.html.snap-4.png differ
diff --git a/__tests__/html2/activity/message-status.html.snap-5.png b/__tests__/html2/activity/message-status.html.snap-5.png
new file mode 100644
index 0000000000..8ccb674898
Binary files /dev/null and b/__tests__/html2/activity/message-status.html.snap-5.png differ
diff --git a/__tests__/html2/activity/message-status.html.snap-6.png b/__tests__/html2/activity/message-status.html.snap-6.png
new file mode 100644
index 0000000000..9e7ab7cf91
Binary files /dev/null and b/__tests__/html2/activity/message-status.html.snap-6.png differ
diff --git a/__tests__/html2/activity/message-status.html.snap-7.png b/__tests__/html2/activity/message-status.html.snap-7.png
new file mode 100644
index 0000000000..9a8d68adca
Binary files /dev/null and b/__tests__/html2/activity/message-status.html.snap-7.png differ
diff --git a/__tests__/html2/part-grouping/avatar.html.snap-1.png b/__tests__/html2/part-grouping/avatar.html.snap-1.png
index 5d199b9290..a044d4647d 100644
Binary files a/__tests__/html2/part-grouping/avatar.html.snap-1.png and b/__tests__/html2/part-grouping/avatar.html.snap-1.png differ
diff --git a/__tests__/html2/part-grouping/avatar.html.snap-2.png b/__tests__/html2/part-grouping/avatar.html.snap-2.png
index e83cf74dd9..2b03d2024f 100644
Binary files a/__tests__/html2/part-grouping/avatar.html.snap-2.png and b/__tests__/html2/part-grouping/avatar.html.snap-2.png differ
diff --git a/__tests__/html2/part-grouping/avatar.html.snap-3.png b/__tests__/html2/part-grouping/avatar.html.snap-3.png
index 6c365a7f6d..85f0e13938 100644
Binary files a/__tests__/html2/part-grouping/avatar.html.snap-3.png and b/__tests__/html2/part-grouping/avatar.html.snap-3.png differ
diff --git a/__tests__/html2/part-grouping/avatar.html.snap-4.png b/__tests__/html2/part-grouping/avatar.html.snap-4.png
index 289ed59a35..3d825104d7 100644
Binary files a/__tests__/html2/part-grouping/avatar.html.snap-4.png and b/__tests__/html2/part-grouping/avatar.html.snap-4.png differ
diff --git a/__tests__/html2/part-grouping/avatar.html.snap-5.png b/__tests__/html2/part-grouping/avatar.html.snap-5.png
index d9a1e6b3f7..1759973593 100644
Binary files a/__tests__/html2/part-grouping/avatar.html.snap-5.png and b/__tests__/html2/part-grouping/avatar.html.snap-5.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html b/__tests__/html2/part-grouping/keyboard.html
new file mode 100644
index 0000000000..07c43c011c
--- /dev/null
+++ b/__tests__/html2/part-grouping/keyboard.html
@@ -0,0 +1,259 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <title>Part grouping: keyboard expand/collapse</title>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script type="importmap">
+        {
+          "imports": {
+            "react": "https://esm.sh/react@18.3.1",
+            "react-dom": "https://esm.sh/react-dom@18.3.1",
+            "react-dom/": "https://esm.sh/react-dom@18.3.1/",
+            "@testduet/wait-for": "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs",
+            "@fluentui/react-provider": "https://esm.sh/@fluentui/react-provider?deps=react@18&exports=FluentProvider",
+            "@fluentui/tokens": "https://esm.sh/@fluentui/tokens?deps=react@18&exports=createDarkTheme,webLightTheme"
+          }
+        }
+      </script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script type="module">
+      import React from 'react';
+      window.React = React;
+    </script>
+    <script defer crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script defer crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.development.js"></script>
+    <style type="text/css">
+      #webchat {
+        width: 640px;
+      }
+
+      .fui-FluentProvider {
+        height: 100%;
+      }
+
+      .theme.variant-copilot {
+        --webchat__color--surface: var(--colorGrey98);
+      }
+    </style>
+  </head>
+
+  <body>
+    <event-stream></event-stream>
+    <main id="webchat"></main>
+    <script type="module">
+      import { registerElements } from '/assets/custom-element/custom-element.js';
+
+      const [KeyboardEventElement] = await registerElements('keyboard-event', 'event-stream');
+
+      KeyboardEventElement.listenKeyboardEvents();
+    </script>
+    <script type="module">
+      import { FluentProvider } from '@fluentui/react-provider';
+      import { createDarkTheme, webLightTheme } from '@fluentui/tokens';
+      import React from 'react';
+      import { createRoot } from 'react-dom/client';
+      import { waitFor } from '@testduet/wait-for';
+
+      run(async function () {
+        const {
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window;
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const searchParams = new URLSearchParams(location.search);
+        const variant = searchParams.get('variant');
+        const theme = searchParams.get('fluent-theme');
+
+        await host.windowSize(640, 1024, document.getElementById('webchat'));
+        await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
+          features: [{ name: 'prefers-reduced-motion', value: 'reduce' }]
+        });
+
+        const root = createRoot(document.getElementById('webchat'));
+
+        let fluentTheme;
+        let codeBlockTheme;
+
+        if (theme === 'dark' || (window.matchMedia('(prefers-color-scheme: dark)').matches && theme !== 'light')) {
+          fluentTheme = createDarkTheme({ brand: { 100: '#5661d4' } });
+          codeBlockTheme = 'github-dark-default';
+        } else {
+          fluentTheme = webLightTheme;
+          codeBlockTheme = 'github-light-default';
+        }
+
+        if (variant) {
+          window.checkAccessibility = async () => {};
+        }
+
+        const webChatProps = { directLine, store, styleOptions: { codeBlockTheme } };
+
+        root.render(
+          variant === 'copilot' || variant === 'fluent'
+            ? React.createElement(
+                FluentProvider,
+                { className: 'fui-FluentProvider', theme: fluentTheme },
+                React.createElement(
+                  FluentThemeProvider,
+                  { variant: variant },
+                  React.createElement(ReactWebChat, webChatProps)
+                )
+              )
+            : React.createElement(ReactWebChat, webChatProps)
+        );
+
+        await pageConditions.uiConnected();
+
+        const createActivity = (id, text, groupId) => ({
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': '',
+              '@type': 'Message',
+              abstract: text,
+              author: { name: 'Research' },
+              isPartOf: { '@id': groupId, '@type': 'HowTo' },
+              keywords: ['AIGeneratedContent', 'AnalysisMessage'],
+              position: parseInt(id.split('-').pop(), 10),
+              type: 'https://schema.org/Message'
+            }
+          ],
+          id,
+          type: 'message'
+        });
+
+        directLine.emulateIncomingActivity({ from: { role: 'user' }, text: `Message from user.`, type: 'message' });
+        await pageConditions.numActivitiesShown(1);
+
+        // Setup: Send all activities to create two groups.
+        directLine.emulateIncomingActivity(createActivity('activity-1', 'Activity 1'));
+        directLine.emulateIncomingActivity(createActivity('g1-activity-1', 'Group 1, Activity 1', 'g-00001'));
+        directLine.emulateIncomingActivity(createActivity('g1-activity-2', 'Group 1, Activity 2', 'g-00001'));
+        directLine.emulateIncomingActivity(createActivity('g2-activity-1', 'Group 2, Activity 1', 'g-00002'));
+        directLine.emulateIncomingActivity(createActivity('g2-activity-2', 'Group 2, Activity 2', 'g-00002'));
+        directLine.emulateIncomingActivity(createActivity('activity-2', 'Activity 2'));
+
+        await pageConditions.numActivitiesShown(7);
+        await pageObjects.focusTranscript();
+
+        const groupHeaders = () => document.querySelectorAll('.collapsible-grouping__header');
+        const expandCollapseButtons = () => document.querySelectorAll('.collapsible-grouping__header .webchat__activity-button');
+        const expandedGroups = () => document.querySelectorAll('.collapsible-grouping__header .webchat__activity-button[aria-expanded="true"]');
+        const collapsedGroups = () => document.querySelectorAll('.collapsible-grouping__header .webchat__activity-button[aria-expanded="false"]');
+
+        await waitFor(async () => expect(groupHeaders()).toHaveLength(2));
+        await waitFor(async () => expect(expandCollapseButtons()).toHaveLength(2));
+
+        // Test Case 1: Keyboard collapse from group header
+        // When: Navigating to group 1 header and pressing ENTER
+        await host.sendKeys('ARROW_UP'); // activity-2 -> g2-activity-2
+        await host.sendKeys('ARROW_UP'); // g2-activity-2 -> g2-activity-1
+        await host.sendKeys('ARROW_UP'); // g2-activity-1 -> group 2 header
+        await host.sendKeys('ARROW_UP'); // group 2 header -> g1-activity-2
+        await host.sendKeys('ARROW_UP'); // g1-activity-2 -> g1-activity-1
+        await host.sendKeys('ARROW_UP'); // g1-activity-1 -> group 1 header
+
+        await host.snapshot('local');
+        expect(pageElements.focusedActivity()).toBe(undefined);
+        expect(expandedGroups()).toHaveLength(2);
+
+        // When: Pressing ENTER to focus the collapse/expand button
+        await host.sendKeys('ENTER');
+        await host.snapshot('local');
+        expect(document.activeElement).toBe(expandCollapseButtons()[0]);
+
+        // When: Pressing ENTER again to collapse the group
+        await host.sendKeys('ENTER');
+        await waitFor(async () => expect(collapsedGroups()).toHaveLength(1));
+        await host.snapshot('local');
+        expect(expandedGroups()).toHaveLength(1);
+
+        // When: Pressing ESCAPE to return focus to group header
+        await host.sendKeys('ESCAPE');
+        await host.snapshot('local');
+        expect(pageElements.focusedActivity()).toBe(undefined);
+
+        // Test Case 2: Keyboard expand from collapsed group header
+        // When: Pressing ENTER to focus the expand button
+        await host.sendKeys('ENTER');
+        await host.snapshot('local');
+        expect(document.activeElement).toBe(expandCollapseButtons()[0]);
+
+        // When: Pressing ENTER again to expand the group
+        await host.sendKeys('ENTER');
+        await waitFor(async () => expect(expandedGroups()).toHaveLength(2));
+        await host.snapshot('local');
+        expect(collapsedGroups()).toHaveLength(0);
+
+        // When: Pressing ESCAPE to return focus to group header
+        await host.sendKeys('ESCAPE');
+        await host.snapshot('local');
+        expect(pageElements.focusedActivity()).toBe(undefined);
+
+        // Test Case 3: Navigate to second group and test keyboard interaction
+        // When: Navigating to group 2 header
+        await host.sendKeys('ARROW_DOWN'); // group 1 header -> group 1 activity-1
+        await host.sendKeys('ARROW_DOWN'); // group 1 activity-1 -> group 1 activity-2
+        await host.sendKeys('ARROW_DOWN'); // group 1 activity-2 -> group 2 header
+
+        await host.snapshot('local');
+        expect(pageElements.focusedActivity()).toBe(undefined);
+
+        // When: Pressing ENTER to focus the collapse/expand button
+        await host.sendKeys('ENTER');
+        await host.snapshot('local');
+        expect(document.activeElement).toBe(expandCollapseButtons()[1]);
+
+        // When: Pressing ENTER again to collapse group 2
+        await host.sendKeys('ENTER');
+        await waitFor(async () => expect(collapsedGroups()).toHaveLength(1));
+        await host.snapshot('local');
+        expect(expandedGroups()).toHaveLength(1);
+
+        // When: Pressing ESCAPE to return focus to group header
+        await host.sendKeys('ESCAPE');
+        await host.snapshot('local');
+        expect(pageElements.focusedActivity()).toBe(undefined);
+
+        // Test Case 4: Test both groups collapsed navigation
+        // When: Collapsing group 1 as well
+        await host.sendKeys('ARROW_UP'); // group 2 header -> group 1 activity-2
+        await host.sendKeys('ARROW_UP'); // group 1 activity-2 -> group 1 activity-1
+        await host.sendKeys('ARROW_UP'); // group 1 activity-1 -> group 1 header
+        await host.sendKeys('ENTER'); // Focus expand/collapse button
+        await host.sendKeys('ENTER'); // Collapse group 1
+        await waitFor(async () => expect(collapsedGroups()).toHaveLength(2));
+        await host.snapshot('local');
+
+        await host.sendKeys('ESCAPE'); // Return to group header
+        await host.snapshot('local');
+        expect(pageElements.focusedActivity()).toBe(undefined);
+
+        // Test Case 5: Expand both groups back
+        // When: Expanding group 1
+        await host.sendKeys('ENTER'); // Focus expand button
+        await host.sendKeys('ENTER'); // Expand group 1
+        await waitFor(async () => expect(expandedGroups()).toHaveLength(1));
+        await host.snapshot('local');
+
+        await host.sendKeys('ESCAPE'); // Return to group header
+
+        // When: Navigating to group 2 and expanding it
+        await host.sendKeys('ARROW_DOWN'); // group 1 header -> group 1 activity-1
+        await host.sendKeys('ARROW_DOWN'); // group 1 activity-1 -> group 1 activity-2
+        await host.sendKeys('ARROW_DOWN'); // group 1 activity-2 -> group 2 header
+        await host.sendKeys('ENTER'); // Focus expand button
+        await host.sendKeys('ENTER'); // Expand group 2
+        await waitFor(async () => expect(expandedGroups()).toHaveLength(2));
+        await host.snapshot('local');
+
+        await host.sendKeys('ESCAPE'); // Return to group header
+        await host.snapshot('local');
+        expect(pageElements.focusedActivity()).toBe(undefined);
+        expect(collapsedGroups()).toHaveLength(0);
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-1.png b/__tests__/html2/part-grouping/keyboard.html.snap-1.png
new file mode 100644
index 0000000000..021cb5604f
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-1.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-10.png b/__tests__/html2/part-grouping/keyboard.html.snap-10.png
new file mode 100644
index 0000000000..ce60e55dfe
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-10.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-11.png b/__tests__/html2/part-grouping/keyboard.html.snap-11.png
new file mode 100644
index 0000000000..064a11d4f2
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-11.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-12.png b/__tests__/html2/part-grouping/keyboard.html.snap-12.png
new file mode 100644
index 0000000000..00178a901b
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-12.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-13.png b/__tests__/html2/part-grouping/keyboard.html.snap-13.png
new file mode 100644
index 0000000000..6d3d46f47b
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-13.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-14.png b/__tests__/html2/part-grouping/keyboard.html.snap-14.png
new file mode 100644
index 0000000000..ee32c5ef48
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-14.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-15.png b/__tests__/html2/part-grouping/keyboard.html.snap-15.png
new file mode 100644
index 0000000000..8fcd43741b
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-15.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-16.png b/__tests__/html2/part-grouping/keyboard.html.snap-16.png
new file mode 100644
index 0000000000..19c59b666d
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-16.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-2.png b/__tests__/html2/part-grouping/keyboard.html.snap-2.png
new file mode 100644
index 0000000000..290d1c1a9b
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-2.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-3.png b/__tests__/html2/part-grouping/keyboard.html.snap-3.png
new file mode 100644
index 0000000000..9f5f11386b
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-3.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-4.png b/__tests__/html2/part-grouping/keyboard.html.snap-4.png
new file mode 100644
index 0000000000..dc426f68f1
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-4.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-5.png b/__tests__/html2/part-grouping/keyboard.html.snap-5.png
new file mode 100644
index 0000000000..da97af1202
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-5.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-6.png b/__tests__/html2/part-grouping/keyboard.html.snap-6.png
new file mode 100644
index 0000000000..239fe40e9d
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-6.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-7.png b/__tests__/html2/part-grouping/keyboard.html.snap-7.png
new file mode 100644
index 0000000000..c02ceb9171
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-7.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-8.png b/__tests__/html2/part-grouping/keyboard.html.snap-8.png
new file mode 100644
index 0000000000..b9aaf2416b
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-8.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-9.png b/__tests__/html2/part-grouping/keyboard.html.snap-9.png
new file mode 100644
index 0000000000..d976f6bdf3
Binary files /dev/null and b/__tests__/html2/part-grouping/keyboard.html.snap-9.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html b/__tests__/html2/part-grouping/navigation.html
index 7a37478b49..b1f094c237 100644
--- a/__tests__/html2/part-grouping/navigation.html
+++ b/__tests__/html2/part-grouping/navigation.html
@@ -34,74 +34,25 @@
       .theme.variant-copilot {
         --webchat__color--surface: var(--colorGrey98);
       }
-
-      #key-history {
-        align-items: center;
-        display: flex;
-        gap: 0.5em;
-        left: 0.5em;
-        padding: 0.5em;
-        position: fixed;
-        top: 0.5em;
-        z-index: 1;
-        font-size: 3rem;
-      }
-
-      #key-history kbd {
-        background-color: #f7f7f7;
-        border: 1px solid #ccc;
-        border-radius: 6px;
-        box-shadow: 0 1px 0 #aaaaaa44, 0 2px 0 #ffffff44 inset;
-        color: #222;
-        font-weight: bold;
-        padding: 0.2em 0.6em;
-        text-align: center;
-      }
-      #key-history kbd:last-of-type {
-        background-color: #e4e8ec;
-      }
     </style>
   </head>
 
   <body>
-    <div id="key-history" aria-hidden="true"></div>
+    <event-stream></event-stream>
     <main id="webchat"></main>
+    <script type="module">
+      import { registerElements } from '/assets/custom-element/custom-element.js';
+
+      const [KeyboardEventElement] = await registerElements('keyboard-event', 'event-stream');
+
+      KeyboardEventElement.listenKeyboardEvents();
+    </script>
     <script type="module">
       import React from 'react';
       import { createRoot } from 'react-dom/client';
       import { FluentProvider, createDarkTheme, webLightTheme } from '@fluentui/react-components';
       import { waitFor } from '@testduet/wait-for';
 
-      const KEY_MAP = {
-        ArrowDown: '↓',
-        ArrowUp: '↑'
-      };
-
-      const keyHistory = [];
-      const keyHistoryElement = document.getElementById('key-history');
-
-      const updateKeyHistory = () => {
-        const children = keyHistory.slice(-3).map(key => {
-          const kbd = document.createElement('kbd');
-
-          kbd.textContent = key;
-          return kbd;
-        });
-
-        keyHistoryElement.replaceChildren(...children);
-      };
-
-      window.addEventListener(
-        'keydown',
-        event => {
-          keyHistory.push(KEY_MAP[event.key] || event.key);
-          updateKeyHistory();
-        },
-        { capture: true }
-      );
-
-      updateKeyHistory();
-
       run(async function () {
         const {
           WebChat: { FluentThemeProvider, ReactWebChat }
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-10.png b/__tests__/html2/part-grouping/navigation.html.snap-10.png
index 11dc944ccf..90a0458293 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-10.png and b/__tests__/html2/part-grouping/navigation.html.snap-10.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-11.png b/__tests__/html2/part-grouping/navigation.html.snap-11.png
index e0a5ad4f6d..d4369a14b4 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-11.png and b/__tests__/html2/part-grouping/navigation.html.snap-11.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-12.png b/__tests__/html2/part-grouping/navigation.html.snap-12.png
index 989d8c765a..f9df0a0282 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-12.png and b/__tests__/html2/part-grouping/navigation.html.snap-12.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-13.png b/__tests__/html2/part-grouping/navigation.html.snap-13.png
index b84fa861a2..1969b42252 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-13.png and b/__tests__/html2/part-grouping/navigation.html.snap-13.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-14.png b/__tests__/html2/part-grouping/navigation.html.snap-14.png
index 7acea04105..785b56666d 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-14.png and b/__tests__/html2/part-grouping/navigation.html.snap-14.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-15.png b/__tests__/html2/part-grouping/navigation.html.snap-15.png
index e9335daf4d..098675d29e 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-15.png and b/__tests__/html2/part-grouping/navigation.html.snap-15.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-16.png b/__tests__/html2/part-grouping/navigation.html.snap-16.png
index d0dfc5f414..f6888eebec 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-16.png and b/__tests__/html2/part-grouping/navigation.html.snap-16.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-17.png b/__tests__/html2/part-grouping/navigation.html.snap-17.png
index f2c856b9b5..6973966536 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-17.png and b/__tests__/html2/part-grouping/navigation.html.snap-17.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-18.png b/__tests__/html2/part-grouping/navigation.html.snap-18.png
index af29d6a2c2..f8509b8271 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-18.png and b/__tests__/html2/part-grouping/navigation.html.snap-18.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-19.png b/__tests__/html2/part-grouping/navigation.html.snap-19.png
index dcb0ec9308..07e445d7a3 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-19.png and b/__tests__/html2/part-grouping/navigation.html.snap-19.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-2.png b/__tests__/html2/part-grouping/navigation.html.snap-2.png
index 1001c79b91..086d42409f 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-2.png and b/__tests__/html2/part-grouping/navigation.html.snap-2.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-20.png b/__tests__/html2/part-grouping/navigation.html.snap-20.png
index 105a193bc7..f6cc01ab7a 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-20.png and b/__tests__/html2/part-grouping/navigation.html.snap-20.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-21.png b/__tests__/html2/part-grouping/navigation.html.snap-21.png
index 2f9946f935..3c38ebac12 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-21.png and b/__tests__/html2/part-grouping/navigation.html.snap-21.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-22.png b/__tests__/html2/part-grouping/navigation.html.snap-22.png
index 0160c940f4..36e5a13174 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-22.png and b/__tests__/html2/part-grouping/navigation.html.snap-22.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-23.png b/__tests__/html2/part-grouping/navigation.html.snap-23.png
index 37b4ac3d0d..0ae74c6212 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-23.png and b/__tests__/html2/part-grouping/navigation.html.snap-23.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-24.png b/__tests__/html2/part-grouping/navigation.html.snap-24.png
index 65b54c121d..e7e5b82eff 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-24.png and b/__tests__/html2/part-grouping/navigation.html.snap-24.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-25.png b/__tests__/html2/part-grouping/navigation.html.snap-25.png
index 82ca8410bf..37d9badaab 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-25.png and b/__tests__/html2/part-grouping/navigation.html.snap-25.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-26.png b/__tests__/html2/part-grouping/navigation.html.snap-26.png
index d0dfc5f414..ff640d073f 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-26.png and b/__tests__/html2/part-grouping/navigation.html.snap-26.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-3.png b/__tests__/html2/part-grouping/navigation.html.snap-3.png
index 7f59aea044..90e754f0f1 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-3.png and b/__tests__/html2/part-grouping/navigation.html.snap-3.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-4.png b/__tests__/html2/part-grouping/navigation.html.snap-4.png
index 166ff98cdf..a3c2e2f12b 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-4.png and b/__tests__/html2/part-grouping/navigation.html.snap-4.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-5.png b/__tests__/html2/part-grouping/navigation.html.snap-5.png
index a131e5cda0..15e3084195 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-5.png and b/__tests__/html2/part-grouping/navigation.html.snap-5.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-6.png b/__tests__/html2/part-grouping/navigation.html.snap-6.png
index 439546173a..f08a6f175a 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-6.png and b/__tests__/html2/part-grouping/navigation.html.snap-6.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-7.png b/__tests__/html2/part-grouping/navigation.html.snap-7.png
index 82c68e5ed1..8e9d1d4f20 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-7.png and b/__tests__/html2/part-grouping/navigation.html.snap-7.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-8.png b/__tests__/html2/part-grouping/navigation.html.snap-8.png
index 239a67384f..10aa5e895c 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-8.png and b/__tests__/html2/part-grouping/navigation.html.snap-8.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-9.png b/__tests__/html2/part-grouping/navigation.html.snap-9.png
index e9335daf4d..9ad7e97a1a 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-9.png and b/__tests__/html2/part-grouping/navigation.html.snap-9.png differ
diff --git a/packages/component/src/Activity/StackedLayout.module.css b/packages/component/src/Activity/StackedLayout.module.css
index 388a0f4b6b..1b8c88ce86 100644
--- a/packages/component/src/Activity/StackedLayout.module.css
+++ b/packages/component/src/Activity/StackedLayout.module.css
@@ -114,6 +114,10 @@
     > * {
       grid-area: message-status-icon;
     }
+
+    + :global(.webchat__text-content) {
+      transform: translateY(0.15em);
+    }
   }
 
   .stacked-layout__message-status-unset-icon,
diff --git a/packages/component/src/Attachment/Text/private/ActivityButton.tsx b/packages/component/src/Attachment/Text/private/ActivityButton.tsx
index eeccef7873..c027e09ecd 100644
--- a/packages/component/src/Attachment/Text/private/ActivityButton.tsx
+++ b/packages/component/src/Attachment/Text/private/ActivityButton.tsx
@@ -20,6 +20,9 @@ import { ComponentIcon, componentIconPropsSchema } from '../../../Icon';
 
 const activityButtonPropsSchema = pipe(
   object({
+    'aria-controls': optional(string()),
+    'aria-expanded': optional(boolean()),
+    'aria-pressed': optional(boolean()),
     children: optional(reactNode()),
     className: optional(string()),
     'data-testid': optional(string()),
@@ -35,6 +38,9 @@ type ActivityButtonProps = InferInput<typeof activityButtonPropsSchema>;
 
 const ActivityButton = forwardRef<HTMLButtonElement, ActivityButtonProps>((props, ref) => {
   const {
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-pressed': ariaPressed,
     children,
     className,
     'data-testid': dataTestId,
@@ -51,7 +57,10 @@ const ActivityButton = forwardRef<HTMLButtonElement, ActivityButtonProps>((props
 
   return (
     <button
+      aria-controls={ariaControls}
       aria-disabled={disabled ? 'true' : undefined}
+      aria-expanded={ariaExpanded}
+      aria-pressed={ariaPressed}
       className={classNames(activityButton, 'webchat__activity-button', className)}
       data-testid={dataTestId}
       onClick={disabled ? undefined : handleClick}
diff --git a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css
index c367a410f6..92eac10119 100644
--- a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css
+++ b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css
@@ -34,13 +34,11 @@
 }
 
 :global(.webchat) .collapsible-grouping__content {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  min-width: 0;
   height: 0;
-  interpolate-size: allow-keywords;
-  margin: calc(var(--webchat__padding--regular) / -2);
   overflow: clip;
-  padding: calc(var(--webchat__padding--regular) / 2);
+  interpolate-size: allow-keywords;
   transition:
     visibility 0s,
     height 0.2s ease;
@@ -49,5 +47,7 @@
 
 :global(.webchat) .collapsible-grouping__content--open {
   height: auto;
+  margin: calc(var(--webchat__padding--regular) / -2);
+  padding: calc(var(--webchat__padding--regular) / 2);
   visibility: unset;
 }
diff --git a/packages/component/src/Styles/useCustomPropertiesClassName.ts b/packages/component/src/Styles/useCustomPropertiesClassName.ts
index 5042464c4d..d6d2a4175a 100644
--- a/packages/component/src/Styles/useCustomPropertiesClassName.ts
+++ b/packages/component/src/Styles/useCustomPropertiesClassName.ts
@@ -48,11 +48,13 @@ export default function useCustomPropertiesClassName() {
       transcriptTerminatorFontSize,
       transcriptVisualKeyboardIndicatorColor,
       transcriptVisualKeyboardIndicatorStyle,
-      transcriptVisualKeyboardIndicatorWidth
+      transcriptVisualKeyboardIndicatorWidth,
+      transitionDuration
     } = styleOptions;
 
-    // eslint-disable-next-line no-magic-numbers
-    const randomClass = `wc-${Math.ceil(random() * Number.MAX_SAFE_INTEGER).toString(36)}` as const;
+    const randomClass =
+      // eslint-disable-next-line no-magic-numbers
+      `w${Math.ceil(random() * Number.MAX_SAFE_INTEGER).toString(36)}_${webchatCustomPropertiesClass.replace('webchat__', '')}` as const;
 
     const contents = `
 .${webchatCustomPropertiesClass}.${randomClass} {
@@ -90,11 +92,10 @@ export default function useCustomPropertiesClassName() {
   ${CustomPropertyNames.MinHeightImageBubble}: ${bubbleImageMinHeight}px;
   ${CustomPropertyNames.PaddingRegular}: ${paddingRegular}px;
   ${CustomPropertyNames.SizeAvatar}: ${avatarSize}px;
+  ${CustomPropertyNames.TransitionDuration}: ${transitionDuration};
 }
 `;
-    const [style] = makeCreateStyles(contents)();
-
-    style.dataset.webchatInjected = 'component';
+    const [style] = makeCreateStyles(contents)('component');
 
     return [Object.freeze([style]), Object.freeze([`${webchatCustomPropertiesClass} ${randomClass}`] as const)];
   }, [styleOptions]);
diff --git a/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css b/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css
index 8847390332..89036b3d4f 100644
--- a/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css
+++ b/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css
@@ -181,6 +181,19 @@
     margin: var(--webchat-spacingVerticalXS) var(--webchat__bubble--inline-padding);
   }
 
+  :global(.stacked-layout .stacked-layout__main .stacked-layout__message-status) {
+    margin-block: calc(var(--webchat__bubble--block-padding) + 1px);
+
+    + :global(.webchat__text-content) {
+      transform: translateY(-0.05em);
+    }
+  }
+
+  &.variant-copilot :global(.stacked-layout .stacked-layout__main .stacked-layout__message-status) {
+    margin-inline-start: var(--webchat-spacingHorizontalNone);
+    margin-block: var(--webchat-spacingVerticalXXS);
+  }
+
   &.part-grouping-decorator--group :global(.stacked-layout .stacked-layout__main .stacked-layout__message-status) {
     margin-block: var(--webchat-spacingVerticalXS);
   }
diff --git a/serve-test.json b/serve-test.json
index 61aec27613..37386abc8a 100644
--- a/serve-test.json
+++ b/serve-test.json
@@ -11,6 +11,10 @@
     }
   ],
   "rewrites": [
+    {
+      "source": "/assets/custom-element/:name.ce",
+      "destination": "__tests__/html/assets/custom-element/:name.ce.html"
+    },
     {
       "source": "/assets/:filename",
       "destination": "__tests__/html/assets/:filename"