assistant2: Improve markdown rendering design (#22321)

Danilo Leal created 1 year ago

This PR visually balances code blocks within thread messages a bit more.

<img width="800" alt="Screenshot 2024-12-23 at 11 26 14 AM"
src="https://github.com/user-attachments/assets/6d459aac-5d94-4021-8289-0125bc82e77c"
/>

Release Notes:

- N/A

Change summary

crates/assistant2/src/active_thread.rs | 57 +++++++++++++++++++++------
1 file changed, 43 insertions(+), 14 deletions(-)

Detailed changes

crates/assistant2/src/active_thread.rs

@@ -3,8 +3,9 @@ use std::sync::Arc;
 use assistant_tool::ToolWorkingSet;
 use collections::HashMap;
 use gpui::{
-    list, AnyElement, AppContext, Empty, ListAlignment, ListState, Model, StyleRefinement,
-    Subscription, TextStyleRefinement, View, WeakView,
+    list, AbsoluteLength, AnyElement, AppContext, CornersRefinement, DefiniteLength,
+    EdgesRefinement, Empty, Length, ListAlignment, ListState, Model, StyleRefinement, Subscription,
+    TextStyleRefinement, View, WeakView,
 };
 use language::LanguageRegistry;
 use language_model::Role;
@@ -89,10 +90,11 @@ impl ActiveThread {
         self.list_state.splice(old_len..old_len, 1);
 
         let theme_settings = ThemeSettings::get_global(cx);
+        let colors = cx.theme().colors();
         let ui_font_size = TextSize::Default.rems(cx);
-        let buffer_font_size = theme_settings.buffer_font_size;
-
+        let buffer_font_size = TextSize::Small.rems(cx);
         let mut text_style = cx.text_style();
+
         text_style.refine(&TextStyleRefinement {
             font_family: Some(theme_settings.ui_font.family.clone()),
             font_size: Some(ui_font_size.into()),
@@ -105,6 +107,32 @@ impl ActiveThread {
             syntax: cx.theme().syntax().clone(),
             selection_background_color: cx.theme().players().local().selection,
             code_block: StyleRefinement {
+                margin: EdgesRefinement {
+                    top: Some(Length::Definite(rems(0.5).into())),
+                    left: Some(Length::Definite(rems(0.).into())),
+                    right: Some(Length::Definite(rems(0.).into())),
+                    bottom: Some(Length::Definite(rems(1.).into())),
+                },
+                padding: EdgesRefinement {
+                    top: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(Pixels(8.)))),
+                    left: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(Pixels(8.)))),
+                    right: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(Pixels(8.)))),
+                    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_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()),
@@ -114,8 +142,8 @@ impl ActiveThread {
             },
             inline_code: TextStyleRefinement {
                 font_family: Some(theme_settings.buffer_font.family.clone()),
-                font_size: Some(ui_font_size.into()),
-                background_color: Some(cx.theme().colors().editor_background),
+                font_size: Some(buffer_font_size.into()),
+                background_color: Some(colors.editor_foreground.opacity(0.01)),
                 ..Default::default()
             },
             ..Default::default()
@@ -204,6 +232,7 @@ impl ActiveThread {
         };
 
         let context = self.thread.read(cx).context_for_message(message_id);
+        let colors = cx.theme().colors();
 
         let (role_icon, role_name, role_color) = match message.role {
             Role::User => (IconName::Person, "You", Color::Muted),
@@ -218,16 +247,16 @@ impl ActiveThread {
             .child(
                 v_flex()
                     .border_1()
-                    .border_color(cx.theme().colors().border)
-                    .bg(cx.theme().colors().editor_background)
+                    .border_color(colors.border_variant)
+                    .bg(colors.editor_background)
                     .rounded_md()
                     .child(
                         h_flex()
-                            .justify_between()
-                            .py_1()
-                            .px_2()
+                            .py_1p5()
+                            .px_2p5()
                             .border_b_1()
-                            .border_color(cx.theme().colors().border_variant)
+                            .border_color(colors.border_variant)
+                            .justify_between()
                             .child(
                                 h_flex()
                                     .gap_1p5()
@@ -243,10 +272,10 @@ impl ActiveThread {
                                     ),
                             ),
                     )
-                    .child(v_flex().px_2().py_1().text_ui(cx).child(markdown.clone()))
+                    .child(v_flex().p_2p5().text_ui(cx).child(markdown.clone()))
                     .when_some(context, |parent, context| {
                         parent.child(
-                            h_flex().flex_wrap().gap_2().p_1p5().children(
+                            h_flex().flex_wrap().gap_1().p_1p5().children(
                                 context
                                     .iter()
                                     .map(|context| ContextPill::new(context.clone())),