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 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() {
Some(feedback) => feedback_container
.child(
@ -1001,6 +1001,7 @@ impl ActiveThread {
.id(("message-container", ix))
.ml_2()
.pl_2()
.pr_4()
.border_l_1()
.border_color(cx.theme().colors().border_variant)
.child(message_content)
@ -1169,19 +1170,20 @@ impl ActiveThread {
let lighter_border = cx.theme().colors().border.opacity(0.5);
let editor_bg = cx.theme().colors().editor_background;
div().py_2().child(
v_flex()
.rounded_lg()
.border_1()
.border_color(lighter_border)
.child(
h_flex()
.group("disclosure-header")
.justify_between()
.py_1()
.pl_1()
.pr_2()
.px_2()
.bg(cx.theme().colors().editor_foreground.opacity(0.025))
.map(|this| {
if is_open {
if pending || is_open {
this.rounded_t_md()
.border_b_1()
.border_color(lighter_border)
@ -1191,19 +1193,12 @@ impl ActiveThread {
})
.child(
h_flex()
.gap_1()
.child(Disclosure::new("thinking-disclosure", is_open).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;
}
}),
))
.gap_1p5()
.child(
Icon::new(IconName::Brain)
.size(IconSize::XSmall)
.color(Color::Muted),
)
.child({
if pending {
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({
let (icon_name, color, animated) = if pending {
(IconName::ArrowCircle, Color::Accent, true)
@ -1232,14 +1247,17 @@ impl ActiveThread {
(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 {
icon.with_animation(
"arrow-circle",
Animation::new(Duration::from_secs(2)).repeat(),
|icon, delta| {
icon.transform(Transformation::rotate(percentage(delta)))
icon.transform(Transformation::rotate(percentage(
delta,
)))
},
)
.into_any_element()
@ -1247,6 +1265,7 @@ impl ActiveThread {
icon.into_any_element()
}
}),
),
)
.when(pending && !is_open, |this| {
let gradient_overlay = div()
@ -1267,13 +1286,13 @@ impl ActiveThread {
.relative()
.bg(editor_bg)
.rounded_b_lg()
.text_ui_sm(cx)
.child(
div()
.id(("thinking-content", ix))
.p_2()
.h_20()
.track_scroll(scroll_handle)
.text_ui_sm(cx)
.child(markdown.clone())
.overflow_hidden(),
)
@ -1291,7 +1310,8 @@ impl ActiveThread {
.text_ui_sm(cx)
.child(markdown.clone()),
)
})
}),
)
}
fn render_tool_use(&self, tool_use: ToolUse, cx: &mut Context<Self>) -> impl IntoElement {
@ -1318,7 +1338,7 @@ impl ActiveThread {
_ => IconName::Terminal,
};
div().py_2().pr_4().child(
div().py_2().child(
v_flex()
.rounded_lg()
.border_1()