agent: Simplify user message design (#29165)

Danilo Leal created

Mainly removing the "You" label, which didn't add a lot of value. Still
figuring out an issue with font size Markdown rendering before merging
this PR.

Release Notes:

- N/A

Change summary

crates/agent/src/active_thread.rs | 67 +++++++++++++++++---------------
1 file changed, 35 insertions(+), 32 deletions(-)

Detailed changes

crates/agent/src/active_thread.rs 🔗

@@ -1557,9 +1557,7 @@ impl ActiveThread {
             .map(|(_, state)| state.editor.clone());
 
         let colors = cx.theme().colors();
-        let active_color = colors.element_active;
         let editor_bg_color = colors.editor_background;
-        let bg_user_message_header = editor_bg_color.blend(active_color.opacity(0.25));
 
         let open_as_markdown = IconButton::new(("open-as-markdown", ix), IconName::FileCode)
             .shape(ui::IconButtonShape::Square)
@@ -1724,7 +1722,6 @@ impl ActiveThread {
                             } else {
                                 div()
                                     .min_h_6()
-                                    .text_ui(cx)
                                     .child(self.render_message_content(
                                         message_id,
                                         rendered_message,
@@ -1783,35 +1780,18 @@ impl ActiveThread {
                 .pb_4()
                 .child(
                     v_flex()
-                        .bg(colors.editor_background)
+                        .bg(editor_bg_color)
                         .rounded_lg()
                         .border_1()
                         .border_color(colors.border)
                         .shadow_md()
+                        .child(div().py_2().px_2p5().children(message_content))
                         .child(
                             h_flex()
-                                .py_1()
-                                .pl_2()
-                                .pr_1()
-                                .bg(bg_user_message_header)
-                                .border_b_1()
-                                .border_color(colors.border)
-                                .justify_between()
-                                .rounded_t_md()
-                                .child(
-                                    h_flex()
-                                        .gap_1p5()
-                                        .child(
-                                            Icon::new(IconName::PersonCircle)
-                                                .size(IconSize::XSmall)
-                                                .color(Color::Muted),
-                                        )
-                                        .child(
-                                            Label::new("You")
-                                                .size(LabelSize::Small)
-                                                .color(Color::Muted),
-                                        ),
-                                )
+                                .p_1()
+                                .border_t_1()
+                                .border_color(colors.border_variant)
+                                .justify_end()
                                 .child(
                                     h_flex()
                                         .gap_1()
@@ -1864,8 +1844,12 @@ impl ActiveThread {
                                             edit_message_editor.is_none() && allow_editing_message,
                                             |this| {
                                                 this.child(
-                                                    Button::new("edit-message", "Edit")
+                                                    Button::new("edit-message", "Edit Message")
                                                         .label_size(LabelSize::Small)
+                                                        .icon(IconName::Pencil)
+                                                        .icon_size(IconSize::XSmall)
+                                                        .icon_color(Color::Muted)
+                                                        .icon_position(IconPosition::Start)
                                                         .on_click(cx.listener({
                                                             let message_segments =
                                                                 message.segments.clone();
@@ -1882,8 +1866,7 @@ impl ActiveThread {
                                             },
                                         ),
                                 ),
-                        )
-                        .child(div().p_2().children(message_content)),
+                        ),
                 ),
             Role::Assistant => v_flex()
                 .id(("message-container", ix))
@@ -2122,11 +2105,13 @@ impl ActiveThread {
             .map(|m| m.role)
             .unwrap_or(Role::User);
 
-        let is_assistant = message_role == Role::Assistant;
+        let is_assistant_message = message_role == Role::Assistant;
+        let is_user_message = message_role == Role::User;
 
         v_flex()
             .text_ui(cx)
             .gap_2()
+            .when(is_user_message, |this| this.text_xs())
             .children(
                 rendered_message.segments.iter().enumerate().map(
                     |(index, segment)| match segment {
@@ -2147,10 +2132,28 @@ impl ActiveThread {
                         RenderedMessageSegment::Text(markdown) => {
                             let markdown_element = MarkdownElement::new(
                                 markdown.clone(),
-                                default_markdown_style(window, cx),
+                                if is_user_message {
+                                    let mut style = default_markdown_style(window, cx);
+                                    let mut text_style = window.text_style();
+                                    let theme_settings = ThemeSettings::get_global(cx);
+
+                                    let buffer_font = theme_settings.buffer_font.family.clone();
+                                    let buffer_font_size = TextSize::Small.rems(cx);
+
+                                    text_style.refine(&TextStyleRefinement {
+                                        font_family: Some(buffer_font),
+                                        font_size: Some(buffer_font_size.into()),
+                                        ..Default::default()
+                                    });
+
+                                    style.base_text_style = text_style;
+                                    style
+                                } else {
+                                    default_markdown_style(window, cx)
+                                },
                             );
 
-                            let markdown_element = if is_assistant {
+                            let markdown_element = if is_assistant_message {
                                 markdown_element.code_block_renderer(
                                     markdown::CodeBlockRenderer::Custom {
                                         render: Arc::new({