Example of Notion Ai Clone in Javascript AI AssistView

/
/
Notion AI-like

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.

More Details...

📘

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
✨ Use AI Assist to summarize notes, generate tasks, or get insights.
Description

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.