adrien/Jade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Copy code or full message

Browse Source
This commit is contained in:
Adrien Bouvais 2024-05-11 16:34:31 +02:00
parent f08123a2ba
commit b104c989a5
7 changed files with 86 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
static/style.css
View File

@ -11,6 +11,7 @@ html {
white-space: pre;
max-width: 662px;
position: relative;
border-radius: 8px;
}
#chat-messages .message-content pre code {
@ -23,10 +24,6 @@ html {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
border: none;
border-radius: 5px;
padding: 5px 10px;
}
.content {

2
utils.go
View File

@ -25,7 +25,7 @@ func markdownToHTML(markdownText string) string {
}
func addCopyButtonsToCode(htmlContent string) string {
buttonHTML := `<button class="copy-button" onclick="copyCode(this)"><i class="fa-solid fa-copy"></i></button>`
buttonHTML := `<button class="copy-button button is-small is-primary is-outlined" onclick="copyToClipboardCode(this)"><i class="fa-solid fa-copy"></i></button>`
// Regular expression pattern to match <pre> elements and insert the button right before <code>
pattern := `(<pre[^>]*>)`

65
views/layouts/main.html
View File

@ -22,6 +22,71 @@
{{embed}}
<script>
function copyToClipboardCode(button) {
// Get the code element next to the button
var codeElement = button.nextElementSibling;
// Create a temporary textarea element
var tempTextarea = document.createElement('textarea');
tempTextarea.value = codeElement.textContent;
// Append the temporary textarea to the document body
document.body.appendChild(tempTextarea);
// Select the text in the temporary textarea
tempTextarea.select();
// Copy the selected text to the clipboard
document.execCommand('copy');
// Remove the temporary textarea from the document body
document.body.removeChild(tempTextarea);
// Change the button text to indicate successful copy
var originalText = button.innerHTML;
button.innerHTML = '<i class="fa-solid fa-check"></i>';
// Revert the button text after a short delay
setTimeout(function () {
button.innerHTML = originalText;
}, 2000);
}
function copyToClipboard(button) {
// Get the container element for all the message content
var messageContentContainer = button.closest('.message-bot').querySelector('#content-column .content');
// Get the text content of all the messages
var messageContent = messageContentContainer.textContent.trim();
// Create a temporary textarea element
var tempTextarea = document.createElement('textarea');
tempTextarea.value = messageContent;
// Append the temporary textarea to the document body
document.body.appendChild(tempTextarea);
// Select the text in the temporary textarea
tempTextarea.select();
// Copy the selected text to the clipboard
document.execCommand('copy');
// Remove the temporary textarea from the document body
document.body.removeChild(tempTextarea);
// Change the button text to indicate successful copy
var originalText = button.innerHTML;
button.innerHTML = '<i class="fa-solid fa-check"></i>';
// Revert the button text after a short delay
setTimeout(function () {
button.innerHTML = originalText;
}, 2000);
}
</script>
</body>
</html>

17
views/partials/message-bot.html
View File

@ -31,7 +31,8 @@
</div>
<div class="is-flex is-justify-content mt-2">
{% if not NotClickable %}
<button class="button is-small is-primary message-button is-outlined mr-5">
<button class="button is-small is-primary message-button is-outlined mr-5"
onclick="copyToClipboard(this)">
<span class="icon">
<i class="fa-solid fa-copy"></i>
</span>
@ -48,6 +49,20 @@
</button>
{% endfor %}
{% endif %}
{% if IsPlaceholder %}
<hx hx-get="/generateMultipleMessages" hx-trigger="load" hx-swap="outerHTML" hx-indicator="#spinner"
hx-target="#chat-container">
</hx>
<div class="message-content" {% if message.Hidden %}style="display: none;" {% endif %}>
<div class="message-body">
<div class="content">
<img id="spinner" class="htmx-indicator" src="/puff.svg" />
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>

2
views/partials/popover-models.html
View File

@ -1,4 +1,4 @@
<div class="dropdown is-hoverable is-up">
<div class="dropdown is-hoverable is-up is-right">
<div class="dropdown-trigger">
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
<span class="icon"><i class="fa-solid fa-robot"></i></span>

2
views/partials/popover-settings.html
View File

@ -1,4 +1,4 @@
<div class="dropdown is-hoverable is-up">
<div class="dropdown is-hoverable is-up is-right">
<div class="dropdown-trigger">
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
<span class="icon"><i class="fa-solid fa-key"></i></span>

2
views/partials/popover-usage.html
View File

@ -1,4 +1,4 @@
<div class="dropdown is-hoverable is-up">
<div class="dropdown is-hoverable is-up is-right">
<div class="dropdown-trigger">
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
<span class="icon"><i class="fa-regular fa-money-bill-1"></i></span>