{$i18n.t('Always Collapse Code Blocks')}
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index ffcd6e27a..022a901c1 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -15,6 +15,11 @@ dayjs.extend(localizedFormat);
import { WEBUI_BASE_URL } from '$lib/constants';
import { TTS_RESPONSE_SPLIT } from '$lib/types';
+import { marked } from 'marked';
+import markedExtension from '$lib/utils/marked/extension';
+import markedKatexExtension from '$lib/utils/marked/katex-extension';
+import hljs from 'highlight.js';
+
//////////////////////////
// Helper functions
//////////////////////////
@@ -309,46 +314,129 @@ export const formatDate = (inputDate) => {
}
};
-export const copyToClipboard = async (text) => {
- let result = false;
- if (!navigator.clipboard) {
- const textArea = document.createElement('textarea');
- textArea.value = text;
+export const copyToClipboard = async (text, formatted = false) => {
+ if (formatted) {
+ const options = {
+ throwOnError: false,
+ highlight: function (code, lang) {
+ const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+ return hljs.highlight(code, { language }).value;
+ }
+ };
+ marked.use(markedKatexExtension(options));
+ marked.use(markedExtension(options));
- // Avoid scrolling to bottom
- textArea.style.top = '0';
- textArea.style.left = '0';
- textArea.style.position = 'fixed';
+ const htmlContent = marked.parse(text);
- document.body.appendChild(textArea);
- textArea.focus();
- textArea.select();
+ // Add basic styling to make the content look better when pasted
+ const styledHtml = `
+
+
+ ${htmlContent}
+
+ `;
+
+ // Create a blob with HTML content
+ const blob = new Blob([styledHtml], { type: 'text/html' });
try {
- const successful = document.execCommand('copy');
- const msg = successful ? 'successful' : 'unsuccessful';
- console.log('Fallback: Copying text command was ' + msg);
- result = true;
+ // Create a ClipboardItem with HTML content
+ const data = new ClipboardItem({
+ 'text/html': blob,
+ 'text/plain': new Blob([text], { type: 'text/plain' })
+ });
+
+ // Write to clipboard
+ await navigator.clipboard.write([data]);
+ return true;
} catch (err) {
- console.error('Fallback: Oops, unable to copy', err);
+ console.error('Error copying formatted content:', err);
+ // Fallback to plain text
+ return await copyToClipboard(text);
+ }
+ } else {
+ let result = false;
+ if (!navigator.clipboard) {
+ const textArea = document.createElement('textarea');
+ textArea.value = text;
+
+ // Avoid scrolling to bottom
+ textArea.style.top = '0';
+ textArea.style.left = '0';
+ textArea.style.position = 'fixed';
+
+ document.body.appendChild(textArea);
+ textArea.focus();
+ textArea.select();
+
+ try {
+ const successful = document.execCommand('copy');
+ const msg = successful ? 'successful' : 'unsuccessful';
+ console.log('Fallback: Copying text command was ' + msg);
+ result = true;
+ } catch (err) {
+ console.error('Fallback: Oops, unable to copy', err);
+ }
+
+ document.body.removeChild(textArea);
+ return result;
}
- document.body.removeChild(textArea);
+ result = await navigator.clipboard
+ .writeText(text)
+ .then(() => {
+ console.log('Async: Copying to clipboard was successful!');
+ return true;
+ })
+ .catch((error) => {
+ console.error('Async: Could not copy text: ', error);
+ return false;
+ });
+
return result;
}
-
- result = await navigator.clipboard
- .writeText(text)
- .then(() => {
- console.log('Async: Copying to clipboard was successful!');
- return true;
- })
- .catch((error) => {
- console.error('Async: Could not copy text: ', error);
- return false;
- });
-
- return result;
};
export const compareVersion = (latest, current) => {