agent: Add some design tweaks (#28726)

Danilo Leal created 8 months ago

Fine-tuning some areas of the Agent Panel design.

Release Notes:

- N/A

Change summary

crates/agent/src/active_thread.rs  | 44 ++++++++++++++++++++++++-------
crates/agent/src/message_editor.rs |  2 
2 files changed, 35 insertions(+), 11 deletions(-)

Detailed changes

crates/agent/src/active_thread.rs

@@ -12,12 +12,12 @@ use anyhow::Context as _;
 use assistant_settings::{AssistantSettings, NotifyWhenAgentWaiting};
 use collections::{HashMap, HashSet};
 use editor::scroll::Autoscroll;
-use editor::{Editor, MultiBuffer};
+use editor::{Editor, EditorElement, EditorStyle, MultiBuffer};
 use gpui::{
     AbsoluteLength, Animation, AnimationExt, AnyElement, App, ClickEvent, ClipboardItem,
     DefiniteLength, EdgesRefinement, Empty, Entity, Focusable, Hsla, ListAlignment, ListState,
     MouseButton, PlatformDisplay, ScrollHandle, Stateful, StyleRefinement, Subscription, Task,
-    TextStyleRefinement, Transformation, UnderlineStyle, WeakEntity, WindowHandle,
+    TextStyle, TextStyleRefinement, Transformation, UnderlineStyle, WeakEntity, WindowHandle,
     linear_color_stop, linear_gradient, list, percentage, pulsating_between,
 };
 use language::{Buffer, LanguageRegistry};
@@ -33,7 +33,9 @@ use std::sync::Arc;
 use std::time::Duration;
 use text::ToPoint;
 use theme::ThemeSettings;
-use ui::{Disclosure, IconButton, KeyBinding, Scrollbar, ScrollbarState, Tooltip, prelude::*};
+use ui::{
+    Disclosure, IconButton, KeyBinding, Scrollbar, ScrollbarState, TextSize, Tooltip, prelude::*,
+};
 use util::ResultExt as _;
 use workspace::{OpenOptions, Workspace};
 
@@ -65,8 +67,6 @@ pub struct ActiveThread {
     open_feedback_editors: HashMap<MessageId, Entity<Editor>>,
 }
 
-const MAX_UNCOLLAPSED_LINES_IN_CODE_BLOCK: usize = 5;
-
 struct RenderedMessage {
     language_registry: Arc<LanguageRegistry>,
     segments: Vec<RenderedMessageSegment>,
@@ -291,6 +291,8 @@ fn tool_use_markdown_style(window: &Window, cx: &mut App) -> MarkdownStyle {
     }
 }
 
+const MAX_UNCOLLAPSED_LINES_IN_CODE_BLOCK: usize = 10;
+
 fn render_markdown_code_block(
     message_id: MessageId,
     ix: usize,
@@ -577,7 +579,7 @@ fn render_markdown_code_block(
                 if is_expanded {
                     this.h_full()
                 } else {
-                    this.max_h_40()
+                    this.max_h_80()
                 }
             },
         )
@@ -1496,12 +1498,36 @@ impl ActiveThread {
                     .when(!message_is_empty, |parent| {
                         parent.child(
                             if let Some(edit_message_editor) = edit_message_editor.clone() {
+                                let settings = ThemeSettings::get_global(cx);
+                                let font_size = TextSize::Small.rems(cx);
+                                let line_height = font_size.to_pixels(window.rem_size()) * 1.5;
+
+                                let text_style = TextStyle {
+                                    color: cx.theme().colors().text,
+                                    font_family: settings.buffer_font.family.clone(),
+                                    font_fallbacks: settings.buffer_font.fallbacks.clone(),
+                                    font_features: settings.buffer_font.features.clone(),
+                                    font_size: font_size.into(),
+                                    line_height: line_height.into(),
+                                    ..Default::default()
+                                };
+
                                 div()
                                     .key_context("EditMessageEditor")
                                     .on_action(cx.listener(Self::cancel_editing_message))
                                     .on_action(cx.listener(Self::confirm_editing_message))
                                     .min_h_6()
-                                    .child(edit_message_editor)
+                                    .pt_1()
+                                    .child(EditorElement::new(
+                                        &edit_message_editor,
+                                        EditorStyle {
+                                            background: colors.editor_background,
+                                            local_player: cx.theme().players().local(),
+                                            text: text_style,
+                                            syntax: cx.theme().syntax().clone(),
+                                            ..Default::default()
+                                        },
+                                    ))
                                     .into_any()
                             } else {
                                 div()
@@ -1666,11 +1692,9 @@ impl ActiveThread {
                 ),
             Role::Assistant => v_flex()
                 .id(("message-container", ix))
-                .ml_2()
+                .ml_2p5()
                 .pl_2()
                 .pr_4()
-                .border_l_1()
-                .border_color(cx.theme().colors().border_variant)
                 .children(message_content)
                 .when(has_tool_uses, |parent| {
                     parent.children(

crates/agent/src/message_editor.rs

@@ -56,7 +56,7 @@ pub struct MessageEditor {
     _subscriptions: Vec<Subscription>,
 }
 
-const MAX_EDITOR_LINES: usize = 3;
+const MAX_EDITOR_LINES: usize = 8;
 
 impl MessageEditor {
     pub fn new(