chore: fix initial comments for layout, grid, treeview, conversationalui

Author: georgi-sla

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/grid/dynamic-grid.component.css

@@ -15,12 +15,12 @@
 }
 
 .red {
-    color: #f31700;
+    color: #d51923;
 }
 
 .green {
-    color: #37b400;
+    color: #278200;
 }
 .k-grid .k-table-row.k-table-alt-row {
     background-color: transparent;
-}
+}

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

@@ -5,7 +5,15 @@
         </button>
     </div>
     <kendo-drawer-container class="customClass">
-        <kendo-drawer #drawer [items]="items" mode="push" [mini]="true" [expanded]="true" (select)="onSelect($event)">
+        <kendo-drawer
+            #drawer
+            [items]="items"
+            mode="push"
+            [mini]="true"
+            [expanded]="true"
+            [autoCollapse]="false"
+            (select)="onSelect($event)"
+        >
         </kendo-drawer>
         <kendo-drawer-content>
             <layout-component [selectedItem]="selected"></layout-component>

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

@@ -1,6 +1,6 @@
 <div class="container">
     <div class="wrapper">
-        <p>TreeView - Multiple Selection Mode with Checkboxes</p>
+        <p>Multiple Selection Mode with Checkboxes</p>
         <kendo-treeview
             [nodes]="data"
             textField="text"
@@ -16,7 +16,7 @@
     </div>
 
     <div class="wrapper">
-        <p>TreeView - Drag and Drop Support</p>
+        <p>Drag and Drop Support</p>
         <kendo-treeview
             [nodes]="treeData"
             textField="text"

examples-standalone/kendoangular-landing-page/src/app/data/ai-prompt-data.ts

@@ -0,0 +1,33 @@
+export const defaultResponse = 'The request cannot be processed at this time. Please excuse us for the inconvenience.';
+
+export const promptData = [
+    {
+        suggestion: 'Generate out-of-office email template',
+        response: `Subject: Out of Office: [Your Name]
+    
+            Dear [Recipient's Name],
+    
+            I am currently out of the office until [Return Date] and won't have access to email. For urgent matters, please contact [Colleague's Name] at [Colleague's Email]. I'll respond to your email upon my return.
+    
+            Thank you,
+            [Your Name]`,
+    },
+    {
+        suggestion: 'Write a LinkedIn post on the importance of work/life balance',
+        response: `🌟 Embracing Work/Life Balance for Success 🌟
+    
+            Hello LinkedIn network! 👋 Today, let's talk about a key to our well-being: work/life balance. 🌐⚖️
+    
+            In our fast-paced world, balancing professional and personal life is not just a luxury, it's a necessity for health and productivity. 📈🌿
+    
+            ✨ Key Points ✨
+    
+            Enhances Productivity: Less burnout, more motivation. 🚀
+            Boosts Creativity: New experiences = fresh ideas. 💡
+            Improves Health: Mental and physical benefits. 🧘‍♂️
+            Strengthens Relationships: Quality time matters. 🤝
+            Let's champion a culture where success and well-being go hand in hand. Share your work/life balance tips below! 👇
+    
+            #WorkLifeBalance #Productivity #WellBeing`,
+    },
+];