assistant2: Add stray visual adjusments (#22386)

Danilo Leal created

This PR adds just some tiny visual clean ups to the assistant2 panel.
Nothing major, honestly.

<img width="800" alt="Screenshot 2024-12-24 at 12 19 46 AM"
src="https://github.com/user-attachments/assets/da22aa7f-8a42-4ff0-9e4c-5e8b60b28802"
/>

Release Notes:

- N/A

Change summary

crates/assistant2/src/active_thread.rs  |  18 +--
crates/assistant2/src/message_editor.rs | 120 ++++++++++++++------------
crates/markdown/src/markdown.rs         |   4 
3 files changed, 71 insertions(+), 71 deletions(-)

Detailed changes

crates/assistant2/src/active_thread.rs 🔗

@@ -3,9 +3,9 @@ use std::sync::Arc;
 use assistant_tool::ToolWorkingSet;
 use collections::HashMap;
 use gpui::{
-    list, AbsoluteLength, AnyElement, AppContext, CornersRefinement, DefiniteLength,
-    EdgesRefinement, Empty, Length, ListAlignment, ListState, Model, StyleRefinement, Subscription,
-    TextStyleRefinement, View, WeakView,
+    list, AbsoluteLength, AnyElement, AppContext, DefiniteLength, EdgesRefinement, Empty, Length,
+    ListAlignment, ListState, Model, StyleRefinement, Subscription, TextStyleRefinement, View,
+    WeakView,
 };
 use language::LanguageRegistry;
 use language_model::Role;
@@ -108,7 +108,7 @@ impl ActiveThread {
             selection_background_color: cx.theme().players().local().selection,
             code_block: StyleRefinement {
                 margin: EdgesRefinement {
-                    top: Some(Length::Definite(rems(0.5).into())),
+                    top: Some(Length::Definite(rems(1.0).into())),
                     left: Some(Length::Definite(rems(0.).into())),
                     right: Some(Length::Definite(rems(0.).into())),
                     bottom: Some(Length::Definite(rems(1.).into())),
@@ -120,19 +120,13 @@ impl ActiveThread {
                     bottom: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(Pixels(8.)))),
                 },
                 background: Some(colors.editor_foreground.opacity(0.01).into()),
-                border_color: Some(colors.border_variant.opacity(0.25)),
+                border_color: Some(colors.border_variant.opacity(0.3)),
                 border_widths: EdgesRefinement {
                     top: Some(AbsoluteLength::Pixels(Pixels(1.0))),
                     left: Some(AbsoluteLength::Pixels(Pixels(1.))),
                     right: Some(AbsoluteLength::Pixels(Pixels(1.))),
                     bottom: Some(AbsoluteLength::Pixels(Pixels(1.))),
                 },
-                corner_radii: CornersRefinement {
-                    top_left: Some(AbsoluteLength::Pixels(Pixels(2.))),
-                    top_right: Some(AbsoluteLength::Pixels(Pixels(2.))),
-                    bottom_right: Some(AbsoluteLength::Pixels(Pixels(2.))),
-                    bottom_left: Some(AbsoluteLength::Pixels(Pixels(2.))),
-                },
                 text: Some(TextStyleRefinement {
                     font_family: Some(theme_settings.buffer_font.family.clone()),
                     font_size: Some(buffer_font_size.into()),
@@ -272,7 +266,7 @@ impl ActiveThread {
                                     ),
                             ),
                     )
-                    .child(v_flex().p_2p5().text_ui(cx).child(markdown.clone()))
+                    .child(div().p_2p5().text_ui(cx).child(markdown.clone()))
                     .when_some(context, |parent, context| {
                         if !context.is_empty() {
                             parent.child(

crates/assistant2/src/message_editor.rs 🔗

@@ -220,67 +220,73 @@ impl Render for MessageEditor {
             .p_2()
             .bg(bg_color)
             .child(self.context_strip.clone())
-            .child({
-                let settings = ThemeSettings::get_global(cx);
-                let text_style = TextStyle {
-                    color: cx.theme().colors().editor_foreground,
-                    font_family: settings.ui_font.family.clone(),
-                    font_features: settings.ui_font.features.clone(),
-                    font_size: font_size.into(),
-                    font_weight: settings.ui_font.weight,
-                    line_height: line_height.into(),
-                    ..Default::default()
-                };
-
-                EditorElement::new(
-                    &self.editor,
-                    EditorStyle {
-                        background: bg_color,
-                        local_player: cx.theme().players().local(),
-                        text: text_style,
-                        ..Default::default()
-                    },
-                )
-            })
             .child(
-                PopoverMenu::new("inline-context-picker")
-                    .menu(move |_cx| Some(inline_context_picker.clone()))
-                    .attach(gpui::Corner::TopLeft)
-                    .anchor(gpui::Corner::BottomLeft)
-                    .offset(gpui::Point {
-                        x: px(0.0),
-                        y: px(-16.0),
+                v_flex()
+                    .gap_4()
+                    .child({
+                        let settings = ThemeSettings::get_global(cx);
+                        let text_style = TextStyle {
+                            color: cx.theme().colors().text,
+                            font_family: settings.ui_font.family.clone(),
+                            font_features: settings.ui_font.features.clone(),
+                            font_size: font_size.into(),
+                            font_weight: settings.ui_font.weight,
+                            line_height: line_height.into(),
+                            ..Default::default()
+                        };
+
+                        EditorElement::new(
+                            &self.editor,
+                            EditorStyle {
+                                background: bg_color,
+                                local_player: cx.theme().players().local(),
+                                text: text_style,
+                                ..Default::default()
+                            },
+                        )
                     })
-                    .with_handle(self.inline_context_picker_menu_handle.clone()),
-            )
-            .child(
-                h_flex()
-                    .justify_between()
-                    .child(SwitchWithLabel::new(
-                        "use-tools",
-                        Label::new("Tools"),
-                        self.use_tools.into(),
-                        cx.listener(|this, selection, _cx| {
-                            this.use_tools = match selection {
-                                ToggleState::Selected => true,
-                                ToggleState::Unselected | ToggleState::Indeterminate => false,
-                            };
-                        }),
-                    ))
                     .child(
-                        h_flex().gap_1().child(self.model_selector.clone()).child(
-                            ButtonLike::new("chat")
-                                .style(ButtonStyle::Filled)
-                                .layer(ElevationIndex::ModalSurface)
-                                .child(Label::new("Submit"))
-                                .children(
-                                    KeyBinding::for_action_in(&Chat, &focus_handle, cx)
-                                        .map(|binding| binding.into_any_element()),
-                                )
-                                .on_click(move |_event, cx| {
-                                    focus_handle.dispatch_action(&Chat, cx);
+                        PopoverMenu::new("inline-context-picker")
+                            .menu(move |_cx| Some(inline_context_picker.clone()))
+                            .attach(gpui::Corner::TopLeft)
+                            .anchor(gpui::Corner::BottomLeft)
+                            .offset(gpui::Point {
+                                x: px(0.0),
+                                y: px(-16.0),
+                            })
+                            .with_handle(self.inline_context_picker_menu_handle.clone()),
+                    )
+                    .child(
+                        h_flex()
+                            .justify_between()
+                            .child(SwitchWithLabel::new(
+                                "use-tools",
+                                Label::new("Tools"),
+                                self.use_tools.into(),
+                                cx.listener(|this, selection, _cx| {
+                                    this.use_tools = match selection {
+                                        ToggleState::Selected => true,
+                                        ToggleState::Unselected | ToggleState::Indeterminate => {
+                                            false
+                                        }
+                                    };
                                 }),
-                        ),
+                            ))
+                            .child(
+                                h_flex().gap_1().child(self.model_selector.clone()).child(
+                                    ButtonLike::new("chat")
+                                        .style(ButtonStyle::Filled)
+                                        .layer(ElevationIndex::ModalSurface)
+                                        .child(Label::new("Submit"))
+                                        .children(
+                                            KeyBinding::for_action_in(&Chat, &focus_handle, cx)
+                                                .map(|binding| binding.into_any_element()),
+                                        )
+                                        .on_click(move |_event, cx| {
+                                            focus_handle.dispatch_action(&Chat, cx);
+                                        }),
+                                ),
+                            ),
                     ),
             )
     }

crates/markdown/src/markdown.rs 🔗

@@ -614,11 +614,11 @@ impl Element for MarkdownElement {
                             };
                             builder.push_div(
                                 div()
+                                    .mb_1()
                                     .h_flex()
-                                    .mb_2()
-                                    .line_height(rems(1.3))
                                     .items_start()
                                     .gap_1()
+                                    .line_height(rems(1.3))
                                     .child(bullet),
                                 range,
                                 markdown_end,