GeneralBots/botui
2
0
Fork 0
Code Activity Actions

fix: improve GPT-oSS thinking indicator with animated dots
All checks were successful
BotUI CI/CD / build (push) Successful in 39s
Details

Browse source
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2026-04-14 19:43:09 -03:00
parent 0d3801c368
commit 39ede2e8dd
2 changed files with 38 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
ui/suite/chat/chat.css
View file

@ -1504,17 +1504,37 @@ form.input-container {
/* Thinking indicator - shown while LLM is reasoning */
.thinking-text {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text-secondary, #888);
font-style: italic;
animation: thinkingPulse 1.5s ease-in-out infinite;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text-secondary, #888);
font-style: italic;
}
@keyframes thinkingPulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
.thinking-text::after {
content: "";
display: inline-flex;
gap: 4px;
width: 24px;
height: 8px;
background-image: radial-gradient(circle, var(--accent, #3b82f6) 2px, transparent 2px),
radial-gradient(circle, var(--accent, #3b82f6) 2px, transparent 2px),
radial-gradient(circle, var(--accent, #3b82f6) 2px, transparent 2px);
background-size: 8px 8px;
background-position: 0 50%, 50% 50%, 100% 50%;
background-repeat: no-repeat;
animation: thinkingDots 1.4s infinite ease-in-out both;
}
@keyframes thinkingDots {
0%, 80%, 100% {
opacity: 0.3;
transform: scale(0.8);
}
40% {
opacity: 1;
transform: scale(1);
}
}
/* Hide default quick action suggestions - only show bot suggestions */

15
ui/suite/chat/chat.html
View file

@ -826,18 +826,21 @@ function processMessage(data) {
// Extract ALL thinking content and thinking_clear signals
var thinkingContent = [];
var hasThinkingClear = false;
// Match all thinking objects including those with content
var thinkingRegex = /\{"content":"[^"]*","type":"thinking"\}/g;
// Match all thinking objects - support both formats:
// {"content":"...","type":"thinking"} or {"type":"thinking","content":"..."}
// Also handle concatenated JSON objects without separators
var thinkingRegex = /\{"content":"([^"]*)"\s*,\s*"type":"thinking"\}|\{"type":"thinking"\s*,\s*"content":"([^"]*)"\}/g;
var clearRegex = /\{"type":"thinking_clear"\}/g;
// Find all thinking signals
var match;
while ((match = thinkingRegex.exec(content)) !== null) {
try {
var obj = JSON.parse(match[0]);
if (obj.content) {
thinkingContent.push(obj.content);
// match[1] is content from first pattern, match[2] from second pattern
var thinkingText = match[1] || match[2];
if (thinkingText) {
thinkingContent.push(thinkingText);
}
// Remove from content
content = content.replace(match[0], "");