feat(ui): add copy-as-markdown in chat

Co-authored-by: Bradley Priest <bradleypriest@users.noreply.github.com>
This commit is contained in:
Peter Steinberger
2026-01-21 02:36:17 +00:00
parent 5bd55037e4
commit 03916ed10e
15 changed files with 177 additions and 324 deletions

View File

@@ -1,5 +1,4 @@
@import "./chat/layout.css";
@import "./chat/legacy.css";
@import "./chat/text.css";
@import "./chat/grouped.css";
@import "./chat/tool-cards.css";

View File

@@ -91,6 +91,7 @@
/* Minimal Bubble Design - dynamic width based on content */
.chat-bubble {
position: relative;
display: inline-block;
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.12);
@@ -102,6 +103,77 @@
word-wrap: break-word;
}
.chat-bubble.has-copy {
padding-right: 36px;
}
.chat-copy-btn {
position: absolute;
top: 6px;
right: 8px;
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.22);
color: var(--muted);
border-radius: 8px;
padding: 4px 6px;
font-size: 14px;
line-height: 1;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 120ms ease-out, background 120ms ease-out;
}
.chat-copy-btn__icon {
display: inline-block;
width: 1em;
text-align: center;
}
.chat-bubble:hover .chat-copy-btn {
opacity: 1;
pointer-events: auto;
}
.chat-copy-btn:hover {
background: rgba(0, 0, 0, 0.3);
}
.chat-copy-btn[data-copying="1"] {
opacity: 0;
pointer-events: none;
}
.chat-copy-btn[data-error="1"] {
opacity: 1;
pointer-events: auto;
border-color: rgba(255, 69, 58, 0.8);
background: rgba(255, 69, 58, 0.18);
color: rgba(255, 69, 58, 1);
}
.chat-copy-btn[data-copied="1"] {
opacity: 1;
pointer-events: auto;
border-color: rgba(52, 199, 183, 0.8);
background: rgba(52, 199, 183, 0.18);
color: rgba(52, 199, 183, 1);
}
.chat-copy-btn:focus-visible {
opacity: 1;
pointer-events: auto;
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (hover: none) {
.chat-copy-btn {
opacity: 1;
pointer-events: auto;
}
}
.chat-bubble:hover {
background: rgba(0, 0, 0, 0.18);
}
@@ -145,4 +217,3 @@
transform: translateY(0);
}
}

View File

@@ -1,43 +0,0 @@
/* =============================================
LEGACY CHAT LINE LAYOUT (non-grouped)
============================================= */
.chat-line {
display: flex;
margin-bottom: 12px;
}
.chat-line.user {
justify-content: flex-end;
}
.chat-line.assistant,
.chat-line.other,
.chat-line.tool {
justify-content: flex-start;
}
.chat-line.tool .chat-bubble {
border-style: dashed;
opacity: 0.95;
}
.chat-msg {
display: grid;
gap: 6px;
max-width: min(900px, 95%);
}
.chat-line.user .chat-msg {
justify-items: end;
}
.chat-stamp {
font-size: 11px;
color: var(--muted);
}
.chat-line.user .chat-stamp {
text-align: right;
}