Fix: Restore browser autocomplete functionality in message input box

[danielaskdd]

Fix: Restore browser autocomplete functionality in message input box

🐛 Problem

The message input box in the retrieval testing interface lost browser autocomplete functionality, preventing users from accessing their previously entered queries from browser history. This significantly impacted user experience as users could no longer benefit from browser's built-in input suggestions.

🔍 Root Cause Analysis

The issue was caused by using a <textarea> element instead of an <input> element. Browser autocomplete functionality is primarily designed for <input> elements and has limited support for <textarea> elements, especially for single-line input scenarios.

✨ Solution

Implemented an intelligent switching system that dynamically chooses between <input> and <textarea> elements based on content:

Smart Component Switching

• Single-line input: Uses <input> element for optimal autocomplete support
• Multi-line input: Automatically switches to <textarea> when newlines are detected
• Seamless transition: Maintains focus, cursor position, and user context during switches

Multi-line Input Support

• Shift+Enter: Inserts newline and triggers switch to textarea mode
• Paste multi-line text: Automatically detects and handles pasted content with newlines
• Dynamic height adjustment: Textarea height adjusts immediately after Shift+Enter

Enhanced User Experience

• Preserved browser history: Uses consistent id="query-input" for browser recognition
• Focus management: Maintains cursor position during component switches
• Performance optimized: Uses requestAnimationFrame for smooth transitions

🎯 Impact

• User Experience: Restored familiar browser autocomplete functionality
• Productivity: Users can quickly access previous queries from browser history
• Flexibility: Maintained support for multi-line input when needed
• Performance: Optimized rendering with requestAnimationFrame
• Compatibility: Works across different browsers and input scenarios

🔄 Backward Compatibility

• All existing functionality preserved
• No breaking changes to API or user workflows
• Enhanced experience builds on existing patterns