From 21057e3af7364bb7ce9cda99a90297c0188d7a58 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Fri, 14 Mar 2025 12:09:24 -0300
Subject: [PATCH] assistant2: Refine thread design (#26783)
Just some light design polish while we're in-flight with this.
---
Release Notes:
- N/A
---
assets/icons/settings_alt.svg | 8 +--
crates/assistant2/src/active_thread.rs | 86 +++++++++++++++++---------
crates/assistant2/src/tool_selector.rs | 29 ++++-----
3 files changed, 71 insertions(+), 52 deletions(-)
diff --git a/assets/icons/settings_alt.svg b/assets/icons/settings_alt.svg
index 36c3feccfe..a5fb4171d5 100644
--- a/assets/icons/settings_alt.svg
+++ b/assets/icons/settings_alt.svg
@@ -1,6 +1,6 @@
diff --git a/crates/assistant2/src/active_thread.rs b/crates/assistant2/src/active_thread.rs
index c5b72e5f44..98cd8ac019 100644
--- a/crates/assistant2/src/active_thread.rs
+++ b/crates/assistant2/src/active_thread.rs
@@ -691,12 +691,13 @@ impl ActiveThread {
.copied()
.unwrap_or_default();
+ let lighter_border = cx.theme().colors().border.opacity(0.5);
+
div().px_2p5().child(
v_flex()
- .gap_1()
.rounded_lg()
.border_1()
- .border_color(cx.theme().colors().border)
+ .border_color(lighter_border)
.child(
h_flex()
.justify_between()
@@ -711,7 +712,7 @@ impl ActiveThread {
element.rounded_md()
}
})
- .border_color(cx.theme().colors().border)
+ .border_color(lighter_border)
.child(
h_flex()
.gap_1()
@@ -728,7 +729,11 @@ impl ActiveThread {
}
}),
))
- .child(Label::new(tool_use.name)),
+ .child(
+ Label::new(tool_use.name)
+ .size(LabelSize::Small)
+ .buffer_font(cx),
+ ),
)
.child({
let (icon_name, color, animated) = match &tool_use.status {
@@ -765,39 +770,60 @@ impl ActiveThread {
return parent;
}
+ let content_container = || v_flex().py_1().gap_0p5().px_2p5();
+
parent.child(
v_flex()
+ .gap_1()
+ .bg(cx.theme().colors().editor_background)
+ .rounded_b_lg()
.child(
- v_flex()
- .gap_0p5()
- .py_1()
- .px_2p5()
+ content_container()
.border_b_1()
- .border_color(cx.theme().colors().border)
- .child(Label::new("Input:"))
- .child(Label::new(
- serde_json::to_string_pretty(&tool_use.input)
- .unwrap_or_default(),
- )),
+ .border_color(lighter_border)
+ .child(
+ Label::new("Input")
+ .size(LabelSize::XSmall)
+ .color(Color::Muted)
+ .buffer_font(cx),
+ )
+ .child(
+ Label::new(
+ serde_json::to_string_pretty(&tool_use.input)
+ .unwrap_or_default(),
+ )
+ .size(LabelSize::Small)
+ .buffer_font(cx),
+ ),
)
- .map(|parent| match tool_use.status {
- ToolUseStatus::Finished(output) => parent.child(
- v_flex()
- .gap_0p5()
- .py_1()
- .px_2p5()
- .child(Label::new("Result:"))
- .child(Label::new(output)),
+ .map(|container| match tool_use.status {
+ ToolUseStatus::Finished(output) => container.child(
+ content_container()
+ .child(
+ Label::new("Result")
+ .size(LabelSize::XSmall)
+ .color(Color::Muted)
+ .buffer_font(cx),
+ )
+ .child(
+ Label::new(output)
+ .size(LabelSize::Small)
+ .buffer_font(cx),
+ ),
),
- ToolUseStatus::Error(err) => parent.child(
- v_flex()
- .gap_0p5()
- .py_1()
- .px_2p5()
- .child(Label::new("Error:"))
- .child(Label::new(err)),
+ ToolUseStatus::Error(err) => container.child(
+ content_container()
+ .child(
+ Label::new("Error")
+ .size(LabelSize::XSmall)
+ .color(Color::Muted)
+ .buffer_font(cx),
+ )
+ .child(
+ Label::new(err).size(LabelSize::Small).buffer_font(cx),
+ ),
),
- ToolUseStatus::Pending | ToolUseStatus::Running => parent,
+ ToolUseStatus::Pending | ToolUseStatus::Running => container,
}),
)
}),
diff --git a/crates/assistant2/src/tool_selector.rs b/crates/assistant2/src/tool_selector.rs
index 66de072043..c1fb763ec8 100644
--- a/crates/assistant2/src/tool_selector.rs
+++ b/crates/assistant2/src/tool_selector.rs
@@ -3,7 +3,7 @@ use std::sync::Arc;
use assistant_tool::{ToolSource, ToolWorkingSet};
use gpui::Entity;
use scripting_tool::ScriptingTool;
-use ui::{prelude::*, ContextMenu, IconButtonShape, PopoverMenu, Tooltip};
+use ui::{prelude::*, ContextMenu, PopoverMenu, Tooltip};
pub struct ToolSelector {
tools: Arc,
@@ -24,22 +24,16 @@ impl ToolSelector {
let tools_by_source = self.tools.tools_by_source(cx);
let all_tools_enabled = self.tools.are_all_tools_enabled();
- menu = menu.header("Tools").toggleable_entry(
- "All Tools",
- all_tools_enabled,
- icon_position,
- None,
- {
- let tools = self.tools.clone();
- move |_window, cx| {
- if all_tools_enabled {
- tools.disable_all_tools(cx);
- } else {
- tools.enable_all_tools();
- }
+ menu = menu.toggleable_entry("All Tools", all_tools_enabled, icon_position, None, {
+ let tools = self.tools.clone();
+ move |_window, cx| {
+ if all_tools_enabled {
+ tools.disable_all_tools(cx);
+ } else {
+ tools.enable_all_tools();
}
- },
- );
+ }
+ });
for (source, tools) in tools_by_source {
let mut tools = tools
@@ -63,7 +57,7 @@ impl ToolSelector {
}
menu = match &source {
- ToolSource::Native => menu.header("Zed"),
+ ToolSource::Native => menu.separator().header("Zed Tools"),
ToolSource::ContextServer { id } => {
let all_tools_from_source_enabled =
self.tools.are_all_tools_from_source_enabled(&source);
@@ -124,7 +118,6 @@ impl Render for ToolSelector {
})
.trigger_with_tooltip(
IconButton::new("tool-selector-button", IconName::SettingsAlt)
- .shape(IconButtonShape::Square)
.icon_size(IconSize::Small)
.icon_color(Color::Muted),
Tooltip::text("Customize Tools"),