feat(quick-pane): add chat-style exchange
This commit is contained in:
+395
-110
@@ -20,58 +20,82 @@ body {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 9px;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
color: #e6e3df;
|
||||
font: 14px/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
|
||||
font:
|
||||
14px / 1.4 Inter,
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
sans-serif;
|
||||
background: rgba(34, 34, 34, 0.98);
|
||||
border: 1px solid #4b4b4b;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.quick-pane header {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
color: #f0a347;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.quick-pane-header-controls,
|
||||
.quick-pane-history {
|
||||
.quick-pane-toolbar,
|
||||
.quick-pane-primary-controls,
|
||||
.quick-pane-header-actions,
|
||||
.quick-pane-field {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.quick-pane-header-controls {
|
||||
.quick-pane-toolbar {
|
||||
flex: 0 0 auto;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.quick-pane-primary-controls,
|
||||
.quick-pane-header-actions {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.quick-pane-primary-controls {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quick-pane-header-actions {
|
||||
flex: 0 1 auto;
|
||||
justify-content: end;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quick-pane-field {
|
||||
gap: 4px;
|
||||
color: #bbb7b0;
|
||||
font-size: 10px;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.quick-pane-model {
|
||||
flex: 1 1 230px;
|
||||
max-width: 310px;
|
||||
}
|
||||
|
||||
.quick-pane-thinking {
|
||||
flex: 0 1 122px;
|
||||
}
|
||||
|
||||
.quick-pane-history {
|
||||
color: #bbb7b0;
|
||||
font-size: 9px;
|
||||
flex: 0 1 205px;
|
||||
}
|
||||
|
||||
.quick-pane-history select {
|
||||
max-width: 240px;
|
||||
padding-block: 3px;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
.quick-pane .compact-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quick-pane button,
|
||||
.quick-pane select {
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
@@ -79,10 +103,19 @@ body {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.quick-pane select {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
color: #e6e3df;
|
||||
background: #353535;
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.quick-pane button {
|
||||
flex: 0 0 auto;
|
||||
background: #f0a347;
|
||||
color: #25180b;
|
||||
background: #f0a347;
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -91,113 +124,365 @@ body {
|
||||
background: #ffc170;
|
||||
}
|
||||
|
||||
.quick-pane button:disabled {
|
||||
opacity: 0.6;
|
||||
.quick-pane button:disabled,
|
||||
.quick-pane select:disabled {
|
||||
opacity: 0.58;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.quick-pane button.quiet {
|
||||
color: #e6e3df;
|
||||
background: #45413c;
|
||||
.quick-pane button:focus-visible,
|
||||
.quick-pane select:focus-visible,
|
||||
.quick-pane-request:focus {
|
||||
outline: 3px solid #f0a347;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.quick-pane select {
|
||||
color: #e6e3df;
|
||||
background: #353535;
|
||||
.quick-pane-close {
|
||||
color: #e6e3df !important;
|
||||
background: #45413c !important;
|
||||
font-size: 11px !important;
|
||||
}
|
||||
|
||||
.quick-pane-exchange {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
gap: 9px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 2px 3px 8px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.quick-pane-user-row {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.quick-pane-user-message,
|
||||
.quick-pane-assistant-message {
|
||||
box-sizing: border-box;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.quick-pane-user-message {
|
||||
width: fit-content;
|
||||
max-width: 78%;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid #66513a;
|
||||
border-radius: 12px 12px 3px 12px;
|
||||
background: #3a3026;
|
||||
}
|
||||
|
||||
.quick-pane-user-message p,
|
||||
.quick-pane-notice p,
|
||||
.quick-pane-system-notice {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.message-author {
|
||||
display: block;
|
||||
margin-bottom: 3px;
|
||||
color: #bdb7ae;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.quick-pane-assistant-message {
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #484848;
|
||||
border-radius: 7px;
|
||||
background: #292929;
|
||||
}
|
||||
|
||||
.quick-pane-assistant-message > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.quick-pane-assistant-message p,
|
||||
.quick-pane-assistant-message ul,
|
||||
.quick-pane-assistant-message ol,
|
||||
.quick-pane-assistant-message blockquote,
|
||||
.quick-pane-assistant-message pre,
|
||||
.quick-pane-assistant-message table {
|
||||
margin-block: 0 9px;
|
||||
}
|
||||
|
||||
.quick-pane-assistant-message ul,
|
||||
.quick-pane-assistant-message ol {
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.quick-pane-assistant-message a {
|
||||
color: #ffc170;
|
||||
}
|
||||
|
||||
.quick-pane-assistant-message code {
|
||||
border-radius: 4px;
|
||||
padding: 1px 4px;
|
||||
color: #f3ded0;
|
||||
background: #1d1d1d;
|
||||
font:
|
||||
0.9em / 1.45 ui-monospace,
|
||||
SFMono-Regular,
|
||||
Consolas,
|
||||
monospace;
|
||||
}
|
||||
|
||||
.quick-pane-assistant-message pre {
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
border: 1px solid #414141;
|
||||
border-radius: 6px;
|
||||
padding: 9px;
|
||||
background: #1d1d1d;
|
||||
}
|
||||
|
||||
.quick-pane-assistant-message pre code {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.quick-pane-assistant-message blockquote {
|
||||
border-left: 3px solid #80613e;
|
||||
padding-left: 9px;
|
||||
color: #c6c0b8;
|
||||
}
|
||||
|
||||
.quick-pane-assistant-message table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.quick-pane-assistant-message th,
|
||||
.quick-pane-assistant-message td {
|
||||
border: 1px solid #4b4b4b;
|
||||
padding: 4px 7px;
|
||||
}
|
||||
|
||||
.quick-pane-activity {
|
||||
display: flex;
|
||||
min-height: 22px;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-inline: 3px;
|
||||
color: #c5beb5;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.typing-dots {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.typing-dots i {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #f0a347;
|
||||
animation: quick-pane-dot 1.15s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.typing-dots i:nth-child(2) {
|
||||
animation-delay: 0.14s;
|
||||
}
|
||||
|
||||
.typing-dots i:nth-child(3) {
|
||||
animation-delay: 0.28s;
|
||||
}
|
||||
|
||||
@keyframes quick-pane-dot {
|
||||
0%,
|
||||
60%,
|
||||
100% {
|
||||
opacity: 0.35;
|
||||
transform: translateY(0);
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.typing-dots i {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-pane-notice {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
border: 1px solid #65533e;
|
||||
border-radius: 7px;
|
||||
padding: 8px 10px;
|
||||
color: #f1e4d1;
|
||||
background: #3b3228;
|
||||
}
|
||||
|
||||
.quick-pane-notice strong {
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.quick-pane-notice.error {
|
||||
border-color: #70424a;
|
||||
color: #ffd7db;
|
||||
background: #3d252b;
|
||||
}
|
||||
|
||||
.quick-pane-notice button {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.quick-pane-system-notice {
|
||||
flex: 0 0 auto;
|
||||
padding: 6px 8px;
|
||||
color: #c5beb5;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.quick-pane-exchange .extension-backdrop,
|
||||
.quick-pane-exchange .extension {
|
||||
position: static;
|
||||
display: block;
|
||||
padding: 7px 9px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.quick-pane-exchange .extension-backdrop {
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid #65533e;
|
||||
border-radius: 7px;
|
||||
background: #302b25;
|
||||
}
|
||||
|
||||
.quick-pane-exchange .extension h2,
|
||||
.quick-pane-exchange .extension p {
|
||||
margin: 0 0 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.quick-pane-composer {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: 120px;
|
||||
min-height: 110px;
|
||||
max-height: 130px;
|
||||
flex: 0 0 120px;
|
||||
}
|
||||
|
||||
.quick-pane-request {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 180px;
|
||||
flex: 1 1 auto;
|
||||
padding: 12px;
|
||||
height: 100%;
|
||||
padding: 11px 50px 29px 11px;
|
||||
resize: none;
|
||||
border: 1px solid #484848;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #55514c;
|
||||
border-radius: 8px;
|
||||
color: #e6e3df;
|
||||
background: #292929;
|
||||
font: inherit;
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.quick-pane-request:focus,
|
||||
.quick-pane button:focus-visible,
|
||||
.quick-pane select:focus-visible {
|
||||
outline: 3px solid #f0a347;
|
||||
outline-offset: 2px;
|
||||
.quick-pane-request[readonly] {
|
||||
color: #d1cbc4;
|
||||
background: #272727;
|
||||
}
|
||||
|
||||
.quick-pane-output {
|
||||
max-height: 108px;
|
||||
min-height: 0;
|
||||
flex: 0 1 auto;
|
||||
overflow: auto;
|
||||
border: 1px solid #484848;
|
||||
border-radius: 6px;
|
||||
background: #292929;
|
||||
.quick-pane-send {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 9px;
|
||||
width: 34px;
|
||||
height: 30px;
|
||||
padding: 0 !important;
|
||||
border-radius: 7px !important;
|
||||
font-size: 20px !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.quick-pane-output:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quick-pane-output > pre,
|
||||
.quick-pane-output > p {
|
||||
margin: 0;
|
||||
padding: 6px 8px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.quick-pane-output > :not(:last-child) {
|
||||
border-bottom: 1px solid #484848;
|
||||
}
|
||||
|
||||
.quick-pane-output [role="alert"] {
|
||||
color: #ffd7db;
|
||||
background: #3d252b;
|
||||
}
|
||||
|
||||
.quick-pane-controls {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: end;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.quick-pane-controls label {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 2px;
|
||||
color: #bbb7b0;
|
||||
.quick-pane-composer-hint {
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
bottom: 8px;
|
||||
color: #96918b;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.quick-pane-controls label:first-child {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
.quick-pane {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.quick-pane-controls label:nth-child(2) {
|
||||
flex: 0 1 100px;
|
||||
}
|
||||
.quick-pane .full-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quick-pane-controls select {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
.quick-pane .compact-label {
|
||||
display: inline;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.quick-pane-output .extension-backdrop,
|
||||
.quick-pane-output .extension {
|
||||
position: static;
|
||||
display: block;
|
||||
padding: 6px 8px;
|
||||
background: transparent;
|
||||
}
|
||||
.quick-pane-toolbar,
|
||||
.quick-pane-primary-controls,
|
||||
.quick-pane-header-actions {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.quick-pane-output .extension h2,
|
||||
.quick-pane-output .extension p {
|
||||
margin: 0 0 4px;
|
||||
font-size: 12px;
|
||||
.quick-pane-model {
|
||||
flex-basis: 130px;
|
||||
}
|
||||
|
||||
.quick-pane-thinking {
|
||||
flex-basis: 74px;
|
||||
}
|
||||
|
||||
.quick-pane-history {
|
||||
max-width: 78px;
|
||||
}
|
||||
|
||||
.quick-pane-field {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.quick-pane select {
|
||||
padding-inline: 5px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.quick-pane-close {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
padding: 0 !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.quick-pane-user-message {
|
||||
max-width: 88%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user