Add a "copy" button below each message (#6654)

This commit is contained in:
oobabooga 2025-01-11 16:59:21 -03:00 committed by GitHub
parent 58342740a5
commit a5d64b586d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 104 additions and 26 deletions

View file

@ -48,12 +48,14 @@
.chat .user-message {
background: #f4f4f4;
padding: 1.5rem 1rem;
padding-bottom: 2rem;
border-radius: 0;
border-bottom-right-radius: 0;
}
.chat .assistant-message {
padding: 1.5rem 1rem;
padding-bottom: 2rem;
border-radius: 0;
border: 0;
}

View file

@ -1142,7 +1142,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
.dark svg {
fill: white;
color: white;
}
@ -1221,3 +1220,55 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
background: var(--light-theme-gray);
}
}
/* ----------------------------------------------
Copy button for chat messages
---------------------------------------------- */
.message .text,
.message .text-you,
.message .text-bot,
.user-message .text,
.assistant-message .text {
position: relative;
}
.message, .user-message, .assistant-message {
position: relative;
}
.copy-button {
position: absolute;
bottom: -23px;
left: 0;
padding: 0;
border: none;
border-radius: 3px;
cursor: pointer;
opacity: 0;
display: flex;
align-items: center;
transition: opacity 0.2s;
}
.message:hover .copy-button,
.user-message:hover .copy-button,
.assistant-message:hover .copy-button {
opacity: 1;
}
.copy-button svg {
stroke: rgb(156 163 175);
transition: stroke 0.2s;
}
.copy-button:hover svg {
stroke: rgb(107 114 128);
}
.dark .copy-button svg {
stroke: rgb(156 163 175);
}
.dark .copy-button:hover svg {
stroke: rgb(209 213 219);
}