Skip to content

feat: pill for enabled tools in the composer - #15

Merged
divyanshub024 merged 1 commit into
mainfrom
dv/pill
Aug 20, 2026
Merged

feat: pill for enabled tools in the composer#15
divyanshub024 merged 1 commit into
mainfrom
dv/pill

Conversation

@divyanshub024

@divyanshub024 divyanshub024 commented Aug 20, 2026

Copy link
Copy Markdown
Member

Summary

Roadmap row 24 (new). Adds FlowPill, the removable pill for an enabled tool or mode in the composer's action row: an 18px host-passed icon, the tool's name, and a 14px X that reports removal through onRemove. Presence is the state: the host renders a pill while its tool is on, and turning it off is the host's move. On iOS and Android the label drops away to the design's icon-only form; showLabel forces either.

Also in this PR: a Pill playground stage with four variants (default, icon only, no remove, in composer), Research and Web Search pills wired live into the Full Chat demo's add menu, a docs page, and the usual bookkeeping (README table, CHANGELOG, roadmap rows). Purely additive, no breaking changes.

Notes for review:

  • The fill is surfaceContainerLow (the design's exact 4% wash). The hairline is outlineVariant at 6% against the design's 4%: the token's doc comment names "a chip at rest" as its role, and the difference is invisible at 1px over the fill.
  • The auto compact check reads the theme's platform like the menus' sheet resolution, not a width breakpoint: the pill sits in the composer's unbounded action Row, so it cannot measure its pane.
  • label is required even when not painted; it is always the pill's accessible name. removeTooltip doubles as the X's tooltip and accessible name, the circle button's idiom.
  • The X's tap target spans the pill's full 32px height and absorbs the end padding (about 28x32), kept on the correct side in RTL.
  • A pill without onRemove is a static token in full ink, not disabled; enabled: false is the explicit disabled state. This deliberately diverges from FlowSuggestion, where a null tap reads disabled.
  • Chip (roadmap 6) and Tool (roadmap 17) stay reserved; this takes a new row 24 under AI elements, and the Surfaces rows shift to 25 through 27.

Screenshots

Before After
New component (playground captures being attached)

How this was verified

Rendered the built playground (flutter build web) through headless Chrome against the embed URLs: all four Pill stage variants in light, plus the default variant in dark. Pills match the Figma comps (210:737, 223:776, and the composer contexts): metrics, ink levels, the compact form's tighter gap, the disabled fade, and the pill sitting flush in the composer's 32px action row next to the add menu. Interactive behavior (hover washes, X removal, menu toggling in Full Chat) still deserves a hands-on pass. flutter analyze clean in the package root, example/, and playground/; dart format . applied; docs site builds with the new page.

Checklist

  • flutter analyze lib and flutter analyze in example/ and playground/ are clean
  • dart format . applied
  • Exercised in the playground — with a stage demo added or updated if this is a new component or variant
  • No new entries under dependencies: in pubspec.yaml (Flutter SDK and flutter.dev packages only)
  • Nothing model-facing — no prompts, schemas, or provider/network calls
  • New public API is exported from lib/flow_ui.dart and documented in docs/ and the README table
  • CHANGELOG.md updated for user-facing changes, with breaking changes called out
  • PR title follows conventional commits (feat:, fix:, refactor:, docs:, chore:)

Note

Low Risk
Purely additive UI widget and docs; no changes to existing APIs, auth, or data handling.

Overview
Adds FlowPill, a host-driven token for an enabled tool or mode in FlowComposer.leadingActions. Presence is the state: the host renders a pill while the tool is on; onRemove only reports the X, and turning the tool off stays with the host.

The labeled form shows icon + name; on iOS/Android the label auto-drops (theme platform, overridable via showLabel). A missing onRemove is a static token, not disabled — enabled: false is explicit. Optional onTap on the body, host-localized tooltips, and RTL-aware remove hit targets.

Playground stage (default / icon-only / static / in composer) plus live Research and Web Search pills in Full Chat. Docs, README, changelog, and roadmap row 24.

Reviewed by Cursor Bugbot for commit c23042c. Bugbot is set up for automated code reviews on this repo. Configure here.

@divyanshub024
divyanshub024 merged commit 9be8bd6 into main Aug 20, 2026
5 checks passed
@divyanshub024
divyanshub024 deleted the dv/pill branch August 20, 2026 19:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants