feat: add Copy/Apply buttons at bottom of code blocks

[kevin-on]

Closes #498

Description

• Added footer section with Copy and Apply buttons below code block content
• Allows users to execute actions without scrolling back to the top
• Reuses existing header button styles for consistency

Checklist before requesting a review

• I have reviewed the guidelines for contributing to this repository.
• I have performed a self-review of my code
• I have performed a code linting check and type check (by running npm run lint:check and npm run type:check)
• I have run the test suite (by running npm run test)
• I have tested the functionality manually

Summary by CodeRabbit

Release Notes

• New Features
  • Code blocks now include a footer section with Copy and Apply action buttons. The Copy button provides confirmation feedback, while the Apply button executes code changes. These footer controls duplicate existing header actions, offering multiple access points for user convenience.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

This change adds a duplicate set of Copy and Apply action buttons in a new footer section of the MarkdownCodeComponent, along with corresponding CSS styling. Users can now access these actions at the bottom of code blocks without scrolling to the header.

Changes

Cohort / File(s)	Summary
Footer UI Controls src/components/chat-view/MarkdownCodeComponent.tsx	Added footer section with Copy button (triggers handleCopy, displays "Copied" state) and Apply button (triggers onApply with aria-disabled state). Mirrors existing header button functionality.
Footer Styling styles.css	New .smtcmp-code-block-footer class with flex layout, top border, background color, rounded bottom corners, and fixed height for positioning footer controls.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• PR #377: Modifies the same component's header button classes and behavior, potentially affecting button styling consistency between header and footer implementations.
• PR #342: Changes MarkdownCodeComponent with preview and file-open features, overlapping scope on the same UI component.
• PR #344: Updates MarkdownCodeComponent and styles.css for code-block UI controls, sharing identical files and related styling modifications.

Poem

🐰 A footer blooms, buttons anew,
No scrolling back—apply and chew!
Twice the convenience, double the cheer,
The buttons descend, your edits stay near.
✨ Long content flows smooth, rabbit approved! 🥕

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: add Copy/Apply buttons at bottom of code blocks' clearly and concisely summarizes the main change in the pull request.
Linked Issues check	✅ Passed	The PR addresses the primary objective from issue #498 by adding Copy/Apply buttons at the bottom of code blocks to reduce scrolling, fulfilling the main requirement.
Out of Scope Changes check	✅ Passed	All changes are scoped to the primary objective; the footer buttons implementation in MarkdownCodeComponent and corresponding CSS styling directly address issue #498's core requirement.
Description check	✅ Passed	The PR description addresses the linked issue, explains the changes clearly, and includes the contribution checklist with all items marked complete.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}