Torvian.eu/chatbot

Watch

Fork

You've already forked chatbot

Code Issues Pull requests Projects Releases 12 Packages Wiki Activity Actions

Implement "Scroll to Bottom" Feature for Messages List #89

New issue

Closed

opened 2025-09-16 21:26:33 +00:00 by rwachters · 0 comments

rwachters commented

2025-09-16 21:26:33 +00:00

(Migrated from github.com)

Scroll to Bottom Feature Implementation

Overview

Implement a "Scroll to Bottom" feature for the messages list in the chat interface that allows users to manually scroll to the bottom when they've scrolled up to view older messages.

Current State

The codebase already has sophisticated scrolling infrastructure:

MessageList.kt contains auto-scroll logic with LazyListState and followTail tracking
Smart auto-scrolling that only triggers when user is at bottom
Existing scroll position tracking with distanceFromBottom calculation

Required Implementation

1. ChatAreaActions Interface

File: app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/ChatAreaActions.kt

Add onScrollToBottom() method

2. MessageList Component

File: app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/MessageList.kt

Add floating action button (FAB) that appears when user scrolls up
Implement scroll-to-bottom functionality
Button visibility: only show when distanceFromBottom > 200
Use lazyListState.animateScrollToItem() for smooth scrolling

3. ChatArea Component

File: app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/ChatArea.kt

Pass scroll action from ChatAreaActions to MessageList

4. ChatViewModel

File: app/src/commonMain/kotlin/eu/torvian/chatbot/app/viewmodel/chat/ChatViewModel.kt

Add scrollToBottom() method

5. ChatScreen Integration

File: app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/ChatScreen.kt

Wire up scroll action in ChatAreaActions implementation

UI Design Specifications

Button Design

FloatingActionButton with down arrow icon (Icons.Default.KeyboardArrowDown)
Position: Bottom-right corner with padding
Size: Small FAB (40dp)
Colors: Material 3 surface colors
Animation: Fade in/out (200ms transition)

Button Behavior

Visibility: Show only when distanceFromBottom > 200
Action: Animate scroll to bottom of message list
Auto-hide: Disappears after reaching bottom

Accessibility

Content description: "Scroll to bottom"
Tooltip: "Scroll to bottom of messages"
Keyboard navigation support

Implementation Phases

Phase 1: Core Functionality

Add onScrollToBottom() to ChatAreaActions interface
Implement scroll-to-bottom logic in MessageList component
Wire up action in ChatScreen

Phase 2: UI Enhancement

Add FloatingActionButton with proper Material 3 styling
Implement visibility logic based on scroll position
Add smooth fade in/out animations

Phase 3: Polish

Add accessibility features (content descriptions, tooltips)
Test across all platforms (Desktop, Android, Web)
Ensure integration with existing auto-scroll behavior

Technical Considerations

Advantages

Existing LazyListState and scroll tracking infrastructure
Auto-scroll logic can be reused
Platform-specific scrollbar handling already implemented

Testing Requirements

Test with long message lists
Verify button visibility at correct scroll positions
Test smooth scrolling animation
Verify accessibility features
Cross-platform testing (Desktop, Android, Web)

Acceptance Criteria

FAB appears when user scrolls up >200px from bottom
FAB disappears when user is at bottom or after clicking it
Smooth animated scroll to bottom when FAB is clicked
No interference with existing auto-scroll behavior
Proper accessibility support
Consistent behavior across all platforms

Tech Stack Context

Kotlin 2.2.0
Compose 1.8.2 with Material 3
Existing MessageList infrastructure with LazyListState

# Scroll to Bottom Feature Implementation ## Overview Implement a "Scroll to Bottom" feature for the messages list in the chat interface that allows users to manually scroll to the bottom when they've scrolled up to view older messages. ## Current State The codebase already has sophisticated scrolling infrastructure: - `MessageList.kt` contains auto-scroll logic with `LazyListState` and `followTail` tracking - Smart auto-scrolling that only triggers when user is at bottom - Existing scroll position tracking with `distanceFromBottom` calculation ## Required Implementation ### 1. ChatAreaActions Interface **File:** `app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/ChatAreaActions.kt` - Add `onScrollToBottom()` method ### 2. MessageList Component **File:** `app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/MessageList.kt` - Add floating action button (FAB) that appears when user scrolls up - Implement scroll-to-bottom functionality - Button visibility: only show when `distanceFromBottom > 200` - Use `lazyListState.animateScrollToItem()` for smooth scrolling ### 3. ChatArea Component **File:** `app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/ChatArea.kt` - Pass scroll action from ChatAreaActions to MessageList ### 4. ChatViewModel **File:** `app/src/commonMain/kotlin/eu/torvian/chatbot/app/viewmodel/chat/ChatViewModel.kt` - Add `scrollToBottom()` method ### 5. ChatScreen Integration **File:** `app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/ChatScreen.kt` - Wire up scroll action in ChatAreaActions implementation ## UI Design Specifications ### Button Design - `FloatingActionButton` with down arrow icon (`Icons.Default.KeyboardArrowDown`) - Position: Bottom-right corner with padding - Size: Small FAB (40dp) - Colors: Material 3 surface colors - Animation: Fade in/out (200ms transition) ### Button Behavior - **Visibility:** Show only when `distanceFromBottom > 200` - **Action:** Animate scroll to bottom of message list - **Auto-hide:** Disappears after reaching bottom ### Accessibility - Content description: "Scroll to bottom" - Tooltip: "Scroll to bottom of messages" - Keyboard navigation support ## Implementation Phases ### Phase 1: Core Functionality - [ ] Add `onScrollToBottom()` to ChatAreaActions interface - [ ] Implement scroll-to-bottom logic in MessageList component - [ ] Wire up action in ChatScreen ### Phase 2: UI Enhancement - [ ] Add FloatingActionButton with proper Material 3 styling - [ ] Implement visibility logic based on scroll position - [ ] Add smooth fade in/out animations ### Phase 3: Polish - [ ] Add accessibility features (content descriptions, tooltips) - [ ] Test across all platforms (Desktop, Android, Web) - [ ] Ensure integration with existing auto-scroll behavior ## Technical Considerations ### Advantages - Existing `LazyListState` and scroll tracking infrastructure - Auto-scroll logic can be reused - Platform-specific scrollbar handling already implemented ### Testing Requirements - [ ] Test with long message lists - [ ] Verify button visibility at correct scroll positions - [ ] Test smooth scrolling animation - [ ] Verify accessibility features - [ ] Cross-platform testing (Desktop, Android, Web) ## Acceptance Criteria - [ ] FAB appears when user scrolls up >200px from bottom - [ ] FAB disappears when user is at bottom or after clicking it - [ ] Smooth animated scroll to bottom when FAB is clicked - [ ] No interference with existing auto-scroll behavior - [ ] Proper accessibility support - [ ] Consistent behavior across all platforms ## Tech Stack Context - Kotlin 2.2.0 - Compose 1.8.2 with Material 3 - Existing MessageList infrastructure with LazyListState

No Branch/Tag specified

master

test/credential-validator-fixture-umask

feat/credential-profile-agent-roles

fix/credential-secret-tree-removal

feat/terminal-session-credential-attach

feat/worker-terminal-session

feat/worker-command-uid-isolation

v0.11.0

v0.10.0

v0.9.0

v0.8.0

v0.7.0

v0.6.0

v0.5.1

v0.5.0

v0.4.0

v0.3.0

v0.2.0

v0.1.0

Labels

Clear labels

Something isn't working

cross-cutting-requirement

Improvements or additions to documentation

duplicate

This issue or pull request already exists

enhancement

New feature or request

Extra attention is needed

This doesn't seem right

Further information is requested

This will not be worked on

No labels

cross-cutting-requirement

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

Torvian.eu/chatbot#89

Reference in a new issue

Repository

Torvian.eu/chatbot

Title

Body

No description provided.

Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?

Rows
Columns