Bubble builder

A token-backed message surface with caller-owned content.

A builder is RenderOnce. Construct and mount it in one expression.

The verified bubble scene in studio-dark

use gpui_kit::display::bubble::Bubble;

Reviewed in bubble.

Construct

new(ident: impl Into<Ident>, label: impl Into<SharedString>) -> Self

Options

Chain onto the value.

content(content: impl IntoElement) -> Self
actions(actions: impl IntoIterator<Item = impl IntoElement>) -> Self
placement(placement: BubblePlacement) -> Self
grouped(grouped: bool) -> Self
max_width(width: f32) -> Self

Example · bubble

fn bubble(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    let message = |id: &'static str, label: &'static str, body: &'static str, placement| {
        Bubble::new(id, label)
            .placement(placement)
            .content(crate::foundation::text(&theme, TypeScale::Body, body))
            .actions([Button::new(format!("{id}.action")).label("Reply").ghost()])
    };
    stack(&theme)
        .w(px(620.0))
        .child(caption(
            &theme,
            "Placement and grouping are visual policy; the message and actions belong to the caller",
        ))
        .child(message(
            "scene.bubble.start",
            "Incoming message",
            "The gateway is ready for the next run.",
            BubblePlacement::Start,
        ))
        .child(message(
            "scene.bubble.end",
            "Outgoing message",
            "Start the run when the inputs are verified.",
            BubblePlacement::End,
        ))
        .child(
            Bubble::new("scene.bubble.grouped", "Grouped message")
                .grouped(true)
                .content(crate::foundation::text(
                    &theme,
                    TypeScale::Body,
                    "A grouped follow-up shares the control radius.",
                )),
        )
        .into_any_element()
}

Source: crates/gpui-kit/src/display/bubble.rs