Concept 05 / 10

Concept 05

AI compresses to one smart summary pill

All AI-mapped filters collapse into a single expandable summary pill. The rest of the bar stays visible.

Why useful

Extremely compact; great for responsive layouts and cross-LOB scaling.

Key risk

Detail is hidden until expanded; users may not realize what is applied.

Example query

"Breakfast, wifi, and parking"

Section — Interactive demo · Click ✨ AI Filter to try

Interactive demo · Click ✨ AI Filter to try

All filtersHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

Section A — End-to-end interaction flow

1 · Default

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

›

2 · Click AI Filter

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

›

3 · Type

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

Breakfast, wifi, and parking

›

4 · Applied — summary pill

All filtersHotel ratingPrice✨ AI: Breakfast + Wifi + Parking ▾×

›

5 · Expanded breakdown

All filters✨ AI: Breakfast + Wifi + Parking ▴×

3 filters applied from your request

Includes breakfastRemove

High-speed InternetRemove

ParkingRemove

Section B — Static state breakouts

Default

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

Summary collapsed

All filters✨ AI: Breakfast + Wifi + Parking ▾×

Summary expanded

3 filters applied

BreakfastWifiParking

Long request truncates

All filters✨ AI: Breakfast + Wifi + Parking + 4 more ▾×

Remove one inside breakdown

2 filters applied

BreakfastParking

Summary pill updates to 'Breakfast + Parking'.

Summary removed → bar reset

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

Hover summary → tooltip preview

All filters✨ AI: Breakfast + Wifi + Parking

From: "Breakfast, wifi, and parking"

No supported match

All filters✨ AI Filter

Nothing matched. Try rephrasing.

Parsing

All filters✨ Parsing…

Section C — Notes & tradeoffs

What changes in the bar: Exactly one new pill is added regardless of how many filters were mapped.
Existing pills: Visible and interactive throughout.
AI representation: Single dashed summary pill, expandable into a breakdown popover.
Edit / remove: Remove individual filters inside the popover or remove the whole summary pill.
Cross-LOB scaling: Best-fit pattern for narrow filter bars (mobile, flights with many native pills).
Unsupported terms: Listed at the bottom of the breakdown popover.

← Concept 04: AI preview before apply

All concepts

Concept 06: Persistent AI input →