mirror of
https://github.com/agent0ai/agent-zero.git
synced 2026-08-03 21:23:33 +00:00
bebe6826cf
Introduce a WebUI extension manifest and rewrite the asset bundler/server to support caller-supplied entry sets, extension-injected entries, and negotiated gzip. Key changes: add get_webui_extension_manifest() to helpers/extension, refactor Stop logic into stop_context() and reuse it from the connector `/stop` command, and add a new `/rename` slash command for chat naming. ui_bundler now accepts entry_urls, includes enabled extension entry files, raises the embedded text file size limit to 512 KiB, computes per-entry-set cache keys, and returns a bundle version based on the bundle signature. ui_server applies Starlette GZip middleware, adds routes (/, /index.html, /ui/index, /safe), serves splash/safe documents, injects the serialized webui_extension_manifest into the rendered index, and streamlines the /ui/asset-bundle endpoint with ETag and gzip handling. Also add multiple WebUI assets and fonts, new/updated plugin command YAML and Python command handlers, and corresponding tests covering bundling, commands, chat naming, and WebUI behaviors. Documentation (.dox.md) updated to reflect the new runtime contracts and guidance.
1008 lines
20 KiB
CSS
1008 lines
20 KiB
CSS
/* Chat History */
|
||
#chat-history {
|
||
background-color: transparent;
|
||
position: relative;
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-grow: 1;
|
||
width: 100%;
|
||
overflow-y: scroll;
|
||
overflow-x: hidden;
|
||
overflow-anchor: none;
|
||
scroll-behavior: auto !important; /* avoid infinite scrolling! */
|
||
padding-left: var(--spacing-sm) !important;
|
||
padding-right: var(--spacing-md) !important;
|
||
padding-top: 4rem !important;
|
||
padding-bottom: 4rem !important;
|
||
-webkit-transition: all 0.3s ease;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
#chat-history.message-window-staging,
|
||
#chat-history.message-window-staging * {
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
|
||
.message-window-loader {
|
||
align-self: center;
|
||
flex: 0 0 auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: var(--spacing-sm) auto;
|
||
min-height: 2rem;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.chat-loading-splash {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 110;
|
||
align-items: center;
|
||
margin: 0;
|
||
min-height: 0;
|
||
background: var(--color-chat-background);
|
||
}
|
||
|
||
.chat-loading-splash[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
.chat-loading-splash:not([hidden]) {
|
||
animation: chat-loading-splash-fade-in 180ms ease-out both;
|
||
}
|
||
|
||
@keyframes chat-loading-splash-fade-in {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.chat-loading-splash:not([hidden]) {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
/* Message Styles */
|
||
|
||
.user-container {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
position: relative;
|
||
width: 100%;
|
||
padding-left: 20%;
|
||
}
|
||
|
||
.ai-container {
|
||
align-self: flex-start;
|
||
}
|
||
|
||
.center-container {
|
||
align-self: center;
|
||
max-width: 80%;
|
||
margin: 0;
|
||
}
|
||
|
||
.message.message-user {
|
||
text-align: end;
|
||
/* margin-bottom: var(--spacing-md); */
|
||
width: 100%;
|
||
margin-bottom: -2.5rem; /* compensate for action buttons */
|
||
}
|
||
|
||
.message-user .message-user-heading {
|
||
margin-top: var(--spacing-sm);
|
||
font-size: var(--font-size-smaller);
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.message-user .message-text {
|
||
display: inline-block;
|
||
padding: var(--spacing-sm);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--border-radius);
|
||
max-width: 80%;
|
||
width: auto;
|
||
}
|
||
|
||
.message-user > div {
|
||
/* padding-top: var(--spacing-xs); */
|
||
/* font-family: "Roboto Mono", monospace; */
|
||
font-optical-sizing: auto;
|
||
-webkit-font-optical-sizing: auto;
|
||
font-size: var(--font-size-smaller);
|
||
}
|
||
|
||
.message-user .message-text {
|
||
text-align: start;
|
||
font-family: var(--font-family-main);
|
||
}
|
||
|
||
.message-user .message-text pre {
|
||
font-family: var(--font-family-main);
|
||
font-weight: 200;
|
||
font-size: larger;
|
||
/* color: azure; */
|
||
color: var(--color-text);
|
||
}
|
||
|
||
/* .light-mode .message-user .message-text pre {
|
||
color: #2e2e2e;
|
||
} */
|
||
|
||
.message-center {
|
||
align-self: center;
|
||
/* border-bottom-left-radius: unset; */
|
||
}
|
||
|
||
.message-followup .message {
|
||
border-radius: 0;
|
||
/* border-top-left-radius: var(--spacing-xxs); */
|
||
}
|
||
|
||
.message-followup + .message-followup {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Update message types for dark mode */
|
||
.message-default,
|
||
.message-agent,
|
||
.message-agent-response,
|
||
.message-agent-delegation,
|
||
.message-tool,
|
||
.message-code-exe,
|
||
.message-browser,
|
||
.message-info,
|
||
.message-util,
|
||
.message-warning {
|
||
color: #e0e0e0;
|
||
background-color: transparent;
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.message-default {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.message-agent {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.message-agent-response {
|
||
min-width: 255px;
|
||
background-color: transparent;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.message-agent-delegation {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.message-tool {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.message-code-exe {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* Terminal-style code execution block */
|
||
.message-code-exe .message-body {
|
||
background: #0d1117;
|
||
border: 1px solid rgba(48, 54, 61, 0.8);
|
||
border-radius: 6px;
|
||
padding: 0;
|
||
margin-top: 0.5em;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.message-code-exe .msg-heading {
|
||
background: linear-gradient(180deg, #21262d 0%, #161b22 100%);
|
||
padding: 6px 12px;
|
||
border-bottom: 1px solid rgba(48, 54, 61, 0.8);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.message-code-exe .msg-heading h4 {
|
||
font-family: var(--font-family-code);
|
||
font-size: 0.75rem;
|
||
color: #8b949e;
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.message-code-exe .msg-heading h4::before {
|
||
content: "$";
|
||
color: #7ee787;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.message-code-exe .msg-content {
|
||
padding: 12px;
|
||
font-family: var(--font-family-code);
|
||
font-size: 0.72rem;
|
||
color: #c9d1d9;
|
||
line-height: 1.5;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.message-code-exe .msg-content pre {
|
||
margin: 0;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* Light mode terminal */
|
||
.light-mode .message-code-exe .message-body {
|
||
background: #f6f8fa;
|
||
border-color: #d0d7de;
|
||
}
|
||
|
||
.light-mode .message-code-exe .msg-heading {
|
||
background: linear-gradient(180deg, #f6f8fa 0%, #eaeef2 100%);
|
||
border-bottom-color: #d0d7de;
|
||
}
|
||
|
||
.light-mode .message-code-exe .msg-heading h4 {
|
||
color: #57606a;
|
||
}
|
||
|
||
.light-mode .message-code-exe .msg-heading h4::before {
|
||
color: #1a7f37;
|
||
}
|
||
|
||
.light-mode .message-code-exe .msg-content {
|
||
color: #24292f;
|
||
}
|
||
|
||
.message-body .markdown-block-wrap {
|
||
margin: 1em 0;
|
||
}
|
||
|
||
.message-body .message-markdown-table-wrap {
|
||
display: block;
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
/* padding-bottom: 1em; */
|
||
}
|
||
|
||
.message-body .message-markdown-table-wrap table {
|
||
width: auto;
|
||
table-layout: auto;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.message-body .code-block-wrapper{
|
||
max-width: 100%;
|
||
overflow-x: auto;
|
||
padding: 0.5em;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--border-radius-sm);
|
||
}
|
||
|
||
.message-body .code-block-wrapper pre{
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* .message-body code {
|
||
white-space: break-spaces;
|
||
} */
|
||
|
||
/* Light mode code-exe styling moved to main terminal block above */
|
||
|
||
.message-browser {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.message-info {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.message-util {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.message-warning {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* Error messages styled like process groups */
|
||
.message-error .msg-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.message-error .msg-heading h4 {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: var(--font-size-medium);
|
||
font-weight: 500;
|
||
color: var(--color-error-text);
|
||
opacity: 0.9;
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
/* Warning messages styled like process groups */
|
||
.message-warning .msg-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.message-warning .msg-heading h4 {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: var(--font-size-medium);
|
||
font-weight: 500;
|
||
color: var(--color-warning-text);
|
||
opacity: 0.9;
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
/* Terminal styling moved to new terminal block above */
|
||
|
||
/* Agent and AI Info */
|
||
.agent-start {
|
||
color: var(--color-text);
|
||
font-size: var(--font-size-small);
|
||
margin-bottom: var(--spacing-xs);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.msg-kvps {
|
||
font-size: 0.9em;
|
||
margin: 0.5rem 0 0.55rem 0;
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
}
|
||
|
||
.kvps-val {
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.kvps-val p {
|
||
margin: 0;
|
||
}
|
||
|
||
.kvps-val pre {
|
||
white-space: pre-wrap; /* keep \n, collapse no spaces, allow wrapping */
|
||
word-break: break-word; /* optional – forces really long “words” to break */
|
||
font-family: var(--font-family-code);
|
||
font-optical-sizing: auto;
|
||
-webkit-font-optical-sizing: auto;
|
||
}
|
||
|
||
.msg-kvps th,
|
||
.msg-kvps td {
|
||
align-content: start;
|
||
padding: 0.25rem;
|
||
padding-left: 0;
|
||
/* text-align: left; */
|
||
}
|
||
|
||
.msg-kvps th {
|
||
color: var(--color-primary);
|
||
width: 40%;
|
||
}
|
||
|
||
.msg-kvps tr {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.msg-heading {
|
||
margin: 0;
|
||
position: relative;
|
||
display: block;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.msg-heading h4 {
|
||
margin: 0;
|
||
/* width: calc(100% - 4em); */
|
||
margin-right: 4em;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* Message Actions */
|
||
.message-actions {
|
||
color: var(--color-text);
|
||
font-size: var(--font-size-small);
|
||
margin-top: var(--spacing-xs);
|
||
}
|
||
|
||
.message-action {
|
||
cursor: pointer;
|
||
opacity: 0.7;
|
||
-webkit-transition: opacity var(--transition-speed) ease-in-out;
|
||
transition: opacity var(--transition-speed) ease-in-out;
|
||
}
|
||
|
||
.message-action:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Make message containers relative for absolute positioning of copy buttons */
|
||
.msg-content,
|
||
.kvps-row,
|
||
.message-text {
|
||
position: relative;
|
||
}
|
||
|
||
.message-text pre {
|
||
margin: 0;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
/* Utility Classes */
|
||
.kvps-key {
|
||
font-weight: 500;
|
||
font-size: var(--font-size-xs);
|
||
/* min-width: 7em; */
|
||
width: 5em;
|
||
text-align: right;
|
||
}
|
||
|
||
.kvps-key .material-symbols-outlined {
|
||
font-size: var(--font-size-smaller);
|
||
}
|
||
|
||
.kvps-val {
|
||
/* margin: 0.65rem 0 0.65rem 0.4rem; */
|
||
white-space: pre-wrap;
|
||
font-size: var(--font-size-xs);
|
||
}
|
||
|
||
.kvps-img {
|
||
width: 8em;
|
||
height: 8em;
|
||
object-fit: cover;
|
||
object-position: top left;
|
||
border-radius: 10%;
|
||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
.image-viewer-img {
|
||
width: 100%;
|
||
}
|
||
|
||
.msg-content {
|
||
width: 100%;
|
||
margin-bottom: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.document-response-file-cards {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-xs);
|
||
margin: var(--spacing-sm) 0 0;
|
||
width: min(100%, 34rem);
|
||
}
|
||
|
||
.document-file-card {
|
||
display: grid;
|
||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||
align-items: center;
|
||
gap: var(--spacing-sm);
|
||
width: min(100%, 34rem);
|
||
min-height: 3.25rem;
|
||
padding: var(--spacing-sm);
|
||
box-sizing: border-box;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 8px;
|
||
background: rgba(255, 255, 255, 0.035);
|
||
color: var(--color-text);
|
||
cursor: pointer;
|
||
text-align: left;
|
||
transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
|
||
}
|
||
|
||
.document-file-card:hover,
|
||
.document-file-card:focus-visible {
|
||
border-color: var(--color-primary);
|
||
background: rgba(255, 255, 255, 0.06);
|
||
outline: none;
|
||
}
|
||
|
||
.document-file-card:active {
|
||
transform: translateY(1px);
|
||
}
|
||
|
||
.document-file-card[aria-disabled="true"] {
|
||
cursor: default;
|
||
opacity: 0.72;
|
||
}
|
||
|
||
.document-file-card-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 2rem;
|
||
height: 2rem;
|
||
border-radius: 8px;
|
||
background: rgba(255, 255, 255, 0.075);
|
||
color: var(--color-primary);
|
||
font-size: 1.2rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.document-file-card-meta {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-direction: column;
|
||
gap: 0.1rem;
|
||
}
|
||
|
||
.document-file-card-name {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
color: var(--color-text);
|
||
font-size: var(--font-size-small);
|
||
font-weight: 600;
|
||
line-height: 1.25;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.document-file-card-path {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
color: var(--color-text-muted);
|
||
font-family: var(--font-family-code);
|
||
font-size: var(--font-size-xs);
|
||
line-height: 1.35;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.document-file-card-badge {
|
||
align-self: start;
|
||
padding: 0.15rem 0.35rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
color: var(--color-text-muted);
|
||
font-size: 0.62rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
line-height: 1;
|
||
}
|
||
|
||
.step-action-buttons .document-file-action {
|
||
padding: 2px;
|
||
border: 0;
|
||
border-radius: 4px;
|
||
color: var(--color-message-text);
|
||
line-height: 1;
|
||
}
|
||
|
||
.step-action-buttons .document-file-action:hover,
|
||
.step-action-buttons .document-file-action:focus-visible {
|
||
background: transparent;
|
||
color: var(--color-text);
|
||
outline: none;
|
||
}
|
||
|
||
.step-action-buttons .document-file-action .material-symbols-outlined {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.light-mode .document-file-card {
|
||
background: rgba(0, 0, 0, 0.025);
|
||
}
|
||
|
||
.light-mode .document-file-card:hover,
|
||
.light-mode .document-file-card:focus-visible {
|
||
background: rgba(0, 0, 0, 0.045);
|
||
}
|
||
|
||
.light-mode .document-file-card-icon {
|
||
background: rgba(0, 0, 0, 0.055);
|
||
}
|
||
|
||
/* Math (KaTeX) */
|
||
.katex {
|
||
line-height: 1.2 !important;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
/* Media Queries */
|
||
/* Chat width controlled by --chat-max-width CSS variable (set via preferences, default 55em) */
|
||
@media (min-width: 1025px) {
|
||
#chat-history {
|
||
padding-left: max(
|
||
var(--spacing-sm),
|
||
calc((100% - var(--chat-max-width, 55em)) / 2)
|
||
) !important;
|
||
padding-right: max(
|
||
var(--spacing-sm),
|
||
calc((100% - var(--chat-max-width, 55em)) / 2)
|
||
) !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
#chat-history {
|
||
padding-left: var(--spacing-sm) !important;
|
||
padding-right: var(--spacing-md) !important;
|
||
padding-top: 4rem !important;
|
||
padding-bottom: 3rem !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
/* New styles for mobile messages */
|
||
|
||
.message-followup {
|
||
/* margin-left: var(--spacing-md); */
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.msg-kvps {
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-collapse: separate;
|
||
border-spacing: 0 0.5rem;
|
||
}
|
||
|
||
.msg-kvps tr {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 0.3rem;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.msg-kvps th,
|
||
.msg-kvps td {
|
||
display: block;
|
||
width: 100%;
|
||
text-align: left;
|
||
border-bottom: none;
|
||
padding: 0.25rem 0;
|
||
padding-left: 0 !important;
|
||
}
|
||
|
||
.msg-kvps th {
|
||
color: var(--color-primary);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.kvps-val {
|
||
margin: 0 0 0.4rem 0;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.document-file-card {
|
||
grid-template-columns: auto minmax(0, 1fr);
|
||
}
|
||
|
||
.document-file-card-badge {
|
||
grid-column: 2;
|
||
justify-self: start;
|
||
}
|
||
|
||
.step-action-buttons .document-file-action {
|
||
padding-inline: 2px;
|
||
}
|
||
}
|
||
|
||
.light-mode .msg-kvps tr {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.light-mode .message-user {
|
||
color: #4e4e4e;
|
||
}
|
||
|
||
/* Markdown in messages */
|
||
.msg-content {
|
||
font-size: var(--font-size-small);
|
||
}
|
||
|
||
.message-agent-response .msg-content {
|
||
font-size: var(--font-size-larger);
|
||
}
|
||
|
||
.message-agent-response .msg-content img {
|
||
margin: var(--spacing-xs);
|
||
max-width: 30rem;
|
||
max-height: 15rem;
|
||
border-radius: var(--border-radius);
|
||
background: repeating-linear-gradient(
|
||
45deg,
|
||
var(--color-panel) 0 10px,
|
||
var(--color-chat-background) 10px 20px
|
||
);
|
||
}
|
||
|
||
.message-agent-response .msg-content .message-markdown-image-wrap img:hover {
|
||
filter: brightness(1.02);
|
||
}
|
||
|
||
.msg-content h1 {
|
||
font-size: 1.25em;
|
||
font-weight: 800;
|
||
margin-bottom: 0.2em;
|
||
}
|
||
|
||
.msg-content h2 {
|
||
font-size: 1.2em;
|
||
font-weight: 700;
|
||
margin-bottom: 0.2em;
|
||
}
|
||
|
||
.msg-content h3 {
|
||
font-size: 1.15em;
|
||
font-weight: 600;
|
||
margin-bottom: 0.2em;
|
||
}
|
||
|
||
.msg-content h4 {
|
||
font-size: 1.1em;
|
||
font-weight: 500;
|
||
margin-bottom: 0.2em;
|
||
}
|
||
|
||
.msg-content h5 {
|
||
font-size: 1.05em;
|
||
font-weight: 500;
|
||
margin-bottom: 0.2em;
|
||
}
|
||
|
||
.msg-content h6 {
|
||
font-size: 1em;
|
||
font-weight: 500;
|
||
margin-bottom: 0.2em;
|
||
}
|
||
|
||
.msg-content table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.98em;
|
||
background: transparent;
|
||
border-radius: var(--border-radius-sm);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.msg-content th,
|
||
.msg-content td {
|
||
padding: 0.55em 1em;
|
||
border: 1px solid var(--color-border);
|
||
text-align: left;
|
||
background: transparent;
|
||
}
|
||
|
||
.msg-content th {
|
||
font-weight: 600;
|
||
background: var(--color-table-row);
|
||
}
|
||
|
||
.msg-content tr:nth-child(even) {
|
||
background: var(--color-table-row);
|
||
}
|
||
|
||
.msg-content tr:nth-child(odd) {
|
||
background: transparent;
|
||
}
|
||
|
||
.msg-content table {
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* .msg-content pre:has(code) {
|
||
padding: 0.5em;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--border-radius-sm);
|
||
} */
|
||
|
||
.msg-content hr {
|
||
border: 0;
|
||
border-top: 1px solid var(--color-border);
|
||
/* border-top-color: color-mix(in srgb, var(--color-text) 50%, transparent); */
|
||
height: 0;
|
||
}
|
||
|
||
.msg-min-max-btns {
|
||
opacity: 40%;
|
||
position: absolute;
|
||
top: -0.2em;
|
||
right: -0.2em;
|
||
display: flex;
|
||
gap: 0.3em;
|
||
z-index: 1;
|
||
}
|
||
|
||
.message-group {
|
||
margin-top: 0.5em;
|
||
margin-bottom: 0.5em;
|
||
display: inline-grid;
|
||
grid-template-columns: minmax(0, 100%);
|
||
grid-auto-rows: auto;
|
||
max-width: 100%;
|
||
gap: var(--spacing-xs);
|
||
}
|
||
|
||
.message-group > * {
|
||
grid-column: 1;
|
||
} /* both children sit in the same column */
|
||
|
||
.message-group-right {
|
||
width: 100%;
|
||
justify-content: end;
|
||
margin-top: 4em;
|
||
margin-bottom: 4em;
|
||
}
|
||
|
||
.message-container {
|
||
animation: fadeIn 0.2s;
|
||
-webkit-animation: fadeIn 0.2s;
|
||
/* margin-bottom: var(--spacing-sm); */
|
||
width: 100%;
|
||
max-width: 100%;
|
||
scroll-margin-top: 60px; /* Ensure nice spacing when scrolling into view */
|
||
}
|
||
|
||
/* User messages appear instantly */
|
||
.message-container.user-container {
|
||
animation: none !important;
|
||
-webkit-animation: none !important;
|
||
}
|
||
|
||
.message-container.message-window-restored {
|
||
animation: none !important;
|
||
-webkit-animation: none !important;
|
||
}
|
||
|
||
.message {
|
||
/* background-color: var(--color-message-bg); */
|
||
/* border-radius: 0; */
|
||
padding: 0.9rem var(--spacing-sm) 0.7rem var(--spacing-sm);
|
||
overflow-x: auto;
|
||
width: auto;
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
/* display: block; */
|
||
word-break: break-word;
|
||
overflow-wrap: anywhere;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* shades */
|
||
.dark-mode .message {
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* ===========================================
|
||
Collapsible Standalone Messages
|
||
Shows ~10 lines with fade-out, expand button reveals full content
|
||
=========================================== */
|
||
|
||
.message.message-collapsible .message-collapse-content {
|
||
position: relative;
|
||
max-height: 15em !important;
|
||
overflow: hidden;
|
||
transition: max-height 0.3s ease-out;
|
||
}
|
||
|
||
.message.message-collapsible .message-collapse-content::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3em;
|
||
background: linear-gradient(transparent, var(--color-chat-background));
|
||
pointer-events: none;
|
||
opacity: 1;
|
||
transition: opacity 0.3s ease-out;
|
||
}
|
||
|
||
/* Expanded state */
|
||
.message.message-collapsible.expanded .message-collapse-content {
|
||
max-height: none !important;
|
||
}
|
||
|
||
.message.message-collapsible.expanded .message-collapse-content::after {
|
||
opacity: 0;
|
||
}
|
||
|
||
/* No fade when content fits */
|
||
.message.message-collapsible:not(.has-overflow) .message-collapse-content::after {
|
||
opacity: 0;
|
||
}
|
||
|
||
/* ALL detail mode: force full response bodies and hide the expand control */
|
||
#chat-history[data-detail-mode="expanded"]
|
||
.message.message-agent-response.message-collapsible
|
||
.message-collapse-content {
|
||
max-height: none !important;
|
||
}
|
||
|
||
#chat-history[data-detail-mode="expanded"]
|
||
.message.message-agent-response.message-collapsible
|
||
.message-collapse-content::after {
|
||
opacity: 0;
|
||
}
|
||
|
||
#chat-history[data-detail-mode="expanded"]
|
||
.message.message-agent-response.message-collapsible
|
||
.expand-btn {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Long history replays keep oversized bodies as previews until explicitly opened,
|
||
even when the global preference is ALL. */
|
||
#chat-history[data-detail-mode="expanded"]
|
||
.message.message-collapsible.lazy-content:not(.expanded)
|
||
.message-collapse-content {
|
||
max-height: 15em !important;
|
||
}
|
||
|
||
#chat-history[data-detail-mode="expanded"]
|
||
.message.message-collapsible.lazy-content:not(.expanded)
|
||
.message-collapse-content::after {
|
||
opacity: 1;
|
||
}
|
||
|
||
#chat-history[data-detail-mode="expanded"]
|
||
.message.message-collapsible.lazy-content
|
||
.expand-btn {
|
||
display: inline-flex !important;
|
||
}
|
||
|
||
/* Smooth Render */
|
||
.smooth-render-visible,
|
||
.smooth-render-invisible {
|
||
position: absolute;
|
||
width:100%;
|
||
inset: 0;
|
||
opacity: 0;
|
||
}
|
||
|
||
.smooth-render-visible {
|
||
z-index: 2;
|
||
animation: smoothFadeIn 200ms ease-out forwards;
|
||
}
|
||
|
||
.smooth-render-invisible {
|
||
z-index: 1;
|
||
opacity: 1;
|
||
animation: smoothFadeOut 70ms ease-out forwards;
|
||
animation-delay: 100ms;
|
||
}
|
||
|
||
@keyframes smoothFadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes smoothFadeOut {
|
||
from {
|
||
opacity: 1;
|
||
}
|
||
to {
|
||
opacity: 0;
|
||
}
|
||
}
|