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

agent: Simplify elements of the thread design (#29533)

Browse source 
Namely, this PR removes the layout shift when you click on a user
message to edit it and displays the feedback disclaimer only upon
hovering the thumbs up/down button container.

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-04-28 11:36:06 -03:00 • committed by GitHub
parent 1c4ba07b20
commit 2a0be48875
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 73 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

132
crates/agent/src/active_thread.rs
View file

@ -1540,23 +1540,25 @@ impl ActiveThread {
const RESPONSE_PADDING_X: Pixels = px(18.); const RESPONSE_PADDING_X: Pixels = px(18.);
let feedback_container = h_flex() let feedback_container = h_flex()
.group("feedback_container")
.py_2() .py_2()
.px(RESPONSE_PADDING_X) .px(RESPONSE_PADDING_X)
.gap_1() .gap_1()
.flex_wrap() .flex_wrap()
.justify_between(); .justify_end();
let feedback_items = match self.thread.read(cx).message_feedback(message_id) { let feedback_items = match self.thread.read(cx).message_feedback(message_id) {
Some(feedback) => feedback_container Some(feedback) => feedback_container
.child( .child(
Label::new(match feedback { div().mr_1().visible_on_hover("feedback_container").child(
ThreadFeedback::Positive => "Thanks for your feedback!", Label::new(match feedback {
ThreadFeedback::Negative => { ThreadFeedback::Positive => "Thanks for your feedback!",
"We appreciate your feedback and will use it to improve." ThreadFeedback::Negative => {
} "We appreciate your feedback and will use it to improve."
}) }
})
.color(Color::Muted) .color(Color::Muted)
.size(LabelSize::XSmall) .size(LabelSize::XSmall)
.truncate(), .truncate())
) )
.child( .child(
h_flex() h_flex()
@ -1603,12 +1605,13 @@ impl ActiveThread {
.into_any_element(), .into_any_element(),
None => feedback_container None => feedback_container
.child( .child(
Label::new( div().mr_1().visible_on_hover("feedback_container").child(
"Rating the thread sends all of your current conversation to the Zed team.", Label::new(
) "Rating the thread sends all of your current conversation to the Zed team.",
.color(Color::Muted) )
.color(Color::Muted)
.size(LabelSize::XSmall) .size(LabelSize::XSmall)
.truncate(), .truncate())
) )
.child( .child(
h_flex() h_flex()
@ -1654,6 +1657,7 @@ impl ActiveThread {
let message_content = has_content.then(|| { let message_content = has_content.then(|| {
v_flex() v_flex()
.w_full()
.gap_1() .gap_1()
.when(!message_is_empty, |parent| { .when(!message_is_empty, |parent| {
parent.child( parent.child(
@ -1677,6 +1681,8 @@ impl ActiveThread {
.on_action(cx.listener(Self::cancel_editing_message)) .on_action(cx.listener(Self::cancel_editing_message))
.on_action(cx.listener(Self::confirm_editing_message)) .on_action(cx.listener(Self::confirm_editing_message))
.min_h_6() .min_h_6()
.flex_grow()
.w_full()
.child(EditorElement::new( .child(EditorElement::new(
&edit_message_editor, &edit_message_editor,
EditorStyle { EditorStyle {
@ -1726,13 +1732,7 @@ impl ActiveThread {
let styled_message = match message.role { let styled_message = match message.role {
Role::User => v_flex() Role::User => v_flex()
.id(("message-container", ix)) .id(("message-container", ix))
.map(|this| { .pt_2()
if is_first_message {
this.pt_2()
} else {
this.pt_4()
}
})
.pl_2() .pl_2()
.pr_2p5() .pr_2p5()
.pb_4() .pb_4()
@ -1746,48 +1746,62 @@ impl ActiveThread {
.border_color(colors.border) .border_color(colors.border)
.hover(|hover| hover.border_color(colors.text_accent.opacity(0.5))) .hover(|hover| hover.border_color(colors.text_accent.opacity(0.5)))
.cursor_pointer() .cursor_pointer()
.child(div().p_2().pt_2p5().children(message_content)) .child(
.when_some(edit_message_editor.clone(), |this, edit_editor| { h_flex()
let focus_handle = edit_editor.focus_handle(cx); .p_2()
.pt_3()
this.child( .gap_1()
h_flex() .children(message_content)
.p_1() .when_some(edit_message_editor.clone(), |this, edit_editor| {
.border_t_1() let edit_editor_clone = edit_editor.clone();
.border_color(colors.border_variant) this.w_full().justify_between().child(
.gap_1() h_flex()
.justify_end() .gap_0p5()
.child( .child(
Button::new("cancel-edit-message", "Cancel") IconButton::new(
.label_size(LabelSize::Small) "cancel-edit-message",
.key_binding( IconName::Close,
KeyBinding::for_action_in(
&menu::Cancel,
&focus_handle,
window,
cx,
) )
.map(|kb| kb.size(rems_from_px(12.))), .shape(ui::IconButtonShape::Square)
.icon_color(Color::Error)
.tooltip(move |window, cx| {
let focus_handle =
edit_editor_clone.focus_handle(cx);
Tooltip::for_action_in(
"Cancel Edit",
&menu::Cancel,
&focus_handle,
window,
cx,
)
})
.on_click(cx.listener(Self::handle_cancel_click)),
) )
.on_click(cx.listener(Self::handle_cancel_click)), .child(
IconButton::new(
"confirm-edit-message",
IconName::Check,
)
.disabled(edit_editor.read(cx).is_empty(cx))
.shape(ui::IconButtonShape::Square)
.icon_color(Color::Success)
.tooltip(move |window, cx| {
let focus_handle = edit_editor.focus_handle(cx);
Tooltip::for_action_in(
"Regenerate",
&menu::Confirm,
&focus_handle,
window,
cx,
)
})
.on_click(
cx.listener(Self::handle_regenerate_click),
),
),
) )
.child( }),
Button::new("confirm-edit-message", "Regenerate") )
.disabled(edit_editor.read(cx).is_empty(cx))
.label_size(LabelSize::Small)
.key_binding(
KeyBinding::for_action_in(
&menu::Confirm,
&focus_handle,
window,
cx,
)
.map(|kb| kb.size(rems_from_px(12.))),
)
.on_click(cx.listener(Self::handle_regenerate_click)),
),
)
})
.when(edit_message_editor.is_none(), |this| { .when(edit_message_editor.is_none(), |this| {
this.tooltip(Tooltip::text("Click To Edit")) this.tooltip(Tooltip::text("Click To Edit"))
}) })