Add morphing orange dot processing indicator

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
andrepimenta
2025-12-02 00:07:08 +00:00
parent da46d5e3d9
commit abf81a1176
2 changed files with 83 additions and 1 deletions

View File

@@ -125,6 +125,7 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
}
messagesDiv.appendChild(messageDiv);
moveProcessingIndicatorToLast();
scrollToBottomIfNeeded(messagesDiv, shouldScroll);
}
@@ -247,6 +248,7 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
}
messagesDiv.appendChild(messageDiv);
moveProcessingIndicatorToLast();
scrollToBottomIfNeeded(messagesDiv, shouldScroll);
}
@@ -394,6 +396,7 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
}
messagesDiv.appendChild(messageDiv);
moveProcessingIndicatorToLast();
scrollToBottomIfNeeded(messagesDiv, shouldScroll);
}
@@ -952,6 +955,31 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
requestStartTime = null;
}
function showProcessingIndicator() {
// Remove any existing indicator first
hideProcessingIndicator();
// Create the indicator and append after all messages
const indicator = document.createElement('div');
indicator.className = 'processing-indicator';
indicator.innerHTML = '<div class="morph-dot"></div>';
messagesDiv.appendChild(indicator);
}
function hideProcessingIndicator() {
const indicator = document.querySelector('.processing-indicator');
if (indicator) {
indicator.remove();
}
}
function moveProcessingIndicatorToLast() {
// Only move if we're processing
if (isProcessing) {
showProcessingIndicator();
}
}
// Auto-resize textarea
function adjustTextareaHeight() {
// Reset height to calculate new height
@@ -2008,10 +2036,12 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
startRequestTimer(message.data.requestStartTime);
showStopButton();
disableButtons();
showProcessingIndicator();
} else {
stopRequestTimer();
hideStopButton();
enableButtons();
hideProcessingIndicator();
}
updateStatusWithTotals();
break;