Update assets/js/chat.js: scroll new bot responses to the start after rendering

[kierknoby]

What this is

assets/js/chat.js now positions new bot responses at the start of the response rather than scrolling to the bottom of the completed message.

For normal bot replies, the new message is scrolled into view after the browser has completed layout. For replies containing Mermaid diagrams, scrolling waits until the Mermaid nodes belonging to that response have either rendered successfully or failed cleanly.

User messages retain the existing bottom-scroll behaviour.

This is a single-file chat UI adjustment. There are no database or schema changes, and no changes to response generation or tool output.

Why

Long Frogman responses currently finish with the viewport positioned at the end of the reply. The user must then scroll back up to find the beginning.

This is most noticeable with output such as large CDR listings, firewall status and inbound-route lists, where the first thing shown is often the final lines rather than the heading and opening context.

The new behaviour places the beginning of the bot response at the top of the viewport instead of its final lines.

Behaviour

Bot replies:

• identify the newly appended message
• scroll that message into view with block: 'start'
• use smooth scrolling
• defer the scroll until browser layout has settled
• where the new response contains Mermaid nodes, wait until those nodes have either rendered or failed

User messages retain the existing bottom-scroll behaviour.

Only Mermaid nodes belonging to the newly appended bot response affect the wait counter. The existing Mermaid scan across the message list is unchanged.

Mermaid handling

Mermaid changes the height of a response asynchronously after the message has already been inserted into the DOM.

The implementation tracks Mermaid nodes belonging to the newly appended bot response and delays the final scroll until each tracked node has rendered successfully, rejected or thrown synchronously.

The final scroll runs after two requestAnimationFrame() callbacks, with setTimeout(fn, 0) as a fallback.

User interaction

A pending bot-response scroll is cancelled when the message container captures a wheel, touch, mouse or keyboard interaction before the deferred scroll executes.

The listeners are removed when cancellation occurs or after the pending scroll completes.

Compatibility

No intentional behaviour changes are made outside chat scroll handling in assets/js/chat.js.

node --check assets/js/chat.js passes.

Test plan

Tested on an existing Frogman installation by switching between current upstream main and this branch, hard-refreshing the browser after each installation, and repeating the same chat commands.

Install this branch

# Remove any previous temporary checkout of the test branch
rm -rf /usr/src/frogman-chat-scroll-test

# Clone a fresh copy of this branch
git clone --branch chat-scroll-to-start --single-branch \
https://github.com/kierknoby/frogman_int-dev.git \
/usr/src/frogman-chat-scroll-test

# Copy the branch over the installed Frogman module
rsync -a --delete --exclude='.git' \
/usr/src/frogman-chat-scroll-test/ \
/var/www/html/admin/modules/frogman/

fwconsole chown
fwconsole reload

Revert to upstream main

# Remove any previous temporary checkout of upstream main
rm -rf /usr/src/frogman-main-test

# Clone a fresh copy of current upstream main
git clone --branch main --single-branch \
https://github.com/mwtcmi/frogman.git \
/usr/src/frogman-main-test

# Copy upstream main over the installed Frogman module
rsync -a --delete --exclude='.git' \
/usr/src/frogman-main-test/ \
/var/www/html/admin/modules/frogman/

fwconsole chown
fwconsole reload

The browser was force-refreshed after each switch.

Commands tested

show cdr 100 last 90 days
show firewall
list inbound routes

Confirmed against upstream main that long bot responses finish at the bottom of the output.

Confirmed on this branch that:

• long bot responses settle at the beginning of the new response
• headings and opening context are visible immediately
• shorter bot responses remain readable
• user messages retain the existing bottom-scroll behaviour
• manual interaction cancels a pending automatic scroll when captured before it runs
• current audio formatting remains unaffected

The branch was then reverted to upstream main and reapplied to confirm that the behaviour follows this change rather than browser state or cached output.

What's deliberately not in this PR

• no changes to response generation or response length
• no automatic expansion or collapse of messages
• no persistent scroll-position state
• no README or release-version change

Files changed

• assets/js/chat.js