fix: unify chat process and reply presentation
This commit is contained in:
+136
-29
@@ -157,6 +157,7 @@
|
||||
--shadow-panel: 0 12px 32px rgba(15, 33, 55, 0.14);
|
||||
--shadow-agent-history-bottom: 0 12px 12px -12px rgba(15, 33, 55, 0.32);
|
||||
--shadow-control: 0 6px 18px rgba(15, 33, 55, 0.1);
|
||||
--shadow-agent-composer: 0 2px 4px rgb(15 23 42 / 0.04), 0 12px 32px -10px rgb(15 23 42 / 0.12);
|
||||
--shadow-transient: 0 14px 34px rgba(15, 33, 55, 0.18);
|
||||
--shadow-agent-floating:
|
||||
0 18px 42px rgba(15, 33, 55, 0.18), 0 4px 12px rgba(15, 33, 55, 0.1),
|
||||
@@ -824,11 +825,6 @@ button:disabled {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.agent-panel-composer.form-field:focus-within {
|
||||
outline: 1px solid var(--field-focus-border);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.agent-panel-history-extension .agent-history-item,
|
||||
.agent-panel-history-extension .agent-history-state {
|
||||
background-color: var(--agent-floating-reading-item);
|
||||
@@ -932,11 +928,53 @@ button.agent-history-session-trigger:not(:disabled):active {
|
||||
|
||||
.agent-streaming-response {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.75;
|
||||
--sd-animation: agent-stream-token-in;
|
||||
--sd-duration: 260ms;
|
||||
--sd-easing: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.agent-streaming-response :is(p, li) { font-size: inherit; line-height: inherit; }
|
||||
.agent-streaming-response :is(h1, h2, h3, h4) { margin-block: 1.3em 0.6em; line-height: 1.5; text-wrap: pretty; }
|
||||
.agent-streaming-response h1 { font-size: 24px; }
|
||||
.agent-streaming-response h2 { font-size: 21px; }
|
||||
.agent-streaming-response h3 { font-size: 18px; }
|
||||
.agent-streaming-response h4 { font-size: 16px; }
|
||||
.agent-streaming-response :is(ul, ol) { padding-inline-start: 1.5em; }
|
||||
.agent-streaming-response blockquote { margin-block: 1em; padding: 12px 16px; border: 1px solid var(--surface-border); border-radius: var(--radius); background: var(--surface-control); }
|
||||
.agent-streaming-response pre { max-width: 100%; overflow-x: auto; font-size: 13px; line-height: 1.7; }
|
||||
|
||||
.markdown-reading-block { min-width: 0; margin-block: 20px; overflow: hidden; border: 1px solid var(--surface-border); border-radius: var(--radius); background: var(--surface-reading); }
|
||||
.markdown-table-scroll { max-width: 100%; max-height: 384px; overflow: auto; overscroll-behavior: contain; }
|
||||
.markdown-table-scroll:focus-visible { outline: 2px solid var(--action-blue); outline-offset: -2px; }
|
||||
.markdown-table-scroll table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.7; }
|
||||
.markdown-table-scroll :is(th, td) { min-width: 112px; max-width: 400px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--surface-divider); vertical-align: top; overflow-wrap: anywhere; }
|
||||
.markdown-table-scroll th { position: sticky; top: 0; z-index: 1; background: var(--surface-control); color: var(--ink); text-align: start; font-weight: 600; }
|
||||
.markdown-table-scroll td { font-variant-numeric: tabular-nums; }
|
||||
.markdown-table-scroll tr:last-child td { border-bottom: 0; }
|
||||
.markdown-reading-window { width: calc(100vw - 32px); max-width: 1120px; height: min(84dvh, 900px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; gap: 0; overflow: hidden; padding: 0; border-radius: 12px; background: var(--surface-reading); color: var(--ink); }
|
||||
.markdown-reading-window [data-sd-animate] { animation: none; filter: none; opacity: 1; transform: none; }
|
||||
.markdown-reading-window .markdown-table-scroll { max-height: none; overflow: visible; }
|
||||
.markdown-reading-window .markdown-table-scroll table { font-size: 16px; }
|
||||
.markdown-reading-window[data-reading-kind="table"] { height: auto; max-height: min(84dvh, 900px); }
|
||||
.markdown-diagram-renderer { min-width: 0; padding: 8px; }
|
||||
.markdown-diagram-renderer [data-streamdown="mermaid-block"] { margin: 0; border: 0; border-radius: 0; background: var(--surface-reading); padding: 0; }
|
||||
.markdown-diagram-renderer [data-streamdown="mermaid-block"] > div:first-child { visibility: hidden; }
|
||||
.markdown-diagram-renderer [data-streamdown="mermaid-block-actions"] { background: var(--surface-control); backdrop-filter: none; }
|
||||
.markdown-diagram-renderer [data-streamdown="mermaid"] { height: clamp(300px, 52dvh, 480px); }
|
||||
.markdown-diagram-renderer [data-streamdown="mermaid"] > div { height: 100%; }
|
||||
.markdown-diagram-renderer [data-streamdown="mermaid"] [role="application"] { justify-content: flex-start; }
|
||||
.markdown-diagram-renderer [data-streamdown="mermaid"] [role="img"] { width: max-content; min-width: 100%; flex: none; padding: 20px 48px 20px 12px; }
|
||||
.markdown-diagram-renderer [data-streamdown="mermaid"] [role="img"] > svg { width: auto; max-width: none; height: auto; flex-shrink: 0; }
|
||||
.markdown-reading-window .markdown-diagram-renderer [data-streamdown="mermaid"] { height: min(62dvh, 640px); }
|
||||
@media (max-width: 639px) {
|
||||
.markdown-reading-window { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); height: min(88dvh, 900px); }
|
||||
.markdown-reading-window[data-reading-kind="table"] { height: auto; max-height: min(88dvh, 900px); }
|
||||
.markdown-table-scroll :is(th, td) { padding: 10px 12px; }
|
||||
}
|
||||
|
||||
[data-streamdown="table-fullscreen"] [data-sd-animate] {
|
||||
animation: none;
|
||||
filter: none;
|
||||
@@ -1159,10 +1197,6 @@ button.agent-history-session-trigger:not(:disabled):active {
|
||||
transition: background-color 180ms ease;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-body:focus-within {
|
||||
border-color: var(--field-focus-border);
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-tools {
|
||||
min-height: 40px;
|
||||
padding: 0 4px;
|
||||
@@ -1196,7 +1230,7 @@ button.agent-history-session-trigger:not(:disabled):active {
|
||||
|
||||
.agent-panel-suggestion-status {
|
||||
padding: 12px;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
@@ -1241,7 +1275,7 @@ button.agent-history-session-trigger:not(:disabled):active {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] [data-agent-progress] {
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-nested[data-agent-progress] {
|
||||
border-color: var(--surface-divider);
|
||||
background: var(--agent-dock-surface);
|
||||
box-shadow: none;
|
||||
@@ -2020,7 +2054,7 @@ details[open] > summary > .disclosure-accordion-indicator {
|
||||
}
|
||||
.agent-chat-avatar { width: 28px; height: 28px; border-radius: 8px; }
|
||||
.agent-chat-message-header { display: flex; align-items: center; gap: 8px; min-height: 28px; }
|
||||
.agent-chat-message-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
|
||||
.agent-chat-message-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; }
|
||||
.agent-chat-context-bar { display: flex; flex-direction: column; flex-shrink: 0; min-width: 0; padding: 12px; background: var(--surface-navigation); }
|
||||
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-conversation {
|
||||
@@ -2044,7 +2078,8 @@ details[open] > summary > .disclosure-accordion-indicator {
|
||||
background: #f1f5f9;
|
||||
box-shadow: none;
|
||||
}
|
||||
.agent-chat-message-list { padding: 8px 4px; }
|
||||
.agent-panel-shell[data-agent-presentation] { --agent-message-list-inset: 4px; }
|
||||
.agent-chat-message-list { padding: 8px var(--agent-message-list-inset, 4px); }
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-band {
|
||||
background: #ffffff;
|
||||
padding: 8px 12px;
|
||||
@@ -2056,38 +2091,73 @@ details[open] > summary > .disclosure-accordion-indicator {
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-input-form {
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 14px;
|
||||
border: 1px solid #e4e4e7;
|
||||
border-radius: 22px;
|
||||
background: #ffffff;
|
||||
background-image: none;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 0.04);
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-input-form:focus-within {
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 2px rgb(37 99 235 / 0.08);
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-input-body {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 14px 14px 0 0;
|
||||
border-radius: 22px 22px 0 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-input-tools {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
flex-wrap: nowrap;
|
||||
margin: 0 6px 6px;
|
||||
padding: 4px;
|
||||
border-top: 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation="mobile-sheet"] .agent-panel-band { flex-shrink: 0; }
|
||||
.agent-panel-shell[data-agent-presentation="mobile-sheet"] .agent-panel-input-tools { flex-wrap: wrap; }
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-toolbar-trigger { border-radius: 10px; }
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-voice-input { border-radius: 50%; }
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-input-tools svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-input-tools .agent-panel-toolbar-caret {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-input-tools .agent-panel-send-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke-width: 2.25;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-primary-icon {
|
||||
border-radius: 9px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
border-radius: 999px;
|
||||
background: #2563eb;
|
||||
box-shadow: none;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-primary-icon:disabled { background: #94a3b8; }
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-primary-icon:disabled {
|
||||
background: var(--surface-control);
|
||||
color: var(--ink-muted);
|
||||
opacity: 1;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-primary-icon[data-agent-action="stop"] {
|
||||
background: var(--status-danger-soft);
|
||||
color: var(--status-danger-foreground);
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-primary-icon:hover:not(:disabled) {
|
||||
background: var(--action-blue-hover);
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-primary-icon[data-agent-action="stop"]:hover:not(:disabled) {
|
||||
background: var(--status-danger-border);
|
||||
}
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-icon-button,
|
||||
.agent-panel-shell[data-agent-presentation] .agent-project-trigger {
|
||||
border-color: transparent;
|
||||
@@ -2111,7 +2181,39 @@ details[open] > summary > .disclosure-accordion-indicator {
|
||||
@media (max-width: 639px) {
|
||||
.agent-panel-shell[data-agent-centered="true"] .agent-panel-band { padding: 24px 16px; }
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-chat-context-bar { background: #ffffff; }
|
||||
.agent-panel-shell[data-agent-presentation] .agent-chat-context-bar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-inline: calc(12px + var(--agent-message-list-inset));
|
||||
background: var(--surface-navigation);
|
||||
text-align: left;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-chat-context-bar > p {
|
||||
scrollbar-gutter: stable both-edges;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-chat-context-bar::after,
|
||||
.agent-panel-shell[data-agent-presentation][data-agent-starting="false"] .agent-panel-band::before {
|
||||
position: absolute;
|
||||
inset-inline: 0;
|
||||
height: 32px;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-chat-context-bar::after {
|
||||
top: 100%;
|
||||
background: linear-gradient(to bottom, var(--surface-navigation), transparent);
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation][data-agent-starting="false"] .agent-panel-band::before {
|
||||
z-index: 2;
|
||||
bottom: 100%;
|
||||
background: linear-gradient(to top, var(--surface-navigation), transparent);
|
||||
}
|
||||
@media (forced-colors: active), (prefers-reduced-transparency: reduce) {
|
||||
.agent-panel-shell[data-agent-presentation] .agent-chat-context-bar::after,
|
||||
.agent-panel-shell[data-agent-presentation][data-agent-starting="false"] .agent-panel-band::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
/* Keep one compact form mounted while the starting group becomes a bottom composer. */
|
||||
.agent-panel-shell[data-agent-presentation][data-agent-starting] .agent-panel-input-form > [data-slot="input-group"] { gap: 4px; }
|
||||
.agent-panel-shell[data-agent-presentation][data-agent-starting] .agent-panel-input-tools { padding-block: 4px; }
|
||||
@@ -2119,8 +2221,11 @@ details[open] > summary > .disclosure-accordion-indicator {
|
||||
min-height: 64px;
|
||||
max-height: clamp(64px, 24dvh, 160px);
|
||||
padding: 14px 14px 8px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation][data-agent-starting] .agent-panel-input-body:has(.agent-panel-input-reference) textarea.agent-panel-prompt-textarea {
|
||||
padding-top: 6px;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-chat-suggestions {
|
||||
flex-direction: column;
|
||||
@@ -2142,7 +2247,7 @@ details[open] > summary > .disclosure-accordion-indicator {
|
||||
background: #ffffff;
|
||||
color: #52525b;
|
||||
box-shadow: none;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -2153,15 +2258,17 @@ details[open] > summary > .disclosure-accordion-indicator {
|
||||
color: #18181b;
|
||||
}
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-input-form { border-color: #e4e4e7; box-shadow: 0 1px 2px rgb(0 0 0 / 0.03); }
|
||||
.agent-panel-shell[data-agent-presentation] form.agent-panel-control { box-shadow: var(--shadow-agent-composer); }
|
||||
|
||||
|
||||
.resizable-handle { color: var(--ink-muted); touch-action: none; }
|
||||
.resizable-grip { opacity: 0; }
|
||||
.resizable-handle::after { content: ""; position: absolute; inset: 0 -6px; }
|
||||
.resizable-handle[aria-orientation="horizontal"]::after { inset: -6px 0; }
|
||||
.resizable-handle[aria-orientation="horizontal"] .resizable-grip { transform: rotate(90deg); }
|
||||
.resizable-handle:is([data-separator="hover"], [data-separator="active"], :focus-visible) { background: var(--action-blue); }
|
||||
.resizable-handle:is([data-separator="hover"], [data-separator="active"], :focus-visible) .resizable-grip {
|
||||
opacity: 1;
|
||||
color: var(--action-blue);
|
||||
border-color: var(--action-blue);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user