Export template source from 06f40b40f6941b0662e05100dd8637fbc6f422b5:quixos-instance/packages/agent-presentation
This commit is contained in:
Quixos Template Publisher
+303
@@ -0,0 +1,303 @@
|
||||
.agent-thread {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
font:
|
||||
14px/1.6 system-ui,
|
||||
sans-serif;
|
||||
color: var(--ink, #314034);
|
||||
}
|
||||
.agent-thread-status {
|
||||
padding: 7px 24px;
|
||||
color: #65728a;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid #edf0f5;
|
||||
}
|
||||
.agent-thread-history {
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
min-height: 100px;
|
||||
padding: 20px max(24px, calc((100% - 820px) / 2));
|
||||
}
|
||||
.agent-request {
|
||||
margin: 0 0 30px;
|
||||
min-width: 0;
|
||||
}
|
||||
.agent-request-source {
|
||||
font-size: 11px;
|
||||
color: #748098;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.agent-message {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.agent-message-user {
|
||||
background: #edf1fa;
|
||||
border-radius: 9px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.agent-message-assistant {
|
||||
padding: 6px 2px;
|
||||
}
|
||||
.agent-request-card {
|
||||
padding: 8px 2px;
|
||||
color: #65728a;
|
||||
font-size: 12px;
|
||||
}
|
||||
.agent-request-card > div:first-child {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.agent-request-card button {
|
||||
font-size: 12px;
|
||||
}
|
||||
.agent-request-card p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
.agent-request-failed,
|
||||
.agent-request-uncertain {
|
||||
border-left: 3px solid #c77528;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.agent-thread pre {
|
||||
max-height: 320px;
|
||||
overflow: auto;
|
||||
font:
|
||||
12px/1.6 ui-monospace,
|
||||
monospace;
|
||||
padding: 12px;
|
||||
background: #f4f6fa;
|
||||
border-radius: 5px;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.agent-activity-card,
|
||||
.agent-commentary {
|
||||
border: 1px solid #e0e5ee;
|
||||
border-radius: 7px;
|
||||
padding: 8px 12px;
|
||||
margin: 10px 0;
|
||||
font-size: 12px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.agent-thread summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
.agent-widget {
|
||||
margin: 14px 0;
|
||||
padding: 14px;
|
||||
border: 1px solid #dae0e8;
|
||||
border-radius: 8px;
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.agent-question {
|
||||
background: #fff8e9;
|
||||
padding: 16px;
|
||||
border: 1px solid #e8d5a6;
|
||||
border-radius: 8px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.agent-question fieldset {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.agent-question legend {
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.agent-question input {
|
||||
margin: 0 7px;
|
||||
}
|
||||
.agent-result {
|
||||
font-size: 14px;
|
||||
color: #253044;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.agent-result dl {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(70px, 120px) minmax(0, 1fr);
|
||||
gap: 8px 16px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.agent-result dt {
|
||||
color: #65728a;
|
||||
}
|
||||
.agent-result dd {
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.agent-status-card {
|
||||
border-left: 3px solid #7894cc;
|
||||
background: #f2f5fb;
|
||||
padding: 12px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.agent-thread-composer {
|
||||
padding: 12px 24px 18px;
|
||||
border-top: 1px solid #dae0e8;
|
||||
background: #fff;
|
||||
}
|
||||
.agent-compose-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #65728a;
|
||||
}
|
||||
.agent-compose-label textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
font:
|
||||
14px/1.5 system-ui,
|
||||
sans-serif;
|
||||
padding: 10px;
|
||||
margin-top: 4px;
|
||||
border: 1px solid #cbd3df;
|
||||
border-radius: 7px;
|
||||
min-height: 78px;
|
||||
max-height: 240px;
|
||||
}
|
||||
.agent-compose-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.agent-compose-actions > span {
|
||||
margin-left: auto;
|
||||
color: #748098;
|
||||
font-size: 11px;
|
||||
}
|
||||
.agent-compose-actions details {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
.agent-compose-actions details label {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 7px 0;
|
||||
}
|
||||
.agent-jump {
|
||||
position: absolute;
|
||||
bottom: 180px;
|
||||
align-self: center;
|
||||
box-shadow: 0 2px 10px #23304722;
|
||||
}
|
||||
.agent-empty {
|
||||
padding: 40px 0;
|
||||
color: #65728a;
|
||||
text-align: center;
|
||||
}
|
||||
.agent-empty h2 {
|
||||
font-weight: 500;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.agent-shell {
|
||||
height: 100dvh;
|
||||
}
|
||||
.agent-shell-header {
|
||||
padding: 9px 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
.agent-account > span {
|
||||
display: none;
|
||||
}
|
||||
.agent-shell-body {
|
||||
flex-direction: column;
|
||||
}
|
||||
.agent-sidebar {
|
||||
width: auto;
|
||||
max-height: 150px;
|
||||
padding: 10px 12px;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #dae0e8;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.agent-sidebar > label {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
}
|
||||
.agent-sidebar nav {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
.agent-sidebar nav a {
|
||||
min-width: 140px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
.agent-directory {
|
||||
width: 100%;
|
||||
}
|
||||
.agent-thread-header {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.agent-thread-header h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.agent-thread-header button {
|
||||
font-size: 12px;
|
||||
}
|
||||
.agent-thread-status {
|
||||
padding: 5px 12px;
|
||||
}
|
||||
.agent-thread-history {
|
||||
padding: 12px;
|
||||
}
|
||||
.agent-thread-composer {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.agent-compose-actions {
|
||||
gap: 8px;
|
||||
}
|
||||
.agent-compose-actions > span {
|
||||
display: none;
|
||||
}
|
||||
.agent-settings-page {
|
||||
padding: 16px;
|
||||
}
|
||||
.agent-settings-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
.agent-model-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
.agent-model-controls label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.agent-model-controls small {
|
||||
flex-basis: 100%;
|
||||
color: #73806f;
|
||||
}
|
||||
.agent-routing-change {
|
||||
border-left: 2px solid #9cae8c;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
color: #65745d;
|
||||
}
|
||||
.agent-thread .agent-result :is(ol, dl) {
|
||||
margin: 4px 0;
|
||||
}
|
||||
.agent-result dd {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
Reference in New Issue
Block a user