.

crates/chat_ui/src/lib.rs

@@ -30,14 +30,14 @@ use person::{Directory, Person};
 use regex::Regex;
 use settings::{AppSettings, SignerKind};
 use smallvec::{SmallVec, smallvec};
-use speech::speaker::Speaker;
+use speech::speaker::{END_GRACE, Speaker};
 use state::{
     FileAttachment, LocalFile, NostrRegistry, PickedFile, download_and_decrypt_file, pick_file,
 };
 use ui::{
     Avatar, COMPACT_REACTION_EMOJIS, IconName, MessageActions, MessageMedia, MessageRow,
-    REACTION_EMOJIS, ReactionBar, RenderedText, ReplyPreview, WelcomeMessage, group_reactions,
+    REACTION_EMOJIS, ReactionBar, RenderedText, ReplyPreview, RevealText, WelcomeMessage,
-    opens_run, rendered_text,
+    group_reactions, opens_run, rendered_text,
 };
 
 use crate::file::*;
@@ -46,8 +46,7 @@ use crate::file::*;
 const PRIVATE_NOTICE: &str =
     "This conversation is private. Only members can see each other's messages.";
 
-/// Regex matching strings that consist entirely of emoji characters,
+/// Regex matching strings that consist entirely of emoji characters.
-/// zero-width joiners, variation selectors, and keycap combiners.
 static EMOJI_RE: LazyLock<Regex> =
     LazyLock::new(|| Regex::new(r"^[\p{Emoji}\u{200D}\u{FE0F}\u{20E3}]+$").unwrap());
 
@@ -90,6 +89,10 @@ pub struct ChatPanel {
     speech_started: Option<instant::Instant>,
     /// Reads messages aloud
     speaker: Speaker,
+    /// The message being revealed in step with speech, with its estimated duration
+    speech_reveal: Option<(EventId, Duration)>,
+    /// Fallback reveal end for backends that cannot report utterance end
+    reveal_timeout: Option<Task<Result<(), Error>>>,
     /// Subject input state
     subject_input: Entity<InputState>,
     /// Subject bar visibility
@@ -222,6 +225,20 @@ impl ChatPanel {
             this.get_messages(window, cx);
         });
 
+        // End the speech reveal when the utterance finishes ahead of its estimate
+        let speaker = Speaker::new();
+        let end_events = speaker.end_events();
+        let reveal_end_task = cx.spawn(async move |this, cx| {
+            while end_events.recv_async().await.is_ok() {
+                this.update(cx, |this, cx| {
+                    this.speech_reveal = None;
+                    cx.notify();
+                })?;
+            }
+
+            Ok(())
+        });
+
         Self {
             focus_handle: cx.focus_handle(),
             id,
@@ -234,7 +251,9 @@ impl ChatPanel {
             input,
             speech,
             speech_started: None,
-            speaker: Speaker::new(),
+            speaker,
+            speech_reveal: None,
+            reveal_timeout: None,
             subject_input,
             subject_bar,
             replies_to,
@@ -245,7 +264,7 @@ impl ChatPanel {
             reports_by_id,
             uploading: false,
             subscriptions,
-            tasks: vec![],
+            tasks: vec![reveal_end_task],
         }
     }
 
@@ -1174,6 +1193,15 @@ impl ChatPanel {
             nostr.read(cx).current_user(),
         ));
 
+        let body = match self
+            .speech_reveal
+            .as_ref()
+            .filter(|(reveal_id, _)| *reveal_id == id)
+        {
+            Some((_, duration)) => RevealText::new(message.preview(), *duration).into_any_element(),
+            None => rendered_text,
+        };
+
         MessageRow::new(ix)
             .show_author(show_author)
             .hide_avatar(hide_avatar)
@@ -1198,7 +1226,7 @@ impl ChatPanel {
             .when(has_replies, |this| {
                 this.children(self.render_message_replies(replies, cx))
             })
-            .when(message.file.is_none(), |this| this.child(rendered_text))
+            .when(message.file.is_none(), |this| this.child(body))
             .child(MessageMedia::new(&message.media))
             .when_some(message.file.as_ref(), |this, file| {
                 this.child(self.render_message_file(&id, file, cx))
@@ -1431,7 +1459,6 @@ impl ChatPanel {
 
         let reply_id = *id;
         let dropdown_id = *id;
-        let speech_id = *id;
         let public_key = *public_key;
 
         let actions = actions.reply(cx.listener(move |this, _event, _window, cx| {
@@ -1447,15 +1474,42 @@ impl ChatPanel {
             actions
         };
 
-        let actions = actions.speech(cx.listener(move |this, _event, window, cx| {
+        let speaking = self.speech_reveal.is_some();
-            let text = this.message(&speech_id).map(|message| message.preview());
+        let speech_id = *id;
 
-            if let Some(text) = text
+        let actions = actions.speech(
-                && let Err(error) = this.speaker.speak(&text)
+            speaking,
-            {
+            cx.listener(move |this, _event, window, cx| {
-                window.push_notification(Notification::error(error.to_string()), cx);
+                let text = this.message(&speech_id).map(|message| message.preview());
-            }
+
-        }));
+                if let Some(text) = text {
+                    match this.speaker.speak(&text) {
+                        Ok(duration) => {
+                            this.speech_reveal = Some((speech_id, duration));
+
+                            // Re-enable speaking when no end event ever arrives
+                            let session = (speech_id, duration);
+                            let timer = cx.background_executor().timer(duration + END_GRACE);
+                            this.reveal_timeout = Some(cx.spawn(async move |this, cx| {
+                                timer.await;
+                                this.update(cx, |this, cx| {
+                                    if this.speech_reveal.as_ref() == Some(&session) {
+                                        this.speech_reveal = None;
+                                        cx.notify();
+                                    }
+                                })?;
+
+                                Ok(())
+                            }));
+                            cx.notify();
+                        }
+                        Err(error) => {
+                            window.push_notification(Notification::error(error.to_string()), cx)
+                        }
+                    }
+                }
+            }),
+        );
 
         actions.dropdown(move |menu, _window, _cx| {
             menu.menu("Copy author", Box::new(Command::Copy(public_key)))

crates/nip29_ui/src/lib.rs

@@ -28,7 +28,7 @@ use settings::AppSettings;
 use smallvec::{SmallVec, smallvec};
 use speech::speaker::Speaker;
 use state::{NostrRegistry, pick_file, upload_file};
-use ui::{Avatar, RenderedText, WelcomeMessage, rendered_text};
+use ui::{Avatar, RenderedText, RevealText, WelcomeMessage, rendered_text};
 use util::{attachment_name, display_name, opens_run, pin_label, report};
 
 mod details;
@@ -323,6 +323,10 @@ pub struct GroupPanel {
     speech_started: Option<instant::Instant>,
     /// Reads messages aloud
     speaker: Speaker,
+    /// The message being revealed in step with speech, with its estimated duration
+    speech_reveal: Option<(EventId, Duration)>,
+    /// Fallback reveal end for backends that cannot report utterance end
+    reveal_timeout: Option<Task<Result<()>>>,
     /// Uploaded, non-encrypted attachments waiting to be sent.
     attachments: Vec<Url>,
     /// Whether an upload is in flight.
@@ -425,6 +429,20 @@ impl GroupPanel {
             this.track_participants(cx);
         });
 
+        // End the speech reveal when the utterance finishes ahead of its estimate
+        let speaker = Speaker::new();
+        let end_events = speaker.end_events();
+        let reveal_end_task = cx.spawn(async move |this, cx| {
+            while end_events.recv_async().await.is_ok() {
+                this.update(cx, |this, cx| {
+                    this.speech_reveal = None;
+                    cx.notify();
+                })?;
+            }
+
+            Ok(())
+        });
+
         Self {
             focus_handle: cx.focus_handle(),
             group: group.downgrade(),
@@ -437,10 +455,12 @@ impl GroupPanel {
             input,
             speech,
             speech_started: None,
-            speaker: Speaker::new(),
+            speaker,
+            speech_reveal: None,
+            reveal_timeout: None,
             attachments: Vec::new(),
             uploading: false,
-            tasks: smallvec![],
+            tasks: smallvec![reveal_end_task],
             _subscriptions: subscriptions,
         }
     }
@@ -1023,22 +1043,29 @@ impl GroupPanel {
         let nostr = NostrRegistry::global(cx);
         let directory = self.directory.clone();
 
-        let content = self
+        let content = match self
-            .rendered_texts_by_id
+            .speech_reveal
-            .entry(message.id)
+            .as_ref()
-            .or_insert_with(|| {
+            .filter(|(reveal_id, _)| *reveal_id == message.id)
-                rendered_text(
+        {
-                    &message.content,
+            Some((_, duration)) => RevealText::new(message.preview(), *duration).into_any_element(),
-                    message
+            None => self
-                        .mentions
+                .rendered_texts_by_id
-                        .iter()
+                .entry(message.id)
-                        .map(|mention| (mention.range.clone(), mention.public_key)),
+                .or_insert_with(|| {
-                    &message.emojis,
+                    rendered_text(
-                    &directory,
+                        &message.content,
-                    cx,
+                        message
-                )
+                            .mentions
-            })
+                            .iter()
-            .element(ix.into(), window, cx);
+                            .map(|mention| (mention.range.clone(), mention.public_key)),
+                        &message.emojis,
+                        &directory,
+                        cx,
+                    )
+                })
+                .element(ix.into(), window, cx),
+        };
 
         let admin = nostr
             .read(cx)
@@ -1059,6 +1086,7 @@ impl GroupPanel {
                 panel: cx.weak_entity(),
                 admin,
                 pinned,
+                speaking: self.speech_reveal.is_some(),
                 persons: self.directory.clone(),
             },
             cx,

crates/nip29_ui/src/message.rs

@@ -14,6 +14,7 @@ use nip29::{Activity, Group, Reaction};
 use nostr_sdk::prelude::{EventId, Kind};
 use person::Directory;
 use settings::AppSettings;
+use speech::speaker::END_GRACE;
 use state::NostrRegistry;
 use ui::{
     Avatar, MessageActions, MessageMedia, MessageRow, REACTION_EMOJIS, ReactionBar, ReplyPreview,
@@ -27,6 +28,8 @@ pub(crate) struct Actions {
     pub panel: WeakEntity<GroupPanel>,
     pub admin: bool,
     pub pinned: bool,
+    /// Whether a message is currently being spoken, disabling the speech buttons
+    pub speaking: bool,
     pub persons: Entity<Directory>,
 }
 
@@ -91,14 +94,40 @@ pub(crate) fn render(
     let speech_panel = actions.panel;
     let panel = speech_panel.clone();
     let speech_text = message.preview();
+    let speech_id = message.id;
+    let speaking = actions.speaking;
 
-    let row = row.overlay(MessageActions::new().speech(move |_event, _window, cx| {
+    let row = row.overlay(
-        _ = speech_panel.update_in(cx, |panel, window, cx| {
+        MessageActions::new().speech(speaking, move |_event, _window, cx| {
-            if let Err(error) = panel.speaker.speak(&speech_text) {
+            _ = speech_panel.update_in(cx, |panel, window, cx| {
-                window.push_notification(Notification::error(error.to_string()), cx);
+                match panel.speaker.speak(&speech_text) {
-            }
+                    Ok(duration) => {
-        });
+                        panel.speech_reveal = Some((speech_id, duration));
-    }));
+
+                        let session = (speech_id, duration);
+                        let timer = cx.background_executor().timer(duration + END_GRACE);
+
+                        panel.reveal_timeout = Some(cx.spawn(async move |this, cx| {
+                            timer.await;
+                            this.update(cx, |this, cx| {
+                                if this.speech_reveal.as_ref() == Some(&session) {
+                                    this.speech_reveal = None;
+                                    cx.notify();
+                                }
+                            })?;
+
+                            Ok(())
+                        }));
+
+                        cx.notify();
+                    }
+                    Err(error) => {
+                        window.push_notification(Notification::error(error.to_string()), cx)
+                    }
+                }
+            });
+        }),
+    );
 
     let custom = nostr
         .read(cx)

crates/speech/src/speaker.rs

@@ -1,33 +1,58 @@
+use std::time::Duration;
+
 use tts::Tts;
 
+/// Words per minute of an engine at its normal rate, for estimating speech duration.
+const NORMAL_WPM: f32 = 160.0;
+
+/// Extra time past the estimate before speech is considered finished, for backends that
+/// cannot report utterance end.
+pub const END_GRACE: Duration = Duration::from_secs(5);
+
 /// Reads text aloud through the platform's speech backend, created on first use.
 pub struct Speaker {
     tts: Option<Tts>,
-}
+    end_tx: flume::Sender<()>,
-
+    end_rx: flume::Receiver<()>,
-impl Default for Speaker {
-    fn default() -> Self {
-        Self::new()
-    }
 }
 
 impl Speaker {
     pub fn new() -> Self {
-        Self { tts: None }
+        let (end_tx, end_rx) = flume::unbounded();
+
+        Self {
+            tts: None,
+            end_tx,
+            end_rx,
+        }
+    }
+
+    /// Cloneable stream of utterance-finish events.
+    pub fn end_events(&self) -> flume::Receiver<()> {
+        self.end_rx.clone()
     }
 
     /// Speak the text, interrupting what this speaker is already saying.
-    pub fn speak(&mut self, text: &str) -> Result<(), tts::Error> {
+    pub fn speak(&mut self, text: &str) -> Result<Duration, tts::Error> {
+        let end_tx = self.end_tx.clone();
         let tts = match self.tts.as_ref() {
             Some(tts) => tts,
-            None => self.tts.insert(Tts::default()?),
+            None => self.tts.insert({
+                let tts = Tts::default()?;
+                if let Err(error) = tts.on_utterance_end(move |_| {
+                    // A send error only means the panel dropped its event loop.
+                    let _ = end_tx.send(());
+                }) {
+                    log::warn!("utterance end events unavailable ({error})");
+                }
+                tts
+            }),
         };
-
         tts.speak(text, true)?;
-        Ok(())
+        Ok(Self::estimate(tts, text))
     }
 
-    /// Stop speaking; a speaker that never spoke is already silent.
+    /// Stop speaking, a speaker that never spoke is already silent.
     pub fn stop(&mut self) -> Result<(), tts::Error> {
         match self.tts.as_ref() {
             Some(tts) => tts.stop()?,
@@ -37,11 +62,27 @@ impl Speaker {
         Ok(())
     }
 
-    /// Best-effort speaking state; a speaker that never spoke is silent.
+    /// Best-effort speaking state, a speaker that never spoke is silent.
     pub fn speaking(&self) -> bool {
         self.tts
             .as_ref()
             .and_then(|tts| tts.is_speaking().ok())
             .unwrap_or(false)
     }
+
+    /// How long speaking the text is expected to take at the engine's current speed.
+    fn estimate(tts: &Tts, text: &str) -> Duration {
+        let words = text.split_whitespace().count().max(1) as f32;
+        let speed = match (tts.get_rate(), tts.normal_rate()) {
+            (Ok(rate), Ok(normal)) if normal > 0. => (rate / normal).clamp(0.2, 4.),
+            _ => 1.,
+        };
+        Duration::from_secs_f32(words / NORMAL_WPM * 60. / speed)
+    }
+}
+
+impl Default for Speaker {
+    fn default() -> Self {
+        Self::new()
+    }
 }

crates/ui/src/message.rs

@@ -1,19 +1,21 @@
 use std::collections::BTreeMap;
 use std::rc::Rc;
+use std::time::Duration;
 
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
-    AnyElement, App, ClickEvent, Context, ElementId, InteractiveElement as _, IntoElement,
+    Animation, AnimationExt as _, AnyElement, App, ClickEvent, Context, ElementId,
-    MouseButton, MouseDownEvent, ObjectFit, ParentElement as _, RenderOnce, SharedString,
+    InteractiveElement as _, IntoElement, MouseButton, MouseDownEvent, ObjectFit,
-    SharedUri, StatefulInteractiveElement as _, StyleRefinement, Styled, StyledImage, Window, div,
+    ParentElement as _, RenderOnce, SharedString, SharedUri, StatefulInteractiveElement as _,
-    img, px,
+    StyleRefinement, Styled, StyledImage, Window, div, img, px,
 };
 use gpui_kit::assets::IconName;
 use gpui_kit::component::button::{Button, ButtonVariants as _};
 use gpui_kit::component::clipboard::Clipboard;
 use gpui_kit::component::menu::{DropdownMenu as _, PopupMenu, PopupMenuItem};
 use gpui_kit::component::{
-    ActiveTheme, InteractiveElementExt as _, Sizable as _, StyledExt as _, h_flex, v_flex,
+    ActiveTheme, Disableable, InteractiveElementExt as _, Sizable as _, StyledExt as _, h_flex,
+    v_flex,
 };
 use smallvec::SmallVec;
 
@@ -604,7 +606,7 @@ pub struct MessageActions {
     reactions: SmallVec<[(&'static str, SharedClickListener); 4]>,
     reply: Option<SharedClickListener>,
     copy: Option<(ElementId, SharedString)>,
-    speech: Option<SharedClickListener>,
+    speech: Option<(bool, SharedClickListener)>,
     dropdown: Option<DropdownBuilder>,
 }
 
@@ -644,12 +646,13 @@ impl MessageActions {
         self
     }
 
-    /// Add the read-aloud button.
+    /// Add the read-aloud button, disabled while a message is already being spoken.
     pub fn speech(
         mut self,
+        disabled: bool,
         handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
     ) -> Self {
-        self.speech = Some(Rc::new(handler));
+        self.speech = Some((disabled, Rc::new(handler)));
         self
     }
 
@@ -726,13 +729,14 @@ impl RenderOnce for MessageActions {
             .when_some(copy, |this, (id, value)| {
                 this.child(Clipboard::new(id).value(value).tooltip("Copy").small())
             })
-            .when_some(speech, |this, speech| {
+            .when_some(speech, |this, (disabled, speech)| {
                 this.child(
                     Button::new("speech")
                         .icon(crate::IconName::Speech)
                         .tooltip("Read aloud")
                         .small()
                         .ghost()
+                        .disabled(disabled)
                         .on_click(move |event, window, cx| speech(event, window, cx)),
                 )
             })
@@ -750,3 +754,44 @@ impl RenderOnce for MessageActions {
             .refine_style(&style)
     }
 }
+
+/// A message's text revealed word by word, paced by the estimated speech duration.
+#[derive(IntoElement)]
+pub struct RevealText {
+    text: SharedString,
+    duration: Duration,
+}
+
+impl RevealText {
+    pub fn new(text: impl Into<SharedString>, duration: Duration) -> Self {
+        Self {
+            text: text.into(),
+            duration,
+        }
+    }
+}
+
+impl RenderOnce for RevealText {
+    fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
+        let words: Vec<SharedString> = self
+            .text
+            .split_whitespace()
+            .map(SharedString::from)
+            .collect();
+        let total = words.len().max(1) as f32;
+
+        div().flex().flex_wrap().gap_x_1().with_animation(
+            "speech-reveal",
+            Animation::new(self.duration).with_max_fps(30.),
+            move |this, progress| {
+                let visible = ((progress * total).ceil() as usize).min(words.len());
+
+                this.children(words.iter().enumerate().map(|(ix, word)| {
+                    div()
+                        .when(ix >= visible, |this| this.invisible())
+                        .child(word.clone())
+                }))
+            },
+        )
+    }
+}