Syncfusion React AI Assistview

Syncfusion React AI AssistView Component

Component Overview

The Syncfusion React AI AssistView component is a comprehensive interactive chat component designed for building AI-powered conversational interfaces. It provides:

Core Capabilities

• Prompt-Response Management: Manage conversation history with automatic data collection
• Real-time Streaming: Stream AI responses character-by-character for live typing effects
• Chain of Thoughts: Visualize AI reasoning process through thinking blocks with multi-stage workflow support
• Template System: Customize every UI element (banners, prompt items, responses, suggestions, footer)
• Multi-View Support: Switch between conversation assist view and custom content views
• Voice Integration: Built-in Speech-to-Text (voice input) and Text-to-Speech (voice output)
• File Attachments: Upload and include files with prompts
• Advanced Toolbars: Configurable toolbars for header, footer, responses, and prompts
• AI Service Integration: Direct integration with OpenAI, Azure OpenAI, and other AI services
• Event-Driven Architecture: Hooks for prompt submission, changes, and component lifecycle

Key Features

• Markdown Support: Render AI responses as formatted HTML via markdown parsing
• Conversation History: Automatic tracking of all prompts and responses
• Suggestion System: Display helpful prompt suggestions to guide users
• Avatar Customization: Customize user and AI icons/avatars
• Scroll Management: Auto-scroll or manual scroll-to-bottom button
• Clear Functionality: Clear current prompt or entire conversation
• Regenerate Responses: Request alternative AI responses for existing prompts without resubmitting queries
• Responsive Design: Works on desktop and mobile with responsive layouts

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Install @syncfusion/ej2-react-interactive-chat package
• Add CSS theme imports
• Create basic component initialization
• Render component to DOM
• First working functional component example

Configuration Essentials

📄 Read: references/configuration-essentials.md

• Set initial prompt text and placeholders
• Configure prompt suggestions and suggestion headers
• Customize user and AI avatar icons
• Control clear button visibility
• Enable/disable scroll-to-bottom functionality
• Manage component instance via refs
• Set component dimensions (height and width)
• Apply custom CSS classes for styling
• Control header visibility
• Configure globalization (locale, RTL support)
• Enable state persistence across sessions

Conversation Management

📄 Read: references/conversation-management.md

• Initialize with pre-configured conversation data
• Add responses (string or object format)
• Access and manage conversation history
• Work with PromptModel data structure
• Render markdown in responses
• Persist and restore conversations

Events and Interactions

📄 Read: references/events-and-interactions.md

• Handle component lifecycle (created event)
• Respond to prompt submissions (promptRequest event)
• Track prompt text changes (promptChanged event)
• Access detailed event arguments (PromptChangedEventArgs, PromptRequestEventArgs)
• Cancel prompt submissions programmatically
• Handle stop responding events for long operations
• Modify suggestions and toolbar items dynamically
• Implement event-driven workflows
• Integrate with AI services via event handlers

Toolbar Customization

📄 Read: references/toolbar-customization.md

• Configure four toolbar types (header, footer, response, prompt)
• Add custom toolbar items
• Control toolbar positioning (Inline vs Bottom)
• Customize toolbar icons
• Handle item click events
• Configure all ToolbarItemModel properties (align, cssClass, disabled, tabIndex, template, type, visible)
• Create custom toolbar item templates
• Control item visibility and enabled state dynamically
• Set tab order for keyboard navigation
• Manage attachment button behavior
• Enable regenerate responses functionality for multiple AI-generated responses
• Navigate between regenerated responses with previous/next buttons

File Attachments

📄 Read: references/file-attachments.md

• Enable file attachment support
• Configure upload endpoints (saveUrl, removeUrl)
• Restrict file types (allowedFileType)
• Set file size limits (maxFileSize)
• Limit number of attachments (maximumCount)
• Access attached files via attachedFiles array (FileInfo interface)
• Handle attachment lifecycle events (beforeAttachmentUpload, attachmentUploadSuccess, attachmentUploadFailure, attachmentRemoved)
• Validate files before upload
• Initialize prompts with pre-attached files
• Handle server-side file processing
• Custom attachment templates (attachmentTemplate)

Custom Views

📄 Read: references/custom-views.md

• Create multiple views (Assist and Custom types)
• Set view names and icons
• Define view-specific templates
• Configure activeView property to set initial view
• Switch between views programmatically
• Persist active view across sessions
• Conditionally set initial view based on user role or state
• Display side-by-side content panels
• Use cases for multi-view layouts

Templating System

📄 Read: references/templating-system.md

• Customize banner templates (welcome content)
• Create prompt item templates (user message display)
• Design response item templates (AI response display)
• Build suggestion item templates
• Create custom footer templates
• Access template context data

AI Service Integration

📄 Read: references/ai-integration-setup.md

• Integrate with Azure OpenAI, OpenAI, Gemini, Claude
• Configure API credentials and authentication
• Handle real-time prompt processing
• Stream responses for live typing effects
• Parse markdown responses with marked library
• Error handling and rate limiting
• Security considerations for API keys

Generative UI

📄 Read: references/generative-ui.md

• Register custom tools with registerToolUI() method
• Configure tool templates and handlers for rendering
• Add interactive elements (charts, cards, custom tools) via blocks property
• Render multiple tools within single AI response
• Configure AI system prompts for structured JSON generation
• AI service integration with generative UI blocks

Speech Capabilities

📄 Read: references/speech-capabilities.md

• Enable Speech-to-Text (voice input)
• Configure speech recognition language
• Handle interim transcripts while speaking
• Implement Text-to-Speech (voice output) via Web Speech API
• Convert AI responses to spoken audio
• Customize TTS with textToSpeechSettings (language, speechPitch, speechRate, volume, voice)
• Customize button labels and icons
• Handle speech events (start, stop, transcript, error)
• Browser compatibility notes

Chain of Thoughts

📄 Read: references/chain-of-thoughts.md

• Visualize AI reasoning process with thinking blocks
• Configure thinking blocks with stages and status updates
• Add multi-stage reasoning workflows (completed, inprogress, failed)
• Customize thinking block templates
• Add inline context items with badges and tooltips
• Handle editableContextClicked events for interactive context
• Configure stage-level item templates