shumengya
767a776a3e
- Merge thinking and assistant text into one assistant bubble with ordered blocks - Restyle tool execution blocks to match CLI layout and status - Remove startup splash screen and ship woff2-only fonts in public - Add default avatars when agent or user image is unset Co-authored-by: Cursor <cursoragent@cursor.com>
420 lines
6.7 KiB
CSS
420 lines
6.7 KiB
CSS
.chat {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 12px 16px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.chat::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.chat::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.chat::-webkit-scrollbar-thumb {
|
|
background: #ddd;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.chat::-webkit-scrollbar-thumb:hover {
|
|
background: #ccc;
|
|
}
|
|
|
|
.empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
color: #bbb;
|
|
text-align: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.emptyIcon {
|
|
color: #ddd;
|
|
}
|
|
|
|
.empty p {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.emptyHint {
|
|
font-size: 11px;
|
|
color: #ccc;
|
|
}
|
|
|
|
.msg {
|
|
padding: 10px 12px;
|
|
line-height: 1.4;
|
|
font-size: 16px;
|
|
word-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.user {
|
|
max-width: min(700px, 85%);
|
|
background: linear-gradient(180deg, #f0f7ff 0%, #eaf2ff 100%);
|
|
border: 1px solid #dbeafe;
|
|
border-radius: 14px 14px 4px 14px;
|
|
margin: 0;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.userRow {
|
|
align-self: flex-end;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
width: 100%;
|
|
max-width: min(700px, 85%);
|
|
margin: 0 0 2px;
|
|
}
|
|
|
|
.userAvatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
flex-shrink: 0;
|
|
margin-top: 8px;
|
|
object-fit: cover;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.userImages {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.userImages:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.userImage {
|
|
max-width: min(280px, 100%);
|
|
max-height: 240px;
|
|
border-radius: 10px;
|
|
object-fit: contain;
|
|
border: 1px solid #dbeafe;
|
|
background: #fff;
|
|
}
|
|
|
|
.assistantRow {
|
|
align-self: flex-start;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin: 0 0 2px;
|
|
}
|
|
|
|
.assistantAvatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
flex-shrink: 0;
|
|
margin-top: 8px;
|
|
object-fit: cover;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.assistantAvatarSlot {
|
|
width: 32px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.assistantAvatarSpacer {
|
|
width: 32px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.assistant {
|
|
flex: 1;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
padding: 10px 12px;
|
|
background: #fff;
|
|
border: 1px solid #e8ecf0;
|
|
border-radius: 14px 14px 14px 4px;
|
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
color: #1a1a1a;
|
|
line-height: 1.46;
|
|
white-space: normal;
|
|
}
|
|
|
|
.assistantToolbar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 4px;
|
|
margin: -2px -2px 6px 0;
|
|
min-height: 22px;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.assistant:hover .assistantToolbar,
|
|
.assistant:focus-within .assistantToolbar {
|
|
opacity: 1;
|
|
}
|
|
|
|
.msgActionBtn {
|
|
height: 22px;
|
|
padding: 0 7px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 6px;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
color: #6b7280;
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
|
}
|
|
|
|
.msgActionBtn:hover {
|
|
background: #f3f4f6;
|
|
color: #374151;
|
|
border-color: #d1d5db;
|
|
}
|
|
|
|
.msgActionBtnCopied {
|
|
color: #15803d;
|
|
border-color: #bbf7d0;
|
|
background: #f0fdf4;
|
|
}
|
|
|
|
.assistantBody {
|
|
min-width: 0;
|
|
}
|
|
|
|
.system {
|
|
align-self: center;
|
|
color: #aaa;
|
|
font-size: 11px;
|
|
text-align: center;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.toolCall {
|
|
flex: 1;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.thinking {
|
|
flex: 1;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
font-size: 16px;
|
|
line-height: 1.46;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: #faf8fc;
|
|
border: 1px solid #ece6f5;
|
|
border-radius: 14px 14px 14px 4px;
|
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
}
|
|
|
|
.bash {
|
|
flex: 1;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
font-size: 16px;
|
|
line-height: 1.46;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
border: 1px solid #e8ecf0;
|
|
border-radius: 14px 14px 14px 4px;
|
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
}
|
|
|
|
.streaming::after {
|
|
content: "▊";
|
|
animation: blink 0.8s step-end infinite;
|
|
color: #2563eb;
|
|
margin-left: 1px;
|
|
}
|
|
|
|
.assistantRow + .assistantRow {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.assistant :global(h1),
|
|
.assistant :global(h2),
|
|
.assistant :global(h3),
|
|
.assistant :global(h4),
|
|
.assistant :global(h5),
|
|
.assistant :global(h6) {
|
|
margin: 0.78em 0 0.3em;
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.assistant :global(h1) { font-size: 1.18em; }
|
|
.assistant :global(h2) { font-size: 1.1em; }
|
|
.assistant :global(h3) { font-size: 1.03em; }
|
|
.assistant :global(h4) { font-size: 1em; }
|
|
|
|
.assistant > :global(:first-child) { margin-top: 0; }
|
|
.assistant > :global(:last-child) { margin-bottom: 0; }
|
|
|
|
.assistant :global(p) {
|
|
margin: 0 0 0.46em;
|
|
}
|
|
|
|
.assistant :global(p + p) {
|
|
margin-top: 0.3em;
|
|
}
|
|
|
|
.assistant :global(strong) { font-weight: 600; }
|
|
.assistant :global(em) { font-style: italic; }
|
|
|
|
.assistant :global(a) {
|
|
color: #2563eb;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.assistant :global(a:hover) { text-decoration: underline; }
|
|
|
|
.assistant :global(ul),
|
|
.assistant :global(ol) {
|
|
margin: 0.32em 0 0.48em;
|
|
padding-left: 1.18em;
|
|
}
|
|
|
|
.assistant :global(li) {
|
|
margin: 0.08em 0;
|
|
padding-left: 0.04em;
|
|
}
|
|
|
|
.assistant :global(li > p) {
|
|
margin: 0;
|
|
}
|
|
|
|
.assistant :global(blockquote) {
|
|
margin: 0.36em 0;
|
|
padding: 3px 9px;
|
|
border-left: 2px solid #e5e5e5;
|
|
color: #666;
|
|
}
|
|
|
|
.assistant :global(hr) {
|
|
border: none;
|
|
border-top: 1px solid #eee;
|
|
margin: 0.58em 0;
|
|
}
|
|
|
|
.assistant :global(table) {
|
|
border-collapse: collapse;
|
|
margin: 0.42em 0;
|
|
font-size: 13px;
|
|
width: 100%;
|
|
}
|
|
|
|
.assistant :global(th),
|
|
.assistant :global(td) {
|
|
border: 1px solid #e5e5e5;
|
|
padding: 4px 7px;
|
|
text-align: left;
|
|
}
|
|
|
|
.assistant :global(th) {
|
|
background: #fafafa;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.assistant :global(code:not(.hljs)) {
|
|
font-size: 0.9em;
|
|
background: #f5f5f5;
|
|
padding: 1px 5px;
|
|
border-radius: 4px;
|
|
color: #d63384;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.assistant :global(pre.assistant-pre) {
|
|
margin: 0.5em 0 0.6em;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 1px solid #e8edf2;
|
|
border-radius: 8px;
|
|
overflow-x: auto;
|
|
line-height: 1.48;
|
|
}
|
|
|
|
.assistant :global(pre.assistant-pre code.hljs) {
|
|
display: block;
|
|
padding: 10px 12px;
|
|
background: none;
|
|
border: none;
|
|
color: inherit;
|
|
font-size: 13px;
|
|
line-height: 1.48;
|
|
word-break: normal;
|
|
tab-size: 2;
|
|
}
|
|
|
|
.assistant :global(img) {
|
|
max-width: 100%;
|
|
border-radius: 8px;
|
|
margin: 0.42em 0;
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
.assistantRow {
|
|
max-width: 66.6667%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.chat {
|
|
padding: 10px 12px 8px;
|
|
}
|
|
|
|
.msg {
|
|
padding: 11px 12px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.userRow {
|
|
max-width: 88%;
|
|
}
|
|
|
|
.user {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.assistantAvatarSpacer,
|
|
.assistantAvatarSlot,
|
|
.assistantAvatar,
|
|
.userAvatar {
|
|
display: none;
|
|
}
|
|
|
|
.assistantToolbar {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.userRow {
|
|
max-width: 92%;
|
|
}
|
|
}
|