This commit is contained in:
oobabooga 2025-04-26 19:22:36 -07:00
parent fa861de05b
commit 363b632a0d

View file

@ -1311,74 +1311,74 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
/* Thinking blocks styling */
.thinking-block {
margin-bottom: 12px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: var(--light-theme-gray);
overflow: hidden;
margin-bottom: 12px;
border-radius: 8px;
border: 1px solid rgb(0 0 0 / 10%);
background-color: var(--light-theme-gray);
overflow: hidden;
}
.dark .thinking-block {
background-color: var(--darker-gray);
background-color: var(--darker-gray);
}
.thinking-header {
display: flex;
align-items: center;
padding: 10px 16px;
cursor: pointer;
user-select: none;
font-size: 14px;
color: rgba(0, 0, 0, 0.7);
transition: background-color 0.2s;
display: flex;
align-items: center;
padding: 10px 16px;
cursor: pointer;
user-select: none;
font-size: 14px;
color: rgb(0 0 0 / 70%);
transition: background-color 0.2s;
}
.thinking-header:hover {
background-color: rgba(0, 0, 0, 0.03);
background-color: rgb(0 0 0 / 3%);
}
.thinking-header::-webkit-details-marker {
display: none;
display: none;
}
.thinking-icon {
margin-right: 8px;
color: rgba(0, 0, 0, 0.5);
margin-right: 8px;
color: rgb(0 0 0 / 50%);
}
.thinking-title {
font-weight: 500;
font-weight: 500;
}
.thinking-content {
padding: 12px 16px;
border-top: 1px solid rgba(0, 0, 0, 0.07);
color: rgba(0, 0, 0, 0.7);
font-size: 14px;
line-height: 1.5;
overflow-wrap: break-word;
max-height: 300px;
overflow-y: scroll;
contain: layout;
padding: 12px 16px;
border-top: 1px solid rgb(0 0 0 / 7%);
color: rgb(0 0 0 / 70%);
font-size: 14px;
line-height: 1.5;
overflow-wrap: break-word;
max-height: 300px;
overflow-y: scroll;
contain: layout;
}
/* Animation for opening thinking blocks */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
from { opacity: 0; }
to { opacity: 1; }
}
.thinking-block[open] .thinking-content {
animation: fadeIn 0.3s ease-out;
animation: fadeIn 0.3s ease-out;
}
/* Additional style for in-progress thinking */
.thinking-block[data-streaming="true"] .thinking-title {
animation: pulse 1.5s infinite;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}