mirror of
https://github.com/Ed1s0nZ/CyberStrikeAI.git
synced 2026-08-15 07:30:53 +02:00
feat(ui): 显示 Agent 任务进度列表 (#251)
This commit is contained in:
RuoJi6
@@ -0,0 +1,203 @@
|
||||
/* Agent-maintained plan: compact progress chip, expanded on hover/focus. */
|
||||
.agent-plan-progress {
|
||||
--agent-plan-surface: var(--card-bg);
|
||||
--agent-plan-surface-hover: var(--bg-tertiary);
|
||||
--agent-plan-text: var(--text-primary);
|
||||
--agent-plan-text-secondary: var(--text-secondary);
|
||||
--agent-plan-border: var(--border-color);
|
||||
--agent-plan-spinner-track: color-mix(in srgb, var(--accent-color) 30%, transparent);
|
||||
--agent-plan-trigger-bottom: 14px;
|
||||
--agent-plan-panel-bottom: 70px;
|
||||
position: relative;
|
||||
z-index: 42;
|
||||
flex: 0 0 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.agent-plan-progress[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.agent-plan-progress-trigger {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
bottom: var(--agent-plan-trigger-bottom);
|
||||
transform: translateX(50%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 46px;
|
||||
padding: 0 18px;
|
||||
border: 1px solid var(--agent-plan-border);
|
||||
border-radius: 18px;
|
||||
color: var(--agent-plan-text);
|
||||
background: var(--agent-plan-surface);
|
||||
box-shadow: var(--shadow-lg);
|
||||
font: inherit;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
|
||||
}
|
||||
|
||||
.agent-plan-progress-trigger:hover,
|
||||
.agent-plan-progress-trigger:focus-visible {
|
||||
color: var(--agent-plan-text);
|
||||
background: var(--agent-plan-surface-hover);
|
||||
border-color: var(--accent-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.agent-plan-progress-panel {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
bottom: var(--agent-plan-panel-bottom);
|
||||
width: max-content;
|
||||
min-width: 360px;
|
||||
max-width: min(560px, calc(100vw - 40px));
|
||||
max-height: min(54vh, 440px);
|
||||
padding: 14px 18px;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--agent-plan-border);
|
||||
border-radius: 18px;
|
||||
color: var(--agent-plan-text);
|
||||
background: var(--agent-plan-surface);
|
||||
box-shadow: var(--shadow-lg);
|
||||
opacity: 0;
|
||||
transform: translate(50%, 8px) scale(0.985);
|
||||
transform-origin: bottom center;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
|
||||
}
|
||||
|
||||
/*
|
||||
* “回到最新消息”只在用户离开底部时出现。它与任务进度同为居中浮层，
|
||||
* 两者同时可见时让任务进度上移，保留回到底部按钮靠近输入框的位置。
|
||||
*/
|
||||
.chat-return-latest:not([hidden]) + .agent-plan-progress:not([hidden]) {
|
||||
--agent-plan-trigger-bottom: 64px;
|
||||
--agent-plan-panel-bottom: 120px;
|
||||
}
|
||||
|
||||
.agent-plan-progress.is-hover-active .agent-plan-progress-panel,
|
||||
.agent-plan-progress:focus-within .agent-plan-progress-panel,
|
||||
.agent-plan-progress.is-open .agent-plan-progress-panel {
|
||||
opacity: 1;
|
||||
transform: translate(50%, 0) scale(1);
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.agent-plan-task {
|
||||
display: grid;
|
||||
grid-template-columns: 22px minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: 10px;
|
||||
min-height: 34px;
|
||||
padding: 4px 0;
|
||||
font-size: 15px;
|
||||
font-weight: 570;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.agent-plan-task-label {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.agent-plan-task--completed {
|
||||
color: var(--agent-plan-text-secondary);
|
||||
}
|
||||
|
||||
.agent-plan-task--in_progress {
|
||||
color: var(--agent-plan-text);
|
||||
}
|
||||
|
||||
.agent-plan-task--pending {
|
||||
color: var(--agent-plan-text-secondary);
|
||||
}
|
||||
|
||||
.agent-plan-task-status {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: 2px;
|
||||
border: 2px solid var(--agent-plan-text-secondary);
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.agent-plan-task-status--completed {
|
||||
border-color: var(--agent-plan-text-secondary);
|
||||
color: var(--agent-plan-text-secondary);
|
||||
}
|
||||
|
||||
.agent-plan-task-check {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2.3;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.agent-plan-task-status--in_progress {
|
||||
border-color: var(--agent-plan-spinner-track);
|
||||
border-top-color: var(--accent-color);
|
||||
animation: agent-plan-spin 820ms linear infinite;
|
||||
}
|
||||
|
||||
.agent-plan-progress-trigger .agent-plan-task-status {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@keyframes agent-plan-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.agent-plan-progress {
|
||||
--agent-plan-trigger-bottom: 10px;
|
||||
--agent-plan-panel-bottom: 66px;
|
||||
}
|
||||
|
||||
.chat-return-latest:not([hidden]) + .agent-plan-progress:not([hidden]) {
|
||||
--agent-plan-trigger-bottom: 60px;
|
||||
--agent-plan-panel-bottom: 116px;
|
||||
}
|
||||
|
||||
.agent-plan-progress-panel {
|
||||
min-width: min(360px, calc(100vw - 28px));
|
||||
max-width: calc(100vw - 28px);
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.agent-plan-progress-trigger {
|
||||
min-height: 42px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.agent-plan-progress-trigger,
|
||||
.agent-plan-progress-panel {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.agent-plan-task-status--in_progress {
|
||||
animation-duration: 1.8s;
|
||||
}
|
||||
}
|
||||
@@ -3489,6 +3489,7 @@ html[data-theme="dark"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
|
||||
.chat-container.is-conversation-restoring #chat-messages,
|
||||
.chat-container.is-conversation-restoring #chat-turn-rail,
|
||||
.chat-container.is-conversation-restoring #chat-return-latest,
|
||||
.chat-container.is-conversation-restoring #agent-plan-progress,
|
||||
.chat-container.is-conversation-restoring #chat-input-container {
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -3546,7 +3547,6 @@ html[data-theme="dark"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
|
||||
.chat-messages:hover::-webkit-scrollbar-thumb:hover {
|
||||
background: color-mix(in srgb, var(--text-muted) 80%, transparent);
|
||||
}
|
||||
|
||||
.chat-welcome-empty-state {
|
||||
flex: 1 0 auto;
|
||||
width: 100%;
|
||||
@@ -45316,6 +45316,12 @@ html[data-theme="dark"] .conversation-sidebar .recent-conversations-section {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
/* The composer is an isolated stacking context. Lift that whole context while the
|
||||
settings popover is open so the turn rail and its preview cannot paint above it. */
|
||||
.chat-input-container.is-session-settings-open {
|
||||
z-index: 121;
|
||||
}
|
||||
|
||||
.chat-composer-context {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
Reference in New Issue
Block a user