- Add edit/delete/regenerate for user and bot messages

- Add language labels and copy buttons to code blocks
- Enhance drag-and-drop to full chat view
- Fix data consistency bugs in message operations
- Use RLock to prevent deadlock in conversation store"
This commit is contained in:
PF4YZYNS\admin
2026-06-05 18:51:35 +08:00
parent fde4b6f590
commit c62175c06b
4 changed files with 748 additions and 11 deletions

View File

@@ -1399,3 +1399,171 @@
.agent-cancelled-tag {
font-style: italic;
}
/* =====================================================================
Code Block Enhancements
===================================================================== */
.code-block-wrapper {
position: relative;
margin: 1em 0;
border-radius: 8px;
overflow: hidden;
background: #f8f9fa;
border: 1px solid #e2e8f0;
}
.dark .code-block-wrapper {
background: #1e293b;
border-color: #334155;
}
.code-block-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5em 1em;
background: #e2e8f0;
border-bottom: 1px solid #cbd5e1;
font-size: 0.85em;
}
.dark .code-block-header {
background: #0f172a;
border-bottom-color: #334155;
}
.code-block-lang {
color: #64748b;
font-weight: 500;
text-transform: lowercase;
}
.dark .code-block-lang {
color: #94a3b8;
}
.code-copy-btn {
background: transparent;
border: none;
color: #64748b;
cursor: pointer;
padding: 0.25em 0.5em;
border-radius: 4px;
transition: all 0.2s;
font-size: 0.9em;
}
.code-copy-btn:hover {
background: rgba(100, 116, 139, 0.1);
color: #475569;
}
.dark .code-copy-btn {
color: #94a3b8;
}
.dark .code-copy-btn:hover {
background: rgba(148, 163, 184, 0.1);
color: #cbd5e1;
}
.code-block-wrapper pre {
margin: 0;
border-radius: 0;
border: none;
}
/* =====================================================================
Drag and Drop Overlay
===================================================================== */
.drag-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(59, 130, 246, 0.1);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
}
.drag-overlay.active {
opacity: 1;
}
.drag-overlay.hidden {
display: none;
}
.drag-overlay-content {
background: white;
border: 3px dashed #3b82f6;
border-radius: 16px;
padding: 3em 4em;
text-align: center;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
animation: bounce 1s ease infinite;
}
.dark .drag-overlay-content {
background: #1e293b;
border-color: #60a5fa;
}
.drag-overlay-content i {
font-size: 4em;
color: #3b82f6;
margin-bottom: 0.5em;
}
.dark .drag-overlay-content i {
color: #60a5fa;
}
.drag-overlay-content p {
font-size: 1.5em;
font-weight: 600;
color: #1e293b;
margin: 0;
}
.dark .drag-overlay-content p {
color: #f1f5f9;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* =====================================================================
Message Action Buttons
===================================================================== */
.edit-msg-btn,
.delete-msg-btn,
.regenerate-msg-btn {
opacity: 0;
transition: opacity 0.2s, color 0.2s;
}
.user-message-group:hover .edit-msg-btn,
.user-message-group:hover .delete-msg-btn,
.flex.gap-3:hover .regenerate-msg-btn,
.flex.gap-3:hover .delete-msg-btn {
opacity: 1;
}
.edit-msg-btn:hover,
.regenerate-msg-btn:hover {
color: #3b82f6 !important;
}
.delete-msg-btn:hover {
color: #ef4444 !important;
}