diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31cb8302c0..7696d5e2b1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,7 +43,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Added `CopilotMessageHeader` component for displaying bot information in the "copilot" variant, in PR [#5258](https://github.com/microsoft/BotFramework-WebChat/pull/5258), by [@OEvgeny](https://github.com/OEvgeny)
 -  Updated Fluent theme styling to improve accessibility and visual consistency, in PR [#5258](https://github.com/microsoft/BotFramework-WebChat/pull/5258), by [@OEvgeny](https://github.com/OEvgeny)
 -  Fixed header font in copilot variant, in PR [#5261](https://github.com/microsoft/BotFramework-WebChat/pull/5261), by [@OEvgeny](https://github.com/OEvgeny)
--  Added "Copy" button to bot messages in Fluent UI if it contains keyword `AllowCopy`, in PR [#5259](https://github.com/microsoft/BotFramework-WebChat/pull/5259), [#5262](https://github.com/microsoft/BotFramework-WebChat/pull/5262), and [#5285](https://github.com/microsoft/BotFramework-WebCHat/pull/5285), by [@compulim](https://github.com/compulim)
+-  Added "Copy" button to bot messages in Fluent UI if it contains keyword `AllowCopy`, in PR [#5259](https://github.com/microsoft/BotFramework-WebChat/pull/5259), [#5262](https://github.com/microsoft/BotFramework-WebChat/pull/5262), and [#5285](https://github.com/microsoft/BotFramework-WebChat/pull/5285), by [@compulim](https://github.com/compulim)
 -  Resolves [#4876](https://github.com/microsoft/BotFramework-WebChat/issues/4876) and [#4939](https://github.com/microsoft/BotFramework-WebChat/issues/4939). Added support of informative message in livestreaming, by [@compulim](https://github.com/compulim), in PR [#5265](https://github.com/microsoft/BotFramework-WebChat/pull/5265)
 -  Introduced centralized announcements approach via the new `usePushToLiveRegion` hook, in PR [#5251](https://github.com/microsoft/BotFramework-WebChat/pull/5251), by [@OEvgeny](https://github.com/OEvgeny)
 -  Added keyboard shortcut for the "New Messages" button, in PR [#5251](https://github.com/microsoft/BotFramework-WebChat/pull/5251), by [@OEvgeny](https://github.com/OEvgeny)
@@ -91,6 +91,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Improved view code dialog UI in Fluent theme with better styling and accessibility, in PR [#5337](https://github.com/microsoft/BotFramework-WebChat/pull/5337), by [@OEvgeny](https://github.com/OEvgeny)
 -  Switched math block syntax from `$$` to Tex-style `\[ \]` and `\( \)` delimiters with improved rendering and error handling, in PR [#5353](https://github.com/microsoft/BotFramework-WebChat/pull/5353), by [@OEvgeny](https://github.com/OEvgeny)
 -  Improved avatar display and grouping behavior by fixing rendering issues and activity sender identification, in PR [#5346](https://github.com/microsoft/BotFramework-WebChat/pull/5346), by [@OEvgeny](https://github.com/OEvgeny)
+-  Activity "copy" button will use `outerHTML` and `textContent` for clipboard content, in PR [#5378](https://github.com/microsoft/BotFramework-WebChat/pull/5378), by [@compulim](https://github.com/compuilm)
 
 ### Fixed
 
diff --git a/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-1-snap.png b/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-1-snap.png
deleted file mode 100644
index 572ed48e3c..0000000000
Binary files a/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-1-snap.png and /dev/null differ
diff --git a/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-2-snap.png b/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-2-snap.png
deleted file mode 100644
index f535c49191..0000000000
Binary files a/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-2-snap.png and /dev/null differ
diff --git a/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-3-snap.png b/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-3-snap.png
deleted file mode 100644
index b9eb49a501..0000000000
Binary files a/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-3-snap.png and /dev/null differ
diff --git a/__tests__/html/copyButton.denied.js b/__tests__/html/copyButton.denied.js
deleted file mode 100644
index e62a0ae418..0000000000
--- a/__tests__/html/copyButton.denied.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
-
-test('copy button with denied permission should be disabled', () => runHTML('copyButton.denied'));
diff --git a/__tests__/html/copyButton.disabled.js b/__tests__/html/copyButton.disabled.js
deleted file mode 100644
index 4381b312c1..0000000000
--- a/__tests__/html/copyButton.disabled.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
-
-test('copy button should be able to disable', () => runHTML('copyButton.disabled'));
diff --git a/__tests__/html/copyButton.hideAndShow.js b/__tests__/html/copyButton.hideAndShow.js
deleted file mode 100644
index dfdde9572d..0000000000
--- a/__tests__/html/copyButton.hideAndShow.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
-
-test('copy button should not show as copied on hide/show', () => runHTML('copyButton.hideAndShow'));
diff --git a/__tests__/html/copyButton.js b/__tests__/html/copyButton.js
deleted file mode 100644
index b0e1a879eb..0000000000
--- a/__tests__/html/copyButton.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
-
-test('copy button should work', () => runHTML('copyButton'));
diff --git a/__tests__/html/copyButton.layout.js b/__tests__/html/copyButton.layout.js
deleted file mode 100644
index bdf462a54e..0000000000
--- a/__tests__/html/copyButton.layout.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
-
-describe.each([
-  ['light', 'white label'],
-  ['dark', 'fluent'],
-  ['dark', 'copilot'],
-  ['light', 'fluent'],
-  ['light', 'copilot']
-])('with %s theme and %s variant', (theme, variant) =>
-  test('copy button should layout properly', () =>
-    runHTML(`copyButton.layout?${new URLSearchParams({ theme, variant }).toString()}`))
-);
diff --git a/__tests__/html/copyButton.denied.html b/__tests__/html2/copyButton/behavior.denied.html
similarity index 97%
rename from __tests__/html/copyButton.denied.html
rename to __tests__/html2/copyButton/behavior.denied.html
index 770a09c9cb..946dd70f2f 100644
--- a/__tests__/html/copyButton.denied.html
+++ b/__tests__/html2/copyButton/behavior.denied.html
@@ -59,13 +59,13 @@
         expect(copyButton.getAttribute('aria-disabled')).toBe('true');
 
         // THEN: Should match screenshot.
-        await host.snapshot();
+        await host.snapshot('local');
 
         // WHEN: Clicks the "Copy" button.
         await host.click(copyButton);
 
         // THEN: The copy button should not change to "Copied".
-        await host.snapshot();
+        await host.snapshot('local');
       });
     </script>
   </body>
diff --git a/__tests__/__image_snapshots__/html/copy-button-denied-js-copy-button-with-denied-permission-should-be-disabled-1-snap.png b/__tests__/html2/copyButton/behavior.denied.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/html/copy-button-denied-js-copy-button-with-denied-permission-should-be-disabled-1-snap.png
rename to __tests__/html2/copyButton/behavior.denied.html.snap-1.png
diff --git a/__tests__/__image_snapshots__/html/copy-button-denied-js-copy-button-with-denied-permission-should-be-disabled-2-snap.png b/__tests__/html2/copyButton/behavior.denied.html.snap-2.png
similarity index 100%
rename from __tests__/__image_snapshots__/html/copy-button-denied-js-copy-button-with-denied-permission-should-be-disabled-2-snap.png
rename to __tests__/html2/copyButton/behavior.denied.html.snap-2.png
diff --git a/__tests__/html/copyButton.disabled.html b/__tests__/html2/copyButton/behavior.disabled.html
similarity index 97%
rename from __tests__/html/copyButton.disabled.html
rename to __tests__/html2/copyButton/behavior.disabled.html
index 1956fbdb82..4ef5e95b74 100644
--- a/__tests__/html/copyButton.disabled.html
+++ b/__tests__/html2/copyButton/behavior.disabled.html
@@ -59,13 +59,13 @@
         expect(copyButton.getAttribute('aria-disabled')).toBe('true');
 
         // THEN: Should match screenshot.
-        await host.snapshot();
+        await host.snapshot('local');
 
         // WHEN: Clicks the "Copy" button.
         await host.click(copyButton);
 
         // THEN: The copy button should not change to "Copied".
-        await host.snapshot();
+        await host.snapshot('local');
       });
     </script>
   </body>
diff --git a/__tests__/__image_snapshots__/html/copy-button-disabled-js-copy-button-should-be-able-to-disable-1-snap.png b/__tests__/html2/copyButton/behavior.disabled.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/html/copy-button-disabled-js-copy-button-should-be-able-to-disable-1-snap.png
rename to __tests__/html2/copyButton/behavior.disabled.html.snap-1.png
diff --git a/__tests__/__image_snapshots__/html/copy-button-disabled-js-copy-button-should-be-able-to-disable-2-snap.png b/__tests__/html2/copyButton/behavior.disabled.html.snap-2.png
similarity index 100%
rename from __tests__/__image_snapshots__/html/copy-button-disabled-js-copy-button-should-be-able-to-disable-2-snap.png
rename to __tests__/html2/copyButton/behavior.disabled.html.snap-2.png
diff --git a/__tests__/html/copyButton.hideAndShow.html b/__tests__/html2/copyButton/behavior.hideAndShow.html
similarity index 96%
rename from __tests__/html/copyButton.hideAndShow.html
rename to __tests__/html2/copyButton/behavior.hideAndShow.html
index f66d3623f5..e23d33596c 100644
--- a/__tests__/html/copyButton.hideAndShow.html
+++ b/__tests__/html2/copyButton/behavior.hideAndShow.html
@@ -63,13 +63,13 @@
         await host.click(document.querySelector(`[data-testid="${WebChat.testIds.copyButton}"]`));
 
         // THEN: The "Copy" button should say "Copied".
-        await host.snapshot();
+        await host.snapshot('local');
 
         // WHEN: After 1 second.
         await testHelpers.sleep(1_000);
 
         // THEN: The "Copy" button should back to normal.
-        await host.snapshot();
+        await host.snapshot('local');
 
         // WHEN: Hiding Web Chat and showing it back.
         document.getElementById('webchat').style.display = 'none';
@@ -77,7 +77,7 @@
         document.getElementById('webchat').style.display = '';
 
         // THEN: The "Copy" button should kept at normal.
-        await host.snapshot();
+        await host.snapshot('local');
       });
     </script>
   </body>
diff --git a/__tests__/__image_snapshots__/html/copy-button-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-1-snap.png b/__tests__/html2/copyButton/behavior.hideAndShow.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/html/copy-button-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-1-snap.png
rename to __tests__/html2/copyButton/behavior.hideAndShow.html.snap-1.png
diff --git a/__tests__/__image_snapshots__/html/copy-button-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-2-snap.png b/__tests__/html2/copyButton/behavior.hideAndShow.html.snap-2.png
similarity index 100%
rename from __tests__/__image_snapshots__/html/copy-button-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-2-snap.png
rename to __tests__/html2/copyButton/behavior.hideAndShow.html.snap-2.png
diff --git a/__tests__/__image_snapshots__/html/copy-button-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-3-snap.png b/__tests__/html2/copyButton/behavior.hideAndShow.html.snap-3.png
similarity index 100%
rename from __tests__/__image_snapshots__/html/copy-button-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-3-snap.png
rename to __tests__/html2/copyButton/behavior.hideAndShow.html.snap-3.png
diff --git a/__tests__/html/copyButton.html b/__tests__/html2/copyButton/behavior.html
similarity index 84%
rename from __tests__/html/copyButton.html
rename to __tests__/html2/copyButton/behavior.html
index 14edc9db93..d75ef9e43d 100644
--- a/__tests__/html/copyButton.html
+++ b/__tests__/html2/copyButton/behavior.html
@@ -73,7 +73,7 @@
               type: 'https://schema.org/Message'
             }
           ],
-          text: 'Mollit *aute* **aute** dolor ea ex magna incididunt nostrud sit nisi.',
+          text: 'Mollit *aute* **aute** dolor ea ex magna incididunt nostrud sit nisi. ![Icon](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAYAAABiS3YzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFvSURBVHgB7ZPdcYJAFIUX9D2UgBWIFQS0AUsgFYQOhA7sILGCkAIUUkGwA0og7/zku8mSWYHM+OKbd8bhsufcc84uq1L3unn5vu+u1+u3K7lSu+G6PVywLCtr2/asrqsC/hbh6EJj4Bzatv14Op2eSLvrum6VZdlWjRO6Yg4e8OowI0EWeZ5Xo6QQnwEPMsRryFA0FY/hEu47vxd6SVsgHKrh9hFyAF1IOYTodzYvDdzTZj+FeQxf1hzMDywtR6Lz+dwDPOvES0k8OJZP2bKRtoIvph5YSb8YidZ1XQE+6BRfs9nM6TH6Spsps+BXaqLMMxU3Vw8XTdN4PXA8HlMEAsxW5jB84RQEkrk/gwvrzWaTIZaIgWxXRMxzNUtuBw9XbkoQBClBUvrXYVJx/gDcaaGEfj8lKB+NR4hpoq/XshcciQLEPBz5l9DvMYmnROUa6aOo9MdLTNyaSOGy9ZQhv7/M/xVHEMFz4MXqXjetb0P8xVy6y7nkAAAAAElFTkSuQmCC)',
           type: 'message'
         });
 
@@ -88,13 +88,13 @@
         const copyButton = document.querySelector(`[data-testid="${WebChat.testIds.copyButton}"]`);
 
         expect(document.activeElement).toBe(copyButton);
-        await host.snapshot();
+        await host.snapshot('local');
 
         // WHEN: Press ENTER on the "Copy" button.
         await host.sendKeys('ENTER');
 
         // THEN: The copy button should change to "Copied".
-        await host.snapshot();
+        await host.snapshot('local');
 
         // WHEN: Paste into plain text and rich text text box.
         await host.click(document.querySelector('[data-testid="plain-text-box"]'));
@@ -109,7 +109,7 @@
         await testHelpers.sleep(500);
 
         // THEN: Plain text box should contains plain text, while rich text box should contains rich text.
-        await host.snapshot();
+        await host.snapshot('local');
       });
     </script>
   </body>
diff --git a/__tests__/html2/copyButton/behavior.html.snap-1.png b/__tests__/html2/copyButton/behavior.html.snap-1.png
new file mode 100644
index 0000000000..90cacf6298
Binary files /dev/null and b/__tests__/html2/copyButton/behavior.html.snap-1.png differ
diff --git a/__tests__/html2/copyButton/behavior.html.snap-2.png b/__tests__/html2/copyButton/behavior.html.snap-2.png
new file mode 100644
index 0000000000..07e6a7c7cf
Binary files /dev/null and b/__tests__/html2/copyButton/behavior.html.snap-2.png differ
diff --git a/__tests__/html2/copyButton/behavior.html.snap-3.png b/__tests__/html2/copyButton/behavior.html.snap-3.png
new file mode 100644
index 0000000000..d6e1c2174c
Binary files /dev/null and b/__tests__/html2/copyButton/behavior.html.snap-3.png differ
diff --git a/__tests__/html2/copyButton/layout.copilot.dark.html b/__tests__/html2/copyButton/layout.copilot.dark.html
new file mode 100644
index 0000000000..54d46a168d
--- /dev/null
+++ b/__tests__/html2/copyButton/layout.copilot.dark.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './layout?theme=dark&variant=copilot';
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/__tests__/__image_snapshots__/html/copy-button-layout-js-with-dark-theme-and-copilot-variant-copy-button-should-layout-properly-1-snap.png b/__tests__/html2/copyButton/layout.copilot.dark.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/html/copy-button-layout-js-with-dark-theme-and-copilot-variant-copy-button-should-layout-properly-1-snap.png
rename to __tests__/html2/copyButton/layout.copilot.dark.html.snap-1.png
diff --git a/__tests__/html2/copyButton/layout.copilot.light.html b/__tests__/html2/copyButton/layout.copilot.light.html
new file mode 100644
index 0000000000..07b330c3ae
--- /dev/null
+++ b/__tests__/html2/copyButton/layout.copilot.light.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './layout?theme=light&variant=copilot';
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/__tests__/__image_snapshots__/html/copy-button-layout-js-with-light-theme-and-copilot-variant-copy-button-should-layout-properly-1-snap.png b/__tests__/html2/copyButton/layout.copilot.light.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/html/copy-button-layout-js-with-light-theme-and-copilot-variant-copy-button-should-layout-properly-1-snap.png
rename to __tests__/html2/copyButton/layout.copilot.light.html.snap-1.png
diff --git a/__tests__/html2/copyButton/layout.fluent.dark.html b/__tests__/html2/copyButton/layout.fluent.dark.html
new file mode 100644
index 0000000000..8f75fff18e
--- /dev/null
+++ b/__tests__/html2/copyButton/layout.fluent.dark.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './layout?theme=dark&variant=fluent';
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/__tests__/__image_snapshots__/html/copy-button-layout-js-with-dark-theme-and-fluent-variant-copy-button-should-layout-properly-1-snap.png b/__tests__/html2/copyButton/layout.fluent.dark.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/html/copy-button-layout-js-with-dark-theme-and-fluent-variant-copy-button-should-layout-properly-1-snap.png
rename to __tests__/html2/copyButton/layout.fluent.dark.html.snap-1.png
diff --git a/__tests__/html2/copyButton/layout.fluent.light.html b/__tests__/html2/copyButton/layout.fluent.light.html
new file mode 100644
index 0000000000..e2bcdbccb4
--- /dev/null
+++ b/__tests__/html2/copyButton/layout.fluent.light.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './layout?theme=light&variant=fluent';
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/__tests__/__image_snapshots__/html/copy-button-layout-js-with-light-theme-and-fluent-variant-copy-button-should-layout-properly-1-snap.png b/__tests__/html2/copyButton/layout.fluent.light.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/html/copy-button-layout-js-with-light-theme-and-fluent-variant-copy-button-should-layout-properly-1-snap.png
rename to __tests__/html2/copyButton/layout.fluent.light.html.snap-1.png
diff --git a/__tests__/html/copyButton.layout.html b/__tests__/html2/copyButton/layout.html
similarity index 97%
rename from __tests__/html/copyButton.layout.html
rename to __tests__/html2/copyButton/layout.html
index 63417e7746..6a9c2531ff 100644
--- a/__tests__/html/copyButton.layout.html
+++ b/__tests__/html2/copyButton/layout.html
@@ -57,9 +57,7 @@
 
         const root = createRoot(document.getElementById('webchat'));
 
-        if (searchParams.get('variant') === 'white label') {
-          root.render(<App />);
-        } else {
+        if (searchParams.get('variant') === 'copilot' || searchParams.get('variant') === 'fluent') {
           root.render(
             <FluentProvider
               theme={
@@ -73,6 +71,8 @@
               </FluentThemeProvider>
             </FluentProvider>
           );
+        } else {
+          root.render(<App />);
         }
 
         await pageConditions.uiConnected();
@@ -139,7 +139,7 @@
         );
 
         // THEN: "Copy" button should appear after the message.
-        await host.snapshot();
+        await host.snapshot('local');
       });
     </script>
   </body>
diff --git a/__tests__/__image_snapshots__/html/copy-button-layout-js-with-light-theme-and-white-label-variant-copy-button-should-layout-properly-1-snap.png b/__tests__/html2/copyButton/layout.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/html/copy-button-layout-js-with-light-theme-and-white-label-variant-copy-button-should-layout-properly-1-snap.png
rename to __tests__/html2/copyButton/layout.html.snap-1.png
diff --git a/docs/HOOKS.md b/docs/HOOKS.md
index 645e9111bf..4fa084f891 100644
--- a/docs/HOOKS.md
+++ b/docs/HOOKS.md
@@ -1007,7 +1007,7 @@ This function is for rendering the avatar of an activity. The caller will need t
 <!-- prettier-ignore-start -->
 ```js
 useRenderMarkdownAsHTML(
-  mode: 'accessible name' | 'adaptive cards' | 'citation modal' | 'clipboard' | 'message activity' = 'message activity'
+  mode: 'accessible name' | 'adaptive cards' | 'citation modal' | 'message activity' = 'message activity'
 ): (markdown: string): string
 ```
 <!-- prettier-ignore-end -->
diff --git a/packages/component/src/Attachment/Text/private/ActivityCopyButton.tsx b/packages/component/src/Attachment/Text/private/ActivityCopyButton.tsx
index 680f400f37..c8fd4afc98 100644
--- a/packages/component/src/Attachment/Text/private/ActivityCopyButton.tsx
+++ b/packages/component/src/Attachment/Text/private/ActivityCopyButton.tsx
@@ -1,7 +1,6 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
-import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { useRefFrom } from 'use-ref-from';
+import React, { memo, useCallback, useEffect, useRef, useState, type RefObject } from 'react';
 import useStyleSet from '../../../hooks/useStyleSet';
 import ActivityButton from './ActivityButton';
 
@@ -9,20 +8,17 @@ const { useLocalizer, useUIState } = hooks;
 
 type Props = Readonly<{
   className?: string | undefined;
-  htmlText?: string | undefined;
-  plainText: string;
+  targetRef?: RefObject<HTMLElement>;
 }>;
 
 const COPY_ICON_URL = `data:image/svg+xml;utf8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none"><path d="M8.5 2C7.39543 2 6.5 2.89543 6.5 4V14C6.5 15.1046 7.39543 16 8.5 16H14.5C15.6046 16 16.5 15.1046 16.5 14V4C16.5 2.89543 15.6046 2 14.5 2H8.5ZM7.5 4C7.5 3.44772 7.94772 3 8.5 3H14.5C15.0523 3 15.5 3.44772 15.5 4V14C15.5 14.5523 15.0523 15 14.5 15H8.5C7.94772 15 7.5 14.5523 7.5 14V4ZM4.5 6.00001C4.5 5.25973 4.9022 4.61339 5.5 4.26758V14.5C5.5 15.8807 6.61929 17 8 17H14.2324C13.8866 17.5978 13.2403 18 12.5 18H8C6.067 18 4.5 16.433 4.5 14.5V6.00001Z" fill="#000000"/></svg>')}`;
 
-const ActivityCopyButton = ({ className, htmlText, plainText }: Props) => {
+const ActivityCopyButton = ({ className, targetRef }: Props) => {
   const [{ activityButton, activityCopyButton }] = useStyleSet();
   const [permissionGranted, setPermissionGranted] = useState(false);
   const [uiState] = useUIState();
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const htmlTextRef = useRefFrom(htmlText);
   const localize = useLocalizer();
-  const plainTextRef = useRefFrom(plainText);
 
   const copiedText = localize('COPY_BUTTON_COPIED_TEXT');
   const copyText = localize('COPY_BUTTON_TEXT');
@@ -41,13 +37,14 @@ const ActivityCopyButton = ({ className, htmlText, plainText }: Props) => {
   }, [buttonRef]);
 
   const handleClick = useCallback(() => {
-    const { current: htmlText } = htmlTextRef;
+    const htmlText = targetRef.current?.outerHTML;
+    const plainText = targetRef.current?.textContent;
 
     navigator.clipboard
       ?.write([
         new ClipboardItem({
           ...(htmlText ? { 'text/html': new Blob([htmlText], { type: 'text/html' }) } : {}),
-          'text/plain': new Blob([plainTextRef.current], { type: 'text/plain' })
+          ...(plainText ? { 'text/plain': new Blob([plainText], { type: 'text/plain' }) } : {})
         })
       ])
       .catch(error => console.error(`botframework-webchat-fluent-theme: Failed to copy to clipboard.`, error));
@@ -60,7 +57,7 @@ const ActivityCopyButton = ({ className, htmlText, plainText }: Props) => {
     buttonRef.current?.offsetWidth;
 
     buttonRef.current?.classList.add('webchat__activity-copy-button--copied');
-  }, [buttonRef, htmlTextRef, plainTextRef]);
+  }, [buttonRef, targetRef]);
 
   useEffect(() => {
     let unmounted = false;
diff --git a/packages/component/src/Attachment/Text/private/CitationModalContent.tsx b/packages/component/src/Attachment/Text/private/CitationModalContent.tsx
index a6836bbc1e..38186a38a0 100644
--- a/packages/component/src/Attachment/Text/private/CitationModalContent.tsx
+++ b/packages/component/src/Attachment/Text/private/CitationModalContent.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { Fragment, memo } from 'react';
+import React, { Fragment, memo, useMemo } from 'react';
 
 import useRenderMarkdownAsHTML from '../../../hooks/useRenderMarkdownAsHTML';
 import useStyleSet from '../../../hooks/useStyleSet';
@@ -13,6 +13,8 @@ const CitationModalContent = memo(({ headerText, markdown }: Props) => {
   const [{ renderMarkdown: renderMarkdownStyleSet }] = useStyleSet();
   const renderMarkdownAsHTML = useRenderMarkdownAsHTML('citation modal');
 
+  const html = useMemo(() => ({ __html: renderMarkdownAsHTML(markdown) }), [markdown, renderMarkdownAsHTML]);
+
   return (
     <Fragment>
       {headerText && <h2 className="webchat__citation-modal-dialog__header">{headerText}</h2>}
@@ -25,7 +27,7 @@ const CitationModalContent = memo(({ headerText, markdown }: Props) => {
           )}
           // The content rendered by `renderMarkdownAsHTML` is sanitized.
           // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: renderMarkdownAsHTML(markdown) }}
+          dangerouslySetInnerHTML={html}
         />
       ) : (
         <div className={classNames('webchat__render-markdown', renderMarkdownStyleSet + '')}>{markdown}</div>
diff --git a/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx b/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx
index 0172f33ce9..b5bdbc2d73 100644
--- a/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx
+++ b/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx
@@ -9,7 +9,7 @@ import {
 import classNames from 'classnames';
 import type { Definition } from 'mdast';
 import { fromMarkdown } from 'mdast-util-from-markdown';
-import React, { memo, useCallback, useMemo, type MouseEventHandler, type ReactNode } from 'react';
+import React, { memo, useCallback, useMemo, useRef, type MouseEventHandler, type ReactNode } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
 import { LinkDefinitionItem, LinkDefinitions } from '../../../LinkDefinition/index';
@@ -54,10 +54,10 @@ const MarkdownTextContent = memo(({ activity, children, markdown }: Props) => {
       textContent: textContentStyleSet
     }
   ] = useStyleSet();
+  const contentRef = useRef<HTMLDivElement>(null);
   const localize = useLocalizer();
   const graph = useMemo(() => dereferenceBlankNodes(activity.entities || []), [activity.entities]);
   const renderMarkdownAsHTML = useRenderMarkdownAsHTML('message activity');
-  const renderMarkdownAsHTMLForClipboard = useRenderMarkdownAsHTML('clipboard');
   const showModal = useShowModal();
 
   const messageThing = useMemo(() => getOrgSchemaMessage(graph), [graph]);
@@ -73,11 +73,6 @@ const MarkdownTextContent = memo(({ activity, children, markdown }: Props) => {
     [renderMarkdownAsHTML, markdown]
   );
 
-  const htmlTextForClipboard = useMemo(
-    () => (markdown ? renderMarkdownAsHTMLForClipboard(markdown) : undefined),
-    [markdown, renderMarkdownAsHTMLForClipboard]
-  );
-
   const markdownDefinitions = useMemo(
     () => fromMarkdown(markdown).children.filter((node): node is Definition => node.type === 'definition'),
     [markdown]
@@ -215,6 +210,7 @@ const MarkdownTextContent = memo(({ activity, children, markdown }: Props) => {
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={dangerouslySetInnerHTML}
         onClick={handleClick}
+        ref={contentRef}
       />
       {children}
       {!!entries.length && (
@@ -246,11 +242,7 @@ const MarkdownTextContent = memo(({ activity, children, markdown }: Props) => {
           />
         ) : null}
         {activity.type === 'message' && activity.text && messageThing?.keywords?.includes('AllowCopy') ? (
-          <ActivityCopyButton
-            className="webchat__text-content__activity-copy-button"
-            htmlText={htmlTextForClipboard}
-            plainText={activity.text}
-          />
+          <ActivityCopyButton className="webchat__text-content__activity-copy-button" targetRef={contentRef} />
         ) : null}
       </div>
     </div>
diff --git a/packages/component/src/LiveRegion/LiveRegionActivity.tsx b/packages/component/src/LiveRegion/LiveRegionActivity.tsx
index ad25e39ed3..8fd87e3aa8 100644
--- a/packages/component/src/LiveRegion/LiveRegionActivity.tsx
+++ b/packages/component/src/LiveRegion/LiveRegionActivity.tsx
@@ -42,7 +42,7 @@ const LiveRegionActivity: VFC<LiveRegionActivityProps> = ({ activity }) => {
   const fallbackText: string | undefined =
     type === 'message' ? activity.channelData['webchat:fallback-text'] : undefined;
   const localize = useLocalizer();
-  const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML('accessible name');
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const textAlt = useMemo(() => activityAltText(activity, renderMarkdownAsHTML), [activity, renderMarkdownAsHTML]);
 
diff --git a/packages/component/src/hooks/useRenderMarkdownAsHTML.ts b/packages/component/src/hooks/useRenderMarkdownAsHTML.ts
index df3192f98a..8eae1dd4a7 100644
--- a/packages/component/src/hooks/useRenderMarkdownAsHTML.ts
+++ b/packages/component/src/hooks/useRenderMarkdownAsHTML.ts
@@ -11,7 +11,7 @@ import useStyleSet from './useStyleSet';
 const { useLocalizer, useStyleOptions } = hooks;
 
 export default function useRenderMarkdownAsHTML(
-  mode: 'accessible name' | 'adaptive cards' | 'citation modal' | 'clipboard' | 'message activity' = 'message activity'
+  mode: 'accessible name' | 'adaptive cards' | 'citation modal' | 'message activity' = 'message activity'
 ):
   | ((
       markdown: string,
@@ -34,9 +34,8 @@ export default function useRenderMarkdownAsHTML(
         {
           'webchat__render-markdown--adaptive-cards': mode === 'adaptive cards',
           'webchat__render-markdown--citation': mode === 'citation modal',
-          'webchat__render-markdown--clipboard': mode === 'clipboard',
           'webchat__render-markdown--message-activity':
-            mode !== 'accessible name' && mode !== 'adaptive cards' && mode !== 'citation modal' && mode !== 'clipboard'
+            mode !== 'accessible name' && mode !== 'adaptive cards' && mode !== 'citation modal'
         },
         renderMarkdownStyleSet + ''
       ),