Make messages collapsible (useful for long messages) #146

New issue

Closed

opened 2025-12-25 02:49:46 +00:00 by rwachters · 0 comments

rwachters commented

2025-12-25 02:49:46 +00:00

(Migrated from github.com)

Feature Description

Add a collapse/expand toggle to message items to hide/show long message content. Long messages (>500 characters) start collapsed when loading a session, but new messages during the session always start expanded. Show truncated preview when collapsed.

Implementation Plan (Updated)

Key Change: Using rememberSaveable for state management instead of ViewModel to simplify implementation.

Steps

✅ Add collapsedMessageIds state in MessageList.kt using rememberSaveable { mutableStateOf<Set<Long>>(emptySet()) }
✅ Add LaunchedEffect(chatSession.id) in MessageList.kt to initialize collapsedMessageIds with message IDs where content.length > 500 when session changes
✅ Create toggle lambda in MessageList.kt: onToggleCollapse = { id -> collapsedMessageIds = if (id in collapsedMessageIds) collapsedMessageIds - id else collapsedMessageIds + id }
✅ Pass isCollapsed = message.id in collapsedMessageIds, isCollapsible, and onToggleCollapse to MessageItem.kt
✅ Add collapse IconButton with ExpandLess/ExpandMore icons in MessageItem.kt header row next to display name, only visible when message.content.length > 500
✅ Modify MessageContent.kt to accept isCollapsed and onToggleCollapse parameters, display truncated text (first 200 characters + "...") when collapsed, wrap in AnimatedVisibility with expandVertically/shrinkVertically

Requirements

✅ Long messages (>500 characters) start collapsed when session loads
✅ New messages during active session always start expanded
✅ Show truncated preview (first 200 characters + "...") when collapsed
✅ Smooth animations using AnimatedVisibility with expandVertically/shrinkVertically
✅ State preserved during configuration changes via rememberSaveable but resets when navigating to different session
✅ No ViewModel changes needed - all state managed locally

Files Modified

app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/MessageList.kt (added state, initialization, and toggle logic)
app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/MessageItem.kt (added collapse button and pass props)
app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/MessageContent.kt (implemented collapsed view with animation)

Implementation Details

Collapse threshold: 500 characters
Preview length: 200 characters + "..."
Icons: ExpandLess when expanded (click to collapse), ExpandMore when collapsed (click to expand)
Tooltip: "Collapse message" / "Expand message" with 500ms delay
Clickable preview: Truncated text is clickable to expand

## Feature Description Add a collapse/expand toggle to message items to hide/show long message content. Long messages (>500 characters) start collapsed when loading a session, but new messages during the session always start expanded. Show truncated preview when collapsed. ## Implementation Plan (Updated) **Key Change**: Using `rememberSaveable` for state management instead of ViewModel to simplify implementation. ### Steps 1. ✅ Add `collapsedMessageIds` state in `MessageList.kt` using `rememberSaveable { mutableStateOf<Set<Long>>(emptySet()) }` 2. ✅ Add `LaunchedEffect(chatSession.id)` in `MessageList.kt` to initialize `collapsedMessageIds` with message IDs where `content.length > 500` when session changes 3. ✅ Create toggle lambda in `MessageList.kt`: `onToggleCollapse = { id -> collapsedMessageIds = if (id in collapsedMessageIds) collapsedMessageIds - id else collapsedMessageIds + id }` 4. ✅ Pass `isCollapsed = message.id in collapsedMessageIds`, `isCollapsible`, and `onToggleCollapse` to `MessageItem.kt` 5. ✅ Add collapse `IconButton` with `ExpandLess`/`ExpandMore` icons in `MessageItem.kt` header row next to display name, only visible when `message.content.length > 500` 6. ✅ Modify `MessageContent.kt` to accept `isCollapsed` and `onToggleCollapse` parameters, display truncated text (first 200 characters + "...") when collapsed, wrap in `AnimatedVisibility` with `expandVertically`/`shrinkVertically` ## Requirements - ✅ Long messages (>500 characters) start collapsed when session loads - ✅ New messages during active session always start expanded - ✅ Show truncated preview (first 200 characters + "...") when collapsed - ✅ Smooth animations using `AnimatedVisibility` with `expandVertically`/`shrinkVertically` - ✅ State preserved during configuration changes via `rememberSaveable` but resets when navigating to different session - ✅ No ViewModel changes needed - all state managed locally ## Files Modified - `app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/MessageList.kt` (added state, initialization, and toggle logic) - `app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/MessageItem.kt` (added collapse button and pass props) - `app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/MessageContent.kt` (implemented collapsed view with animation) ## Implementation Details - **Collapse threshold**: 500 characters - **Preview length**: 200 characters + "..." - **Icons**: `ExpandLess` when expanded (click to collapse), `ExpandMore` when collapsed (click to expand) - **Tooltip**: "Collapse message" / "Expand message" with 500ms delay - **Clickable preview**: Truncated text is clickable to expand