Fix copy actions for non-HTTPS/localhost Fixes #2352

6e2b5d5dc8aed6e30ab5cbc5b4e5da4c8a2ca3e2

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

Parents: 0441a8725f14892d4e3b5e3d4c67f94767bb6bc6

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 });
                     });
 -        }
+    }
+}

 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 = () => { };
     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 = () => { };
     if (systemPrompt) {
         systemPrompt = substituteParams(systemPrompt);

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

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

         //console.log(logMessage);
         try {
             await navigator.clipboard.writeTextcopyText(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');

     initCustomSelectedSamplers();
 });
+-

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>}