cody: new chat ui with stop generating button

[abeatrix]

Close #53364 & #50058

• Update Chat UI based on design from Tim (figma) (Thanks @SuperAuguste for the first draft!)
• Add stop generating button to abort a request in flight (Thanks @thenamankumar for adding it to web that I can use as references!)

Demo

cody.stop.gen.mp4

Test plan

UI updated. Current tests are still passing:

cd client/cody
pnpm test:e2e

VS Code

Abort.Button.in.VS.Code.mp4

When Fixup is running

Cody.VS.Code_.Abort.button.for.Inline.and.Nonstop.fixups.mp4

Web

Cody.AI.Chat.-.dev.Sourcegraph.-.16.June.2023.mp4

[sourcegraph-bot]

📖 Storybook live preview

[abeatrix]

show the button with not-allowed cursor to address feedback from users where they thought the button is clickable when it's not

[toolmantim]

Ideally it would visually change too, but this works in a pinch.

I really like ChatGPT mobile’s interface, with the button transitioning to the stop button. I think that actually might be the better way for where we take this in the future.

[abeatrix]

Yea i totally agree. I thought about updating that but i feel like i should do that in a different PR like you said in the future ;)

[toolmantim]

I checked it out, and I really like where you've put the feedback and edit buttons. They look great!

Let's position the Stop Generating button fixed to the bottom, above the compose box:

Screen.Recording.2023-06-16.at.11.46.09.am.mov

I've transitioned the button in with a fade and small slide up, and a straight fade out to transition out. Let me know if you want me to help work on the transitions.

Here's the Figma (with clickable prototype):
https://www.figma.com/file/9112BsKsJc1BpO2j8XYwLL/%F0%9F%A4%96-Cody-VS-Code-%5BMain%5D?type=design&node-id=3532-142495&t=sGLSIMfj0YFYhiuN-4

(While I was here, I also designing the "..." animation. Maybe we can do that in a follow up? I can help with the CSS animations there too)

[toolmantim]

@abeatrix are all the background shades okay to you? If there's any inconsistencies in the Figma to how we're using the VS Code theme color variables, let me know… because there's a good chance it was an accident/oversight, not by design.

Same for the "Stop Generating" button colours there… I used the small Figma VS Code button component, but the color and hover color etc should be the standard secondary one we're using.

[abeatrix]

https://www.figma.com/file/9112BsKsJc1BpO2j8XYwLL/%F0%9F%A4%96-Cody-VS-Code-%5BMain%5D?type=design&node-id=3532-142495&t=sGLSIMfj0YFYhiuN-4

Let's position the Stop Generating button fixed to the bottom, above the compose box
I can update the styles for the button but i think we should update the position of the button in another PR so the web team can review, cause right now we are just creating the button for the editor that we can style freely and pass into the existing component that is shared between clients, which handles the position of the button.

If we update the position of the button in the shared package, I think I will also need to update the button styles in the web client since it behaves differently than the editor one right now ( see video below, you needs to chase the button to stop it before the request is done :P). What do you think?

Cody.AI.Chat.Web.Stop.Generating.Example.mp4

[valerybugakov]

Nice!

[toolmantim]

If we update the position of the button in the shared package, I think I will also need to update the button styles in the web client since it behaves differently than the editor one right now ( see video below, you needs to chase the button to stop it before the request is done :P). What do you think?

I think we don't want people to be chasing buttons 😂

[abeatrix]

I think we don't want people to be chasing buttons 😂

haha I updated the button to get it fixed to the bottom, above the compose box, and added animation for transitioning in. i can't get it to fade out without adding a new state, so i just hold that off for now if that's ok.

are all the background shades okay to you

I'm using the VS code webview tool kit for the editor components so they should just work...? they look fine on my side at least 😅

VS Code

Abort.Button.in.VS.Code.mp4

Web

Cody.AI.Chat.-.dev.Sourcegraph.-.16.June.2023.mp4

[thenamankumar]

The gradient border on the left side on web looks a bit odd to me, given it will be of variable length. @almeidapaulooliveira can give approval from design side regarding this.

Otherwise LGTM.

[abeatrix]

@thenamankumar Thanks for doing all the work for web and for letting me copy your homework 🥹

[dominiccooney]

@abeatrix I'm thinking that inline fixups, non-stop fixups will need a signal when the response is cancelled so that they don't sit around spinning forever or try to respin something that the user cancelled. (What happens when you hit cancel on them today?)

[abeatrix]

@abeatrix I'm thinking that inline fixups, non-stop fixups will need a signal when the response is cancelled so that they don't sit around spinning forever or try to respin something that the user cancelled. (What happens when you hit cancel on them today?)

@dominiccooney I totally forgot about them 😅 I've updated so that notifyTurnComplete will be called when job is aborted. inline fixup will pick it up as error and display the error, while non-stop fixup will show no diff highlighted. I added a TODO for onError requests that I think we can work on in another PR :D

Here is how it looks like when users click on the abort button when running the fixups: https://www.loom.com/share/9431081714d448e8a022032bfcc61aed?sid=ae1bc365-d1b5-425b-b19b-5a9fd98f1c0b

[abeatrix]

@toolmantim @almeidapaulooliveira Can i get your review for the Pending UI Review please?

[abeatrix]

Thanks @toolmantim ❤️

[toolmantim]

I gave the web styles a bit more of a thorough test, as I wanted to follow up on @thenamankumar’s comment above. And I've just pushed fixes for how it applies to Cody web.

10b7b1e	67d18e9