Bubble

Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.

Overview

七种视觉变体：default / secondary / muted / tinted / outline / destructive / ghost（无框全宽）。

GPUI · Live previewGPUI WASM

Installation

Bubble 是单个 Rust 文件（src/bubble.rs），只依赖 gpui-kit —— 气泡、reaction chips、折叠开关都是普通 GPUI 元素。

Cargo.toml

1[dependencies]2gpui-kit = "0.6.6"34# bubble.rs is self-contained — reactions and frames5# are plain GPUI elements, no extra deps.

Download runnable example

Terminal

1# Download the runnable example crate, then:2cargo run --locked -- --bubble34# Other demos:5cargo run --locked -- --bubble alignment6cargo run --locked -- --bubble group7cargo run --locked -- --bubble reactions8cargo run --locked -- --bubble buttons9cargo run --locked -- --bubble collapsible

Usage

Bubble 是实体（cx.new），builder 配置文案、变体、对齐、reactions 与可点击性。气泡随内容自适应宽度，上限为行的 80%；Ghost 变体取消上限。

Example.rs

1use justdo_command::bubble::{Bubble, BubbleVariant, BubbleAlign};23// Bubble is an entity — keep it on your view, render as a4// child, subscribe for BubblePressEvent when pressable.5let bubble = cx.new(|_| {6    Bubble::new("Hey there! what's up?")7        .variant(BubbleVariant::Secondary)8        .align(BubbleAlign::Start)9        .reactions(vec!["👍".into()], BubbleAlign::Start)10});11div().child(bubble)

网页预览与桌面端运行同一份 Rust / GPUI 组件。

Composition

组合结构对齐 shadcn/ui 的 Bubble / BubbleContent / BubbleReactions / BubbleGroup。

Structure

1Bubble                    entity — the framed surface2├── BubbleContent         .text — sizes to content, up to 80% row3│   └── "Show more"       .collapsible(preview) toggle4├── BubbleReactions       .reactions(chips, side) — edge-overlapping chips5└── pressable             .pressable(true) -> BubblePressEvent67BubbleGroup               column of same-sender bubbles, small gap

Notes

Reactions. chips 用 absolute + bottom(px(-20.)) 在独立叠层中跨过气泡下缘，以 3px 背景色圆环形成凹口；side 控制停靠左/右；气泡自动加底部间距防止压住下一行。

Pressable vs collapsible. .pressable(true) 让整个气泡变成按钮（focusable + BubblePressEvent）；.collapsible(..) 在气泡内部放独立的 Show more/less 切换，两者可以共存但语义不同。

Accessibility

Alignment = sender

start/end 对齐表达收发双方；pressable 气泡可 Tab 聚焦并有 focus-visible 描边，否则不参与焦点顺序。

Reactions

reaction chips 是纯展示叠加层；emoji 经系统字体渲染彩色字形，明暗主题均有描边分隔。

API Reference

实体暴露的 builder 方法与事件。

API	Signature	Notes
`Bubble::new(..)`	`impl Into<SharedString>`	Bubble text; Secondary variant, Start aligned.
`.variant(..)`	`BubbleVariant`	Default \| Secondary \| Muted \| Tinted \| Outline \| Ghost \| Destructive.
`.align(..)`	`BubbleAlign`	Start \| End — which edge of the row the bubble hugs.
`.reactions(..)`	`Vec<SharedString>, BubbleAlign`	Edge-overlapping emoji chips; side picks the anchor edge.
`.pressable(..)`	`bool`	Button-style bubble: focus + BubblePressEvent on press.
`.collapsible(..)`	`impl Into<SharedString>`	Collapsed preview text + Show more/less toggle.
`.dark(..)`	`bool`	Dark scheme for surfaces, ink and chips.
`BubblePressEvent`	`{ label }`	Emitted by pressable bubbles; subscribe via cx.subscribe.

Source & inspiration

结构与视觉参考 shadcn/ui Bubble 。本页交互由 Rust / GPUI 绘制，基础样式来自 gpui-kit 。