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

assistant2: Polish the thinking card (#27363)

Browse source 
Mostly just adjusting spacing and making it consistent with how we
display other tool calls.

<img
src="https://github.com/user-attachments/assets/85892006-9029-4cb8-b805-bebe4232e458"
width="600px" />

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-03-24 10:08:49 -03:00 • committed by GitHub
parent 4e33aaa55c
commit 7db9077835
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 139 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

64
crates/assistant2/src/active_thread.rs
View file

@ -752,7 +752,7 @@ impl ActiveThread {
let editor_bg_color = colors.editor_background; let editor_bg_color = colors.editor_background;
let bg_user_message_header = editor_bg_color.blend(active_color.opacity(0.25)); let bg_user_message_header = editor_bg_color.blend(active_color.opacity(0.25));
let feedback_container = h_flex().pb_4().px_4().gap_1().justify_between(); let feedback_container = h_flex().pt_2().pb_4().px_4().gap_1().justify_between();
let feedback_items = match self.thread.read(cx).feedback() { let feedback_items = match self.thread.read(cx).feedback() {
Some(feedback) => feedback_container Some(feedback) => feedback_container
.child( .child(
@ -1001,6 +1001,7 @@ impl ActiveThread {
.id(("message-container", ix)) .id(("message-container", ix))
.ml_2() .ml_2()
.pl_2() .pl_2()
.pr_4()
.border_l_1() .border_l_1()
.border_color(cx.theme().colors().border_variant) .border_color(cx.theme().colors().border_variant)
.child(message_content) .child(message_content)
@ -1169,19 +1170,20 @@ impl ActiveThread {
let lighter_border = cx.theme().colors().border.opacity(0.5); let lighter_border = cx.theme().colors().border.opacity(0.5);
let editor_bg = cx.theme().colors().editor_background; let editor_bg = cx.theme().colors().editor_background;
div().py_2().child(
v_flex() v_flex()
.rounded_lg() .rounded_lg()
.border_1() .border_1()
.border_color(lighter_border) .border_color(lighter_border)
.child( .child(
h_flex() h_flex()
.group("disclosure-header")
.justify_between() .justify_between()
.py_1() .py_1()
.pl_1() .px_2()
.pr_2()
.bg(cx.theme().colors().editor_foreground.opacity(0.025)) .bg(cx.theme().colors().editor_foreground.opacity(0.025))
.map(|this| { .map(|this| {
if is_open { if pending || is_open {
this.rounded_t_md() this.rounded_t_md()
.border_b_1() .border_b_1()
.border_color(lighter_border) .border_color(lighter_border)
@ -1191,19 +1193,12 @@ impl ActiveThread {
}) })
.child( .child(
h_flex() h_flex()
.gap_1() .gap_1p5()
.child(Disclosure::new("thinking-disclosure", is_open).on_click( .child(
cx.listener({ Icon::new(IconName::Brain)
move |this, _event, _window, _cx| { .size(IconSize::XSmall)
let is_open = this .color(Color::Muted),
.expanded_thinking_segments )
.entry((message_id, ix))
.or_insert(false);
*is_open = !*is_open;
}
}),
))
.child({ .child({
if pending { if pending {
Label::new("Thinking…") Label::new("Thinking…")
@ -1225,6 +1220,26 @@ impl ActiveThread {
} }
}), }),
) )
.child(
h_flex()
.gap_1()
.child(
div().visible_on_hover("disclosure-header").child(
Disclosure::new("thinking-disclosure", is_open)
.opened_icon(IconName::ChevronUp)
.closed_icon(IconName::ChevronDown)
.on_click(cx.listener({
move |this, _event, _window, _cx| {
let is_open = this
.expanded_thinking_segments
.entry((message_id, ix))
.or_insert(false);
*is_open = !*is_open;
}
})),
),
)
.child({ .child({
let (icon_name, color, animated) = if pending { let (icon_name, color, animated) = if pending {
(IconName::ArrowCircle, Color::Accent, true) (IconName::ArrowCircle, Color::Accent, true)
@ -1232,14 +1247,17 @@ impl ActiveThread {
(IconName::Check, Color::Success, false) (IconName::Check, Color::Success, false)
}; };
let icon = Icon::new(icon_name).color(color).size(IconSize::Small); let icon =
Icon::new(icon_name).color(color).size(IconSize::Small);
if animated { if animated {
icon.with_animation( icon.with_animation(
"arrow-circle", "arrow-circle",
Animation::new(Duration::from_secs(2)).repeat(), Animation::new(Duration::from_secs(2)).repeat(),
|icon, delta| { |icon, delta| {
icon.transform(Transformation::rotate(percentage(delta))) icon.transform(Transformation::rotate(percentage(
delta,
)))
}, },
) )
.into_any_element() .into_any_element()
@ -1247,6 +1265,7 @@ impl ActiveThread {
icon.into_any_element() icon.into_any_element()
} }
}), }),
),
) )
.when(pending && !is_open, |this| { .when(pending && !is_open, |this| {
let gradient_overlay = div() let gradient_overlay = div()
@ -1267,13 +1286,13 @@ impl ActiveThread {
.relative() .relative()
.bg(editor_bg) .bg(editor_bg)
.rounded_b_lg() .rounded_b_lg()
.text_ui_sm(cx)
.child( .child(
div() div()
.id(("thinking-content", ix)) .id(("thinking-content", ix))
.p_2() .p_2()
.h_20() .h_20()
.track_scroll(scroll_handle) .track_scroll(scroll_handle)
.text_ui_sm(cx)
.child(markdown.clone()) .child(markdown.clone())
.overflow_hidden(), .overflow_hidden(),
) )
@ -1291,7 +1310,8 @@ impl ActiveThread {
.text_ui_sm(cx) .text_ui_sm(cx)
.child(markdown.clone()), .child(markdown.clone()),
) )
}) }),
)
} }
fn render_tool_use(&self, tool_use: ToolUse, cx: &mut Context<Self>) -> impl IntoElement { fn render_tool_use(&self, tool_use: ToolUse, cx: &mut Context<Self>) -> impl IntoElement {
@ -1318,7 +1338,7 @@ impl ActiveThread {
_ => IconName::Terminal, _ => IconName::Terminal,
}; };
div().py_2().pr_4().child( div().py_2().child(
v_flex() v_flex()
.rounded_lg() .rounded_lg()
.border_1() .border_1()