Conversational UI组件弥合了Web 和下一代自然语言应用程序之间的差距。Conversational UI 包提供了Kendo UI聊天组件，该组件允许用户参与与其他用户或聊天机器人的聊天会话。
Conversational UI Package 是Kendo UI for Angular的一部分，这是一个专业级 UI 库，具有 100 多个组件，用于构建现代且功能丰富的应用程序。
Kendo UI for Angular最新版工具下载
基本用法
以下示例演示了 Chat 的实际操作。
ponent.ts
import { Component } from '@angular/core';import { Subject, from, merge, Observable } from 'rxjs';import { switchMap, map, windowCount, scan, take, tap } from 'rxjs/operators';import { ChatModule, Message, User, Action, ExecuteActionEvent, SendMessageEvent } from '@progress/kendo-angular-conversational-ui';import { ChatService } from './chat.service';@Component({providers: [ ChatService ],selector: 'my-app',template: `<kendo-chat[messages]="feed | async"[user]="user"(sendMessage)="sendMessage($event)"></kendo-chat>`})export class AppComponent {public feed: Observable<Message[]>;public readonly user: User = {id: 1};public readonly bot: User = {id: 0};private local: Subject<Message> = new Subject<Message>();constructor(private svc: ChatService) {const hello: Message = {author: this.bot,suggestedActions: [{type: 'reply',value: 'Neat!'}, {type: 'reply',value: 'Thanks, but this is boring.'}],timestamp: new Date(),text: 'Hello, this is a demo bot. I don`t do much, but I can count symbols!'};// Merge local and remote messages into a single streamthis.feed = merge(from([ hello ]),this.local,this.svc.responses.pipe(map((response): Message => ({author: this.bot,text: response})))).pipe(// ... and emit an array of all messagesscan((acc: Message[], x: Message) => [...acc, x], []));}public sendMessage(e: SendMessageEvent): void {this.local.next(e.message);this.local.next({author: this.bot,typing: true});this.svc.submit(e.message.text);}}
chat.service.ts
import { Observable, Subject } from 'rxjs';import { Injectable } from '@angular/core';// Mock remote service@Injectable()export class ChatService {public readonly responses: Subject<string> = new Subject<string>();public submit(question: string): void {const length = question.length;const answer = `"${question}" contains exactly ${length} symbols.`;setTimeout(() => this.responses.next(answer),1000);}}
app.module.ts
import { NgModule } from '@angular/core';import { Component } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { ChatModule } from '@progress/kendo-angular-conversational-ui';import { AppComponent } from './ponent';@NgModule({imports: [ BrowserModule, BrowserAnimationsModule, ChatModule ],declarations: [ AppComponent ],bootstrap: [ AppComponent ]})export class AppModule { }
main.ts
import './polyfills';import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app.module';const platform = platformBrowserDynamic();platform.bootstrapModule(AppModule);
安装
使用快速设置 (Angular CLI) 或手动添加包。
使用Angular CLI进行快速设置
Angular CLI 支持通过 ng add 命令添加包，该命令一步执行一组其他单独需要的命令。
ng add @progress/kendo-angular-conversational-ui
手动设置
1. 下载并安装包及其对等依赖项。
npm install --save @progress/kendo-angular-conversational-ui @progress/kendo-angular-common @progress/kendo-angular-buttons @progress/kendo-angular-popup @progress/kendo-licensing
2. 安装后，在您的应用程序根或功能模块中导入 ChatModule。
import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { ChatModule } from '@progress/kendo-angular-conversational-ui';import { AppComponent } from './ponent';@NgModule({bootstrap: [ AppComponent ],declarations: [ AppComponent ],imports: [BrowserModule,BrowserAnimationsModule,ChatModule]})export class AppModule {}
3. 您需要安装一个Kendo UI主题来设置组件的样式。
4. 对于Angular 9.x 及更高版本，安装 @angular/localize 包：
运行npm install --save @angular/localize。添加import '@angular/localize/init';到你的src/polyfills.ts文件。
5. 按照 Kendo UI for Angular My License 页面上的说明激活您的授权许可。 如果您的应用程序已包含 Kendo UI 许可文件，则可以跳过此步骤。
依赖关系
Conversational UI 包需要您的应用程序必须安装以下对等依赖项：
@angular/common@angular/core@progress/kendo-angular-buttons@progress/kendo-angular-popup@progress/kendo-licensingrxjs 5.5+
Kendo UI for Angular | 下载试用
Kendo UI for Angular是Kendo UI系列商业产品的最新产品。Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件，无需任何jQuery依赖关系。
了解最新Kendo UI最新资讯，请关注Telerik中文网！
