rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #278 from ShisoFox/dev

Browse Source 
Add new button to copy message text to the clipboard
This commit is contained in:
Cohee
2023-05-11 15:23:37 +03:00
committed by GitHub
parent 18429bbc3b 988fe4e180
commit 8ba5f79714
3 changed files with 82 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/index.html
View File

@ -2312,8 +2312,10 @@
<div class="ch_name"> <div class="ch_name">
<span class="name_text">${characterName}</span> <span class="name_text">${characterName}</span>
<div class="mes_buttons">
<div title="Edit" class="mes_edit fa-solid fa-pencil "></div> <div title="Copy" class="mes_copy fa-solid fa-copy "></div>
<div title="Edit" class="mes_edit fa-solid fa-pencil "></div>
</div>
<div class="mes_edit_buttons"> <div class="mes_edit_buttons">
<div class="mes_edit_done menu_button fa-solid fa-check" title="Confirm"></div> <div class="mes_edit_done menu_button fa-solid fa-check" title="Confirm"></div>
<div class="mes_edit_copy menu_button fa-solid fa-copy" title="Copy this message"></div> <div class="mes_edit_copy menu_button fa-solid fa-copy" title="Copy this message"></div>

86
public/script.js
View File

@ -1035,25 +1035,28 @@ function addCopyToCodeBlocks(messageElement) {
const codeBlocks = $(messageElement).find("pre code"); const codeBlocks = $(messageElement).find("pre code");
for (let i = 0; i < codeBlocks.length; i++) { for (let i = 0; i < codeBlocks.length; i++) {
hljs.highlightElement(codeBlocks.get(i)); hljs.highlightElement(codeBlocks.get(i));
const copyButton = document.createElement('i'); if (navigator.clipboard !== undefined) {
copyButton.classList.add('fa-solid', 'fa-copy', 'code-copy'); const copyButton = document.createElement('i');
copyButton.title = 'Copy code'; copyButton.classList.add('fa-solid', 'fa-copy', 'code-copy');
codeBlocks.get(i).appendChild(copyButton); copyButton.title = 'Copy code';
copyButton.addEventListener('click', function (event) { codeBlocks.get(i).appendChild(copyButton);
navigator.clipboard.writeText(codeBlocks.get(i).innerText); copyButton.addEventListener('pointerup', function (event) {
const copiedMsg = document.createElement("div"); navigator.clipboard.writeText(codeBlocks.get(i).innerText);
copiedMsg.classList.add('code-copied'); const copiedMsg = document.createElement("div");
copiedMsg.innerText = "Copied!"; copiedMsg.classList.add('code-copied');
copiedMsg.style.top = `${event.clientY - 55}px`; copiedMsg.innerText = "Copied!";
copiedMsg.style.left = `${event.clientX - 55}px`; copiedMsg.style.top = `${event.clientY - 55}px`;
document.body.append(copiedMsg); copiedMsg.style.left = `${event.clientX - 55}px`;
setTimeout(() => { document.body.append(copiedMsg);
document.body.removeChild(copiedMsg); setTimeout(() => {
}, 2500); document.body.removeChild(copiedMsg);
}); }, 1000);
});
}
} }
} }
function addOneMessage(mes, { type = "normal", insertAfter = null, scroll = true } = {}) { function addOneMessage(mes, { type = "normal", insertAfter = null, scroll = true } = {}) {
var messageText = mes["mes"]; var messageText = mes["mes"];
@ -1394,7 +1397,7 @@ class StreamingProcessor {
} }
$(`#chat .mes[mesid="${messageId}"] .mes_stop`).css({ 'display': 'block' }); $(`#chat .mes[mesid="${messageId}"] .mes_stop`).css({ 'display': 'block' });
$(`#chat .mes[mesid="${messageId}"] .mes_edit`).css({ 'display': 'none' }); $(`#chat .mes[mesid="${messageId}"] .mes_buttons`).css({ 'display': 'none' });
} }
hideStopButton(messageId) { hideStopButton(messageId) {
@ -1403,7 +1406,7 @@ class StreamingProcessor {
} }
$(`#chat .mes[mesid="${messageId}"] .mes_stop`).css({ 'display': 'none' }); $(`#chat .mes[mesid="${messageId}"] .mes_stop`).css({ 'display': 'none' });
$(`#chat .mes[mesid="${messageId}"] .mes_edit`).css({ 'display': 'block' }); $(`#chat .mes[mesid="${messageId}"] .mes_buttons`).css({ 'display': 'block' });
} }
onStartStreaming(text) { onStartStreaming(text) {
@ -1485,7 +1488,7 @@ class StreamingProcessor {
activateSendButtons(); activateSendButtons();
showSwipeButtons(); showSwipeButtons();
setGenerationProgress(0); setGenerationProgress(0);
$('.mes_edit:last').show(); $('.mes_buttons:last').show();
generatedPromtCache = ''; generatedPromtCache = '';
} }
@ -2321,7 +2324,7 @@ async function Generate(type, { automatic_trigger, force_name2, resolve, reject,
activateSendButtons(); activateSendButtons();
showSwipeButtons(); showSwipeButtons();
setGenerationProgress(0); setGenerationProgress(0);
$('.mes_edit:last').show(); $('.mes_buttons:last').show();
}; };
function onError(jqXHR, exception) { function onError(jqXHR, exception) {
@ -2458,7 +2461,7 @@ function throwCircuitBreakerError() {
activateSendButtons(); activateSendButtons();
setGenerationProgress(0); setGenerationProgress(0);
showSwipeButtons(); showSwipeButtons();
$('.mes_edit:last').show(); $('.mes_buttons:last').show();
throw new Error('Generate circuit breaker interruption'); throw new Error('Generate circuit breaker interruption');
} }
@ -3426,7 +3429,7 @@ function messageEditDone(div) {
mesBlock.find(".mes_text").empty(); mesBlock.find(".mes_text").empty();
mesBlock.find(".mes_edit_buttons").css("display", "none"); mesBlock.find(".mes_edit_buttons").css("display", "none");
mesBlock.find(".mes_edit").css("display", "inline-block"); mesBlock.find(".mes_buttons").css("display", "inline-block");
mesBlock.find(".mes_text").append( mesBlock.find(".mes_text").append(
messageFormatting( messageFormatting(
text, text,
@ -4172,7 +4175,7 @@ $(document).ready(function () {
if (run_generate && !is_send_press && parseInt(chat[chat.length - 1]['swipe_id']) === chat[chat.length - 1]['swipes'].length) { if (run_generate && !is_send_press && parseInt(chat[chat.length - 1]['swipe_id']) === chat[chat.length - 1]['swipes'].length) {
console.log('caught here 2'); console.log('caught here 2');
is_send_press = true; is_send_press = true;
$('.mes_edit:last').hide(); $('.mes_buttons:last').hide();
Generate('swipe'); Generate('swipe');
} else { } else {
if (parseInt(chat[chat.length - 1]['swipe_id']) !== chat[chat.length - 1]['swipes'].length) { if (parseInt(chat[chat.length - 1]['swipe_id']) !== chat[chat.length - 1]['swipes'].length) {
@ -5319,6 +5322,39 @@ $(document).ready(function () {
$("#load_select_chat_div").css("display", "block"); $("#load_select_chat_div").css("display", "block");
}); });
if (navigator.clipboard === undefined) {
// No clipboard support
$(".mes_copy").remove();
}
else {
$(document).on("pointerup", ".mes_copy", function () {
if (this_chid !== undefined || selected_group) {
const message = $(this).closest(".mes");
if (message.data("isSystem")) {
return;
}
try {
var edit_mes_id = $(this).closest(".mes").attr("mesid");
var text = chat[edit_mes_id]["mes"];
navigator.clipboard.writeText(text);
const copiedMsg = document.createElement("div");
copiedMsg.classList.add('code-copied');
copiedMsg.innerText = "Copied!";
copiedMsg.style.top = `${event.clientY - 55}px`;
copiedMsg.style.left = `${event.clientX - 55}px`;
document.body.append(copiedMsg);
setTimeout(() => {
document.body.removeChild(copiedMsg);
}, 1000);
} catch (err) {
console.error('Failed to copy: ', err);
}
}
});
}
//******************** //********************
//***Message Editor*** //***Message Editor***
$(document).on("click", ".mes_edit", function () { $(document).on("click", ".mes_edit", function () {
@ -5349,7 +5385,7 @@ $(document).ready(function () {
messageEditDone(mes_edited); messageEditDone(mes_edited);
} }
$(this).closest(".mes_block").find(".mes_text").empty(); $(this).closest(".mes_block").find(".mes_text").empty();
$(this).css("display", "none"); $(this).closest(".mes_block").find(".mes_buttons").css("display", "none");
$(this).closest(".mes_block").find(".mes_edit_buttons").css("display", "inline-flex"); $(this).closest(".mes_block").find(".mes_edit_buttons").css("display", "inline-flex");
var edit_mes_id = $(this).closest(".mes").attr("mesid"); var edit_mes_id = $(this).closest(".mes").attr("mesid");
this_edit_mes_id = edit_mes_id; this_edit_mes_id = edit_mes_id;
@ -5398,7 +5434,7 @@ $(document).ready(function () {
$(this).closest(".mes_block").find(".mes_text").empty(); $(this).closest(".mes_block").find(".mes_text").empty();
$(this).closest(".mes_edit_buttons").css("display", "none"); $(this).closest(".mes_edit_buttons").css("display", "none");
$(this).closest(".mes_block").find(".mes_edit").css("display", "inline-block"); $(this).closest(".mes_block").find(".mes_buttons").css("display", "inline-block");
$(this) $(this)
.closest(".mes_block") .closest(".mes_block")
.find(".mes_text") .find(".mes_text")

19
public/style.css
View File

@ -2125,9 +2125,16 @@ input[type="range"]::-webkit-slider-thumb {
width: 20px; width: 20px;
opacity: 0.5; opacity: 0.5;
} }
.mes_buttons {
.mes_edit {
float: right; float: right;
height: 20px;
grid-row-start: 1;
position: relative;
right: 0px;
}
.mes_copy,
.mes_edit {
cursor: pointer; cursor: pointer;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
height: 20px; height: 20px;
@ -2137,10 +2144,18 @@ input[type="range"]::-webkit-slider-thumb {
} }
.mes_edit:hover, .mes_edit:hover,
.mes_copy:hover,
.mes_stop:hover { .mes_stop:hover {
opacity: 1; opacity: 1;
} }
.last_mes .mes_copy {
grid-row-start: 1;
position: relative;
right: -30px;
}
.last_mes .mes_edit, .last_mes .mes_edit,
.last_mes .mes_edit_buttons, .last_mes .mes_edit_buttons,
.last_mes .mes_stop { .last_mes .mes_stop {