Improve chat UX by supporting multiline user messages, auto-focus, etc. #22
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the chat UX by implementing multiline message support and auto-focus functionality. The changes transform the single-line input into a more user-friendly textarea with improved interaction patterns.
Key changes:
- Replaces input field with auto-resizing textarea supporting Shift+Enter for new lines
- Implements auto-focus functionality that returns focus to input after responses/errors
- Updates UI styling for a more minimalistic layout with smaller buttons
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| ChatMessages.razor | Updates message display to preserve multiline formatting with white-space: pre-wrap |
| ChatInput.razor | Major refactor replacing input with textarea, adds auto-resize and focus functionality |
| Home.razor | Integrates auto-focus behavior across all interaction flows (responses, errors, file uploads) |
| App.razor | Adds JavaScript utilities for textarea auto-resize and enhanced focus management |
| try | ||
| { | ||
| await Task.Delay(100); | ||
| await JSRuntime.InvokeVoidAsync("eval", "document.querySelector('.chat-textarea').focus()"); |
There was a problem hiding this comment.
Using JSRuntime.InvokeVoidAsync with 'eval' is a security risk as it executes arbitrary JavaScript. Consider using a dedicated JavaScript function instead of eval.
Copilot uses AI. Check for mistakes.
| catch (Exception ex) | ||
| { | ||
| // Silently handle focus errors as they're not critical | ||
| Console.WriteLine($"Focus error: {ex.Message}"); |
There was a problem hiding this comment.
Console.WriteLine should not be used for logging in production code. Consider using ILogger instead for proper logging infrastructure.
| Console.WriteLine($"Focus error: {ex.Message}"); | |
| Logger.LogError(ex, "Focus error occurred while attempting to focus the input element."); |
Copilot uses AI. Check for mistakes.
| private async Task SendMessage() | ||
| { | ||
| if (!string.IsNullOrWhiteSpace(UserMessage)) | ||
| { | ||
| await UserMessageChanged.InvokeAsync(UserMessage); | ||
| } | ||
| } | ||
|
|
||
| public async Task FocusInputAsync() |
There was a problem hiding this comment.
The FocusInputAsync method has excessive complexity with multiple nested try-catch blocks and arbitrary delays. Consider simplifying this logic or extracting it into a service.
Copilot uses AI. Check for mistakes.
| { | ||
| try | ||
| { | ||
| // Longer delay for textarea elements to ensure they're fully initialized | ||
| await Task.Delay(100); |
There was a problem hiding this comment.
Magic numbers (100, 50, 100ms delays) should be extracted as named constants to improve maintainability and make the timing requirements explicit.
| { | |
| try | |
| { | |
| // Longer delay for textarea elements to ensure they're fully initialized | |
| await Task.Delay(100); | |
| try | |
| { | |
| // Longer delay for textarea elements to ensure they're fully initialized | |
| await Task.Delay(INITIALIZATION_DELAY_MS); |
Copilot uses AI. Check for mistakes.
What's new:
New UI looks like this:
Disclaimer: Implemented entirely with AI-assistance,as I'm not proficient with web UI technologies. Surprisingly (or not), seems to work as intended. 😉