fix(chatbot): inactivated refresh button and inputs when the message is generated by the assistant

sebastianmusial · sebastianmusial · commit a4d399cb15c1 · 2024-05-09T15:14:27.000+02:00
diff --git a/apps/spa/src/app/components/chat/chat-footer/chat-footer.component.html b/apps/spa/src/app/components/chat/chat-footer/chat-footer.component.html
@@ -1,11 +1,21 @@
 <ai-card-footer>
   <ai-controls>
     @if (isTranscriptionEnabled) {
-    <ai-recorder (send$)="sendAudio$.emit($event)" matTooltip="Record audio" />
+    <ai-recorder
+      (send$)="sendAudio$.emit($event)"
+      [isDisabled]="isDisabled"
+      [matTooltip]="!isDisabled ? 'Record audio' : ''"
+    />
     } @if (isAttachmentEnabled) {
-    <ai-files matTooltip="Add files" />
+    <ai-files
+      [matTooltip]="!isDisabled ? 'Add files' : ''"
+      [isDisabled]="isDisabled"
+    />
     }
   </ai-controls>
 
-  <ai-input [isDisabled]="isDisabled" (send$)="sendMessage$.emit($event)" />
+  <ai-input
+    (send$)="!isDisabled && sendMessage$.emit($event)"
+    [isDisabled]="isDisabled"
+  />
 </ai-card-footer>
diff --git a/apps/spa/src/app/components/chat/chat-header/chat-header.component.html b/apps/spa/src/app/components/chat/chat-header/chat-header.component.html
@@ -4,11 +4,20 @@
   </div>
   <div class="chat-header__controls">
     @if (isConfigEnabled) {
-    <button mat-icon-button (click)="config$.emit()" matTooltip="Settings">
+    <button
+      mat-icon-button
+      matTooltip="Settings"
+      (click)="config$.emit()"
+    >
       <mat-icon class="char-header__icon">settings</mat-icon>
     </button>
     } @if (isRefreshEnabled) {
-    <button mat-icon-button (click)="refresh$.emit()" matTooltip="Refresh">
+    <button
+      mat-icon-button
+      matTooltip="Refresh"
+      (click)="refresh$.emit()"
+      [disabled]="isResponding"
+    >
       <mat-icon class="char-header__icon">refresh</mat-icon>
     </button>
     }
diff --git a/apps/spa/src/app/components/chat/chat-header/chat-header.component.ts b/apps/spa/src/app/components/chat/chat-header/chat-header.component.ts
@@ -14,6 +14,7 @@ export class ChatHeaderComponent {
   @Output() close$ = new EventEmitter();
   @Output() refresh$ = new EventEmitter();
   @Output() config$ = new EventEmitter();
+  @Input() isResponding = false;
   @Input() isRefreshEnabled = true;
   @Input() isConfigEnabled = true;
 
diff --git a/apps/spa/src/app/components/controls/control-item/control-item.component.scss b/apps/spa/src/app/components/controls/control-item/control-item.component.scss
@@ -22,4 +22,9 @@
     background-color: var(--color-grey-300);
     color: var(--color-grey-900);
   }
+
+  &.is-disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
 }
diff --git a/apps/spa/src/app/components/controls/control-item/control-item.component.ts b/apps/spa/src/app/components/controls/control-item/control-item.component.ts
@@ -1,9 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'ai-control-item',
   standalone: true,
   templateUrl: './control-item.component.html',
   styleUrl: './control-item.component.scss',
 })
-export class ControlItemComponent {}
+export class ControlItemComponent {
+  @HostBinding('class.is-disabled') @Input() isDisabled = false;
+}
diff --git a/apps/spa/src/app/components/controls/files/files.component.html b/apps/spa/src/app/components/controls/files/files.component.html
@@ -2,7 +2,9 @@
   aiFiles
   (click)="input.click()"
   (drop$)="addFiles($event)"
-  [files]="files()">
+  [files]="files()"
+  [isDisabled]="isDisabled"
+>
   <ai-control-icon>attach_file</ai-control-icon>
 
   @if (files().length) {
diff --git a/apps/spa/src/app/components/controls/files/files.component.ts b/apps/spa/src/app/components/controls/files/files.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
 import { AiFilesDirective } from './files.directive';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -20,6 +20,7 @@ import { ControlIconComponent } from '../control-icon/control-icon.component';
 })
 export class FilesComponent {
   @ViewChild('input') input!: HTMLInputElement;
+  @Input() isDisabled = false;
   files = toSignal(this.fileService.files$, { initialValue: [] });
 
   constructor(private readonly fileService: FilesService) {}
diff --git a/apps/spa/src/app/components/controls/input/input.component.html b/apps/spa/src/app/components/controls/input/input.component.html
@@ -4,8 +4,7 @@
     placeholder="Aa"
     autocomplete="off"
     [(ngModel)]="content"
-    [disabled]="isDisabled"
-    (keydown.enter)="send(content)" />
+    (keydown.enter)="!isDisabled && send(content)" />
   <button
     class="input__suffix"
     mat-icon-button
diff --git a/apps/spa/src/app/components/controls/input/input.component.scss b/apps/spa/src/app/components/controls/input/input.component.scss
@@ -5,4 +5,8 @@
 
 .input__suffix {
   margin-right: 4px;
+
+  &.mat-mdc-button-disabled {
+    opacity: 0.5;
+  }
 }
diff --git a/apps/spa/src/app/components/controls/recorder/recorder.component.html b/apps/spa/src/app/components/controls/recorder/recorder.component.html
@@ -1,4 +1,8 @@
-<ai-control-item [ngClass]="{ 'is-active': recording }" (click)="onRecord()">
+<ai-control-item
+  (click)="onRecord()"
+  [ngClass]="{ 'is-active': recording }"
+  [isDisabled]="isDisabled"
+>
   <ai-control-icon class="recorder__icon">mic</ai-control-icon>
   <div class="recorder__circle"></div>
 </ai-control-item>
diff --git a/apps/spa/src/app/components/controls/recorder/recorder.component.ts b/apps/spa/src/app/components/controls/recorder/recorder.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { NgClass, NgIf } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
 import * as RecordRTC from 'recordrtc';
@@ -14,6 +14,7 @@ import { ControlItemComponent } from '../control-item/control-item.component';
 })
 export class RecorderComponent {
   @Output() send$ = new EventEmitter<Blob>();
+  @Input() isDisabled = false;
   record: RecordRTC.StereoAudioRecorder | null = null;
   recording = false;
   url!: string;
diff --git a/apps/spa/src/app/modules/+chat/containers/chat-iframe/chat-iframe.component.html b/apps/spa/src/app/modules/+chat/containers/chat-iframe/chat-iframe.component.html
@@ -2,6 +2,7 @@
   <ai-chat-header
     [isRefreshEnabled]="isRefreshEnabled && !!threadId()"
     [isConfigEnabled]="isConfigEnabled && !!threadId()"
+    [isResponding]="isResponding()"
     (refresh$)="chatService.refresh()"
     (close$)="chatService.toggle()"
     (config$)="chatService.clear()"></ai-chat-header>
@@ -17,7 +18,7 @@
       (tipSelected$)="chatService.sendMessage($event)"
       class="chat__content" />
     <ai-chat-footer
-      [isDisabled]="isTyping()"
+      [isDisabled]="isResponding()"
       [isTranscriptionEnabled]="isTranscriptionEnabled"
       [isAttachmentEnabled]="isAttachmentEnabled"
       (sendMessage$)="chatService.sendMessage($event)"
diff --git a/apps/spa/src/app/modules/+chat/containers/chat-iframe/chat-iframe.component.ts b/apps/spa/src/app/modules/+chat/containers/chat-iframe/chat-iframe.component.ts
@@ -29,6 +29,9 @@ export class ChatIframeComponent implements OnInit {
   messages = toSignal(this.chatService.messages$, { initialValue: [] });
   isTyping = toSignal(this.chatService.isTyping$, { initialValue: false });
   isLoading = toSignal(this.chatService.isLoading$, { initialValue: false });
+  isResponding = toSignal(this.chatService.isResponding$, {
+    initialValue: false,
+  });
   threadId = toSignal(this.threadService.threadId$, { initialValue: '' });
   isTranscriptionEnabled = environment.isTranscriptionEnabled;
   isAttachmentEnabled = environment.isAttachmentEnabled;
diff --git a/apps/spa/src/app/modules/+chat/shared/chat.service.ts b/apps/spa/src/app/modules/+chat/shared/chat.service.ts
@@ -26,6 +26,7 @@ export class ChatService {
   isLoading$ = new BehaviorSubject<boolean>(false);
   isVisible$ = new BehaviorSubject<boolean>(environment.isAutoOpen);
   isTyping$ = new BehaviorSubject<boolean>(false);
+  isResponding$ = new BehaviorSubject<boolean>(false);
   messages$ = new BehaviorSubject<ChatMessage[]>([]);
 
   constructor(
@@ -99,12 +100,14 @@ export class ChatService {
   refresh(): void {
     this.isLoading$.next(true);
     this.isTyping$.next(false);
+    this.isResponding$.next(false);
     this.messages$.next([]);
     this.threadService.start().subscribe();
   }
 
   clear(): void {
     this.isTyping$.next(false);
+    this.isResponding$.next(false);
     this.threadService.clear();
     this.messages$.next([]);
   }
@@ -128,6 +131,7 @@ export class ChatService {
 
   async sendMessage(content: string, role = ChatRole.User): Promise<void> {
     this.isTyping$.next(true);
+    this.isResponding$.next(true);
     this.addMessage({ content, role });
 
     const files = await this.chatFilesService.sendFiles();
@@ -149,20 +153,23 @@ export class ChatService {
   watchTextCreated(): Subscription {
     return this.chatGatewayService.textCreated().subscribe(data => {
       this.isTyping$.next(false);
+      this.isResponding$.next(true);
       this.addMessage({ content: data.text.value, role: ChatRole.Assistant });
     });
   }
 
   watchTextDelta(): Subscription {
     return this.chatGatewayService.textDelta().subscribe(data => {
       const length = this.messages$.value.length;
+      this.isResponding$.next(true);
       this.messages$.value[length - 1].content = data.text.value;
     });
   }
 
   watchTextDone(): Subscription {
     return this.chatGatewayService.textDone().subscribe(data => {
       this.isTyping$.next(false);
+      this.isResponding$.next(false);
       this.messages$.next([
         ...this.messages$.value.slice(0, -1),
         {
@@ -180,11 +187,13 @@ export class ChatService {
         role: ChatRole.Assistant,
       });
       this.isTyping$.next(false);
+      this.isResponding$.next(false);
     });
   }
 
   sendAudio(file: Blob): void {
     this.isTyping$.next(true);
+    this.isResponding$.next(true);
 
     this.chatClientService
       .transcription({ file: file as File })
diff --git a/apps/spa/src/environments/environment.development.ts b/apps/spa/src/environments/environment.development.ts
@@ -8,7 +8,7 @@ export const environment = {
   isTranscriptionEnabled: true,
   isAttachmentEnabled: true,
   isRefreshEnabled: true,
-  isConfigEnabled: true,
+  isConfigEnabled: false,
   isAutoOpen: true,
   isStreamingEnabled: true,
 };
diff --git a/apps/spa/src/environments/environment.ts b/apps/spa/src/environments/environment.ts
@@ -8,7 +8,7 @@ export const environment = {
   isTranscriptionEnabled: true,
   isAttachmentEnabled: true,
   isRefreshEnabled: true,
-  isConfigEnabled: true,
+  isConfigEnabled: false,
   isAutoOpen: true,
   isStreamingEnabled: true,
 };

Original file line number	Diff line number	Diff line change
`@@ -22,4 +22,9 @@`
`22`	`22`	`background-color: var(--color-grey-300);`
`23`	`23`	`color: var(--color-grey-900);`
`24`	`24`	`}`
	`25`	`+`
	`26`	`+ &.is-disabled {`
	`27`	`+ pointer-events: none;`
	`28`	`+ opacity: 0.5;`
	`29`	`+ }`
`25`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,4 +5,8 @@`
`5`	`5`
`6`	`6`	`.input__suffix {`
`7`	`7`	`margin-right: 4px;`
	`8`	`+`
	`9`	`+ &.mat-mdc-button-disabled {`
	`10`	`+ opacity: 0.5;`
	`11`	`+ }`
`8`	`12`	`}`