Merge pull request #3311 from SillyTavern/fix-http-copy Fix copy actions for non-HTTPS/localhost

df28c2c676d62d2e9791839d336a5aa823b210ec

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

Parents: b5a6199784cd71e1732b99a679091407f4e3b0b4 6e2b5d5dc8aed6e30ab5cbc5b4e5da4c8a2ca3e2

public/script.js+26 -33 Viewed

     isTrueBoolean,
     toggleDrawer,
     isElementInViewport,
+    copyText,
 } from './scripts/utils.js';
 import { debounce_timeout } from './scripts/constants.js';

     const codeBlocks = $(messageElement).find('pre code');
     for (let i = 0; i < codeBlocks.length; i++) {
         hljs.highlightElement(codeBlocks.get(i));
-        if (navigator.clipboard !== undefined) {
+        const copyButton = document.createElement('i');
-            const copyButton = document.createElement('i');
+        copyButton.classList.add('fa-solid', 'fa-copy', 'code-copy', 'interactable');
-            copyButton.classList.add('fa-solid', 'fa-copy', 'code-copy', 'interactable');
+        copyButton.title = 'Copy code';
-            copyButton.title = 'Copy code';
+        codeBlocks.get(i).appendChild(copyButton);
-            codeBlocks.get(i).appendChild(copyButton);
+        copyButton.addEventListener('pointerup', async function () {
-            copyButton.addEventListener('pointerup', function (event) {
+            const text = codeBlocks.get(i).innerText;
-                navigator.clipboard.writeText(codeBlocks.get(i).innerText);
+            await copyText(text);
-                toastr.info(t`Copied!`, '', { timeOut: 2000 });
+            toastr.info(t`Copied!`, '', { timeOut: 2000 });
-            });
+        });
-        }
+    }
+}

 export async function generateQuietPrompt(quiet_prompt, quietToLoud, skipWIAN, quietImage = null, quietName = null, responseLength = null, force_chid = null) {
     console.log('got into genQuietPrompt');
     const responseLengthCustomized = typeof responseLength === 'number' && responseLength > 0;
-    let eventHook = () => {};
+    let eventHook = () => { };
     try {
         /** @type {GenerateOptions} */
         const options = {

     const responseLengthCustomized = typeof responseLength === 'number' && responseLength > 0;
     const isInstruct = power_user.instruct.enabled && api !== 'openai' && api !== 'novel' && !instructOverride;
     const isQuiet = true;
-    let eventHook = () => {};
+    let eventHook = () => { };
     if (systemPrompt) {
         systemPrompt = substituteParams(systemPrompt);

     } else {
         diffPrevPrompt.style.display = 'none';
+    }
-    popup.dlg.querySelector('#copyPromptToClipboard').addEventListener('click', function () {
+    popup.dlg.querySelector('#copyPromptToClipboard').addEventListener('pointerup', async function () {
         let rawPrompt = itemizedPrompts[PromptArrayItemForRawPromptDisplay].rawPrompt;
         let rawPromptValues = rawPrompt;

             rawPromptValues = rawPrompt.map(x => x.content).join('\n');
+        }
-        navigator.clipboard.writeText(rawPromptValues);
+        await copyText(rawPromptValues);
         toastr.info(t`Copied!`);
     });

         //console.log(logMessage);
         try {
-            await navigator.clipboard.writeText(logMessage);
+            await copyText(logMessage);
             toastr.info('Your ST API setup data has been copied to the clipboard.');
         } catch (error) {
             toastr.error('Failed to copy ST Setup to clipboard:', error);

         setTimeout(function () { $('#shadow_select_chat_popup').css('display', 'none'); }, animation_duration);
     });
-    if (navigator.clipboard === undefined) {
+    $(document).on('pointerup', '.mes_copy', async function () {
-        // No clipboard support
+        if (this_chid !== undefined || selected_group || name2 === neutralCharacterName) {
-        $('.mes_copy').remove();
+            try {
-    }
+                const messageId = $(this).closest('.mes').attr('mesid');
-    else {
+                const text = chat[messageId]['mes'];
-        $(document).on('pointerup', '.mes_copy', function () {
+                await copyText(text);
-            if (this_chid !== undefined || selected_group || name2 === neutralCharacterName) {
+                toastr.info('Copied!', '', { timeOut: 2000 });
-                try {
+            } catch (err) {
-                    const messageId = $(this).closest('.mes').attr('mesid');
+                console.error('Failed to copy: ', err);
-                    const text = chat[messageId]['mes'];
-                    navigator.clipboard.writeText(text);
-                    toastr.info('Copied!', '', { timeOut: 2000 });
-                } catch (err) {
-                    console.error('Failed to copy: ', err);
-                }
+            }
-        });
+        }
-    }
+    });
     $(document).on('pointerup', '.mes_prompt', async function () {
         let mesIdForItemization = $(this).closest('.mes').attr('mesId');

@@ -11483,4 +11477,3 @@ jQuery(async function () {
11483		11477
11484	initCustomSelectedSamplers();	11478	initCustomSelectedSamplers();
11485	});	11479	});
11486

public/scripts/utils.js+20 -0 Viewed

+}
 /**
+ * Copy text to clipboard. Use navigator.clipboard.writeText if available, otherwise use document.execCommand.
+ * @param {string} text - The text to copy to the clipboard.
+ * @returns {Promise<void>} A promise that resolves when the text has been copied to the clipboard.
+ */
+export function copyText(text) {
+    if (navigator.clipboard) {
+        return navigator.clipboard.writeText(text);
+    }
+    const parent = document.querySelector('dialog[open]:last-of-type') ?? document.body;
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    parent.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    document.execCommand('copy');
+    parent.removeChild(textArea);
+}
+/**
  * Map of debounced functions to their timers.
  * Weak map is used to avoid memory leaks.
  * @type {WeakMap<function, any>}