assistant2: Fix the height of collapsed messages (#11230)

Marshall Bowers created 2 years ago

This PR fixes the height of collapsed messages, addressing the
associated TODO comment.

Release Notes:

- N/A

Change summary

crates/assistant2/src/ui/chat_message.rs         | 11 ++++++-----
crates/assistant2/src/ui/stories/chat_message.rs |  4 +++-
2 files changed, 9 insertions(+), 6 deletions(-)

Detailed changes

crates/assistant2/src/ui/chat_message.rs

@@ -40,10 +40,6 @@ impl ChatMessage {
 
 impl RenderOnce for ChatMessage {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
-        // TODO: This should be top padding + 1.5x line height
-        // Set the message height to cut off at exactly 1.5 lines when collapsed
-        let collapsed_height = rems(2.875);
-
         let collapse_handle_id = SharedString::from(format!("{}_collapse_handle", self.id.0));
         let collapse_handle = h_flex()
             .id(collapse_handle_id.clone())
@@ -65,11 +61,16 @@ impl RenderOnce for ChatMessage {
                         this.bg(cx.theme().colors().element_hover)
                     }),
             );
+
+        let content_padding = rems(1.);
+        // Clamp the message height to exactly 1.5 lines when collapsed.
+        let collapsed_height = content_padding.to_pixels(cx.rem_size()) + cx.line_height() * 1.5;
+
         let content = self.message.map(|message| {
             div()
                 .overflow_hidden()
                 .w_full()
-                .p_4()
+                .p(content_padding)
                 .rounded_lg()
                 .when(self.collapsed, |this| this.h(collapsed_height))
                 .bg(cx.theme().colors().surface_background)

crates/assistant2/src/ui/stories/chat_message.rs

@@ -61,7 +61,7 @@ impl Render for ChatMessageStory {
                     ChatMessage::new(
                         MessageId(0),
                         UserOrAssistant::Assistant,
-                        Some(div().child("You can talk to me!").into_any_element()),
+                        Some(div().child(MULTI_LINE_MESSAGE).into_any_element()),
                         true,
                         Box::new(|_, _| {}),
                     ),
@@ -97,3 +97,5 @@ impl Render for ChatMessageStory {
         )
     }
 }
+
+const MULTI_LINE_MESSAGE: &str = "In 2010, the movies nominated for the 82nd Academy Awards, for films released in 2009, were as follows. Note that 2010 nominees were announced for the ceremony happening in that year, but they honor movies from the previous year";