UI組件庫Kendo UI for Angular入門指南教程 - 對話式用戶界面功能

Conversational UI組件彌合了Web 和下一代自然語言應用程序之間的差距。Conversational UI 包提供了Kendo UI聊天組件，該組件允許用戶參與與其他用戶或聊天機器人的聊天會話。

Conversational UI Package 是 Kendo UI for Angular 的一部分，這是一個專業級 UI 庫，具有 100 多個組件，用於構建現代且功能豐富的應用程序。

Kendo UI for Angular最新版工具下載

基本用法

以下示例演示了 Chat 的實際操作。

app.component.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 stream
this.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 messages
scan((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 './app.component';

@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 './app.component';

@NgModule({
bootstrap: [ AppComponent ],
declarations: [ AppComponent ],
imports: [
BrowserModule,
BrowserAnimationsModule,
ChatModule
]
})
export class AppModule {
}

3. 您需要安裝一個Kendo UI主題來設置組件的樣式。

4. 對於Angular 9.x 及更高版本，安裝 @angular/localize 包：

1. 運行npm install --save @angular/localize。
2. 添加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-licensing
• rxjs 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中文網！