🧠 fix: Messages View Height Expansion from #11142 & improve Thinking/Code-Block UX (#11148)

This commit fixes the messages view height auto-expansion issue introduced
in PR #11142 and improves the UX of both Thinking and CodeBlock components.

## Bug Fix

The ThinkingFooter component added in PR #11142 was causing the messages
view height to automatically expand. The footer was placed inside the
CSS grid's overflow-hidden container, but its presence affected the
grid height calculation, causing layout issues during streaming.

## Solution: FloatingThinkingBar

Replaced ThinkingFooter with a new FloatingThinkingBar component that:
- Uses absolute positioning (bottom-right) like CodeBlock's FloatingCodeBar
- Only appears on hover/focus, not affecting layout
- Shows expand/collapse button with dynamic icon based on state
- Uses TooltipAnchor for accessible tooltips
- Supports keyboard navigation by showing when any element in the
  container is focused (top bar buttons or content)

## Changes

### Thinking.tsx
- Added FloatingThinkingBar component with hover/focus visibility
- Updated ThinkingContent with additional bottom padding (pb-10)
- Added containerRef and hover/focus event handlers on outer container
- Removed ThinkingFooter component (replaced by FloatingThinkingBar)

### Reasoning.tsx
- Integrated FloatingThinkingBar with same hover/focus pattern
- Added containerRef and event handlers on outer container
- Supports keyboard navigation through entire component

### CodeBlock.tsx
- Updated FloatingCodeBar to show icons only (removed text labels)
- Added TooltipAnchor wrapper for copy button with localized tooltips
- Improved accessibility with proper aria-label and aria-hidden

### Localization
- Added com_ui_expand_thoughts: "Expand Thoughts"

## Accessibility

- Full keyboard navigation support: tabbing through ThinkingButton,
  copy button, and FloatingThinkingBar
- TooltipAnchor provides hover tooltips for icon-only buttons
- Proper aria-label attributes on all interactive elements
- tabIndex management based on visibility state
This commit is contained in:
Danny Avila 2025-12-29 21:21:50 -05:00 committed by GitHub
parent 06ba025bd9
commit eb1a59d2fd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 148 additions and 53 deletions

View file

@ -799,6 +799,7 @@
"com_ui_code": "Code",
"com_ui_collapse": "Collapse",
"com_ui_collapse_thoughts": "Collapse Thoughts",
"com_ui_expand_thoughts": "Expand Thoughts",
"com_ui_collapse_chat": "Collapse Chat",
"com_ui_command_placeholder": "Optional: Enter a command for the prompt or name will be used",
"com_ui_command_usage_placeholder": "Select a Prompt by command or name",