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>

examples/gallery/pages/messaging/mod.rs

@@ -7,6 +7,8 @@ use ely_gpui_component::{
 use gpui::{AnyElement, App, IntoElement, ParentElement, SharedString, Styled, Window, div, px};
 use jiff::{SignedDuration, Timestamp};
 
+mod messages;
+
 use super::Page;
 use crate::{
     probe::probe,
@@ -29,6 +31,9 @@ const SCRIPT: &[Step] = &[
     Step::Key("down"),
     Step::Wait(200),
     Step::Shot("channel-opened"),
+    Step::HoverAt("messaging-conversation", 200.0, 89.0),
+    Step::Wait(200),
+    Step::Shot("run-time"),
 ];
 
 /// The demo's chats: which is open and what waits unread in each.
@@ -210,5 +215,8 @@ fn render(window: &mut Window, cx: &mut App) -> AnyElement {
         .child(items(cx))
         .child(header(cx))
         .child(pins(window, cx))
+        .child(messages::conversation(window, cx))
+        .child(messages::thread(window, cx))
+        .child(messages::receipts(cx))
         .into_any_element()
 }