Optimize MessageList component performance with useMemo

[078sky]

Optimize MessageList component performance with useMemo

Summary

This PR implements React performance optimizations for the MessageList component to reduce unnecessary re-renders during active conversations. The main changes wrap expensive filtering, grouping, and computation operations in useMemo hooks to prevent them from running on every render.

Key optimizations:

• Message filtering: Memoized filtering logic that removes tool result messages
• Message grouping: Memoized grouping of consecutive messages by type
• Streaming indicator: Memoized tool use loading state computation

Additional deliverable:

• Created comprehensive efficiency analysis report documenting 6 performance improvement opportunities across the codebase

Review & Testing Checklist for Human

• Verify useMemo dependency arrays - Ensure [messages], [displayMessages], and [displayMessages, toolResults] capture all necessary dependencies to prevent stale closures
• Test message rendering in live environment - Start a conversation and verify messages display correctly, filter tool results properly, and group consecutive messages by type
• Verify streaming indicators work - Test that streaming dots appear/disappear correctly and don't conflict with tool use loading states

Recommended Test Plan:

1. Start the application locally with npm run dev
2. Open a conversation and send several messages
3. Verify message filtering, grouping, and streaming indicators work as before
4. Test with conversations containing tool use blocks to ensure loading states work correctly

---

Diagram

%%{ init : { "theme" : "default" }}%%
graph TB
    MessageList["src/web/chat/components/<br/>MessageList/MessageList.tsx"]:::major-edit
    MessageItem["src/web/chat/components/<br/>MessageList/MessageItem.tsx"]:::context
    Types["src/web/chat/types.ts"]:::context
    Hooks["src/web/chat/hooks/<br/>useConversationMessages.ts"]:::context
    Report["EFFICIENCY_ANALYSIS.md"]:::major-edit
    
    MessageList -->|renders| MessageItem
    MessageList -->|uses types| Types
    Hooks -->|provides messages| MessageList
    
    subgraph Legend
        L1[Major Edit]:::major-edit
        L2[Minor Edit]:::minor-edit  
        L3[Context/No Edit]:::context
    end

    classDef major-edit fill:#90EE90
    classDef minor-edit fill:#87CEEB
    classDef context fill:#ffffff

Loading

Notes

Risk Assessment: 🟡 Medium Risk

• Changes affect core message rendering component used in every conversation
• useMemo optimizations could introduce subtle behavioral changes if dependency arrays are incorrect
• Limited ability to test UI changes in production-like environment during development

Performance Benefits:

• Reduces O(n) filtering operations on every render
• Reduces O(n) grouping operations on every render
• Reduces O(n²) tool use checking for streaming indicators
• Improves responsiveness during active conversations, especially with large message histories

Session Info:

• Link to Devin run: https://app.devin.ai/sessions/e4c732e71afe44ce85b020de22322a40
• Requested by: @078sky