+
{children}
-
+
+
+
+
);
}
diff --git a/ui/src/index.css b/ui/src/index.css
index a29d4b67bc8..82128ed9a02 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -717,15 +717,23 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before {
background: none;
}
-/* Copy-to-clipboard button on fenced code blocks */
+/* Actions for fenced and indented preformatted markdown blocks */
.paperclip-markdown-codeblock {
position: relative;
}
-.paperclip-markdown-codeblock-copy {
+.paperclip-markdown-codeblock-actions {
position: absolute;
top: 0.4rem;
right: 0.4rem;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
+ opacity: 0;
+ transition: opacity 0.12s ease;
+}
+
+.paperclip-markdown-codeblock-action {
display: inline-flex;
align-items: center;
gap: 0.25rem;
@@ -737,30 +745,31 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before {
font-size: 0.7rem;
line-height: 1;
cursor: pointer;
- opacity: 0;
- transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
+ transition: background-color 0.12s ease, color 0.12s ease;
}
-.paperclip-markdown-codeblock:hover .paperclip-markdown-codeblock-copy,
-.paperclip-markdown-codeblock-copy:focus-visible,
-.paperclip-markdown-codeblock-copy[data-copied] {
+.paperclip-markdown-codeblock:hover .paperclip-markdown-codeblock-actions,
+.paperclip-markdown-codeblock-actions:focus-within,
+.paperclip-markdown-codeblock-action[data-copied],
+.paperclip-markdown-codeblock-action[data-active] {
opacity: 1;
}
-.paperclip-markdown-codeblock-copy:hover {
+.paperclip-markdown-codeblock-action:hover {
background-color: var(--accent);
color: var(--accent-foreground);
}
-.paperclip-markdown-codeblock-copy[data-copied] {
+.paperclip-markdown-codeblock-action[data-active],
+.paperclip-markdown-codeblock-action[data-copied] {
color: var(--primary);
}
-.paperclip-markdown-codeblock-copy[data-failed] {
+.paperclip-markdown-codeblock-action[data-failed] {
color: var(--destructive);
}
-.paperclip-markdown-codeblock-copy-label {
+.paperclip-markdown-codeblock-action-label {
font-weight: 500;
}