Messaging · Messages: messages in runs, threads, the unread line and receipts
ChatMessage sets a message under its author's picture, name and clock time. The next by the same author within five minutes, on the same day, joins the run: only its words, the time in the gutter on hover. UnreadDivider marks where unread messages start. MessageThread tells who replied, how many and when the last came; with a handler it opens on a press, Enter or Space. ThreadPanel holds the first message, a rule counting the replies, the replies and a composer, its body scrolling. ReadReceipt says sending, sent, delivered or read, and who saw it in a group. MessageReactions and TypingIndicator point to collab and motion. gpui recolors nothing on hover: text takes its color at layout. The gutter time rests invisible and turns visible through a group hover. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ZacharyZhang-NYandClaude Opus 5.5 committed
1 parent
3c8a5a026c
commit
5bbfdcd766
11 files changed
+1012
-8
No files matched your search
@@ -0,0 +1,255 @@
|
||||
use std::rc::Rc;
|
||||
|
||||
use gpui::{
|
||||
AnyElement, App, ElementId, FontWeight, IntoElement, ParentElement, RenderOnce, SharedString,
|
||||
Styled, Window, div, prelude::*,
|
||||
};
|
||||
use jiff::Timestamp;
|
||||
use smallvec::SmallVec;
|
||||
|
||||
use crate::{
|
||||
buttons::{ButtonVariant, IconButton},
|
||||
data_display::{Avatar, AvatarGroup},
|
||||
forms::Run,
|
||||
layout::on_axis,
|
||||
primitives::{Divider, FocusRing, IconName},
|
||||
theme::{ActiveTheme, AvatarSize, ControlSize, Radius, TextSize},
|
||||
typography::{Ellipsis, format},
|
||||
};
|
||||
|
||||
/// A thread's mark under its first message: who replied, how many replies, and when the last came. With a handler, a press opens the thread.
|
||||
#[derive(IntoElement)]
|
||||
pub struct MessageThread {
|
||||
id: ElementId,
|
||||
replies: usize,
|
||||
last: Timestamp,
|
||||
repliers: Vec<Avatar>,
|
||||
on_open: Option<Run>,
|
||||
}
|
||||
|
||||
impl MessageThread {
|
||||
pub fn new(id: impl Into<ElementId>, replies: usize, last: Timestamp) -> Self {
|
||||
assert!(replies > 0, "a thread holds a reply");
|
||||
Self {
|
||||
id: id.into(),
|
||||
replies,
|
||||
last,
|
||||
repliers: Vec::new(),
|
||||
on_open: None,
|
||||
}
|
||||
}
|
||||
|
||||
/// Who replied; the first three show.
|
||||
pub fn repliers(mut self, repliers: impl IntoIterator<Item = Avatar>) -> Self {
|
||||
self.repliers = repliers.into_iter().collect();
|
||||
assert!(
|
||||
self.repliers.len() <= self.replies,
|
||||
"more repliers than replies"
|
||||
);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn on_open(mut self, handler: impl Fn(&mut Window, &mut App) + 'static) -> Self {
|
||||
self.on_open = Some(Rc::new(handler));
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for MessageThread {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let colors = &theme.colors;
|
||||
let count = format::plural(self.replies as u64, "reply", "replies");
|
||||
let when = format!(
|
||||
"Last reply {}",
|
||||
format::relative(self.last, Timestamp::now())
|
||||
);
|
||||
let id = self.id.clone();
|
||||
div()
|
||||
.id(self.id)
|
||||
.debug_selector(|| "message-thread".into())
|
||||
.w_full()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_2()
|
||||
.px_1p5()
|
||||
.py_1()
|
||||
.rounded(theme.radius(Radius::Md))
|
||||
.border_1()
|
||||
.border_color(gpui::transparent_black())
|
||||
.text_size(theme.text_size(TextSize::Sm))
|
||||
.when_some(self.on_open, |row, open| {
|
||||
row.cursor_pointer()
|
||||
.tab_index(0)
|
||||
.focus_ring(cx)
|
||||
.hover(|style| style.bg(colors.surface))
|
||||
.on_click(move |_, window, cx| {
|
||||
log::info!("message thread {id}: open");
|
||||
open(window, cx)
|
||||
})
|
||||
})
|
||||
.when(!self.repliers.is_empty(), |row| {
|
||||
row.child(
|
||||
div()
|
||||
.flex_none()
|
||||
.child(AvatarGroup::new(self.repliers).max(3).size(AvatarSize::Xs)),
|
||||
)
|
||||
})
|
||||
.child(
|
||||
div()
|
||||
.flex_none()
|
||||
.font_weight(FontWeight::SEMIBOLD)
|
||||
.text_color(colors.link)
|
||||
.child(count),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.flex_1()
|
||||
.min_w_0()
|
||||
.text_color(colors.fg_subtle)
|
||||
.child(Ellipsis::new(when)),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/// A thread beside its chat: a head with the chat's name and a close, the first message, a rule counting the replies, the replies, and a composer held at the bottom. The body scrolls; the host gives the panel its size.
|
||||
#[derive(IntoElement)]
|
||||
pub struct ThreadPanel {
|
||||
id: ElementId,
|
||||
root: AnyElement,
|
||||
chat: Option<SharedString>,
|
||||
replies: SmallVec<[AnyElement; 4]>,
|
||||
composer: Option<AnyElement>,
|
||||
on_close: Option<Run>,
|
||||
}
|
||||
|
||||
impl ThreadPanel {
|
||||
pub fn new(id: impl Into<ElementId>, root: impl IntoElement) -> Self {
|
||||
Self {
|
||||
id: id.into(),
|
||||
root: root.into_any_element(),
|
||||
chat: None,
|
||||
replies: SmallVec::new(),
|
||||
composer: None,
|
||||
on_close: None,
|
||||
}
|
||||
}
|
||||
|
||||
/// The chat the thread is in, after the title.
|
||||
pub fn chat(mut self, name: impl Into<SharedString>) -> Self {
|
||||
self.chat = Some(name.into());
|
||||
self
|
||||
}
|
||||
|
||||
pub fn composer(mut self, composer: impl IntoElement) -> Self {
|
||||
self.composer = Some(composer.into_any_element());
|
||||
self
|
||||
}
|
||||
|
||||
pub fn on_close(mut self, handler: impl Fn(&mut Window, &mut App) + 'static) -> Self {
|
||||
self.on_close = Some(Rc::new(handler));
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl ParentElement for ThreadPanel {
|
||||
fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
|
||||
self.replies.extend(elements);
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for ThreadPanel {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let colors = &theme.colors;
|
||||
let count = self.replies.len();
|
||||
let close = self.on_close.map(|close| {
|
||||
let id = self.id.clone();
|
||||
IconButton::new((self.id.clone(), "close"), IconName::X)
|
||||
.variant(ButtonVariant::Ghost)
|
||||
.size(ControlSize::Sm)
|
||||
.tooltip("Close thread")
|
||||
.on_click(move |_, window, cx| {
|
||||
log::info!("thread panel {id}: close");
|
||||
close(window, cx)
|
||||
})
|
||||
});
|
||||
let head = div()
|
||||
.flex_none()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_between()
|
||||
.gap_2()
|
||||
.px_4()
|
||||
.py_2()
|
||||
.border_b_1()
|
||||
.border_color(colors.border)
|
||||
.child(
|
||||
div()
|
||||
.flex_1()
|
||||
.min_w_0()
|
||||
.flex()
|
||||
.items_baseline()
|
||||
.gap_2()
|
||||
.child(
|
||||
div()
|
||||
.flex_none()
|
||||
.font_weight(FontWeight::SEMIBOLD)
|
||||
.text_color(colors.fg)
|
||||
.child("Thread"),
|
||||
)
|
||||
.children(self.chat.map(|chat| {
|
||||
div()
|
||||
.flex_1()
|
||||
.min_w_0()
|
||||
.text_size(theme.text_size(TextSize::Sm))
|
||||
.text_color(colors.fg_muted)
|
||||
.child(Ellipsis::new(chat))
|
||||
})),
|
||||
)
|
||||
.children(close.map(|close| div().flex_none().child(close)));
|
||||
let rule = (count > 0).then(|| {
|
||||
div()
|
||||
.debug_selector(|| "thread-replies".into())
|
||||
.px_3()
|
||||
.py_1()
|
||||
.child(Divider::horizontal().label(format::plural(
|
||||
count as u64,
|
||||
"reply",
|
||||
"replies",
|
||||
)))
|
||||
});
|
||||
let body = on_axis(
|
||||
div()
|
||||
.id((self.id.clone(), "body"))
|
||||
.flex_1()
|
||||
.min_h_0()
|
||||
.overflow_y_scroll(),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_1()
|
||||
.py_2()
|
||||
.child(self.root)
|
||||
.children(rule)
|
||||
.children(self.replies),
|
||||
);
|
||||
div()
|
||||
.debug_selector(|| "thread-panel".into())
|
||||
.size_full()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.child(head)
|
||||
.child(body)
|
||||
.children(self.composer.map(|composer| {
|
||||
div()
|
||||
.flex_none()
|
||||
.p_3()
|
||||
.border_t_1()
|
||||
.border_color(colors.border)
|
||||
.child(composer)
|
||||
}))
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user