assistant2: Add little design improvements (#22784)

Danilo Leal created 1 year ago

The most relevant change in this PR is ensuring that the path tooltip
doesn't overlap with the "Remove Context" tooltip. Now, the former
tooltip only shows if you hover over the context pill's label. This
avoids a little flicker that was happening as the path tooltip would
show first and then quickly followed by the icon button's one.

Release Notes:

- N/A

Change summary

crates/assistant2/src/active_thread.rs   |  2 
crates/assistant2/src/message_editor.rs  |  4 +-
crates/assistant2/src/ui/context_pill.rs | 35 ++++++++++++++-----------
3 files changed, 23 insertions(+), 18 deletions(-)

Detailed changes

crates/assistant2/src/active_thread.rs

@@ -137,7 +137,7 @@ impl ActiveThread {
             inline_code: TextStyleRefinement {
                 font_family: Some(theme_settings.buffer_font.family.clone()),
                 font_size: Some(buffer_font_size.into()),
-                background_color: Some(colors.editor_foreground.opacity(0.01)),
+                background_color: Some(colors.editor_foreground.opacity(0.1)),
                 ..Default::default()
             },
             link: TextStyleRefinement {

crates/assistant2/src/message_editor.rs

@@ -277,7 +277,7 @@ impl Render for MessageEditor {
                             .justify_between()
                             .child(SwitchWithLabel::new(
                                 "use-tools",
-                                Label::new("Tools"),
+                                Label::new("Tools").size(LabelSize::Small),
                                 self.use_tools.into(),
                                 cx.listener(|this, selection, _cx| {
                                     this.use_tools = match selection {
@@ -293,7 +293,7 @@ impl Render for MessageEditor {
                                     ButtonLike::new("chat")
                                         .style(ButtonStyle::Filled)
                                         .layer(ElevationIndex::ModalSurface)
-                                        .child(Label::new("Submit"))
+                                        .child(Label::new("Submit").size(LabelSize::Small))
                                         .children(
                                             KeyBinding::for_action_in(&Chat, &focus_handle, cx)
                                                 .map(|binding| binding.into_any_element()),

crates/assistant2/src/ui/context_pill.rs

@@ -86,21 +86,26 @@ impl RenderOnce for ContextPill {
                 .bg(color.element_background)
                 .border_color(color.border.opacity(0.5))
                 .pr(if on_remove.is_some() { px(2.) } else { px(4.) })
-                .child(Label::new(context.name.clone()).size(LabelSize::Small))
-                .when_some(context.parent.as_ref(), |element, parent_name| {
-                    if *dupe_name {
-                        element.child(
-                            Label::new(parent_name.clone())
-                                .size(LabelSize::XSmall)
-                                .color(Color::Muted),
-                        )
-                    } else {
-                        element
-                    }
-                })
-                .when_some(context.tooltip.clone(), |element, tooltip| {
-                    element.tooltip(move |cx| Tooltip::text(tooltip.clone(), cx))
-                })
+                .child(
+                    h_flex()
+                        .id("context-data")
+                        .gap_1()
+                        .child(Label::new(context.name.clone()).size(LabelSize::Small))
+                        .when_some(context.parent.as_ref(), |element, parent_name| {
+                            if *dupe_name {
+                                element.child(
+                                    Label::new(parent_name.clone())
+                                        .size(LabelSize::XSmall)
+                                        .color(Color::Muted),
+                                )
+                            } else {
+                                element
+                            }
+                        })
+                        .when_some(context.tooltip.clone(), |element, tooltip| {
+                            element.tooltip(move |cx| Tooltip::text(tooltip.clone(), cx))
+                        }),
+                )
                 .when_some(on_remove.as_ref(), |element, on_remove| {
                     element.child(
                         IconButton::new(("remove", context.id.0), IconName::Close)