update ui

crates/ui/src/icon.rs

@@ -26,6 +26,7 @@ pub enum IconName {
     PlusChat,
     Profile,
     Relay,
+    Speech,
     Search,
     Settings,
     Settings2,
@@ -58,6 +59,7 @@ impl IconNamed for IconName {
             Self::PlusChat => "icons/plus-chat.svg",
             Self::Profile => "icons/profile.svg",
             Self::Relay => "icons/relay.svg",
+            Self::Speech => "icons/speech.svg",
             Self::Search => "icons/search.svg",
             Self::Settings => "icons/settings.svg",
             Self::Settings2 => "icons/settings2.svg",

crates/ui/src/message.rs

@@ -597,13 +597,14 @@ pub fn react_menu(
     })
 }
 
-/// A hovered message's action bar: quick reactions, reply, copy, and an overflow menu.
+/// A hovered message's action bar: quick reactions, reply, copy, read aloud, and an overflow menu.
 #[derive(IntoElement)]
 pub struct MessageActions {
     style: StyleRefinement,
     reactions: SmallVec<[(&'static str, SharedClickListener); 4]>,
     reply: Option<SharedClickListener>,
     copy: Option<(ElementId, SharedString)>,
+    speech: Option<SharedClickListener>,
     dropdown: Option<DropdownBuilder>,
 }
 
@@ -615,6 +616,7 @@ impl MessageActions {
             reactions: SmallVec::new(),
             reply: None,
             copy: None,
+            speech: None,
             dropdown: None,
         }
     }
@@ -642,6 +644,15 @@ impl MessageActions {
         self
     }
 
+    /// Add the read-aloud button.
+    pub fn speech(
+        mut self,
+        handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.speech = Some(Rc::new(handler));
+        self
+    }
+
     /// Fill the bar's overflow menu.
     pub fn dropdown(
         mut self,
@@ -671,10 +682,13 @@ impl RenderOnce for MessageActions {
             reactions,
             reply,
             copy,
+            speech,
             dropdown,
         } = self;
 
-        let has_center = reply.is_some() || copy.is_some();
+        // The leading separator only separates reactions from the center buttons
+        let has_center =
+            !reactions.is_empty() && (reply.is_some() || copy.is_some() || speech.is_some());
 
         h_flex()
             .p_0p5()
@@ -712,6 +726,16 @@ 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| {
+                this.child(
+                    Button::new("speech")
+                        .icon(crate::IconName::Speech)
+                        .tooltip("Read aloud")
+                        .small()
+                        .ghost()
+                        .on_click(move |event, window, cx| speech(event, window, cx)),
+                )
+            })
             .when_some(dropdown, |this, dropdown| {
                 this.child(div().flex_shrink_0().h_4().w_px().bg(cx.theme().border))
                     .child(