assistant panel: Animate assistant label if message is pending (#16152)

This adds a pulsating effect to the assistant header in case the message
is pending.

The pulsating effect is capped between 0.2 and 1.0 and I tried (with the
help of Claude) to give it a "breathing" effect, since I found the
normal bounce a bit too much.

Also opted for setting the `alpha` on the `LabelLike` things, vs.
overwriting the color, since I think that's cleaner instead of exposing
the color and mutating that.


https://github.com/user-attachments/assets/4a94a1c5-8dc7-4c40-b30f-d92d112db7b5


Release Notes:

- N/A

crates/ui/src/components/label/highlighted_label.rs

@@ -53,6 +53,11 @@ impl LabelCommon for HighlightedLabel {
         self.base = self.base.italic(italic);
         self
     }
+
+    fn alpha(mut self, alpha: f32) -> Self {
+        self.base = self.base.alpha(alpha);
+        self
+    }
 }
 
 pub fn highlight_ranges(

crates/ui/src/components/label/label.rs

@@ -156,6 +156,20 @@ impl LabelCommon for Label {
         self.base = self.base.italic(italic);
         self
     }
+
+    /// Sets the alpha property of the color of label.
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// use ui::prelude::*;
+    ///
+    /// let my_label = Label::new("Hello, World!").alpha(0.5);
+    /// ```
+    fn alpha(mut self, alpha: f32) -> Self {
+        self.base = self.base.alpha(alpha);
+        self
+    }
 }
 
 impl RenderOnce for Label {

crates/ui/src/components/label/label_like.rs

@@ -41,6 +41,9 @@ pub trait LabelCommon {
 
     /// Sets the italic property of the label.
     fn italic(self, italic: bool) -> Self;
+
+    /// Sets the alpha property of the label, overwriting the alpha value of the color.
+    fn alpha(self, alpha: f32) -> Self;
 }
 
 #[derive(IntoElement)]
@@ -53,6 +56,7 @@ pub struct LabelLike {
     strikethrough: bool,
     italic: bool,
     children: SmallVec<[AnyElement; 2]>,
+    alpha: Option<f32>,
 }
 
 impl LabelLike {
@@ -66,6 +70,7 @@ impl LabelLike {
             strikethrough: false,
             italic: false,
             children: SmallVec::new(),
+            alpha: None,
         }
     }
 }
@@ -111,6 +116,11 @@ impl LabelCommon for LabelLike {
         self.italic = italic;
         self
     }
+
+    fn alpha(mut self, alpha: f32) -> Self {
+        self.alpha = Some(alpha);
+        self
+    }
 }
 
 impl ParentElement for LabelLike {
@@ -123,6 +133,11 @@ impl RenderOnce for LabelLike {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         let settings = ThemeSettings::get_global(cx);
 
+        let mut color = self.color.color(cx);
+        if let Some(alpha) = self.alpha {
+            color.fade_out(1.0 - alpha);
+        }
+
         self.base
             .when(self.strikethrough, |this| {
                 this.relative().child(
@@ -144,7 +159,7 @@ impl RenderOnce for LabelLike {
                 this.line_height(relative(1.))
             })
             .when(self.italic, |this| this.italic())
-            .text_color(self.color.color(cx))
+            .text_color(color)
             .font_weight(self.weight.unwrap_or(settings.ui_font.weight))
             .children(self.children)
     }

crates/ui/src/components/stories/label.rs

@@ -1,5 +1,7 @@
+use std::time::Duration;
+
 use crate::{prelude::*, HighlightedLabel, Label};
-use gpui::Render;
+use gpui::{pulsating_between, Animation, AnimationExt, Render};
 use story::Story;
 
 pub struct LabelStory;
@@ -23,5 +25,14 @@ impl Render for LabelStory {
             .child(
                 HighlightedLabel::new("Hello, world!", vec![0, 1, 2, 7, 8, 12]).color(Color::Error),
             )
+            .child(
+                Label::new("This text is pulsating").with_animation(
+                    "pulsating-label",
+                    Animation::new(Duration::from_secs(2))
+                        .repeat()
+                        .with_easing(pulsating_between(0.2, 1.0)),
+                    |label, delta| label.alpha(delta),
+                ),
+            )
     }
 }