syncfusion-angular-ai-assistview

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion Angular AI AssistView Component

Syncfusion Angular AI AssistView组件

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

Syncfusion AI AssistView 是一款功能强大的Angular组件，为构建对话式AI应用提供即用型界面。

核心功能：

对话管理 - 管理带有历史记录、持久化和Markdown渲染的提示-响应对
AI服务集成 - 支持连接OpenAI、Gemini、Ollama、Lite-LLM和MCP提供商，具备流式响应能力
语音功能 - 内置语音转文本功能，包含11个可配置属性和4个事件
工具栏系统 - 四种工具栏类型（头部、提示框、响应框、底部），支持自定义操作和标签指令
视图管理 - 多视图支持，可通过
```
activeView
```
编程控制并实现动态切换
事件与交互 - 类型化事件参数（PromptRequestEventArgs、PromptChangedEventArgs、StopRespondingEventArgs）
文件附件 - 支持文件上传，可限制文件类型/大小，提供附件点击事件
模板系统 - 可通过灵活模板自定义提示框、响应内容、建议和横幅
编程方法 - 可通过代码添加/更新响应、执行提示并控制组件行为
全球化 - 完整RTL支持，支持12+种语言的本地化及区域格式
UI自定义 - 支持高度、宽度、CSS类、HTML属性和主题自定义

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速开始

📄 Read: references/getting-started.md

Installation and dependency setup
Angular environment configuration
Basic component initialization
CSS imports and theme configuration
First working example

📄 阅读： references/getting-started.md

安装与依赖配置
Angular环境设置
组件基础初始化
CSS导入与主题配置
首个可用示例

Core Features & Conversation Management

核心功能与对话管理

📄 Read: 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

📄 阅读： references/assist-view-basics.md

设置提示文本和占位符
管理提示-响应集合
Markdown响应渲染
配置提示建议
自定义用户与助手头像
UI控件（清除按钮、滚动到底部）
组件配置（高度、宽度、showHeader、cssClass、htmlAttributes）
通过
```
enablePersistence
```
实现状态持久化
全球化与本地化（支持12+种语言的locale属性）
针对阿拉伯语、希伯来语、波斯语、乌尔都语的RTL支持（
```
enableRtl
```
）

Appearance & Styling

外观与样式

📄 Read: references/appearance-customization.md

Setting component width and height
Applying custom CSS classes
Theme customization
Responsive design patterns

📄 阅读： references/appearance-customization.md

设置组件宽度和高度
应用自定义CSS类
主题自定义
响应式设计模式

Multiple Views & Custom Content

多视图与自定义内容

📄 Read: 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

📄 阅读： references/custom-views.md

添加自定义视图模型
视图类型（Assist、Custom）
视图配置与命名
在单个组件中管理多视图
通过
```
activeView
```
属性编程切换视图
动态视图导航模式
视图历史与面包屑导航
基于工作流的视图切换
根据用户角色条件显示视图

Programmatic Control & Methods

编程控制与方法

📄 Read: 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

📄 阅读： references/methods-and-actions.md

添加提示响应（字符串和对象格式）
完整事件参数参考
包含6个属性的PromptRequestEventArgs（prompt、attachedFiles、promptSuggestions、cancel等）
包含5个属性的PromptChangedEventArgs（value、previousValue、element、event）
用于取消响应的StopRespondingEventArgs
包含FileInfo接口的AttachmentClickEventArgs
包含所有事件类型的生产就绪示例
动态执行提示
响应处理模式
编程交互

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

头部工具栏（
```
toolbarSettings
```
）- 全局操作与导航
提示框工具栏（
```
promptToolbarSettings
```
）- 用户提示相关操作
响应框工具栏（
```
responseToolbarSettings
```
）- AI响应相关操作
底部工具栏（
```
footerToolbarSettings
```
）- 输入区域自定义
包含10个属性的ToolbarItemModel接口
支持dataIndex处理的ToolbarItemClickedEventArgs
标签指令方式：
```
<e-toolbarsettings>
```
、
```
<e-toolbaritem>
```
动态工具栏项的属性绑定方式
常见模式、最佳实践与故障排除
文件上传事件（beforeAttachmentUpload、attachmentUploadSuccess）
事件处理模式与最佳实践

File Attachments

文件附件

📄 Read: references/file-attachments.md

File attachment configuration
Upload handling and validation
File size and type restrictions
Attachment display and management

📄 阅读： references/file-attachments.md

文件附件配置
上传处理与验证
文件大小与类型限制
附件显示与管理

Toolbar Configuration

工具栏配置

📄 Read: 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

📄 阅读： references/toolbar-items.md

工具栏自定义
基于
```
speechToTextSettings
```
的内置语音转文本（推荐方案）
包含11个可配置属性的SpeechToTextSettingsModel
ButtonSettingsModel和TooltipSettingsModel接口
4个语音事件：onStart、onStop、transcriptChanged、onError
事件参数：StartListeningEventArgs、StopListeningEventArgs、TranscriptChangedEventArgs、ErrorEventArgs
支持10+种语言代码（en-US、es-ES、fr-FR、de-DE、ja-JP等）
通过
```
allowInterimResults
```
处理临时结果
自定义Web Speech API实现（替代方案）
文本转语音设置与配置
浏览器兼容性与错误处理

Templates & Custom Rendering

模板与自定义渲染

📄 Read: references/templates.md

Template system overview
Prompt templates
Response templates
Custom template creation

📄 阅读： references/templates.md

模板系统概述
提示模板
响应模板
自定义模板创建

AI Service Integration

AI服务集成

📄 Read: 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

📄 阅读： references/ai-integrations.md

Azure OpenAI集成设置
Gemini集成
Lite-LLM集成
模型上下文协议（MCP）集成
Ollama集成
安全最佳实践与API管理

Speech Features

语音功能

📄 Read: references/speech-features.md

Speech-to-text setup and configuration
Text-to-speech setup and configuration
Audio handling
Browser compatibility considerations

📄 阅读： references/speech-features.md

语音转文本设置与配置
文本转语音设置与配置
音频处理
浏览器兼容性注意事项

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);
  }
}

以下是一个最简可用示例：

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
User enters prompt
```
promptRequest
```
event fires
Call your AI service
Use
```
addPromptResponse()
```
to display result
Conversation history maintained automatically

初始化组件并配置提示建议
用户输入提示内容
触发
```
promptRequest
```
事件
调用AI服务
使用
```
addPromptResponse()
```
显示结果
自动维护对话历史

Pattern 2: AI Service Integration with Streaming

模式2：带流式响应的AI服务集成

Enable streaming with
```
[enableStreaming]="true"
```
Configure AI provider credentials (OpenAI, Gemini, etc.)
In
```
promptRequest
```
event, call provider API with streaming
Use
```
ReadableStream
```
for chunked responses
Handle
```
stopRespondingClick
```
event for cancellation
Update UI with
```
addPromptResponse()
```
incrementally

通过
```
[enableStreaming]="true"
```
启用流式响应
配置AI提供商凭证（OpenAI、Gemini等）
在
```
promptRequest
```
事件中，调用提供商的流式API
使用
```
ReadableStream
```
处理分块响应
处理
```
stopRespondingClick
```
事件以取消请求
通过
```
addPromptResponse()
```
逐步更新UI

Pattern 3: Custom View Management with activeView

模式3：基于activeView的自定义视图管理

Define multiple view types (Assist, Custom)
Use
```
[activeView]="currentIndex"
```
to control display
Switch between views programmatically based on user action
Track view history for back/forward navigation
Each view can have different configuration
Maintain separate state per view

定义多种视图类型（Assist、Custom）
使用
```
[activeView]="currentIndex"
```
控制显示
根据用户操作编程切换视图
跟踪视图历史以支持前进/后退导航
每个视图可配置不同参数
为每个视图维护独立状态

Pattern 4: Complete Toolbar Configuration

模式4：完整工具栏配置

Configure header toolbar for global actions (new chat, export, settings)
Set up prompt toolbar for user prompt actions (edit, copy, retry)
Add response toolbar for AI response actions (copy, regenerate, like/dislike)
Configure footer toolbar for input actions (formatting, attachments)
Use tag directive or property binding approach
Handle
```
itemClicked
```
events with
```
dataIndex
```
for context

配置头部工具栏用于全局操作（新建对话、导出、设置）
设置提示框工具栏用于用户提示操作（编辑、复制、重试）
添加响应框工具栏用于AI响应操作（复制、重新生成、点赞/点踩）
配置底部工具栏用于输入操作（格式化、附件）
使用标签指令或属性绑定方式
结合
```
dataIndex
```
处理
```
itemClicked
```
事件

Pattern 5: Speech-Enabled Interface

模式5：语音启用界面

Configure
```
speechToTextSettings
```
with language and options
Enable
```
allowInterimResults
```
for real-time transcription
Handle speech events:
```
onStart
```
,
```
onStop
```
,
```
transcriptChanged
```
,
```
onError
```
Automatically submit recognized text as prompts
Provide visual feedback during listening state

配置
```
speechToTextSettings
```
的语言和选项
启用
```
allowInterimResults
```
以支持实时转录
处理语音事件：
```
onStart
```
、
```
onStop
```
、
```
transcriptChanged
```
、
```
onError
```
自动将识别的文本作为提示提交
在监听状态下提供视觉反馈

Pattern 6: Event-Driven Actions with Typed Arguments

模式6：基于类型化参数的事件驱动操作

Use
```
PromptRequestEventArgs
```
to access prompt, attachedFiles, and cancel flag
Use
```
PromptChangedEventArgs
```
for real-time input validation
Handle
```
StopRespondingEventArgs
```
to cancel long-running requests
Use
```
beforeAttachmentUpload
```
for file validation 5

使用
```
PromptRequestEventArgs
```
访问提示内容、附件文件和取消标志
使用
```
PromptChangedEventArgs
```
进行实时输入验证
处理
```
StopRespondingEventArgs
```
以取消长时间运行的请求
使用
```
beforeAttachmentUpload
```
进行文件验证

Common Patterns

常见模式

Pattern 1: Basic Conversation Flowstreaming responses, multi-language support, and toolbar actions

模式1：基础对话流程（流式响应、多语言支持、工具栏操作）

Code Assistant: Create coding helpers with syntax highlighting, code regeneration, and like/dislike feedback
Voice-Enabled Assistant: Implement hands-free interfaces with built-in speech-to-text in 10+ languages
Content Writer Assistant: Implement writing tools with grammar checking, real-time suggestions, and response streaming
Data Analysis Tool: Create interfaces with multiple views (query, results, visualization) and view switching
Learning Platform: Build educational assistants with RTL support for Arabic/Hebrew learners and persistent conversation history
Multi-language Support: Implement interfaces with locale configuration for 12+ languages and RTL text direction
Accessibility Assistant: Provide reading aid with speech features, keyboard navigation, and ARIA attributes
Workflow Applications: Build step-by-step wizards with programmatic view control and conditional navigation
Real-time AI Services: Integrate streaming AI providers with abort functionality and visual streaming indicatorser input | |
```
promptSuggestions
```
| string[] |
```
[]
```
| Provide quick starting prompts | |
```
prompts
```
| object[] |
```
[]
```
| Initialize conversation history | |
```
showClearButton
```
| boolean |
```
false
```
| Show button to clear input | |
```
enableScrollToBottom
```
| boolean |
```
true
```
| Show scroll-to-bottom indicator |

代码助手： 构建具备语法高亮、代码重新生成和点赞/点踩反馈的编码助手
语音启用助手： 实现支持10+种语言内置语音转文本的免手动界面
内容写作助手： 构建具备语法检查、实时建议和响应流式传输的写作工具
数据分析工具： 创建包含多视图（查询、结果、可视化）和视图切换的界面
学习平台： 为阿拉伯语/希伯来语学习者构建支持RTL的教育助手，并具备持久对话历史
多语言支持： 实现支持12+种语言的区域配置和RTL文本方向的界面
无障碍助手： 提供具备语音功能、键盘导航和ARIA属性的阅读辅助
工作流应用： 构建具备编程视图控制和条件导航的分步向导
实时AI服务： 集成支持中止功能和视觉流式指示器的流式AI提供商

Layout & Appearance

属性参考

Property	Type	Default	When to Use
`width`	string \| number	`'100%'`	Set container width
`height`	string \| number	`'100%'`	Set container height
`cssClass`	string	`''`	Apply custom CSS styling and themes
`showHeader`	boolean	`true`	Control header visibility
`htmlAttributes`	object	`{}`	Add custom HTML attributes (aria-, data-, etc.)

属性	类型	默认值	适用场景
`prompt`	string	`''`	预填充提示文本
`promptPlaceholder`	string	`'Type prompt for assistance...'`	引导用户输入
`promptSuggestions`	string[]	`[]`	提供快速启动提示
`prompts`	object[]	`[]`	初始化对话历史
`showClearButton`	boolean	`false`	显示清除输入按钮
`enableScrollToBottom`	boolean	`true`	显示滚动到底部指示器

Streaming & Features

布局与外观

Property	Type	Default	When to Use
`enableStreaming`	boolean	`false`	Enable real-time streaming responses
`speechToTextSettings`	SpeechToTextSettingsModel	`null`	Configure built-in speech recognition
`activeView`	number	`0`	Programmatically switch between views

属性	类型	默认值	适用场景
`width`	string \| number	`'100%'`	设置容器宽度
`height`	string \| number	`'100%'`	设置容器高度
`cssClass`	string	`''`	应用自定义CSS样式和主题
`showHeader`	boolean	`true`	控制头部可见性
`htmlAttributes`	object	`{}`	添加自定义HTML属性（aria-、data-等）

Globalization

流式传输与功能

Property	Type	Default	When to Use
`locale`	string	`'en-US'`	Set language/culture (en-US, es-ES, fr-FR, de-DE, ja-JP, ar-SA, etc.)
`enableRtl`	boolean	`false`	Enable right-to-left text direction (Arabic, Hebrew, Persian, Urdu)
`enablePersistence`	boolean	`false`	Save component state between page reloads

属性	类型	默认值	适用场景
`enableStreaming`	boolean	`false`	启用实时流式响应
`speechToTextSettings`	SpeechToTextSettingsModel	`null`	配置内置语音识别
`activeView`	number	`0`	编程切换视图

Toolbar Configuration

全球化

Property	Type	Default	When to Use
`toolbarSettings`	ToolbarSettingsModel	`null`	Configure header toolbar (global actions)
`promptToolbarSettings`	PromptToolbarSettingsModel	`null`	Configure prompt toolbar (edit, copy, retry)
`responseToolbarSettings`	ResponseToolbarSettingsModel	`null`	Configure response toolbar (copy, regenerate, like/dislike)
`footerToolbarSettings`	FooterToolbarSettingsModel	`null`	Configure footer toolbar (formatting, attachments)

属性	类型	默认值	适用场景
`locale`	string	`'en-US'`	设置语言/区域（en-US、es-ES、fr-FR、de-DE、ja-JP、ar-SA等）
`enableRtl`	boolean	`false`	启用从右到左文本方向（阿拉伯语、希伯来语、波斯语、乌尔都语）
`enablePersistence`	boolean	`false`	在页面刷新间保存组件状态

Pattern 3: Custom View Management

工具栏配置

Define multiple view types (Assist, Custom)
Switch between views based on user action
Each view can have different configuration
Maintain separate state per view

属性	类型	默认值	适用场景
`toolbarSettings`	ToolbarSettingsModel	`null`	配置头部工具栏（全局操作）
`promptToolbarSettings`	PromptToolbarSettingsModel	`null`	配置提示框工具栏（编辑、复制、重试）
`responseToolbarSettings`	ResponseToolbarSettingsModel	`null`	配置响应框工具栏（复制、重新生成、点赞/点踩）
`footerToolbarSettings`	FooterToolbarSettingsModel	`null`	配置底部工具栏（格式化、附件）

Pattern 4: Event-Driven Actions

模式3：自定义视图管理

Listen to
```
promptChanged
```
for input validation
Handle
```
beforeAttachmentUpload
```
for file validation
Use
```
attachmentUploadSuccess
```
for post-upload actions
Leverage
```
created
```
event for initialization

定义多种视图类型（Assist、Custom）
根据用户操作切换视图
每个视图可配置不同参数
为每个视图维护独立状态

Key Properties

模式4：事件驱动操作

Property	Type	Default	When to Use
`prompt`	string	`''`	Pre-fill prompt text
`promptPlaceholder`	string	`'Type prompt for assistance...'`	Guide user input
`promptSuggestions`	string[]	`[]`	Provide quick starting prompts
`prompts`	object[]	`[]`	Initialize conversation history
`width`	string	`'100%'`	Set container width
`height`	string	`'100%'`	Set container height
`cssClass`	string	`''`	Apply custom CSS styling
`showClearButton`	boolean	`false`	Show button to clear input
`enableScrollToBottom`	boolean	`true`	Show scroll-to-bottom indicator

监听
```
promptChanged
```
事件进行输入验证
处理
```
beforeAttachmentUpload
```
事件进行文件验证
使用
```
attachmentUploadSuccess
```
事件执行上传后操作
利用
```
created
```
事件进行初始化

Common Use Cases

核心属性

Customer Support Chatbot: Build customer service interfaces with knowledge base integration
Code Assistant: Create coding helpers with AI that can review and suggest code
Content Writer Assistant: Implement writing tools with grammar and style suggestions
Data Analysis Tool: Create interfaces for users to query and analyze data through natural language
Learning Platform: Build educational assistants that answer student questions
Internal Knowledge Bot: Create enterprise assistants for company documentation and FAQs
Multi-language Support: Implement translation and localization features
Accessibility Assistant: Provide reading aid or instruction assistance

属性	类型	默认值	适用场景
`prompt`	string	`''`	预填充提示文本
`promptPlaceholder`	string	`'Type prompt for assistance...'`	引导用户输入
`promptSuggestions`	string[]	`[]`	提供快速启动提示
`prompts`	object[]	`[]`	初始化对话历史
`width`	string	`'100%'`	设置容器宽度
`height`	string	`'100%'`	设置容器高度
`cssClass`	string	`''`	应用自定义CSS样式
`showClearButton`	boolean	`false`	显示清除输入按钮
`enableScrollToBottom`	boolean	`true`	显示滚动到底部指示器

—

常见用例

—

客户支持聊天机器人： 构建集成知识库的客户服务界面
代码助手： 创建可审查并建议代码的AI编码助手
内容写作助手： 实现具备语法和风格建议的写作工具
数据分析工具： 创建用户可通过自然语言查询和分析数据的界面
学习平台： 构建可解答学生问题的教育助手
内部知识机器人： 为企业文档和FAQ创建企业级助手
多语言支持： 实现翻译和本地化功能
无障碍助手： 提供阅读辅助或指令协助