thread view: Add a few UI tweaks (#36845)

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-08-25 08:18:23 -03:00 committed by GitHub
parent fe5e81203f
commit dfc99de7b8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 43 additions and 49 deletions

View file

@ -1 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M12.286 6H7.048C6.469 6 6 6.469 6 7.048v5.238c0 .578.469 1.047 1.048 1.047h5.238c.578 0 1.047-.469 1.047-1.047V7.048c0-.579-.469-1.048-1.047-1.048Z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M3.714 10a1.05 1.05 0 0 1-1.047-1.048V3.714a1.05 1.05 0 0 1 1.047-1.047h5.238A1.05 1.05 0 0 1 10 3.714"/></svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.486 6.2H7.24795C6.66895 6.2 6.19995 6.669 6.19995 7.248V12.486C6.19995 13.064 6.66895 13.533 7.24795 13.533H12.486C13.064 13.533 13.533 13.064 13.533 12.486V7.248C13.533 6.669 13.064 6.2 12.486 6.2Z" stroke="black" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.91712 10.203C3.63951 10.2022 3.37351 10.0915 3.1773 9.89511C2.98109 9.69872 2.87064 9.43261 2.87012 9.155V3.917C2.87091 3.63956 2.98147 3.37371 3.17765 3.17753C3.37383 2.98135 3.63968 2.87079 3.91712 2.87H9.15512C9.43273 2.87053 9.69883 2.98097 9.89523 3.17718C10.0916 3.37339 10.2023 3.63939 10.2031 3.917" stroke="black" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 515 B

After

Width:  |  Height:  |  Size: 802 B

Before After
Before After

View file

@ -1306,7 +1306,11 @@ impl AcpThreadView {
v_flex()
.id(("user_message", entry_ix))
.pt_2()
.map(|this| if rules_item.is_some() {
this.pt_3()
} else {
this.pt_2()
})
.pb_4()
.px_2()
.gap_1p5()
@ -1315,6 +1319,7 @@ impl AcpThreadView {
.children(message.id.clone().and_then(|message_id| {
message.checkpoint.as_ref()?.show.then(|| {
h_flex()
.px_3()
.gap_2()
.child(Divider::horizontal())
.child(
@ -1492,9 +1497,7 @@ impl AcpThreadView {
.child(self.render_thread_controls(cx))
.when_some(
self.thread_feedback.comments_editor.clone(),
|this, editor| {
this.child(Self::render_feedback_feedback_editor(editor, window, cx))
},
|this, editor| this.child(Self::render_feedback_feedback_editor(editor, cx)),
)
.into_any_element()
} else {
@ -1725,6 +1728,7 @@ impl AcpThreadView {
tool_call.status,
ToolCallStatus::Rejected | ToolCallStatus::Canceled | ToolCallStatus::Failed
);
let needs_confirmation = matches!(
tool_call.status,
ToolCallStatus::WaitingForConfirmation { .. }
@ -1742,7 +1746,7 @@ impl AcpThreadView {
.absolute()
.top_0()
.right_0()
.w_16()
.w_12()
.h_full()
.bg(linear_gradient(
90.,
@ -1902,7 +1906,7 @@ impl AcpThreadView {
.into_any()
}),
)
.when(in_progress && use_card_layout, |this| {
.when(in_progress && use_card_layout && !is_open, |this| {
this.child(
div().absolute().right_2().child(
Icon::new(IconName::ArrowCircle)
@ -2460,7 +2464,6 @@ impl AcpThreadView {
Some(
h_flex()
.px_2p5()
.pb_1()
.child(
Icon::new(IconName::Attach)
.size(IconSize::XSmall)
@ -2476,8 +2479,7 @@ impl AcpThreadView {
Label::new(user_rules_text)
.size(LabelSize::XSmall)
.color(Color::Muted)
.truncate()
.buffer_font(cx),
.truncate(),
)
.hover(|s| s.bg(cx.theme().colors().element_hover))
.tooltip(Tooltip::text("View User Rules"))
@ -2491,7 +2493,13 @@ impl AcpThreadView {
}),
)
})
.when(has_both, |this| this.child(Divider::vertical()))
.when(has_both, |this| {
this.child(
Label::new("")
.size(LabelSize::XSmall)
.color(Color::Disabled),
)
})
.when_some(rules_file_text, |parent, rules_file_text| {
parent.child(
h_flex()
@ -2500,8 +2508,7 @@ impl AcpThreadView {
.child(
Label::new(rules_file_text)
.size(LabelSize::XSmall)
.color(Color::Muted)
.buffer_font(cx),
.color(Color::Muted),
)
.hover(|s| s.bg(cx.theme().colors().element_hover))
.tooltip(Tooltip::text("View Project Rules"))
@ -3078,13 +3085,13 @@ impl AcpThreadView {
h_flex()
.p_1()
.justify_between()
.flex_wrap()
.when(expanded, |this| {
this.border_b_1().border_color(cx.theme().colors().border)
})
.child(
h_flex()
.id("edits-container")
.w_full()
.gap_1()
.child(Disclosure::new("edits-disclosure", expanded))
.map(|this| {
@ -4177,13 +4184,8 @@ impl AcpThreadView {
container.child(open_as_markdown).child(scroll_to_top)
}
fn render_feedback_feedback_editor(
editor: Entity<Editor>,
window: &mut Window,
cx: &Context<Self>,
) -> Div {
let focus_handle = editor.focus_handle(cx);
v_flex()
fn render_feedback_feedback_editor(editor: Entity<Editor>, cx: &Context<Self>) -> Div {
h_flex()
.key_context("AgentFeedbackMessageEditor")
.on_action(cx.listener(move |this, _: &menu::Cancel, _, cx| {
this.thread_feedback.dismiss_comments();
@ -4192,43 +4194,31 @@ impl AcpThreadView {
.on_action(cx.listener(move |this, _: &menu::Confirm, _window, cx| {
this.submit_feedback_message(cx);
}))
.mb_2()
.mx_4()
.p_2()
.mb_2()
.mx_5()
.gap_1()
.rounded_md()
.border_1()
.border_color(cx.theme().colors().border)
.bg(cx.theme().colors().editor_background)
.child(editor)
.child(div().w_full().child(editor))
.child(
h_flex()
.gap_1()
.justify_end()
.child(
Button::new("dismiss-feedback-message", "Cancel")
.label_size(LabelSize::Small)
.key_binding(
KeyBinding::for_action_in(&menu::Cancel, &focus_handle, window, cx)
.map(|kb| kb.size(rems_from_px(10.))),
)
IconButton::new("dismiss-feedback-message", IconName::Close)
.icon_color(Color::Error)
.icon_size(IconSize::XSmall)
.shape(ui::IconButtonShape::Square)
.on_click(cx.listener(move |this, _, _window, cx| {
this.thread_feedback.dismiss_comments();
cx.notify();
})),
)
.child(
Button::new("submit-feedback-message", "Share Feedback")
.style(ButtonStyle::Tinted(ui::TintColor::Accent))
.label_size(LabelSize::Small)
.key_binding(
KeyBinding::for_action_in(
&menu::Confirm,
&focus_handle,
window,
cx,
)
.map(|kb| kb.size(rems_from_px(10.))),
)
IconButton::new("submit-feedback-message", IconName::Return)
.icon_size(IconSize::XSmall)
.shape(ui::IconButtonShape::Square)
.on_click(cx.listener(move |this, _, _window, cx| {
this.submit_feedback_message(cx);
})),

View file

@ -1085,10 +1085,10 @@ impl Element for MarkdownElement {
);
el.child(
h_flex()
.w_5()
.w_4()
.absolute()
.top_1()
.right_1()
.top_1p5()
.right_1p5()
.justify_end()
.child(codeblock),
)
@ -1115,11 +1115,12 @@ impl Element for MarkdownElement {
cx,
);
el.child(
div()
h_flex()
.w_4()
.absolute()
.top_0()
.right_0()
.w_5()
.justify_end()
.visible_on_hover("code_block")
.child(codeblock),
)