oobabooga/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2026-04-04 14:17:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

UI: Add a collapsible thinking block to messages with <think> steps (#6902)

Browse source
This commit is contained in:
oobabooga 2025-04-25 18:02:02 -03:00 • committed by GitHub
parent 0dd71e78c9
commit d35818f4e1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 238 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

82
css/main.css
View file

@ -625,19 +625,19 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
width: 100%;
overflow-y: visible;
}
.message {
break-inside: avoid;
}
.gradio-container {
overflow: visible;
}
.tab-nav {
display: none !important;
}
#chat-tab > :first-child {
max-width: unset;
}
@ -1308,3 +1308,77 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
padding-left: 1rem;
padding-right: 1rem;
}
/* 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;
}
.dark .thinking-block {
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;
}
.thinking-header:hover {
background-color: rgba(0, 0, 0, 0.03);
}
.thinking-header::-webkit-details-marker {
display: none;
}
.thinking-icon {
margin-right: 8px;
color: rgba(0, 0, 0, 0.5);
}
.thinking-title {
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;
}
/* Animation for opening thinking blocks */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.thinking-block[open] .thinking-content {
animation: fadeIn 0.3s ease-out;
}
/* Additional style for in-progress thinking */
.thinking-block[data-streaming="true"] .thinking-title {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}