Implement Optimistic Updates for Chat Messages in use-mb-chat Hook

[coderabbitai]

Background

This issue tracks the implementation of optimistic UI updates for chat messages, originally attempted in PR #547 but closed due to breaking changes in main/develop branches.

Original PR Objectives

PR #547 aimed to implement optimistic UI updates for chat messages with the following key features:

Core Hooks Implementation

• useOptimisticChat: Manages optimistic message lifecycles (add, send, fail, retry, merge)
• useServerCache: Client-side cache for user prompts to enable error recovery and retry functionality

Key Features

• Immediate UI feedback when users send messages
• Status indicators for messages (preparing, sending, sent, failed)
• Retry functionality for failed messages
• Automatic cleanup of expired optimistic messages
• Real-time message merging with server responses

UI Components

• OptimisticMessageStatus: Visual status indicators with retry controls
• Updated MessagePairs and MessagePairAccordion to render pending messages
• Immediate input clearing and chat popup opening on message send

Current Requirements

Target Applications

• pro-web: Implement optimistic updates for use-mb-chat.tsx hook
• web: Implement optimistic updates for use-mb-chat.tsx hook

Implementation Scope

1. Core Hooks

• Create useOptimisticChat hook with:

  • OptimisticChatState and OptimisticChatActions interfaces
  • Message lifecycle management (add, sending, sent, failed states)
  • Retry mechanism with configurable limits
  • Message deduplication and merging logic

• Create useServerCache hook with:

  • Prompt caching during connection issues
  • Failed prompt tracking and retry queue
  • Automatic cache cleanup for expired entries

2. Integration Points

• Update use-mb-chat.tsx hook in both pro-web and web apps
• Integrate optimistic state into existing chat message flows
• Ensure compatibility with current thread management

3. UI Components

• OptimisticMessageStatus component with status indicators
• Update message rendering components to show optimistic states
• Implement retry controls in the UI

4. State Management

• Merge optimistic messages with server messages in allMessages
• Handle activeThread state changes properly
• Prevent message duplication issues

Issues to Address

Based on original testing, ensure the implementation addresses:

• Message duplication in UI
• Thread title consistency across thread pop-ups
• Proper state reset when threads close
• Hook updates responding correctly to activeThread changes

Testing Requirements

• Unit tests for optimistic hooks
• Integration tests for message flow
• Manual testing scenarios for error conditions
• Network disconnection/reconnection testing

Documentation

• Update hook documentation
• Add usage examples
• Document error handling patterns

Implementation Notes

• Maintain backward compatibility with existing chat functionality
• Follow current monorepo patterns and conventions
• Consider performance implications of optimistic updates
• Ensure proper error boundaries and fallback states

Related

• Original PR: refactor(wip): optimistic thread state | Add optimistic chat hooks, integrate into MBChatProvider and UI #547
• Requested by: @AndlerRL
• Priority: Enhancement

Acceptance Criteria

• Both pro-web and web apps have optimistic updates in use-mb-chat.tsx
• No message duplication issues
• Proper state management across thread changes
• Retry functionality works as expected
• Server cache recovers from connection issues
• All tests pass
• Documentation updated