Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add autoresizing and command button to chat input #718

Merged
merged 10 commits into from
Aug 18, 2023

Conversation

toolmantim
Copy link
Contributor

@toolmantim toolmantim commented Aug 17, 2023

This revamps the chat input with better styling (high contrast outline support, proper border radius, etc), autoresizing support for long lines and narrow screens, and a command button.

Screen.Recording.2023-08-18.at.12.18.10.am.mov
Before After
Screenshot 2023-08-18 at 12 24 50 am Screenshot 2023-08-18 at 12 23 56 am
Screenshot 2023-08-18 at 12 25 00 am Screenshot 2023-08-18 at 12 23 37 am

Fixes #613

Test plan

  • Interact with it
  • Verify it works
  • Test different color schemes

@toolmantim toolmantim changed the title Fix sizing of VS Code chat input textarea Add autoresizing and command button to chat input Aug 17, 2023
@toolmantim toolmantim marked this pull request as ready for review August 17, 2023 14:41
@toolmantim toolmantim requested a review from a team August 17, 2023 14:41
Copy link
Contributor

@dominiccooney dominiccooney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could mention #613 in your description.

Looks splendid. Some feedback inline for your consideration.

lib/ui/src/Chat.tsx Outdated Show resolved Hide resolved
@@ -9,7 +9,7 @@ test('open the Custom Commands in sidebar and add new user recipe', async ({ pag

await expect(sidebar.getByText("Hello! I'm Cody.")).toBeVisible()

await sidebar.getByRole('textbox', { name: 'Text area' }).fill('/')
await sidebar.getByRole('textbox', { name: 'Chat message' }).fill('/')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Kudos for writing useful accessibility role names.

vscode/webviews/Chat.module.css Show resolved Hide resolved
vscode/webviews/Chat.module.css Outdated Show resolved Hide resolved
vscode/webviews/Chat.tsx Outdated Show resolved Hide resolved
toolmantim and others added 5 commits August 18, 2023 14:08
Co-authored-by: Dominic Cooney <dominic.cooney@sourcegraph.com>
Co-authored-by: Dominic Cooney <dominic.cooney@sourcegraph.com>
@toolmantim toolmantim merged commit 667596e into main Aug 18, 2023
8 checks passed
@toolmantim toolmantim deleted the tl/autoresize-chat-textarea branch August 18, 2023 04:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Resizable components of chat window
2 participants