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
This commit is contained in:
Marshall Bowers 2024-04-30 17:44:51 -04:00 committed by GitHub
parent f2a1226e18
commit d55b637b7e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 9 additions and 6 deletions

View file

@ -40,10 +40,6 @@ impl ChatMessage {
impl RenderOnce for ChatMessage { impl RenderOnce for ChatMessage {
fn render(self, cx: &mut WindowContext) -> impl IntoElement { 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_id = SharedString::from(format!("{}_collapse_handle", self.id.0));
let collapse_handle = h_flex() let collapse_handle = h_flex()
.id(collapse_handle_id.clone()) .id(collapse_handle_id.clone())
@ -65,11 +61,16 @@ impl RenderOnce for ChatMessage {
this.bg(cx.theme().colors().element_hover) 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| { let content = self.message.map(|message| {
div() div()
.overflow_hidden() .overflow_hidden()
.w_full() .w_full()
.p_4() .p(content_padding)
.rounded_lg() .rounded_lg()
.when(self.collapsed, |this| this.h(collapsed_height)) .when(self.collapsed, |this| this.h(collapsed_height))
.bg(cx.theme().colors().surface_background) .bg(cx.theme().colors().surface_background)

View file

@ -61,7 +61,7 @@ impl Render for ChatMessageStory {
ChatMessage::new( ChatMessage::new(
MessageId(0), MessageId(0),
UserOrAssistant::Assistant, UserOrAssistant::Assistant,
Some(div().child("You can talk to me!").into_any_element()), Some(div().child(MULTI_LINE_MESSAGE).into_any_element()),
true, true,
Box::new(|_, _| {}), 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";