Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tweak message role indicator in the assistant panel (#3938)

Browse source 
This PR tweaks the message role indicator in the assistant panel.

Previously we added a negative margin in #3925 to align the indicator
with the text, but the result of this was the left side of the button
getting clipped on hover.

To remedy this, we now use the filled button style so that the
background always shows and maintains the visual alignment.

### Before

<img width="451" alt="Screenshot 2024-01-08 at 10 50 21 AM"
src="https://github.com/zed-industries/zed/assets/1486634/dd3ae3dc-13c5-4d81-abd7-8023aca496c8">

### After

<img width="401" alt="Screenshot 2024-01-08 at 10 54 42 AM"
src="https://github.com/zed-industries/zed/assets/1486634/c089a879-1c88-4d94-9532-4e9433a35828">

We could also do what we did in Zed1, where the hover style doesn't have
any padding and is flush with the left side of the text, but I don't
think this looks as polished.

The "Assistant" role now also uses a separate color from "System".

Release Notes:

- Updated the style of the message role indicator in the assistant
panel.
This commit is contained in:
Marshall Bowers 2024-01-08 11:06:02 -05:00 • committed by GitHub
commit 3541dd8a6d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

10
crates/assistant/src/assistant_panel.rs
View file

@ -2298,11 +2298,10 @@ impl ConversationEditor {
move |_cx| {
let message_id = message.id;
let sender = ButtonLike::new("role")
.style(ButtonStyle::Filled)
.child(match message.role {
Role::User => Label::new("You").color(Color::Default),
Role::Assistant => {
Label::new("Assistant").color(Color::Modified)
}
Role::Assistant => Label::new("Assistant").color(Color::Info),
Role::System => Label::new("System").color(Color::Warning),
})
.tooltip(|cx| {
@ -2331,10 +2330,7 @@ impl ConversationEditor {
.h_11()
.relative()
.gap_1()
// Sender is a button with a padding of 1, but only has a background on hover,
// so we shift it left by the same amount to align the text with the content
// in the un-hovered state.
.child(div().child(sender).relative().neg_left_1())
.child(sender)
// TODO: Only show this if the message if the message has been sent
.child(
Label::new(