3d5c22c075
Keep the task chat expand action visible as an icon-only overlay inside the chat view. - Move the expand/collapse button out of the scrolling transcript and onto the task chat container. - Style the control as a centered icon-only button with stable overlay positioning. - Extend TaskChatTab coverage for empty, loading, populated, expanded, and scrolled transcript states. Files changed: packages/dashboard/app/components/TaskChatTab.css | 10 +++- packages/dashboard/app/components/TaskChatTab.tsx | 26 +++++----- .../app/components/__tests__/TaskChatTab.test.tsx | 58 +++++++++++++++++----- 3 files changed, 68 insertions(+), 26 deletions(-) Fusion-Task-Id: FN-6425 Fusion-Task-Lineage: 6526eb4a-4be9-472b-9595-c7fcea6971b1
429 lines
9.6 KiB
CSS
429 lines
9.6 KiB
CSS
.task-chat-tab {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
/* FNXC:TaskDetailChat 2026-06-13-19:55: Chat box should sit in the chat view without excess vertical spacing around the composer (FN-6418), so the transcript-to-composer gap is tighter than the default card stack. */
|
|
gap: var(--space-sm);
|
|
min-height: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.task-chat-expand-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-inline-size: var(--space-2xl);
|
|
min-block-size: var(--space-2xl);
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
FNXC:TaskChat 2026-06-13-00:00:
|
|
FN-6425 requires the chat expand control to stay inside the chat view as an icon-only affordance while remaining reachable at every transcript scroll offset. Anchor it to the non-scrolling task-chat wrapper rather than the transcript content.
|
|
*/
|
|
.task-chat-expand-toggle--overlay {
|
|
position: absolute;
|
|
top: var(--space-md);
|
|
right: var(--space-md);
|
|
z-index: 3;
|
|
background: var(--surface);
|
|
border-color: var(--border);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.task-chat-transcript {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
gap: var(--space-lg);
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: calc(var(--space-md) + var(--space-2xl)) var(--space-md) 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-jump-to-bottom {
|
|
position: sticky;
|
|
right: var(--space-md);
|
|
bottom: var(--space-md);
|
|
width: fit-content;
|
|
min-inline-size: var(--space-2xl);
|
|
min-block-size: var(--space-2xl);
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-xs);
|
|
padding: var(--space-xs) var(--space-sm);
|
|
color: var(--text-muted);
|
|
background: var(--surface);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
z-index: 2;
|
|
}
|
|
|
|
.task-chat-jump-to-bottom:hover {
|
|
background: var(--card-hover);
|
|
color: var(--text);
|
|
}
|
|
|
|
.task-chat-jump-to-bottom:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
.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-user-group {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.task-chat-user-header {
|
|
padding-inline: var(--space-sm);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.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--user {
|
|
max-width: min(100%, calc(var(--space-2xl) * 18));
|
|
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
|
|
background: color-mix(in srgb, var(--accent) 12%, var(--surface));
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.task-chat-tool-group,
|
|
.task-chat-thinking {
|
|
min-width: 0;
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.task-chat-tool-group {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.task-chat-tool-group-summary,
|
|
.task-chat-thinking-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-sm) var(--space-md);
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
|
|
.task-chat-tool-group-summary {
|
|
flex-wrap: wrap;
|
|
gap: var(--space-xs);
|
|
padding: var(--space-xs) var(--space-sm);
|
|
}
|
|
|
|
.task-chat-tool-group-summary::-webkit-details-marker,
|
|
.task-chat-thinking-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.task-chat-tool-group-summary::marker,
|
|
.task-chat-thinking-summary::marker {
|
|
content: "";
|
|
}
|
|
|
|
.task-chat-tool-group-summary:focus-visible,
|
|
.task-chat-thinking-summary:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
.task-chat-tool-group-count {
|
|
flex: 0 0 auto;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.task-chat-tool-group-names {
|
|
min-width: 0;
|
|
color: var(--text-muted);
|
|
font-size: calc(var(--space-md) - (var(--space-xs) / 2));
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.task-chat-tool-group-overflow {
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.task-chat-tool-group-error-count {
|
|
flex: 0 0 auto;
|
|
color: var(--color-error);
|
|
font-size: calc(var(--space-md) - (var(--space-xs) / 2));
|
|
font-weight: 600;
|
|
}
|
|
|
|
.task-chat-tool-group-entries,
|
|
.task-chat-thinking-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 var(--space-md) var(--space-md);
|
|
}
|
|
|
|
.task-chat-tool-group-entries {
|
|
gap: var(--space-xs);
|
|
padding: 0 var(--space-sm) var(--space-sm);
|
|
}
|
|
|
|
.task-chat-tool-entry {
|
|
min-width: 0;
|
|
padding: var(--space-xs) var(--space-sm);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.task-chat-tool-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-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-thinking-summary {
|
|
color: var(--color-warning);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.task-chat-entry-kicker {
|
|
margin-bottom: calc(var(--space-xs) / 2);
|
|
color: var(--text-muted);
|
|
font-size: calc(var(--space-sm) + (var(--space-xs) / 2));
|
|
font-weight: 600;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
.task-chat-tool-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-block {
|
|
margin-top: var(--space-xs);
|
|
}
|
|
|
|
.task-chat-tool-detail-label {
|
|
color: var(--text-muted);
|
|
font-size: var(--space-md);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.task-chat-tool-detail {
|
|
margin: var(--space-xs) 0 0;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.task-chat-composer {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
/* FNXC:TaskDetailChat 2026-06-13-19:55: Chat box should sit in the chat view without excess vertical spacing around the composer (FN-6418), while preserving readable horizontal inset for the input row. */
|
|
padding: var(--space-sm) 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;
|
|
justify-content: center;
|
|
inline-size: calc(var(--space-2xl) + var(--space-sm));
|
|
min-inline-size: calc(var(--space-2xl) + var(--space-sm));
|
|
block-size: calc(var(--space-2xl) + var(--space-sm));
|
|
min-block-size: calc(var(--space-2xl) + var(--space-sm));
|
|
padding: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.task-chat-tab {
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.task-chat-expand-toggle--overlay {
|
|
top: var(--space-sm);
|
|
right: var(--space-sm);
|
|
min-inline-size: calc(var(--space-2xl) + var(--space-sm));
|
|
min-block-size: calc(var(--space-2xl) + var(--space-sm));
|
|
}
|
|
|
|
.task-chat-transcript {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
padding: calc(var(--space-sm) + var(--space-2xl)) var(--space-sm) var(--space-sm);
|
|
}
|
|
|
|
.task-chat-jump-to-bottom {
|
|
right: var(--space-sm);
|
|
bottom: var(--space-sm);
|
|
min-inline-size: calc(var(--space-2xl) + var(--space-sm));
|
|
min-block-size: calc(var(--space-2xl) + var(--space-sm));
|
|
}
|
|
|
|
.task-chat-group {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.task-chat-group-header {
|
|
min-width: 0;
|
|
}
|
|
|
|
.task-chat-user-group {
|
|
align-items: stretch;
|
|
}
|
|
|
|
.task-chat-user-header {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.task-chat-entry--user {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.task-chat-tool-group-summary,
|
|
.task-chat-thinking-summary {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.task-chat-tool-group-names,
|
|
.task-chat-tool-group-error-count {
|
|
width: 100%;
|
|
}
|
|
|
|
.task-chat-tool-group-entries,
|
|
.task-chat-thinking-body {
|
|
padding-inline: var(--space-sm);
|
|
}
|
|
|
|
.task-chat-tool-entry {
|
|
padding: var(--space-sm);
|
|
}
|
|
|
|
.task-chat-composer {
|
|
padding: var(--space-xs) var(--space-sm);
|
|
}
|
|
|
|
.task-chat-composer-row {
|
|
align-items: flex-end;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.task-chat-send {
|
|
inline-size: calc(var(--space-2xl) + var(--space-sm));
|
|
min-inline-size: calc(var(--space-2xl) + var(--space-sm));
|
|
}
|
|
}
|