assistant2: Refine thread design (#26783)
Just some light design polish while we're in-flight with this. <img src="https://github.com/user-attachments/assets/40a68fe6-f37e-4df1-b669-824c7dd8ff11" width="600px" /> --- Release Notes: - N/A
This commit is contained in:
Danilo Leal
GitHub
parent
f68a475eca
commit
21057e3af7
3 changed files with 71 additions and 52 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M3 4H8" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
|
<path d="M3 4H8" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<path d="M6 10L11 10" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
|
<path d="M6 10L11 10" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<circle cx="4" cy="10" r="1.875" stroke="black" stroke-width="1.75"/>
|
<circle cx="4" cy="10" r="1.875" stroke="black" stroke-width="1.5"/>
|
||||||
<circle cx="10" cy="4" r="1.875" stroke="black" stroke-width="1.75"/>
|
<circle cx="10" cy="4" r="1.875" stroke="black" stroke-width="1.5"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 450 B After Width: | Height: | Size: 446 B |
|
|
@ -691,12 +691,13 @@ impl ActiveThread {
|
||||||
.copied()
|
.copied()
|
||||||
.unwrap_or_default();
|
.unwrap_or_default();
|
||||||
|
|
||||||
|
let lighter_border = cx.theme().colors().border.opacity(0.5);
|
||||||
|
|
||||||
div().px_2p5().child(
|
div().px_2p5().child(
|
||||||
v_flex()
|
v_flex()
|
||||||
.gap_1()
|
|
||||||
.rounded_lg()
|
.rounded_lg()
|
||||||
.border_1()
|
.border_1()
|
||||||
.border_color(cx.theme().colors().border)
|
.border_color(lighter_border)
|
||||||
.child(
|
.child(
|
||||||
h_flex()
|
h_flex()
|
||||||
.justify_between()
|
.justify_between()
|
||||||
|
|
@ -711,7 +712,7 @@ impl ActiveThread {
|
||||||
element.rounded_md()
|
element.rounded_md()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.border_color(cx.theme().colors().border)
|
.border_color(lighter_border)
|
||||||
.child(
|
.child(
|
||||||
h_flex()
|
h_flex()
|
||||||
.gap_1()
|
.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({
|
.child({
|
||||||
let (icon_name, color, animated) = match &tool_use.status {
|
let (icon_name, color, animated) = match &tool_use.status {
|
||||||
|
|
@ -765,39 +770,60 @@ impl ActiveThread {
|
||||||
return parent;
|
return parent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let content_container = || v_flex().py_1().gap_0p5().px_2p5();
|
||||||
|
|
||||||
parent.child(
|
parent.child(
|
||||||
v_flex()
|
v_flex()
|
||||||
|
.gap_1()
|
||||||
|
.bg(cx.theme().colors().editor_background)
|
||||||
|
.rounded_b_lg()
|
||||||
.child(
|
.child(
|
||||||
v_flex()
|
content_container()
|
||||||
.gap_0p5()
|
|
||||||
.py_1()
|
|
||||||
.px_2p5()
|
|
||||||
.border_b_1()
|
.border_b_1()
|
||||||
.border_color(cx.theme().colors().border)
|
.border_color(lighter_border)
|
||||||
.child(Label::new("Input:"))
|
.child(
|
||||||
.child(Label::new(
|
Label::new("Input")
|
||||||
|
.size(LabelSize::XSmall)
|
||||||
|
.color(Color::Muted)
|
||||||
|
.buffer_font(cx),
|
||||||
|
)
|
||||||
|
.child(
|
||||||
|
Label::new(
|
||||||
serde_json::to_string_pretty(&tool_use.input)
|
serde_json::to_string_pretty(&tool_use.input)
|
||||||
.unwrap_or_default(),
|
.unwrap_or_default(),
|
||||||
)),
|
|
||||||
)
|
)
|
||||||
.map(|parent| match tool_use.status {
|
.size(LabelSize::Small)
|
||||||
ToolUseStatus::Finished(output) => parent.child(
|
.buffer_font(cx),
|
||||||
v_flex()
|
|
||||||
.gap_0p5()
|
|
||||||
.py_1()
|
|
||||||
.px_2p5()
|
|
||||||
.child(Label::new("Result:"))
|
|
||||||
.child(Label::new(output)),
|
|
||||||
),
|
),
|
||||||
ToolUseStatus::Error(err) => parent.child(
|
)
|
||||||
v_flex()
|
.map(|container| match tool_use.status {
|
||||||
.gap_0p5()
|
ToolUseStatus::Finished(output) => container.child(
|
||||||
.py_1()
|
content_container()
|
||||||
.px_2p5()
|
.child(
|
||||||
.child(Label::new("Error:"))
|
Label::new("Result")
|
||||||
.child(Label::new(err)),
|
.size(LabelSize::XSmall)
|
||||||
|
.color(Color::Muted)
|
||||||
|
.buffer_font(cx),
|
||||||
|
)
|
||||||
|
.child(
|
||||||
|
Label::new(output)
|
||||||
|
.size(LabelSize::Small)
|
||||||
|
.buffer_font(cx),
|
||||||
),
|
),
|
||||||
ToolUseStatus::Pending | ToolUseStatus::Running => parent,
|
),
|
||||||
|
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 => container,
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
}),
|
}),
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ use std::sync::Arc;
|
||||||
use assistant_tool::{ToolSource, ToolWorkingSet};
|
use assistant_tool::{ToolSource, ToolWorkingSet};
|
||||||
use gpui::Entity;
|
use gpui::Entity;
|
||||||
use scripting_tool::ScriptingTool;
|
use scripting_tool::ScriptingTool;
|
||||||
use ui::{prelude::*, ContextMenu, IconButtonShape, PopoverMenu, Tooltip};
|
use ui::{prelude::*, ContextMenu, PopoverMenu, Tooltip};
|
||||||
|
|
||||||
pub struct ToolSelector {
|
pub struct ToolSelector {
|
||||||
tools: Arc<ToolWorkingSet>,
|
tools: Arc<ToolWorkingSet>,
|
||||||
|
|
@ -24,12 +24,7 @@ impl ToolSelector {
|
||||||
let tools_by_source = self.tools.tools_by_source(cx);
|
let tools_by_source = self.tools.tools_by_source(cx);
|
||||||
|
|
||||||
let all_tools_enabled = self.tools.are_all_tools_enabled();
|
let all_tools_enabled = self.tools.are_all_tools_enabled();
|
||||||
menu = menu.header("Tools").toggleable_entry(
|
menu = menu.toggleable_entry("All Tools", all_tools_enabled, icon_position, None, {
|
||||||
"All Tools",
|
|
||||||
all_tools_enabled,
|
|
||||||
icon_position,
|
|
||||||
None,
|
|
||||||
{
|
|
||||||
let tools = self.tools.clone();
|
let tools = self.tools.clone();
|
||||||
move |_window, cx| {
|
move |_window, cx| {
|
||||||
if all_tools_enabled {
|
if all_tools_enabled {
|
||||||
|
|
@ -38,8 +33,7 @@ impl ToolSelector {
|
||||||
tools.enable_all_tools();
|
tools.enable_all_tools();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
});
|
||||||
);
|
|
||||||
|
|
||||||
for (source, tools) in tools_by_source {
|
for (source, tools) in tools_by_source {
|
||||||
let mut tools = tools
|
let mut tools = tools
|
||||||
|
|
@ -63,7 +57,7 @@ impl ToolSelector {
|
||||||
}
|
}
|
||||||
|
|
||||||
menu = match &source {
|
menu = match &source {
|
||||||
ToolSource::Native => menu.header("Zed"),
|
ToolSource::Native => menu.separator().header("Zed Tools"),
|
||||||
ToolSource::ContextServer { id } => {
|
ToolSource::ContextServer { id } => {
|
||||||
let all_tools_from_source_enabled =
|
let all_tools_from_source_enabled =
|
||||||
self.tools.are_all_tools_from_source_enabled(&source);
|
self.tools.are_all_tools_from_source_enabled(&source);
|
||||||
|
|
@ -124,7 +118,6 @@ impl Render for ToolSelector {
|
||||||
})
|
})
|
||||||
.trigger_with_tooltip(
|
.trigger_with_tooltip(
|
||||||
IconButton::new("tool-selector-button", IconName::SettingsAlt)
|
IconButton::new("tool-selector-button", IconName::SettingsAlt)
|
||||||
.shape(IconButtonShape::Square)
|
|
||||||
.icon_size(IconSize::Small)
|
.icon_size(IconSize::Small)
|
||||||
.icon_color(Color::Muted),
|
.icon_color(Color::Muted),
|
||||||
Tooltip::text("Customize Tools"),
|
Tooltip::text("Customize Tools"),
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue