fix: improve chat UI - add camera icon margin and make placeholder no…

[MuriloFP]

Related GitHub Issue

Closes: #user-request

Roo Code Task Context (Optional)

N/A - Direct implementation of user-requested UI improvements

Description

This PR implements two small but important UI improvements to the chat interface:

1. Camera Icon Spacing: Added mr-1 class to the camera icon button to provide proper right margin spacing
2. Non-selectable Placeholder Text: Made the bottom placeholder text (add context..., drag files...) non-selectable while preserving its original visual styling, colors, and positioning

Key Implementation Details:

• The camera icon fix is a simple CSS class addition to the IconButton component
• The placeholder fix uses CSS properties userSelect: "none" and pointerEvents: "none" to prevent text selection while maintaining the original design with different colors and bottom positioning
• No functional behavior changes, only visual/UX improvements

Test Procedure

Manual Testing Steps:

1. Open the chat interface in the VSCode extension
2. Camera Icon Test: Verify the camera icon now has proper spacing from adjacent elements
3. Placeholder Test:
   • Ensure the chat input is empty to see placeholder text
   • Try to select the bottom placeholder text (add context..., drag files...) - it should not be selectable
   • Verify the placeholder text still appears in the correct position with the correct color (lighter than main placeholder)
   • Verify the main placeholder text in the textarea still works normally

Testing Environment:

• VSCode Extension development environment
• Tested in webview-ui component

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and/or updated tests have been added to cover my changes (if applicable).
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

Before:

• Camera icon had no right margin spacing
• Bottom placeholder text was selectable (highlighted when clicked/dragged)

After:

• Camera icon has proper mr-1 spacing
• Bottom placeholder text is non-selectable while maintaining original appearance

Note: Screenshots should be added manually when creating the actual PR

Documentation Updates

• No documentation updates are required.

Additional Notes

These are minor UI/UX improvements that enhance the user experience without changing any functional behavior. The changes are isolated to the ChatTextArea component and follow existing patterns in the codebase.

Get in Touch

@MuriloFP

---

Important

Improves chat UI in ChatTextArea.tsx by adding margin to the camera icon and making placeholder text non-selectable.

• UI Improvements in ChatTextArea.tsx:
  • Added mr-1 class to the camera icon button for proper right margin spacing.
  • Made bottom placeholder text non-selectable using userSelect: "none" and pointerEvents: "none" while maintaining original styling.

^{This description was created by for de40fed. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

The inline style for the placeholder now includes userSelect: 'none' and pointerEvents: 'none' to make it non-selectable. For consistency with the rest of the project (which uses Tailwind classes), consider using Tailwind utilities like select-none and pointer-events-none if feasible.