Chat: Add a stop button and tooltips w/ keyboard shortcuts, and reduce vertical space - Githubissues

sourcegraph / cody

Type less, code more: Cody is an AI code assistant that uses advanced search and codebase context to help you write and fix code.

https://cody.dev

Apache License 2.0

2.6k stars 278 forks source link

Chat: Add a stop button and tooltips w/ keyboard shortcuts, and reduce vertical space #4580

Closed toolmantim closed 3 months ago

toolmantim commented 3 months ago

Lots of visual details and cleanups to the core chat transcript UI:

Updates the chat submit button so it turns into a stop button
Adds tooltips with keyboard shortcuts to the send button
Ensures tooltips don't overlap the message input
Removes a lot of unnecessary vertical padding
Fixes the alignment and sizing of the input, @-mention chips, avatars

CleanShot 2024-06-17 at 16 54 51@2x

CleanShot 2024-06-17 at 16 52 52@2x

CleanShot 2024-06-17 at 16 28 05@2x

CleanShot 2024-06-17 at 16 28 12@2x

Cleanups:

Implements a better Kdb component for showing keyboard shortcuts
Adds tooltip stories showing how to display a keyboard shortcut in the tooltip
Adds button stories
Change the tailwind button class name styles
Updates tailwind font size maths so they match even font sizes (and match VS Code)

Known bug:

Hitting escape/stop before the LLM stream starts puts the chat in a bad state

Fixes https://linear.app/sourcegraph/issue/CODY-2149/feedback-bring-the-stop-button-back-again Fixes https://linear.app/sourcegraph/issue/CODY-2270/the-amount-of-vertical-space-the-chat-takes

Test plan

CI
Test the chat in various states