agent: Add UI for upsell scenarios (#29805)

Release Notes:

- N/A

---------

Co-authored-by: Marshall Bowers <git@maxdeviant.com>

crates/component/src/component.rs

@@ -4,8 +4,8 @@ use std::sync::LazyLock;
 
 use collections::HashMap;
 use gpui::{
-    AnyElement, App, IntoElement, RenderOnce, SharedString, Window, div, pattern_slash, prelude::*,
-    px, rems,
+    AnyElement, App, IntoElement, Pixels, RenderOnce, SharedString, Window, div, pattern_slash,
+    prelude::*, px, rems,
 };
 use linkme::distributed_slice;
 use parking_lot::RwLock;
@@ -249,13 +249,20 @@ pub struct ComponentExample {
     pub variant_name: SharedString,
     pub description: Option<SharedString>,
     pub element: AnyElement,
+    pub width: Option<Pixels>,
 }
 
 impl RenderOnce for ComponentExample {
     fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
         div()
             .pt_2()
-            .w_full()
+            .map(|this| {
+                if let Some(width) = self.width {
+                    this.w(width)
+                } else {
+                    this.w_full()
+                }
+            })
             .flex()
             .flex_col()
             .gap_3()
@@ -306,6 +313,7 @@ impl ComponentExample {
             variant_name: variant_name.into(),
             element,
             description: None,
+            width: None,
         }
     }
 
@@ -313,6 +321,11 @@ impl ComponentExample {
         self.description = Some(description.into());
         self
     }
+
+    pub fn width(mut self, width: Pixels) -> Self {
+        self.width = Some(width);
+        self
+    }
 }
 
 /// A group of component examples.
@@ -320,6 +333,7 @@ impl ComponentExample {
 pub struct ComponentExampleGroup {
     pub title: Option<SharedString>,
     pub examples: Vec<ComponentExample>,
+    pub width: Option<Pixels>,
     pub grow: bool,
     pub vertical: bool,
 }
@@ -330,7 +344,13 @@ impl RenderOnce for ComponentExampleGroup {
             .flex_col()
             .text_sm()
             .text_color(cx.theme().colors().text_muted)
-            .w_full()
+            .map(|this| {
+                if let Some(width) = self.width {
+                    this.w(width)
+                } else {
+                    this.w_full()
+                }
+            })
             .when_some(self.title, |this, title| {
                 this.gap_4().child(
                     div()
@@ -373,6 +393,7 @@ impl ComponentExampleGroup {
         Self {
             title: None,
             examples,
+            width: None,
             grow: false,
             vertical: false,
         }
@@ -381,10 +402,15 @@ impl ComponentExampleGroup {
         Self {
             title: Some(title.into()),
             examples,
+            width: None,
             grow: false,
             vertical: false,
         }
     }
+    pub fn width(mut self, width: Pixels) -> Self {
+        self.width = Some(width);
+        self
+    }
     pub fn grow(mut self) -> Self {
         self.grow = true;
         self
@@ -402,6 +428,10 @@ pub fn single_example(
     ComponentExample::new(variant_name, example)
 }
 
+pub fn empty_example(variant_name: impl Into<SharedString>) -> ComponentExample {
+    ComponentExample::new(variant_name, div().w_full().text_center().items_center().text_xs().opacity(0.4).child("This space is intentionally left blank. It indicates a case that should render nothing.").into_any_element())
+}
+
 pub fn example_group(examples: Vec<ComponentExample>) -> ComponentExampleGroup {
     ComponentExampleGroup::new(examples)
 }