mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-02-15 17:25:04 -05:00
f6608e99c8
Text inputs in the form builder can be difficult to edit when dealing with longer content. Users need a way to expand text inputs into a larger, more comfortable editing interface, especially for multi-line text, passwords, and longer string values. https://github.com/user-attachments/assets/443bf4eb-c77c-4bf6-b34c-77091e005c6d ### Changes 🏗️ - **Added `InputExpanderModal` component**: A new modal component that provides a larger textarea (300px min-height) for editing text inputs with the following features: - Copy-to-clipboard functionality with visual feedback (checkmark icon) - Toast notification on successful copy - Auto-focus on open for better UX - Proper state management to reset values when modal opens/closes - **Enhanced `TextInputWidget`**: - Added expand button (ArrowsOutIcon) with tooltip for text, password, and textarea input types - Button appears inline next to the input field - Integrated the new `InputExpanderModal` component - Improved layout with flexbox to accommodate the expand button - Added padding-right to input when expand button is visible to prevent text overlap - **Refactored file structure**: - Moved `TextInputWidget.tsx` into `TextInputWidget/` directory - Updated import path in `widgets/index.ts` - **UX improvements**: - Expand button only shows for applicable input types (text, password, textarea) - Number and integer inputs don't show expand button (not needed) - Modal preserves schema title, description, and placeholder for context ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Test expand button appears for text input fields - [x] Test expand button appears for password input fields - [x] Test expand button appears for textarea fields - [x] Test expand button does NOT appear for number/integer inputs - [x] Test clicking expand button opens modal with current value - [x] Test editing text in modal and saving updates the input field - [x] Test cancel button closes modal without saving changes - [x] Test copy-to-clipboard button copies text and shows success state - [x] Test toast notification appears on successful copy - [x] Test modal resets to original value when reopened - [x] Test modal auto-focuses textarea on open - [x] Test expand button tooltip displays correctly - [x] Test input field layout with expand button (no text overlap)