From d55b637b7eb2e2855712051677db4d6f4ad19aa4 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Tue, 30 Apr 2024 17:44:51 -0400 Subject: [PATCH] assistant2: Fix the height of collapsed messages (#11230) This PR fixes the height of collapsed messages, addressing the associated TODO comment. Release Notes: - N/A --- crates/assistant2/src/ui/chat_message.rs | 11 ++++++----- crates/assistant2/src/ui/stories/chat_message.rs | 4 +++- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/crates/assistant2/src/ui/chat_message.rs b/crates/assistant2/src/ui/chat_message.rs index 1a2ded6582..816515d417 100644 --- a/crates/assistant2/src/ui/chat_message.rs +++ b/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) diff --git a/crates/assistant2/src/ui/stories/chat_message.rs b/crates/assistant2/src/ui/stories/chat_message.rs index 5c5954daf0..a20a47c6c3 100644 --- a/crates/assistant2/src/ui/stories/chat_message.rs +++ b/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";