d8dfun/claude-code-chat
1
0
Fork 0
mirror of https://github.com/andrepimenta/claude-code-chat.git synced 2025-12-14 17:59:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Only scroll to bottom if the user is at bottom

Browse Source
This commit is contained in:
andrepimenta
2025-07-09 13:56:35 +01:00
parent 4f5a4cb7ef
commit 521f9a7d68
1 changed files with 37 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/ui.ts
View File

@@ -582,7 +582,30 @@ const html = `<!DOCTYPE html>
let planModeEnabled = false; let planModeEnabled = false;
let thinkingModeEnabled = false; let thinkingModeEnabled = false;
function shouldAutoScroll(messagesDiv) {
const threshold = 100; // pixels from bottom
const scrollTop = messagesDiv.scrollTop;
const scrollHeight = messagesDiv.scrollHeight;
const clientHeight = messagesDiv.clientHeight;
return (scrollTop + clientHeight >= scrollHeight - threshold);
}
function scrollToBottomIfNeeded(messagesDiv, shouldScroll = null) {
// If shouldScroll is not provided, check current scroll position
if (shouldScroll === null) {
shouldScroll = shouldAutoScroll(messagesDiv);
}
if (shouldScroll) {
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}
}
function addMessage(content, type = 'claude') { function addMessage(content, type = 'claude') {
const messagesDiv = document.getElementById('messages');
const shouldScroll = shouldAutoScroll(messagesDiv);
const messageDiv = document.createElement('div'); const messageDiv = document.createElement('div');
messageDiv.className = \`message \${type}\`; messageDiv.className = \`message \${type}\`;
@@ -654,11 +677,14 @@ const html = `<!DOCTYPE html>
} }
messagesDiv.appendChild(messageDiv); messagesDiv.appendChild(messageDiv);
messagesDiv.scrollTop = messagesDiv.scrollHeight; scrollToBottomIfNeeded(messagesDiv, shouldScroll);
} }
function addToolUseMessage(data) { function addToolUseMessage(data) {
const messagesDiv = document.getElementById('messages');
const shouldScroll = shouldAutoScroll(messagesDiv);
const messageDiv = document.createElement('div'); const messageDiv = document.createElement('div');
messageDiv.className = 'message tool'; messageDiv.className = 'message tool';
@@ -733,7 +759,7 @@ const html = `<!DOCTYPE html>
} }
messagesDiv.appendChild(messageDiv); messagesDiv.appendChild(messageDiv);
messagesDiv.scrollTop = messagesDiv.scrollHeight; scrollToBottomIfNeeded(messagesDiv, shouldScroll);
} }
function createExpandableInput(toolInput, rawInput) { function createExpandableInput(toolInput, rawInput) {
@@ -763,6 +789,9 @@ const html = `<!DOCTYPE html>
function addToolResultMessage(data) { function addToolResultMessage(data) {
const messagesDiv = document.getElementById('messages');
const shouldScroll = shouldAutoScroll(messagesDiv);
// For Read and Edit tools with hidden flag, just hide loading state and show completion message // For Read and Edit tools with hidden flag, just hide loading state and show completion message
if (data.hidden && (data.toolName === 'Read' || data.toolName === 'Edit' || data.toolName === 'TodoWrite' || data.toolName === 'MultiEdit') && !data.isError) { if (data.hidden && (data.toolName === 'Read' || data.toolName === 'Edit' || data.toolName === 'TodoWrite' || data.toolName === 'MultiEdit') && !data.isError) {
return return
@@ -852,7 +881,7 @@ const html = `<!DOCTYPE html>
} }
messagesDiv.appendChild(messageDiv); messagesDiv.appendChild(messageDiv);
messagesDiv.scrollTop = messagesDiv.scrollHeight; scrollToBottomIfNeeded(messagesDiv, shouldScroll);
} }
function formatToolInputUI(input) { function formatToolInputUI(input) {
@@ -2150,7 +2179,7 @@ const html = `<!DOCTYPE html>
\`; \`;
messagesDiv.appendChild(messageDiv); messagesDiv.appendChild(messageDiv);
messagesDiv.scrollTop = messagesDiv.scrollHeight; scrollToBottomIfNeeded(messagesDiv, shouldScroll);
} }
function respondToPermission(id, approved, alwaysAllow = false) { function respondToPermission(id, approved, alwaysAllow = false) {
@@ -2205,6 +2234,9 @@ const html = `<!DOCTYPE html>
} }
function showRestoreContainer(data) { function showRestoreContainer(data) {
const messagesDiv = document.getElementById('messages');
const shouldScroll = shouldAutoScroll(messagesDiv);
const restoreContainer = document.createElement('div'); const restoreContainer = document.createElement('div');
restoreContainer.className = 'restore-container'; restoreContainer.className = 'restore-container';
restoreContainer.id = \`restore-\${data.sha}\`; restoreContainer.id = \`restore-\${data.sha}\`;
@@ -2220,7 +2252,7 @@ const html = `<!DOCTYPE html>
\`; \`;
messagesDiv.appendChild(restoreContainer); messagesDiv.appendChild(restoreContainer);
messagesDiv.scrollTop = messagesDiv.scrollHeight; scrollToBottomIfNeeded(messagesDiv, shouldScroll);
} }
function hideRestoreContainer(commitSha) { function hideRestoreContainer(commitSha) {