Nabe AI — Toggle Options
Resident / Agent mode toggle in chat header — 4 variations
Variation 1: Pill Toggle — Resident
Segmented pill, gradient active state, right-aligned
✨
AI
Nabe AI
Resident
Agent
✕
✨
Hey! 👋 I can help you find apartments and answer neighborhood questions. Here are some things you can ask:
🏠
Find me a 2BR under $4K
🏘️
What's the vibe on N 6th St?
⭐
Best-reviewed buildings nearby
🍽️
Top restaurants in Williamsburg
Ask anything about the neighborhood...
Variation 2: Pill Toggle — Agent
Same pill, agent mode active — gold accent line + avatar ring
✨
AI
Nabe AI
Resident
Agent
✕
✨
Hey Emma! 👋 I can help you draft responses, prep for meetings, and match clients. Here's what I can do:
📋
Prep me for my 2pm showing
✍️
Draft a response about parking on N 6th
🎯
Which clients match this new listing?
🔔
Follow-up reminders
Ask anything about the neighborhood...
Variation 3: Dropdown — Resident
Compact dropdown select, more header breathing room
✨
AI
Nabe AI
Resident
▾
✕
✨
Hey! 👋 I can help you find apartments and answer neighborhood questions. Here are some things you can ask:
🏠
Find me a 2BR under $4K
🏘️
What's the vibe on N 6th St?
⭐
Best-reviewed buildings nearby
🍽️
Top restaurants in Williamsburg
Ask anything about the neighborhood...
Variation 4: Icon Toggle — Agent
House + briefcase icons, most compact, gradient active circle
✨
AI
Nabe AI
✕
✨
Hey Emma! 👋 I can help you draft responses, prep for meetings, and match clients. Here's what I can do:
📋
Prep me for my 2pm showing
✍️
Draft a response about parking on N 6th
🎯
Which clients match this new listing?
🔔
Follow-up reminders
Ask anything about the neighborhood...