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

assistant2: Improve tool card header scrolling affordance (#27492)

Browse source 
Follow up to https://github.com/zed-industries/zed/pull/27489

Added this subtle gradient to the right side of the tool card header so
users know there is more content, suggesting it can be scrolled. Also
took the opportunity to extract out commonly used custom colors in all
of these cards into their own functions to ensure consistency.

Here's the final product:


https://github.com/user-attachments/assets/e44150f9-7751-46c7-8790-149b86cc5e0f

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-03-26 09:45:51 -03:00 • committed by GitHub
parent 64b3eea3cd
commit 39af3b434a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 31 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -12,9 +12,9 @@ use editor::{Editor, MultiBuffer};
use gpui::{ use gpui::{
linear_color_stop, linear_gradient, list, percentage, pulsating_between, AbsoluteLength, linear_color_stop, linear_gradient, list, percentage, pulsating_between, AbsoluteLength,
Animation, AnimationExt, AnyElement, App, ClickEvent, DefiniteLength, EdgesRefinement, Empty, Animation, AnimationExt, AnyElement, App, ClickEvent, DefiniteLength, EdgesRefinement, Empty,
Entity, Focusable, Length, ListAlignment, ListOffset, ListState, ScrollHandle, StyleRefinement, Entity, Focusable, Hsla, Length, ListAlignment, ListOffset, ListState, ScrollHandle,
Subscription, Task, TextStyleRefinement, Transformation, UnderlineStyle, WeakEntity, StyleRefinement, Subscription, Task, TextStyleRefinement, Transformation, UnderlineStyle,
WindowHandle, WeakEntity, WindowHandle,
}; };
use language::{Buffer, LanguageRegistry}; use language::{Buffer, LanguageRegistry};
use language_model::{LanguageModelRegistry, LanguageModelToolUseId, Role}; use language_model::{LanguageModelRegistry, LanguageModelToolUseId, Role};
@ -1145,6 +1145,17 @@ impl ActiveThread {
) )
} }
fn tool_card_border_color(&self, cx: &Context<Self>) -> Hsla {
cx.theme().colors().border.opacity(0.5)
}
fn tool_card_header_bg(&self, cx: &Context<Self>) -> Hsla {
cx.theme()
.colors()
.element_background
.blend(cx.theme().colors().editor_foreground.opacity(0.025))
}
fn render_message_thinking_segment( fn render_message_thinking_segment(
&self, &self,
message_id: MessageId, message_id: MessageId,
@ -1160,26 +1171,25 @@ impl ActiveThread {
.copied() .copied()
.unwrap_or_default(); .unwrap_or_default();
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( div().py_2().child(
v_flex() v_flex()
.rounded_lg() .rounded_lg()
.border_1() .border_1()
.border_color(lighter_border) .border_color(self.tool_card_border_color(cx))
.child( .child(
h_flex() h_flex()
.group("disclosure-header") .group("disclosure-header")
.justify_between() .justify_between()
.py_1() .py_1()
.px_2() .px_2()
.bg(cx.theme().colors().editor_foreground.opacity(0.025)) .bg(self.tool_card_header_bg(cx))
.map(|this| { .map(|this| {
if pending || 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(self.tool_card_border_color(cx))
} else { } else {
this.rounded_md() this.rounded_md()
} }
@ -1314,22 +1324,21 @@ impl ActiveThread {
.copied() .copied()
.unwrap_or_default(); .unwrap_or_default();
let lighter_border = cx.theme().colors().border.opacity(0.5);
div().py_2().child( div().py_2().child(
v_flex() v_flex()
.rounded_lg() .rounded_lg()
.border_1() .border_1()
.border_color(lighter_border) .border_color(self.tool_card_border_color(cx))
.overflow_hidden() .overflow_hidden()
.child( .child(
h_flex() h_flex()
.group("disclosure-header") .group("disclosure-header")
.relative()
.gap_1p5() .gap_1p5()
.justify_between() .justify_between()
.py_1() .py_1()
.px_2() .px_2()
.bg(cx.theme().colors().editor_foreground.opacity(0.025)) .bg(self.tool_card_header_bg(cx))
.map(|element| { .map(|element| {
if is_open { if is_open {
element.border_b_1().rounded_t_md() element.border_b_1().rounded_t_md()
@ -1337,7 +1346,7 @@ impl ActiveThread {
element.rounded_md() element.rounded_md()
} }
}) })
.border_color(lighter_border) .border_color(self.tool_card_border_color(cx))
.child( .child(
h_flex() h_flex()
.id("tool-label-container") .id("tool-label-container")
@ -1350,7 +1359,7 @@ impl ActiveThread {
.size(IconSize::XSmall) .size(IconSize::XSmall)
.color(Color::Muted), .color(Color::Muted),
) )
.child(h_flex().text_ui_sm(cx).children( .child(h_flex().pr_8().text_ui_sm(cx).children(
self.rendered_tool_use_labels.get(&tool_use.id).cloned(), self.rendered_tool_use_labels.get(&tool_use.id).cloned(),
)), )),
) )
@ -1410,7 +1419,14 @@ impl ActiveThread {
icon.into_any_element() icon.into_any_element()
} }
}), }),
), )
.child(div().h_full().absolute().w_8().bottom_0().right_12().bg(
linear_gradient(
90.,
linear_color_stop(self.tool_card_header_bg(cx), 1.),
linear_color_stop(self.tool_card_header_bg(cx).opacity(0.2), 0.),
),
)),
) )
.map(|parent| { .map(|parent| {
if !is_open { if !is_open {
@ -1427,7 +1443,7 @@ impl ActiveThread {
.child( .child(
content_container() content_container()
.border_b_1() .border_b_1()
.border_color(lighter_border) .border_color(self.tool_card_border_color(cx))
.child( .child(
Label::new("Input") Label::new("Input")
.size(LabelSize::XSmall) .size(LabelSize::XSmall)