refactor(chat-ai-demo): Move isDisabled

DevExpress · Dec 10, 2024 · d0e9bca · d0e9bca
1 parent 780dbd2
commit d0e9bca
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 37 deletions.
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.html b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.html
@@ -1,6 +1,6 @@
 <div class="demo-container">
   <dx-chat
-    [class.dx-chat-disabled]="isDisabled()"
+    [class.dx-chat-disabled]="isDisabled"
     [dataSource]="dataSource"
     [reloadOnChange]="false"
     [showAvatar]="false"

diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts
@@ -35,8 +35,6 @@ export class AppComponent {
 
   user: User;
 
-  isDisabled$: Observable<boolean>;
-
   typingUsers$: Observable<User[]>;
 
   alerts$: Observable<Alert[]>;
@@ -45,27 +43,44 @@ export class AppComponent {
 
   copyButtonIcon: string;
 
+  isDisabled: boolean;
+
   constructor(private readonly appService: AppService) {
     loadMessages(this.appService.getDictionary());
 
     this.dataSource = this.appService.dataSource;
     this.user = this.appService.user;
-    this.typingUsers$ = this.appService.typingUsers$;
     this.alerts$ = this.appService.alerts$;
+    this.typingUsers$ = this.appService.typingUsers$;
     this.regenerationText = this.appService.REGENERATION_TEXT;
     this.copyButtonIcon = 'copy';
+    this.isDisabled = false;
   }
 
   convertToHtml(message: Message): string {
     return this.appService.convertToHtml(message.text);
   }
 
-  isDisabled(): boolean {
-    return this.appService.isDisabled;
-  }
-
-  onMessageEntered(event: MessageEnteredEvent) {
-    this.appService.onMessageEntered(event);
+  toggleDisabledState(disabled: boolean, event = undefined) {
+    this.isDisabled = disabled;
+
+    if (disabled) {
+      event?.target.blur();
+    } else {
+      event?.target.focus();
+    }
+  };
+
+  async onMessageEntered(e: MessageEnteredEvent) {
+    if (!this.appService.alerts.length) {
+      this.toggleDisabledState(true, e.event);
+    }
+
+    try {
+      await this.appService.onMessageEntered(e);
+    } finally {
+      this.toggleDisabledState(false, e.event);
+    }
   }
 
   onCopyButtonClick(message: Message) {
@@ -78,9 +93,15 @@ export class AppComponent {
     }, 2500);
   }
 
-  onRegenerateButtonClick() {
+  async onRegenerateButtonClick() {
     this.appService.updateLastMessage();
-    this.appService.regenerate();
+    this.toggleDisabledState(true);
+
+    try {
+      await this.appService.regenerate();
+    } finally {
+      this.toggleDisabledState(false);
+    }
   }
 }
 

diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts
@@ -28,7 +28,6 @@ export class AppService {
   }
 
   REGENERATION_TEXT = 'Regeneration...';
-  CHAT_DISABLED_CLASS = 'dx-chat-disabled';
   ALERT_TIMEOUT = 1000 * 60;
 
   user: User = {
@@ -48,17 +47,13 @@ export class AppService {
 
   dataSource: DataSource;
 
-  isDisabled: boolean;
-
   typingUsersSubject: BehaviorSubject<User[]> = new BehaviorSubject([]);
 
   alertsSubject: BehaviorSubject<Alert[]> = new BehaviorSubject([]);
 
   constructor() {
     this.chatService = new AzureOpenAI(this.AzureOpenAIConfig);
     this.initDataSource()
-
-    this.isDisabled = false;
     this.typingUsersSubject.next([]);
     this.alertsSubject.next([]);
   }
@@ -121,8 +116,6 @@ export class AppService {
   }
 
   async processMessageSending(message, event) {
-    this.toggleDisabledState(true, event);
-
     this.messages.push({ role: 'user', content: message.text });
     this.typingUsersSubject.next([this.assistant]);
 
@@ -138,8 +131,6 @@ export class AppService {
       this.typingUsersSubject.next([]);
       this.messages.pop();
       this.alertLimitReached();
-    } finally {
-      this.toggleDisabledState(false, event);
     }
   }
 
@@ -175,24 +166,12 @@ export class AppService {
     }, this.ALERT_TIMEOUT);
   }
 
-  toggleDisabledState(disabled: boolean, event = undefined) {
-    this.isDisabled = disabled;
-
-    if (disabled) {
-      event?.target.blur();
-    } else {
-      event?.target.focus();
-    }
-  };
-
   setAlerts(alerts: Alert[]) {
     this.alerts = alerts;
     this.alertsSubject.next(alerts);
   }
 
   async regenerate() {
-    this.toggleDisabledState(true);
-
     try {
       const aiResponse = await this.getAIResponse(this.messages.slice(0, -1));
 
@@ -201,8 +180,6 @@ export class AppService {
     } catch {
       this.updateLastMessage(this.messages.at(-1).content);
       this.alertLimitReached();
-    } finally {
-      this.toggleDisabledState(false);
     }
   }
 
@@ -217,11 +194,11 @@ export class AppService {
     return result;
   }
 
-  onMessageEntered({ message, event }: MessageEnteredEvent) {
+  async onMessageEntered({ message, event }: MessageEnteredEvent) {
     this.dataSource.store().push([{ type: 'insert', data: { id: Date.now(), ...message } }]);
 
     if (!this.alerts.length) {
-      this.processMessageSending(message, event);
+      await this.processMessageSending(message, event);
     }
   }
 }