thread view: Add small refinements to tool call UI (#36723)
Release Notes: - N/A
This commit is contained in:
Danilo Leal
Joseph T. Lyons
parent
14a50e2b23
commit
52d14c4473
2 changed files with 38 additions and 31 deletions
|
|
@ -1372,7 +1372,7 @@ impl AcpThreadView {
|
||||||
AgentThreadEntry::ToolCall(tool_call) => {
|
AgentThreadEntry::ToolCall(tool_call) => {
|
||||||
let has_terminals = tool_call.terminals().next().is_some();
|
let has_terminals = tool_call.terminals().next().is_some();
|
||||||
|
|
||||||
div().w_full().py_1p5().px_5().map(|this| {
|
div().w_full().py_1().px_5().map(|this| {
|
||||||
if has_terminals {
|
if has_terminals {
|
||||||
this.children(tool_call.terminals().map(|terminal| {
|
this.children(tool_call.terminals().map(|terminal| {
|
||||||
self.render_terminal_tool_call(
|
self.render_terminal_tool_call(
|
||||||
|
|
@ -1570,7 +1570,7 @@ impl AcpThreadView {
|
||||||
.size(IconSize::Small)
|
.size(IconSize::Small)
|
||||||
.color(Color::Muted);
|
.color(Color::Muted);
|
||||||
|
|
||||||
let base_container = h_flex().size_4().justify_center();
|
let base_container = h_flex().flex_shrink_0().size_4().justify_center();
|
||||||
|
|
||||||
if is_collapsible {
|
if is_collapsible {
|
||||||
base_container
|
base_container
|
||||||
|
|
@ -1623,20 +1623,32 @@ impl AcpThreadView {
|
||||||
| ToolCallStatus::WaitingForConfirmation { .. }
|
| ToolCallStatus::WaitingForConfirmation { .. }
|
||||||
| ToolCallStatus::Completed => None,
|
| ToolCallStatus::Completed => None,
|
||||||
ToolCallStatus::InProgress => Some(
|
ToolCallStatus::InProgress => Some(
|
||||||
Icon::new(IconName::ArrowCircle)
|
div()
|
||||||
.color(Color::Muted)
|
.absolute()
|
||||||
.size(IconSize::Small)
|
.right_2()
|
||||||
.with_animation(
|
.child(
|
||||||
"running",
|
Icon::new(IconName::ArrowCircle)
|
||||||
Animation::new(Duration::from_secs(3)).repeat(),
|
.color(Color::Muted)
|
||||||
|icon, delta| icon.transform(Transformation::rotate(percentage(delta))),
|
.size(IconSize::Small)
|
||||||
|
.with_animation(
|
||||||
|
"running",
|
||||||
|
Animation::new(Duration::from_secs(3)).repeat(),
|
||||||
|
|icon, delta| {
|
||||||
|
icon.transform(Transformation::rotate(percentage(delta)))
|
||||||
|
},
|
||||||
|
),
|
||||||
)
|
)
|
||||||
.into_any(),
|
.into_any(),
|
||||||
),
|
),
|
||||||
ToolCallStatus::Rejected | ToolCallStatus::Canceled | ToolCallStatus::Failed => Some(
|
ToolCallStatus::Rejected | ToolCallStatus::Canceled | ToolCallStatus::Failed => Some(
|
||||||
Icon::new(IconName::Close)
|
div()
|
||||||
.color(Color::Error)
|
.absolute()
|
||||||
.size(IconSize::Small)
|
.right_2()
|
||||||
|
.child(
|
||||||
|
Icon::new(IconName::Close)
|
||||||
|
.color(Color::Error)
|
||||||
|
.size(IconSize::Small),
|
||||||
|
)
|
||||||
.into_any_element(),
|
.into_any_element(),
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
|
|
@ -1734,13 +1746,14 @@ impl AcpThreadView {
|
||||||
.child(
|
.child(
|
||||||
h_flex()
|
h_flex()
|
||||||
.id(header_id)
|
.id(header_id)
|
||||||
|
.relative()
|
||||||
.w_full()
|
.w_full()
|
||||||
|
.max_w_full()
|
||||||
.gap_1()
|
.gap_1()
|
||||||
.justify_between()
|
|
||||||
.when(use_card_layout, |this| {
|
.when(use_card_layout, |this| {
|
||||||
this.pl_2()
|
this.pl_1p5()
|
||||||
.pr_1p5()
|
.pr_1()
|
||||||
.py_1()
|
.py_0p5()
|
||||||
.rounded_t_md()
|
.rounded_t_md()
|
||||||
.when(is_open && !failed_tool_call, |this| {
|
.when(is_open && !failed_tool_call, |this| {
|
||||||
this.border_b_1()
|
this.border_b_1()
|
||||||
|
|
@ -1753,7 +1766,7 @@ impl AcpThreadView {
|
||||||
.group(&card_header_id)
|
.group(&card_header_id)
|
||||||
.relative()
|
.relative()
|
||||||
.w_full()
|
.w_full()
|
||||||
.min_h_6()
|
.h(window.line_height() - px(2.))
|
||||||
.text_size(self.tool_name_font_size())
|
.text_size(self.tool_name_font_size())
|
||||||
.child(self.render_tool_call_icon(
|
.child(self.render_tool_call_icon(
|
||||||
card_header_id,
|
card_header_id,
|
||||||
|
|
@ -1797,21 +1810,14 @@ impl AcpThreadView {
|
||||||
} else {
|
} else {
|
||||||
h_flex()
|
h_flex()
|
||||||
.id("non-card-label-container")
|
.id("non-card-label-container")
|
||||||
.w_full()
|
|
||||||
.relative()
|
.relative()
|
||||||
|
.w_full()
|
||||||
|
.max_w_full()
|
||||||
.ml_1p5()
|
.ml_1p5()
|
||||||
.overflow_hidden()
|
.child(h_flex().pr_8().child(self.render_markdown(
|
||||||
.child(
|
tool_call.label.clone(),
|
||||||
h_flex()
|
default_markdown_style(false, true, window, cx),
|
||||||
.id("non-card-label")
|
)))
|
||||||
.pr_8()
|
|
||||||
.w_full()
|
|
||||||
.overflow_x_scroll()
|
|
||||||
.child(self.render_markdown(
|
|
||||||
tool_call.label.clone(),
|
|
||||||
default_markdown_style(false, true, window, cx),
|
|
||||||
)),
|
|
||||||
)
|
|
||||||
.child(gradient_overlay(gradient_color))
|
.child(gradient_overlay(gradient_color))
|
||||||
.on_click(cx.listener({
|
.on_click(cx.listener({
|
||||||
let id = tool_call.id.clone();
|
let id = tool_call.id.clone();
|
||||||
|
|
|
||||||
|
|
@ -1089,7 +1089,7 @@ impl Element for MarkdownElement {
|
||||||
.absolute()
|
.absolute()
|
||||||
.top_1()
|
.top_1()
|
||||||
.right_1()
|
.right_1()
|
||||||
.justify_center()
|
.justify_end()
|
||||||
.child(codeblock),
|
.child(codeblock),
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
|
|
@ -1320,6 +1320,7 @@ fn render_copy_code_block_button(
|
||||||
)
|
)
|
||||||
.icon_color(Color::Muted)
|
.icon_color(Color::Muted)
|
||||||
.icon_size(IconSize::Small)
|
.icon_size(IconSize::Small)
|
||||||
|
.style(ButtonStyle::Filled)
|
||||||
.shape(ui::IconButtonShape::Square)
|
.shape(ui::IconButtonShape::Square)
|
||||||
.tooltip(Tooltip::text("Copy Code"))
|
.tooltip(Tooltip::text("Copy Code"))
|
||||||
.on_click({
|
.on_click({
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue