AI filter session with a persistent context banner

After AI is applied, a slim banner above the filter bar shows the active AI request, the count of mapped filters, and quick actions.

Why useful

Strongest sense of AI context; scalable across LOBs as a platform pattern.

Key risk

Adds another persistent UI layer above the bar.

Example query

"Business hotel with wifi and breakfast"

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 request

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

Business hotel with wifi and breakfast

›

4 · Banner appears + bar updates

✨ AI request active: "Business hotel with wifi and breakfast" · 3 supported filters appliedEdit · Clear

All filtersBusiness services×High-speed Internet×Breakfast×

›

5 · Banner expanded

✨ AI request: "Business hotel with wifi and breakfast"

Mapped to 3 supported filters · skipped 0

Edit requestView applied filtersClear AI request

All filtersBusiness services×Wifi×Breakfast×

Section B — Static state breakouts

Default

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

Banner — collapsed

✨ AI request active · 3 filters▾ Edit · Clear

Banner — expanded

✨ "Business hotel with wifi and breakfast"

EditView filtersClear

Bar with AI chips

All filtersBusiness services×Wifi×Breakfast×

Edit request inline

Business hotel with wifi, breakfast, and gym

Apply

Clear AI → bar resets, banner gone

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

No supported match

✨ AI request active · 0 supported filtersEdit · Clear

Banner with skipped count

✨ 2 applied · 1 skipped (not supported)Details

Cross-LOB preview

✨ Flights: "Direct, AM departure, with WiFi"Edit

✨ Cars: "Automatic SUV with GPS"Edit

Section C — Notes & tradeoffs

What changes in the bar: A persistent banner appears above the bar; the bar itself shows AI chips inline.
Existing pills: Visible below the banner; user can still manipulate them directly.
AI representation: Banner = session context; chips in bar = applied filters.
Edit / remove: Banner offers Edit / Clear; chips are removable individually.
Cross-LOB scaling: Banner is the strongest scalable platform pattern — same component for flights, rail, cars.
Unsupported terms: Surfaced as a 'skipped' count in the banner.

← Concept 09: Interpretation modes

All concepts