shiyue/cc-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve cross-conversation reply UX

Browse Source
This commit is contained in:
shiyue
2026-06-21 23:28:49 +08:00
parent ae63e9717e
commit a50933807f
7 changed files with 635 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
public/style.css
View File

@@ -2279,19 +2279,24 @@ body.session-loading-active {
border-color: rgba(93, 138, 84, 0.28);
}
.msg.cross-conversation-reply .cross-conversation-meta,
.msg.cross-conversation-reply .cross-conversation-id-btn {
.msg.cross-conversation-reply .cross-conversation-id-btn,
.msg.cross-conversation-reply .cross-conversation-collapse-btn,
.msg.cross-conversation-reply .cross-conversation-time {
color: var(--success);
}
.msg.cross-conversation-reply .cross-conversation-id-btn {
.msg.cross-conversation-reply .cross-conversation-id-btn,
.msg.cross-conversation-reply .cross-conversation-collapse-btn {
border-color: rgba(93, 138, 84, 0.28);
}
.msg.cross-conversation-reply .cross-conversation-id-btn:hover {
.msg.cross-conversation-reply .cross-conversation-id-btn:hover,
.msg.cross-conversation-reply .cross-conversation-collapse-btn:hover {
background: rgba(93, 138, 84, 0.14);
}
.cross-conversation-meta {
display: flex;
align-items: center;
gap: 8px;
row-gap: 6px;
flex-wrap: wrap;
margin-bottom: 7px;
color: var(--info);
@@ -2299,10 +2304,19 @@ body.session-loading-active {
font-weight: 800;
}
.cross-conversation-label {
flex: 1 1 180px;
min-width: 0;
overflow-wrap: anywhere;
}
.cross-conversation-id-btn {
.cross-conversation-time {
flex-shrink: 0;
color: var(--text-muted);
font-size: 10px;
font-weight: 700;
white-space: nowrap;
}
.cross-conversation-id-btn,
.cross-conversation-collapse-btn {
appearance: none;
border: 1px solid rgba(91, 126, 161, 0.24);
border-radius: 999px;
@@ -2313,15 +2327,72 @@ body.session-loading-active {
font-size: 10px;
cursor: pointer;
}
.cross-conversation-id-btn:hover {
.cross-conversation-collapse-btn {
min-width: 44px;
}
.cross-conversation-id-btn:hover,
.cross-conversation-collapse-btn:hover {
background: rgba(91, 126, 161, 0.14);
}
.cross-conversation-collapse-btn:focus-visible {
outline: 2px solid rgba(93, 138, 84, 0.28);
outline-offset: 2px;
}
.msg.cross-conversation-collapsed .cross-conversation-meta {
margin-bottom: 0;
}
.msg.cross-conversation-collapsed .msg-last-section-btn {
display: none;
}
.msg.assistant .msg-bubble {
background: var(--bg-bubble-assistant);
border: 1px solid var(--border-color);
border-bottom-left-radius: 4px;
color: var(--text-primary);
}
.msg-last-section-btn {
appearance: none;
width: 28px;
height: 28px;
margin: 8px 0 0 auto;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-secondary);
color: var(--text-secondary);
cursor: pointer;
opacity: 0.72;
transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.msg-last-section-btn[hidden] {
display: none;
}
.msg-last-section-btn svg {
display: block;
flex-shrink: 0;
}
.msg-last-section-btn:hover {
opacity: 1;
background: var(--bg-tertiary);
border-color: var(--accent);
color: var(--accent);
transform: translateY(-1px);
}
.msg-last-section-btn:focus-visible {
opacity: 1;
outline: 2px solid rgba(91, 126, 161, 0.28);
outline-offset: 2px;
}
.msg-last-section-focus {
animation: lastSectionFocus 1.1s ease;
}
@keyframes lastSectionFocus {
0% { background: rgba(91, 126, 161, 0.18); }
100% { background: transparent; }
}
.msg.assistant .msg-mention-chip {
border-color: rgba(48, 62, 82, 0.14);
background: rgba(91, 126, 161, 0.07);
@@ -2577,26 +2648,50 @@ html[data-divider-time='hide'] .msg-bubble .agent-message-divider span {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: #2b2b2b;
font-size: 12px;
color: #999;
}
.code-block-header > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.code-block-actions {
display: flex;
gap: 4px;
align-items: center;
flex: 0 0 auto;
}
.code-copy-btn, .code-preview-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
background: none;
border: none;
color: #999;
cursor: pointer;
font-size: 12px;
padding: 2px 8px;
line-height: 1;
padding: 4px 10px;
border-radius: 4px;
touch-action: manipulation;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.code-copy-btn:hover, .code-preview-btn:hover { color: #fff; background: #444; }
.code-copy-btn:focus-visible, .code-preview-btn:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.45);
outline-offset: 2px;
}
.code-copy-btn:disabled, .code-preview-btn:disabled {
cursor: default;
opacity: 0.72;
}
.code-preview-btn { border: 1px solid #555; }
.code-block-wrapper pre {
margin: 0;
@@ -2628,6 +2723,20 @@ html[data-divider-time='hide'] .msg-bubble .agent-message-divider span {
.code-block-wrapper.preview-mode .code-preview-pane { display: block; }
.code-block-wrapper.preview-mode pre { display: none; }
@media (pointer: coarse) {
.code-block-header {
padding: 8px 10px;
}
.code-block-actions {
gap: 6px;
}
.code-copy-btn, .code-preview-btn {
min-width: 44px;
min-height: 36px;
padding: 0 12px;
}
}
/* Tool calls */
.msg-tools {
display: flex;
@@ -5317,7 +5426,8 @@ html[data-theme='coolvibe'] .settings-back:hover {
box-shadow: var(--dark-shadow-soft);
}
:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .cross-conversation-id-btn {
:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .cross-conversation-id-btn,
:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .cross-conversation-collapse-btn {
background: var(--dark-panel-soft);
border-color: var(--border-color);
}