4bd6024ef7
Add a live chat-style task detail tab for following and steering active agent work. - Add TaskChatTab with grouped agent log bubbles, live-follow scrolling, and steering message composer. - Share chat input autosize helpers between ChatView and task chat. - Wire the Chat tab into task detail navigation with localized labels and regression coverage. Files changed: docs/dashboard-guide.md | 2 + .../dashboard/app/components/AgentLogViewer.tsx | 2 +- packages/dashboard/app/components/ChatView.tsx | 25 +- packages/dashboard/app/components/TaskChatTab.css | 193 ++++++++++++++ packages/dashboard/app/components/TaskChatTab.tsx | 276 +++++++++++++++++++++ .../dashboard/app/components/TaskDetailModal.tsx | 13 +- .../app/components/__tests__/TaskChatTab.test.tsx | 181 ++++++++++++++ .../TaskDetailModal.attachments-and-tabs.test.tsx | 19 +- .../TaskDetailModal.definition-actions.test.tsx | 104 ++++---- ...etailModal.responsive-and-dependencies.test.tsx | 2 +- packages/dashboard/app/utils/chatInputAutosize.ts | 18 ++ packages/i18n/locales/en/app.json | 1 + packages/i18n/locales/es/app.json | 1 + packages/i18n/locales/fr/app.json | 1 + packages/i18n/locales/ko/app.json | 1 + packages/i18n/locales/zh-CN/app.json | 1 + packages/i18n/locales/zh-TW/app.json | 1 + 17 files changed, 757 insertions(+), 84 deletions(-) Fusion-Task-Id: FN-6300 Fusion-Task-Lineage: 1eb8a17b-3ca5-4cba-81c6-ac7ccce0a113
194 lines
3.7 KiB
CSS
194 lines
3.7 KiB
CSS
.task-chat-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
min-height: 0;
|
|
}
|
|
|
|
.task-chat-transcript {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-lg);
|
|
min-height: 0;
|
|
max-height: var(--task-chat-transcript-max-height, 70vh);
|
|
overflow-y: auto;
|
|
padding: var(--space-md);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.task-chat-empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-sm);
|
|
min-height: calc(var(--space-2xl) * 3);
|
|
padding: var(--space-xl);
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.task-chat-group {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.task-chat-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: start;
|
|
gap: var(--space-sm);
|
|
min-width: min(calc(var(--space-2xl) * 4), 32vw);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.task-chat-avatar {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.task-chat-role-label {
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.task-chat-group-meta {
|
|
color: var(--text-muted);
|
|
font-size: var(--space-md);
|
|
}
|
|
|
|
.task-chat-group-bubbles {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.task-chat-entry {
|
|
min-width: 0;
|
|
padding: var(--space-sm) var(--space-md);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.task-chat-entry--thinking {
|
|
border-color: color-mix(in srgb, var(--color-warning) 35%, var(--border));
|
|
background: color-mix(in srgb, var(--color-warning) 8%, var(--surface));
|
|
}
|
|
|
|
.task-chat-entry--tool {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.task-chat-entry--tool-error {
|
|
border-color: color-mix(in srgb, var(--color-error) 45%, var(--border));
|
|
background: color-mix(in srgb, var(--color-error) 8%, var(--surface));
|
|
}
|
|
|
|
.task-chat-entry-kicker {
|
|
margin-bottom: var(--space-xs);
|
|
color: var(--text-muted);
|
|
font-size: var(--space-md);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.task-chat-entry--thinking .task-chat-entry-kicker {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.task-chat-entry--tool-error .task-chat-entry-kicker {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.task-chat-entry-text {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.task-chat-markdown > :first-child,
|
|
.task-chat-markdown p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.task-chat-markdown > :last-child,
|
|
.task-chat-markdown p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.task-chat-tool-detail {
|
|
margin: var(--space-sm) 0 0;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.task-chat-composer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.task-chat-session-hint {
|
|
color: var(--text-muted);
|
|
font-size: var(--space-md);
|
|
}
|
|
|
|
.task-chat-composer-row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.task-chat-input {
|
|
min-height: calc(var(--space-2xl) + var(--space-sm));
|
|
max-height: var(--task-chat-composer-max-height, 40vh);
|
|
resize: none;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.task-chat-send {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.task-chat-tab {
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.task-chat-transcript {
|
|
max-height: var(--task-chat-transcript-mobile-max-height, 62vh);
|
|
padding: var(--space-sm);
|
|
}
|
|
|
|
.task-chat-group {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.task-chat-group-header {
|
|
min-width: 0;
|
|
}
|
|
|
|
.task-chat-composer {
|
|
padding: var(--space-sm);
|
|
}
|
|
|
|
.task-chat-composer-row {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.task-chat-send {
|
|
justify-content: center;
|
|
}
|
|
}
|