syncfusion-angular-ai-assistview

What this skill does

# Syncfusion Angular AI AssistView Component

## Component Overview

The **Syncfusion AI AssistView** is a powerful Angular component that provides a ready-to-use interface for building conversational AI applications.

**Key Capabilities:**
- **Conversation Management** - Manage prompt-response pairs with history, persistence, and markdown rendering
- **AI Service Integration** - Connect to OpenAI, Gemini, Ollama, Lite-LLM, and MCP providers with streaming support
- **Speech Features** - Built-in speech-to-text with 11 configurable properties and 4 events
- **Toolbar System** - Four toolbar types (header, prompt, response, footer) with custom actions and tag directives
- **View Management** - Multiple views with programmatic `activeView` control and dynamic switching
- **Events & Interactions** - Typed event arguments (PromptRequestEventArgs, PromptChangedEventArgs, StopRespondingEventArgs)
- **File Attachments** - Support for file uploads with type/size restrictions and attachment click events
- **Templates** - Customize prompts, responses, suggestions, and banners with flexible templates
- **Methods** - Programmatically add/update responses, execute prompts, and control component behavior
- **Globalization** - Full RTL support and localization for 12+ languages with locale-based formatting
- **Customizable UI** - Height, width, CSS classes, HTML attributes, and theme customization

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Installation and dependency setup
- Angular environment configuration
- Basic component initialization
- CSS imports and theme configuration
- First working example

### Core Features & Conversation Management
📄 **Read:** [references/assist-view-basics.md](references/assist-view-basics.md)
- Setting prompt text and placeholders
- Managing prompt-response collections
- Markdown response rendering
- Configuring prompt suggestions
- Customizing user and assistant avatars
- UI controls (clear button, scroll-to-bottom)
- Component configuration (height, width, showHeader, cssClass, htmlAttributes)
- State persistence with `enablePersistence`
- Globalization and localization (locale property with 12+ languages)
- RTL support with `enableRtl` for Arabic, Hebrew, Persian, Urdu

### Appearance & Styling
📄 **Read:** [references/appearance-customization.md](references/appearance-customization.md)
- Setting component width and height
- Applying custom CSS classes
- Theme customization
- Responsive design patterns

### Multiple Views & Custom Content
📄 **Read:** [references/custom-views.md](references/custom-views.md)
- Adding custom view models
- View types (Assist and Custom)
- View configuration and naming
- Managing multiple views within one component
- Programmatic view switching with `activeView` property
- Dynamic view navigation patterns
- View history and breadcrumb navigation
- Workflow-based view switching
- Conditional view display based on user roles

### Programmatic Control & Methods
📄 **Read:** [references/methods-and-actions.md](references/methods-and-actions.md)
- Adding prompt responses (string and object
- Complete event arguments reference section
- PromptRequestEventArgs with 6 properties (prompt, attachedFiles, promptSuggestions, cancel, etc.)
- PromptChangedEventArgs with 5 properties (value, previousValue, element, event)
- StopRespondingEventArgs for canceling responses
- AttachmentClickEventArgs with FileInfo interface
- Production-ready examples with all event types formats)
- Executing prompts dynamically
- Response handling patterns
- Programmatic interaction

## Complete documentation for all 4 toolbar types
- Header Toolbar (`toolbarSettings`) - Global actions and navigation
- Prompt Toolbar (`promptToolbarSettings`) - Actions on user prompts
- Response Toolbar (`responseToolbarSettings`) - Actions on AI responses
- Footer Toolbar (`footerToolbarSettings`) - Input area customization
- ToolbarItemModel interface with 10 properties
- ToolbarItemClickedEventArgs with dataIndex handling
- Tag directive approach: `<e-toolbarsettings>`, `<e-toolbaritem>`
- Property binding approach for dynamic toolbar items
- Common patterns, best practices, and troubleshootingest, promptChanged)
- File upload events (beforeAttachmentUpload, attachmentUploadSuccess)
- Event handling patterns and best practices

### File Attachments
📄 **Read:** [references/file-attachments.md](references/file-attachments.md)
- File attachment configuration
- Upload handling and validation
- File size and type restrictions
- Attachment display and management

### Toolbar Configuration
📄 **Read:** [references/toolbar-items.md](references/toolbar-items.md)
- Toolbar customization
- Built-in speech-to-text with `speechToTextSettings` (recommended approach)
- SpeechToTextSettingsModel with 11 configurable properties
- ButtonSettingsModel and TooltipSettingsModel interfaces
- 4 speech events: onStart, onStop, transcriptChanged, onError
- Event arguments: StartListeningEventArgs, StopListeningEventArgs, TranscriptChangedEventArgs, ErrorEventArgs
- Language support with 10+ language codes (en-US, es-ES, fr-FR, de-DE, ja-JP, etc.)
- Interim results handling with `allowInterimResults`
- Custom Web Speech API implementation (alternative approach)
- Text-to-speech setup and configuration
- Browser compatibility and error handling
### Templates & Custom Rendering
📄 **Read:** [references/templates.md](references/templates.md)
- Template system overview
- Prompt templates
- Response templates
- Custom template creation

### AI Service Integration
📄 **Read:** [references/ai-integrations.md](references/ai-integrations.md)
- Azure OpenAI integration setup
- Gemini integration
- Lite-LLM integration
- Model Context Protocol (MCP) integration
- Ollama integration
- Security best practices and API management

### Speech Features
📄 **Read:** [references/speech-features.md](references/speech-features.md)
- Speech-to-text setup and configuration
- Text-to-speech setup and configuration
- Audio handling
- Browser compatibility considerations

---

## Quick Start Example

Here's a minimal working example to get started:

```typescript
import { Component } from '@angular/core';
import { AIAssistViewModule } from '@syncfusion/ej2-angular-interactive-chat';

@Component({
  imports: [AIAssistViewModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div ejs-aiassistview 
      id='aiAssistView'
      [promptSuggestions]="suggestions"
      (promptRequest)="onPromptRequest($event)">
    </div>
  `,
  styles: [`
    :host ::ng-deep #aiAssistView {
      height: 100vh;
    }
  `]
})
export class AppComponent {
  suggestions = [
    'What is Angular?',
    'How to create components?',
    'Explain dependency injection'
  ];

  onPromptRequest(args: any) {
    // Handle prompt and provide response
    setTimeout(() => {
      const response = 'This is a sample response from your AI service.';
      // Add response using component method
    }, 1000);
  }
}
```

---

## Common Patterns

### Pattern 1: Basic Conversation Flow
1. Initialize component with suggestions
2. User enters prompt
3. `promptRequest` event fires
4. Call your AI service
5. Use `addPromptResponse()` to display result
6. Conversation history maintained automatically

### Pattern 2: AI Service Integration with Streaming
1. Enable streaming with `[enableStreaming]="true"`
2. Configure AI provider credentials (OpenAI, Gemini, etc.)
3. In `promptRequest` event, call provider API with streaming
4. Use `ReadableStream` for chunked responses
5. Handle `stopRespondingClick` event for cancellation
6. Update UI with `addPromptResponse()` incrementally

### Pattern 3: Custom View Management with activeView
1. Define multiple view types (Assist, Custom)
2. Use `[activeView]="currentIndex"` to control display
3. Switch between views programmatically based on user action
4. Track view history for back/forward