chore: refine layout and content of the project (#4612)

Author: yanmariomenev

examples-standalone/kendoangular-landing-page/.prettierignore

@@ -0,0 +1,3 @@
+# Add files here to ignore them from prettier formatting
+
+/dist

examples-standalone/kendoangular-landing-page/.prettierrc

@@ -0,0 +1,5 @@
+{
+    "singleQuote": true,
+    "printWidth": 120,
+    "tabWidth": 4
+}

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

@@ -22,14 +22,19 @@
             ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets/",
+                "output": "/assets/"
+              },
               {
                 "glob": "**/*",
                 "input": "public"
               }
             ],
             "styles": [
               {
-                "input": "node_modules/@progress/kendo-theme-default/dist/default-ocean-blue-a11y.scss"
+                "input": "node_modules/@progress/kendo-theme-default/dist/default-ocean-blue.scss"
               },
               "src/styles.css"
             ],
@@ -84,6 +89,11 @@
             ],
             "tsConfig": "tsconfig.spec.json",
             "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets/",
+                "output": "/assets/"
+              },
               {
                 "glob": "**/*",
                 "input": "public"

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

@@ -10,15 +10,12 @@
         <kendo-aiprompt
             class="prompt"
             (promptRequest)="onPromptRequest($event)"
-            (commandExecute)="onCommandExecute($event)"
             [promptOutputs]="promptOutputs"
-            [promptCommands]="commands"
-            [promptSuggestions]="suggestions"
+            [promptSuggestions]="promptSuggestions"
             [(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>
 </div>

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

@@ -1,85 +1,42 @@
-import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
 
-import { KENDO_BUTTONS } from "@progress/kendo-angular-buttons";
+import { KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
+import { guid } from '@progress/kendo-angular-common';
 import {
-    CommandExecuteEvent,
     KENDO_CONVERSATIONALUI,
     Message,
-    PromptCommand,
     PromptOutput,
     PromptRequestEvent,
     SendMessageEvent,
     User,
-} from "@progress/kendo-angular-conversational-ui";
-import { KENDO_INPUTS } from "@progress/kendo-angular-inputs";
-import { KENDO_LAYOUT } from "@progress/kendo-angular-layout";
-import {
-    bellIcon,
-    eyeIcon,
-    infoCircleIcon,
-    questionCircleIcon,
-    SVGIcon,
-    warningCircleIcon,
-    xIcon,
-} from "@progress/kendo-svg-icons";
-
-import { from, merge, Observable, Subject } from "rxjs";
-import { map, scan } from "rxjs/operators";
-import { ChatService } from "./chat.service";
+} from '@progress/kendo-angular-conversational-ui';
+import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
+import { KENDO_LAYOUT } from '@progress/kendo-angular-layout';
+import { eyeIcon, SVGIcon, xIcon } from '@progress/kendo-svg-icons';
+import { from, merge, Observable, Subject } from 'rxjs';
+import { map, scan } from 'rxjs/operators';
+import { defaultResponse, promptData } from '../../data/ai-prompt-data';
+import { ChatService } from './chat.service';
 
 @Component({
-    selector: "app-conversational-ui",
+    selector: 'app-conversational-ui',
     imports: [CommonModule, KENDO_CONVERSATIONALUI, KENDO_BUTTONS, KENDO_INPUTS, KENDO_LAYOUT],
     providers: [ChatService],
-    templateUrl: "./conversational-ui.component.html",
-    styleUrl: "./conversational-ui.component.css",
+    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 promptOutputs: PromptOutput[] = [];
+    public activeView: number = 0;
     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[] = ["Generate out-of-office email template", "Write a LinkedIn post on the importance of work/life balance"];
+    public promptSuggestions = promptData.map((s) => s.suggestion);
 
     private local: Subject<Message> = new Subject<Message>();
 
@@ -88,16 +45,16 @@ export class ConversationalUiComponent {
             author: this.bot,
             suggestedActions: [
                 {
-                    type: "reply",
-                    value: "Neat!",
+                    type: 'reply',
+                    value: 'Neat!',
                 },
                 {
-                    type: "reply",
-                    value: "Thanks, but this is boring.",
+                    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!",
+            text: 'Hello, this is a demo bot. I don`t do much, but I can count symbols!',
         };
 
         this.feed = merge(
@@ -135,23 +92,18 @@ export class ConversationalUiComponent {
         this.activeView = 1;
     }
 
-    public onCommandExecute(ev: CommandExecuteEvent): void {
-        this.createPromptOutput(ev);
-        this.activeView = 1;
-    }
+    private createPromptOutput(ev: PromptRequestEvent): void {
+        const response = promptData.find((s) => s.suggestion === ev.prompt);
 
-    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",
+        const output: PromptOutput = {
+            id: guid(),
+            title: ev.prompt,
+            output: response?.response || defaultResponse,
+            prompt: ev.prompt,
             isRetry: ev.isRetry,
-            commandId: (ev as PromptRequestEvent).prompt ? null : (ev as CommandExecuteEvent).command.id,
         };
-        this.promptOutputs.unshift(newOutput as PromptOutput);
+
+        this.promptOutputs.unshift(output);
+        this.activeView = 1;
     }
 }

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

@@ -25,22 +25,14 @@
     font-size: 20px;
 }
 
-.window-content {
-    padding: 15px;
-}
-
-.window-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-    padding-bottom: 15px;
-    border-bottom: 1px solid #eee;
+kendo-window {
+    --kendo-window-titlebar-bg: #3f51b5;
+    --kendo-window-titlebar-text: white;
+    margin-top: 0;
 }
 
-.window-header .k-icon {
-    font-size: 24px;
-    margin-right: 10px;
-    color: #ff6358;
+.window-content {
+    padding: 15px;
 }
 
 .success-message,
@@ -57,11 +49,6 @@
     border-left-color: #2196f3;
 }
 
-kendo-window {
-    --kendo-window-titlebar-bg: #3f51b5;
-    --kendo-window-titlebar-text: white;
-}
-
 .k-form-field {
     margin-bottom: 15px;
 }
@@ -75,12 +62,14 @@ fieldset {
 
 legend {
     padding: 0 10px;
-    font-weight: 500;
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 5px;
     color: #455a64;
 }
 
 .k-actions {
-    margin-top: 20px;
+    margin-top: 15px;
 }
 
 @media (max-width: 768px) {

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

@@ -32,18 +32,13 @@ <h4>Kendo Angular Dialog</h4>
         title="Complete Your Profile"
         [minWidth]="320"
         [width]="500"
-        [height]="590"
-        [top]="160"
+        [height]="430"
+        [top]="80"
         [resizable]="true"
         [draggable]="true"
         (close)="closeWindow()"
     >
         <div class="window-content">
-            <div class="window-header">
-                <span class="k-icon k-i-user"></span>
-                <p>Please fill in your profile information to continue</p>
-            </div>
-
             <form class="k-form">
                 <fieldset>
                     <legend>Personal Information</legend>
@@ -69,10 +64,6 @@ <h4>Kendo Angular Dialog</h4>
                         <label>Date of Birth</label>
                         <kendo-datepicker placeholder="Select your birth date"></kendo-datepicker>
                     </div>
-                    <div class="k-form-field">
-                        <label>Bio</label>
-                        <kendo-textarea placeholder="Tell us about yourself" [rows]="3"></kendo-textarea>
-                    </div>
                 </fieldset>
 
                 <div class="k-actions k-actions-end">

examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.ts

@@ -1,23 +1,23 @@
-import { Component } from "@angular/core";
-import { FormsModule } from "@angular/forms";
-import { KENDO_BUTTONS } from "@progress/kendo-angular-buttons";
-import { KENDO_DATEINPUTS } from "@progress/kendo-angular-dateinputs";
-import { KENDO_DIALOGS } from "@progress/kendo-angular-dialog";
-import { KENDO_INPUTS } from "@progress/kendo-angular-inputs";
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
+import { KENDO_DATEINPUTS } from '@progress/kendo-angular-dateinputs';
+import { KENDO_DIALOGS } from '@progress/kendo-angular-dialog';
+import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
 
 @Component({
-    selector: "app-dialogs",
+    selector: 'app-dialogs',
     imports: [KENDO_DIALOGS, KENDO_BUTTONS, KENDO_INPUTS, KENDO_DATEINPUTS, FormsModule],
-    templateUrl: "./dialogs.component.html",
-    styleUrl: "./dialogs.component.css",
+    templateUrl: './dialogs.component.html',
+    styleUrl: './dialogs.component.css',
 })
 export class DialogsComponent {
     public windowOpened = true;
     public formSubmitted = false;
-    public firstName = "";
-    public lastName = "";
+    public firstName = '';
+    public lastName = '';
     public dialogOpened = false;
-    public confirmationResult = "";
+    public confirmationResult = '';
 
     public openWindow(): void {
         this.windowOpened = true;
@@ -47,8 +47,8 @@ export class DialogsComponent {
 
     public reset(): void {
         this.formSubmitted = false;
-        this.confirmationResult = "";
-        this.firstName = "";
-        this.lastName = "";
+        this.confirmationResult = '';
+        this.firstName = '';
+        this.lastName = '';
     }
 }

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

@@ -1,5 +1,5 @@
 <div style="display: flex; align-items: center; height: 420px">
-    <kendo-editor [value]="value" style="height: 420px">
+    <kendo-editor [value]="value" [iframe]="false" style="height: 420px">
         <kendo-toolbar>
             <kendo-toolbar-buttongroup>
                 <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
@@ -58,7 +58,6 @@
                 <kendo-toolbar-button kendoEditorMergeCellsButton></kendo-toolbar-button>
                 <kendo-toolbar-button kendoEditorSplitCellButton></kendo-toolbar-button>
             </kendo-toolbar-buttongroup>
-            <kendo-toolbar-button kendoEditorPrintButton></kendo-toolbar-button>
         </kendo-toolbar>
     </kendo-editor>
 </div>

examples-standalone/kendoangular-landing-page/src/app/components/editor/editor.component.ts

@@ -10,7 +10,10 @@ import { KENDO_TOOLBAR } from "@progress/kendo-angular-toolbar";
 })
 export class EditorComponent {
     public value = `
-  <p>
+    <div style="text-align: center;">
+        <img src="assets/kendoka.png" alt="Angular Kendoka" title="Kendo Angular" width="63" height="100"/>
+    </div>
+    <p>
       The Kendo Angular UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
       In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks and lists.
       The widget <strong>outputs identical HTML</strong> across all major browsers, follows