Collapsible Code Block

[sam1am]

Add the ability to collapse/expand code blocks in chat messages to improve readability, especially for long code snippets.

Implementation Details

Affected Areas:

• client/src/components/Messages/Content/CodeBlock.tsx - Main component file

Changes:

1. UI Components Added:

   • Chevron icon (ChevronDown/ChevronRight from lucide-react) in the CodeBar
   • Toggle button with proper aria-labels for accessibility

2. State Management:

   • Local isCollapsed state in CodeBlock component
   • No changes to global state or context providers

3. Visual Changes:

   • Smooth CSS transitions (200ms ease-in-out) for collapse/expand
   • Proper rounded corners handling when collapsed
   • No changes to existing styling when expanded

4. Functionality Preserved:

   • Copy button remains functional
   • Code execution features unchanged
   • Results display unaffected
   • All existing props and APIs maintained

Benefits:

• Improves readability for long conversations with multiple code blocks
• Reduces scrolling needed to navigate through messages
• Better UX for reviewing code-heavy conversations
• No breaking changes - fully backward compatible

Implementation PR Ready:

I have already implemented this feature and tested it locally. The PR has been submitted here: #9603

Screenshots:

Default State:

Collapsed State: