chore: add conversational-ui demo

Author: georgi-sla

examples-standalone/kendoangular-landing-page/package-lock.json

@@ -22,6 +22,7 @@
     "@progress/kendo-angular-buttons": "18.5.2",
     "@progress/kendo-angular-charts": "^18.5.2",
     "@progress/kendo-angular-common": "18.5.2",
+    "@progress/kendo-angular-conversational-ui": "^18.5.2",
     "@progress/kendo-angular-dateinputs": "18.5.2",
     "@progress/kendo-angular-dialog": "18.5.2",
     "@progress/kendo-angular-dropdowns": "18.5.2",

examples-standalone/kendoangular-landing-page/package.json

@@ -0,0 +1,14 @@
+import { Subject } from 'rxjs';
+import { Injectable } from '@angular/core';
+
+@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);
+    }
+}

examples-standalone/kendoangular-landing-page/src/app/components/conversational-ui/chat.service.ts

@@ -0,0 +1,20 @@
+.container {
+    display: flex;
+    width: 100%;
+    height: 400px;
+    flex-direction: row;
+    margin: 0;
+    gap: 10%;
+    padding: 0% 5%;
+}
+
+.chat {
+    height: 400px;
+    width: 50%;
+    margin: 0;
+}
+
+.prompt {
+    height: 400px;
+    width: 50%;
+}

examples-standalone/kendoangular-landing-page/src/app/components/conversational-ui/conversational-ui.component.css

@@ -0,0 +1,18 @@
+<div class="container">
+    <kendo-chat class="chat" [messages]="(feed | async)!" [user]="user" (sendMessage)="sendMessage($event)">
+    </kendo-chat>
+
+    <kendo-aiprompt
+        class="prompt"
+        (promptRequest)="onPromptRequest($event)"
+        (commandExecute)="onCommandExecute($event)"
+        [promptOutputs]="promptOutputs"
+        [promptCommands]="commands"
+        [promptSuggestions]="suggestions"
+        [(activeView)]="activeView"
+    >
+        <kendo-aiprompt-prompt-view></kendo-aiprompt-prompt-view>
+        <kendo-aiprompt-output-view></kendo-aiprompt-output-view>
+        <kendo-aiprompt-command-view></kendo-aiprompt-command-view>
+    </kendo-aiprompt>
+</div>

examples-standalone/kendoangular-landing-page/src/app/components/conversational-ui/conversational-ui.component.html

@@ -0,0 +1,158 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
+import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
+import { KENDO_LAYOUT } from '@progress/kendo-angular-layout';
+import {
+    KENDO_CONVERSATIONALUI,
+    CommandExecuteEvent,
+    Message,
+    PromptCommand,
+    PromptOutput,
+    PromptRequestEvent,
+    SendMessageEvent,
+    User,
+} from '@progress/kendo-angular-conversational-ui';
+import {
+    SVGIcon,
+    bellIcon,
+    eyeIcon,
+    infoCircleIcon,
+    questionCircleIcon,
+    warningCircleIcon,
+    xIcon,
+} from '@progress/kendo-svg-icons';
+
+import { from, merge, Observable, Subject } from 'rxjs';
+import { ChatService } from './chat.service';
+import { map, scan } from 'rxjs/operators';
+
+@Component({
+    selector: 'app-conversational-ui',
+    standalone: true,
+    imports: [CommonModule, KENDO_CONVERSATIONALUI, KENDO_BUTTONS, KENDO_INPUTS, KENDO_LAYOUT],
+    providers: [ChatService],
+    templateUrl: './conversational-ui.component.html',
+    styleUrl: './conversational-ui.component.css',
+})
+export class ConversationalUiComponent {
+    public closeIcon: SVGIcon = xIcon;
+    public eye: SVGIcon = eyeIcon;
+    public feed: Observable<Message[]>;
+
+    public readonly user: User = {
+        id: 1,
+    };
+
+    public readonly bot: User = {
+        id: 0,
+    };
+
+    public promptOutputs: PromptOutput[] = [];
+    public activeView: number = 0;
+    public idCounter = 0;
+
+    public commands: PromptCommand[] = [
+        {
+            text: 'Command text 1',
+            id: 0,
+            icon: 'bell',
+            svgIcon: bellIcon,
+        },
+        {
+            text: 'Command text 2',
+            id: 1,
+            icon: 'info',
+            svgIcon: infoCircleIcon,
+        },
+        {
+            text: 'Command text 3',
+            id: 2,
+            icon: 'question',
+            svgIcon: questionCircleIcon,
+        },
+        {
+            text: 'Command text 4',
+            id: 3,
+            icon: 'warning',
+            svgIcon: warningCircleIcon,
+        },
+    ];
+
+    public suggestions: string[] = ['Suggеstion 1', 'Suggestion 2'];
+
+    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!',
+        };
+
+        this.feed = merge(
+            from([hello]),
+            this.local,
+            this.svc.responses.pipe(
+                map(
+                    (response): Message => ({
+                        author: this.bot,
+                        text: response,
+                    })
+                )
+            )
+        ).pipe(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,
+        });
+
+        if (e.message.text) {
+            this.svc.submit(e.message.text);
+        }
+    }
+
+    public onPromptRequest(ev: PromptRequestEvent): void {
+        if (!ev.prompt) {
+            return;
+        }
+        this.createPromptOutput(ev);
+        this.activeView = 1;
+    }
+
+    public onCommandExecute(ev: CommandExecuteEvent): void {
+        this.createPromptOutput(ev);
+        this.activeView = 1;
+    }
+
+    private createPromptOutput(ev: PromptRequestEvent | CommandExecuteEvent): void {
+        this.idCounter += 1;
+        const newOutput = {
+            title: ev.isRetry ? 'Retry test title' : 'Test title',
+            id: this.idCounter,
+            prompt: (ev as PromptRequestEvent).prompt
+                ? (ev as PromptRequestEvent).prompt
+                : (ev as CommandExecuteEvent).command.text,
+            output: 'Test content',
+            isRetry: ev.isRetry,
+            commandId: (ev as PromptRequestEvent).prompt ? null : (ev as CommandExecuteEvent).command.id,
+        };
+        this.promptOutputs.unshift(newOutput as PromptOutput);
+    }
+}