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 breakfastPriceSort: Recommended ▾

Section A — End-to-end interaction flow

1 · Default

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPriceSort: Recommended ▾

›

2 · Click AI Filter

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPriceSort: Recommended ▾

›

3 · Type

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPriceSort: Recommended ▾

Breakfast, wifi, and parking

›

4 · Applied — summary pill

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

›

5 · Expanded breakdown

All filters✨ AI: Breakfast + Wifi + Parking ▴×Sort: Recommended ▾

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 breakfastPriceSort: Recommended ▾

Summary collapsed

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

Summary expanded

3 filters applied

BreakfastWifiParking

Long request truncates

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

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 breakfastPriceSort: Recommended ▾

Hover summary → tooltip preview

All filters✨ AI: Breakfast + Wifi + ParkingSort: Recommended ▾

From: "Breakfast, wifi, and parking"

No supported match

All filters✨ AI FilterSort: Recommended ▾

Nothing matched. Try rephrasing.

Parsing

All filters✨ Parsing…Sort: Recommended ▾

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 →