feat: New 'Copy Formatted' button to preserve formatting when copied to the clipboard

[MacJedi42]

trafficstars

feat: Added 'Copy Formatted' button for preserving formatting when copying AI responses to Microsoft Word or other Rich Text Applications

Pull Request Checklist

• [x] Target branch: This pull request targets the dev branch.
• [x] Description: Added a new "Copy Formatted" button that preserves markdown formatting when copying AI responses to the clipboard, making it easier to paste into rich text applications.
• [x] Changelog: Changelog entry has been added below following the Keep a Changelog format.
• [x] Documentation: No documentation updates needed as this is a self-explanatory UI feature.
• [x] Dependencies: No new dependencies added - using existing marked library already in the project.
• [x] Testing: Tested across Chrome, Firefox, and Safari, and output into Microsoft Word to ensure compatibility.
• [x] Code review: Performed self-review of code to ensure it follows project standards.
• [x] Prefix: Using "feat" prefix as this introduces a new feature to the codebase.

Changelog Entry

Description

This PR adds a new "Copy Formatted" button next to the existing copy button in AI responses. When clicked, it converts the markdown to HTML with proper formatting and copies it to the clipboard, allowing users to paste formatted content into applications that support rich text (like Microsoft Word, Google Docs, email clients, etc.).

Added

• Added a new "Copy Formatted" button in the ResponseMessage.svelte component
• Implemented copyFormattedToClipboard function that uses marked to convert markdown to HTML
• Added syntax highlighting for code blocks in the formatted output
• Added CSS styling to make the pasted content look better in rich text editors
• Added fallback to plain text for browsers that don't support the Clipboard API

Changed

• No existing functionality was changed

Deprecated

• None

Removed

• None

Fixed

• None

Security

• None

Breaking Changes

• None

---

Additional Information

This feature enhances the user experience by preserving formatting when copying AI responses. It's particularly useful for:

• Preserving tables, lists, and other structured content
• Maintaining headings and text formatting, meaning less time removing markdown syntax and rebuilding tables, and making it easier to change formatting to suit a template.

The implementation uses the existing marked library that's already a dependency in the project, along with the highlight.js library for code syntax highlighting.

Screenshots

Screenshot showing the new Copy Formatted button next to the existing copy button

https://github.com/user-attachments/assets/4cd06186-fbb2-4c99-9abb-fea06695041f Video Example of formatted content pasted into Microsoft Word, showing preserved formatting

[taylorwilsdon]

Oh I like this, I find myself having to edit the response in the chat to extract the raw markdown instead of the rendered content that won't paste nicely into VIM. +1 from me

[fubaochen]

Could you solve the problem that the output of the replication inference model will copy the content of the think

[MacJedi42]

Could you solve the problem that the output of the replication inference model will copy the content of the think

That's a good catch, I will look into that. Thank you.

[MacJedi42]

Could you solve the problem that the output of the replication inference model will copy the content of the think

Hi @fubaochen , I have tried a few thinking models such as Deepseek, QwQ and o1 Mini, but I haven't been able to replicate this. What model is causing the content to be included, and I'll take another look. Thanks :)

[fubaochen]

I used vLLM to locally deploy deepseek r1 and use --enable-reasoning --reasoning -- parser deepseek_r1 to output inference. My openwebui version is 5.20. openwebui can parse the inference content and collapse it, but when I copy the output, it appears.

Thought for 2 seconds

> 嗯，用户发了一个简单的“hello”，我需要用中文回应*******/

---- Replied Message ---- | From | Sebastian @.> | | Date | 03/17/2025 05:03 | | To | @.> | | Cc | @.>@.> | | Subject | Re: [open-webui/open-webui] feat: New 'Copy Formatted' button to preserve formatting when copied to the clipboard (PR #10712) |

Could you solve the problem that the output of the replication inference model will copy the content of the think

Hi @fubaochen , I have tried a few thinking models such as Deepseek, QwQ and o1 Mini, but I haven't been able to replicate this. What model is causing the content to be included, and I'll take another look. Thanks :)

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

MacJedi42 left a comment (open-webui/open-webui#10712)

Could you solve the problem that the output of the replication inference model will copy the content of the think

Hi @fubaochen , I have tried a few thinking models such as Deepseek, QwQ and o1 Mini, but I haven't been able to replicate this. What model is causing the content to be included, and I'll take another look. Thanks :)

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[MacJedi42]

I used vLLM to locally deploy deepseek r1 and use --enable-reasoning --reasoning -- parser deepseek_r1 to output inference. My openwebui version is 5.20. openwebui can parse the inference content and collapse it, but when I copy the output, it appears.

Thought for 2 seconds

嗯，用户发了一个简单的“hello”，我需要用中文回应*******/

[…](#) ---- Replied Message ---- | From | Sebastian ***@***.***> | | Date | 03/17/2025 05:03 | | To | ***@***.***> | | Cc | ***@***.***>***@***.***> | | Subject | Re: [open-webui/open-webui] feat: New 'Copy Formatted' button to preserve formatting when copied to the clipboard (PR #10712) | Could you solve the problem that the output of the replication inference model will copy the content of the think Hi @fubaochen , I have tried a few thinking models such as Deepseek, QwQ and o1 Mini, but I haven't been able to replicate this. What model is causing the content to be included, and I'll take another look. Thanks :) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***> MacJedi42 left a comment ([open-webui/open-webui#10712](https://github.com/open-webui/open-webui/pull/10712)) Could you solve the problem that the output of the replication inference model will copy the content of the think Hi @fubaochen , I have tried a few thinking models such as Deepseek, QwQ and o1 Mini, but I haven't been able to replicate this. What model is causing the content to be included, and I'll take another look. Thanks :) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

Thank you for your reply. I will have a look into this. I appreciate the detailed response!

[tjbck]

Closing in favour of aa8db40376a6afe53b3419de738cd908ff5bd0e1