Merge pull request #14 from DevExpress-Examples/Angular-changes

Angular - Fix TS

Author: 16adianay

Angular/src/app/app.component.html

@@ -1,5 +1,6 @@
 <div class="demo-container">
   <dx-chat
+    [class.chat-disabled]="isDisabled"
     [dataSource]="dataSource"
     [reloadOnChange]="false"
     [showAvatar]="false"

Angular/src/app/app.component.scss

@@ -3,6 +3,11 @@
   justify-content: center;
 }
 
+::ng-deep .chat-disabled .dx-chat-messagebox {
+  opacity: 0.5;
+  pointer-events: none !important;
+}
+
 ::ng-deep .dx-chat {
   max-width: 900px;
 }

Angular/src/app/app.component.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-import { User, Alert, Message, MessageEnteredEvent } from "devextreme/ui/chat";
+import { type DxChatTypes } from 'devextreme-angular/ui/chat';
 import { Observable } from "rxjs";
 import { AppService } from "./app.service";
 import { loadMessages } from "devextreme/localization";
-import DataSource from "devextreme/data/data_source";
+import { DataSource } from 'devextreme-angular/common/data';
 
 @Component({
   selector: 'app-root',
@@ -13,14 +13,16 @@ import DataSource from "devextreme/data/data_source";
 export class AppComponent {
   dataSource: DataSource;
 
-  user: User;
+  user: DxChatTypes.User;
 
-  typingUsers$: Observable<User[]> ;
+  typingUsers$: Observable<DxChatTypes.User[]> ;
 
-  alerts$: Observable<Alert[]>;
+  alerts$: Observable<DxChatTypes.Alert[]>;
 
   copyButtonIcon: string;
 
+  isDisabled = false;
+
   regenerationText: string;
 
   constructor(private readonly appService: AppService) {
@@ -33,16 +35,21 @@ export class AppComponent {
     this.regenerationText = this.appService.REGENERATION_TEXT;
     this.copyButtonIcon = "copy";
   }
-  convertToHtml(message: Message): string {
+  convertToHtml(message: DxChatTypes.Message): string {
     return this.appService.convertToHtml(message.text || "");
   }
 
 
-  async onMessageEntered(e: MessageEnteredEvent) {
+  async onMessageEntered(e: DxChatTypes.MessageEnteredEvent) {
+    this.isDisabled = true;
+    try {
       await this.appService.onMessageEntered(e);
+    } finally {
+      this.isDisabled = false;
+    }
   }
 
-  onCopyButtonClick(message: Message) {
+  onCopyButtonClick(message: DxChatTypes.Message) {
     navigator.clipboard?.writeText(message.text ?? "");
 
     this.copyButtonIcon = "check";
@@ -54,12 +61,14 @@ export class AppComponent {
 
   async onRegenerateButtonClick() {
     this.appService.updateLastMessage();
-    this.appService.toggleDisabledState(true);
+    this.appService.toggleDisabledState(true, undefined);
+    this.isDisabled = true;
 
     try {
       await this.appService.regenerate();
     } finally {
-      this.appService.toggleDisabledState(false);
+      this.appService.toggleDisabledState(false, undefined);
+      this.isDisabled = false;
     }
   }
 }

Angular/src/app/app.service.ts

@@ -5,10 +5,10 @@ import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
 import rehypeStringify from "rehype-stringify";
-import { User, Alert, MessageEnteredEvent } from "devextreme/ui/chat";
-import DataSource from "devextreme/data/data_source";
-import CustomStore from "devextreme/data/custom_store";
-import TextArea from 'devextreme/ui/text_area';
+import { type DxChatTypes } from 'devextreme-angular/ui/chat';
+import { DataSource } from 'devextreme-angular/common/data';
+import { CustomStore } from 'devextreme-angular/common/data';
+
 @Injectable({
   providedIn: "root",
 })
@@ -24,26 +24,26 @@ export class AppService {
   REGENERATION_TEXT = "Regeneration...";
   ALERT_TIMEOUT = 10000;
 
-  user: User = {
+  user: DxChatTypes.User = {
     id: "user",
   };
 
-  assistant: User = {
+  assistant: DxChatTypes.User = {
     id: "assistant",
     name: "Virtual Assistant",
   };
 
-  store: Array<{ id: number; timestamp: Date; author: User; text: string }> = [];
+  store: Array<{ id: number; timestamp: Date; author: DxChatTypes.User; text: string }> = [];
   messages: Array<{ role: "user" | "assistant" | "system"; content: string }> = [];
-  alerts: Alert[] = [];
+  alerts: DxChatTypes.Alert[] = [];
 
   customStore: CustomStore | undefined;
 
   dataSource: DataSource | undefined;
 
-  typingUsersSubject: BehaviorSubject<User[]> = new BehaviorSubject<User[]>([]);
+  typingUsersSubject: BehaviorSubject<DxChatTypes.User[]> = new BehaviorSubject<DxChatTypes.User[]>([]);
 
-  alertsSubject: BehaviorSubject<Alert[]> = new BehaviorSubject<Alert[]>([]);
+  alertsSubject: BehaviorSubject<DxChatTypes.Alert[]> = new BehaviorSubject<DxChatTypes.Alert[]>([]);
 
   constructor() {
     this.chatService = new OpenAI(this.OpenAIConfig);
@@ -52,11 +52,11 @@ export class AppService {
     this.alertsSubject.next([]);
   }
 
-  get typingUsers$(): Observable<User[]> {
+  get typingUsers$(): Observable<DxChatTypes.User[]> {
     return this.typingUsersSubject.asObservable();
   }
 
-  get alerts$(): Observable<Alert[]> {
+  get alerts$(): Observable<DxChatTypes.Alert[]> {
     return this.alertsSubject.asObservable();
   }
 
@@ -70,14 +70,15 @@ export class AppService {
       },
     };
   }
-  toggleDisabledState(disabled: boolean, event?: Event) {
-    let element = document.querySelector(`.dx-chat-messagebox-textarea`);
-    let textAreaInstance = element ? TextArea.getInstance(element) as TextArea : null;
-
-    textAreaInstance?.option({ disabled });
-
-    if (!disabled) {
-      textAreaInstance?.focus();
+  toggleDisabledState(disabled: boolean, event?: { target?: EventTarget } | undefined) {
+    const element = event?.target as HTMLElement;
+
+    if (element) {
+      if (disabled) {
+        element.blur();
+      } else {
+        element.focus();
+      }
     }
   }
   initDataSource() {
@@ -122,8 +123,8 @@ export class AppService {
     return data.choices[0].message?.content;
   }
 
-  async processMessageSending() {
-    this.toggleDisabledState(true);
+  async processMessageSending(e: DxChatTypes.MessageEnteredEvent) {
+    this.toggleDisabledState(true, e.event);
 
     this.typingUsersSubject.next([this.assistant]);
     try {
@@ -137,7 +138,7 @@ export class AppService {
       this.typingUsersSubject.next([]);
       this.alertLimitReached();
     } finally {
-      this.toggleDisabledState(false);
+      this.toggleDisabledState(false, e.event);
     }
   }
 
@@ -179,7 +180,7 @@ export class AppService {
     }, this.ALERT_TIMEOUT);
   }
 
-  setAlerts(alerts: Alert[]) {
+  setAlerts(alerts: DxChatTypes.Alert[]) {
     this.alerts = alerts;
     this.alertsSubject.next(alerts);
   }
@@ -214,12 +215,13 @@ export class AppService {
     return result;
   }
 
-  async onMessageEntered({ message, event }: MessageEnteredEvent) {
+  async onMessageEntered(event: DxChatTypes.MessageEnteredEvent) {
+    let { message } = event;
     this.dataSource
       ?.store()
       .push([{ type: "insert", data: { id: Date.now(), ...message } }]);
 
     this.messages.push({ role: "user", content: message?.text ?? "" });
-    this.processMessageSending();
+    await this.processMessageSending(event);
   }
 }

README.md

@@ -1,5 +1,4 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/1018060321/24.2.3%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1299498)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)