feat: add command to focus Roo Code input field

[axkirillov]

Context

This PR adds a new command roo-cline.focusInput to the Roo Code VS Code extension. This allows users to directly focus the main input text area in the Roo Code panel using the command palette or a custom keyboard shortcut, improving accessibility and workflow speed.

Implementation

1. Defined Command: Added the roo-cline.focusInput command definition to package.json with the title "Focus Input Field" and category "Roo Code". No default keybinding was added, allowing users to define their own.
2. Implemented Command Handler: Added the corresponding handler in src/activate/registerCommands.ts. This handler sends a focusInput action message to the webview via provider.postMessageToWebview.
3. Handled Webview Message: Updated the handleMessage function in webview-ui/src/components/chat/ChatView.tsx to listen for the focusInput action and call textAreaRef.current?.focus() when received.
4. Fixed Input Styling: Adjusted Tailwind CSS classes in webview-ui/src/components/chat/ChatTextArea.tsx to ensure the text area component correctly fills the width of its parent container, resolving a layout issue.

Screenshots

(No visual changes)

How to Test

1. Check out the feat/focus-input-command branch.
2. Build the extension: npm run compile
3. Launch the Extension Development Host (F5).
4. Open the Roo Code panel.
5. Test Command Palette:
   • Click away from the input field.
   • Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P).
   • Search for and run "Roo Code: Focus Input Field".
   • Verify: The input field gains focus.
6. Test Keyboard Shortcut (Optional):
   • Open Keyboard Shortcuts (Cmd+K Cmd+S / Ctrl+K Ctrl+S).
   • Assign a shortcut (e.g., Cmd+Shift+I) to "Roo Code: Focus Input Field".
   • Click away from the input field.
   • Press the assigned shortcut.
   • Verify: The input field gains focus.
7. Verify Styling: Confirm the input text area spans the width of the panel correctly.

Get in Touch

aleks.kirillov_41799

---

Important

Adds roo-cline.focusInput command to focus the input field in Roo Code extension, enhancing accessibility.

• Command Addition:
  • Adds roo-cline.focusInput command in package.json with title "Focus Input Field" and category "Roo Code".
  • No default keybinding; users can define their own.
• Command Implementation:
  • Registers roo-cline.focusInput in registerCommands.ts to send focusInput action to webview.
  • Updates handleMessage in ChatView.tsx to focus textAreaRef on focusInput action.
• Styling Fix:
  • Adjusts CSS in ChatTextArea.tsx to ensure text area fills parent width.

^{This description was created by for e7658b0. It will automatically update as commits are pushed.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 4725090

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[mrubens]

Thanks for the contribution!