UI - message bubbles #10

[deciduus]

Implemented robust expand/collapse message system, with UI buttons within message bubble, vert and horizontal scroll support, auto scroll while streaming code exe tool, and UI/UX refinements for both for smooth user experience.

[deciduus]

# 🎨 Chat UI Improvements: Message State Management & Button Controls

## 📋 Overview
Major overhaul of the chat interface message display system, implementing intelligent height management, improved scrolling behavior, and consistent button state synchronization across all user interactions.

## ✨ Key Features

### 🔧 **Smart Message Height Management**
- **Fixed Height Mode ON**: Messages auto-compact when content >400px for optimal scrolling
- **Fixed Height Mode OFF**: All messages expand to unlimited height (long-form reading)
- **Agent Response Special Handling**: Green response messages always auto-expand in fixed height mode

### 🎯 **Intelligent Button Controls**
- **Visual Feedback**: Gold expand (↗️) vs Green collapse (↙️) icons based on actual state
- **Session-Only Toggles**: Agent responses can be toggled within chat session but reset on reload
- **Persistent Preferences**: Other message types save user preferences across reloads
- **Synchronized States**: Buttons always reflect actual DOM state, no more desync issues

### 🚀 **Enhanced Streaming Performance**
- **Smooth Rendering**: Eliminated layout shifts and flashing during content updates
- **Auto-Scroll Tracking**: Messages automatically scroll to bottom when compact
- **State Management**: Proper locking prevents conflicting state changes during streaming
- **Real-time Updates**: Button states update correctly as content streams in

## 🐛 **Bug Fixes**

### 🔄 **Page Load & Reload Issues**
- ✅ Fixed incorrect button states on page reload
- ✅ Resolved messages appearing collapsed when they should be expanded
- ✅ Corrected agent response auto-expand behavior on chat load

### 🎛️ **Global Toggle Edge Cases**
- ✅ Fixed button desync when switching Fixed Height ON → OFF → ON
- ✅ Ensured agent responses maintain correct state through mode changes
- ✅ Resolved first-click button issues after reload

### 📱 **User Experience**
- ✅ Eliminated "wrong call, no response" button behavior
- ✅ Fixed inconsistent message heights on initial load
- ✅ Improved scroll position handling during content updates

## 🔧 **Technical Improvements**

### 🏗️ **Architecture**
- **Unified State System**: Centralized message state management with proper lifecycle
- **DOM-First Approach**: Button states sync to actual DOM rather than just localStorage
- **Race Condition Prevention**: Proper initialization sequence prevents competing updates

### ⚡ **Performance**
- **Debounced Updates**: Intelligent batching of state changes during streaming
- **Optimized Rendering**: Reduced DOM manipulation and layout thrashing
- **Memory Management**: Proper cleanup of event listeners and timeouts

## 🎯 **User Experience**

### 📐 **Expected Behavior**
1. **New Chat**: Messages render with appropriate heights, buttons show correct states
2. **Streaming**: Content flows smoothly with auto-scroll, no visual glitches
3. **User Toggles**: Buttons respond immediately, preferences persist appropriately
4. **Page Reload**: Interface restores to expected state based on global preferences
5. **Mode Switching**: Seamless transitions between fixed/long-form modes

### 🎨 **Visual Polish**
- **Consistent Icons**: Clear visual language for expand/collapse states
- **Smooth Transitions**: Elegant state changes without jarring movements
- **Responsive Design**: Works well across different screen sizes and content types

---

**Impact**: Significantly improved chat interface usability and reliability, providing users with intuitive controls that work consistently across all scenarios while maintaining excellent performance during high-speed content streaming.

[deciduus]

https://github.com/user-attachments/assets/efbd136f-82a8-450f-87cb-52ed593ed647