This sample demonstrates a configurable AI AssistView that supports multiple chat display modes, model selection, chat history management, file attachments, and voice-based input and output interactions.
DEMO
SOURCE
Product Planning Notes
Project: Website Revamp
Objectives
- Improve page load performance
- Simplify navigation for end users
- Optimize mobile experience
- Increase accessibility compliance
Discussion Points
- Dashboard load time is slow on mobile devices
- Export and reporting options are difficult to locate
- Accessibility audit flagged missing ARIA labels
Ideas
- Introduce lazy loading for charts and grids
- Move advanced filters into a secondary panel
- Add keyboard navigation and screen reader support
The AI AssistView sample showcases how an interactive assistant experience can be embedded and managed within different UI layouts while offering rich user controls and session persistence:
- Floating, sidebar, and full-screen chat modes with seamless view switching.
- Prompt suggestions rendered using a custom item template with contextual icons.
- Multiple AI model selection via a dropdown, with dynamic icon updates.
- Chat session creation, persistence, and history navigation.
- File upload and removal support using configured attachment endpoints.
- Speech-to-text input and text-to-speech playback for hands-free interaction.
- Toolbar actions for starting new chats, sharing conversations, hiding the assistant, and resizing views.
- Floating action button (FAB) to restore the assistant when hidden.