chat: add streaming option in manager dashboard (fixes #7439)

src/app/chat/chat-sidebar/chat-sidebar.component.html

@@ -18,7 +18,7 @@
  <mat-icon>help_outline</mat-icon>
  </button>
  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="overlayOpen">
- <span class="overlay-text" i18n>search through the entire conversation, not just the title</span>
+ <span class="overlay-text" i18n>Search through the entire conversation, not just the title</span>
  </ng-template>
  <div>
  <mat-button-toggle-group *ngIf="fullTextSearch" [(ngModel)]="searchType" (change)="filterConversations()">

src/app/chat/chat-window/chat-window.component.ts

@@ -8,6 +8,7 @@ import { ConversationForm, AIProvider } from '../chat.model';
 import { ChatService } from '../../shared/chat.service';
 import { showFormErrors } from '../../shared/table-helpers';
 import { UserService } from '../../shared/user.service';
+import { StateService } from '../../shared/state.service';
 
 @Component({
  selector: 'planet-chat-window',
@@ -17,7 +18,7 @@ import { UserService } from '../../shared/user.service';
 export class ChatWindowComponent implements OnInit, OnDestroy {
  private onDestroy$ = new Subject<void>();
  spinnerOn = true;
- setStreamOn = false;
+ streaming: boolean;
  disabled = false;
  provider: AIProvider;
  conversations: any[] = [];
@@ -37,6 +38,7 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
  private changeDetectorRef: ChangeDetectorRef,
  private chatService: ChatService,
  private formBuilder: FormBuilder,
+ private stateService: StateService,
  private userService: UserService
  ) {}
 
@@ -47,6 +49,7 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
  this.initializeChatStream();
  this.initializeErrorStream();
  this.subscribeToAIService();
+ this.isStreamingEnabled();
  }
 
  ngOnDestroy() {
@@ -87,6 +90,11 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
  }));
  }
 
+ isStreamingEnabled() {
+ const configuration = this.stateService.configuration;
+ this.streaming = configuration.streaming;
+ }
+
  createForm() {
  this.promptForm = this.formBuilder.group({
  prompt: [ '', CustomValidators.required ],
@@ -185,7 +193,7 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
 
  this.setSelectedConversation();
 
- if (this.setStreamOn) {
+ if (this.streaming) {
  this.conversations.push({ role: 'user', query: content, response: '' });
  this.chatService.sendUserInput(this.data);
  } else {

src/app/manager-dashboard/manager-dashboard.component.html

@@ -83,6 +83,16 @@ <h3 i18n *ngIf="showParentList">{{ planetType === 'community' ? 'Nation' : 'Cent
  <b>{{ ' Planet ' + planetConfiguration.name + ' ' }}</b>
  <a class="margin-lr-8" [routerLink]="['reports', 'detail']" i18n mat-raised-button>Report Detail</a>
  </p>
+ <p>
+ <span i18n>Chat streaming</span>
+ <mat-slide-toggle [(ngModel)]="streaming" (ngModelChange)="toggleStreaming()"></mat-slide-toggle>
+ <button mat-icon-button style="margin-left: 1rem;" (mouseenter)="toggleOverlay()" (mouseleave)="toggleOverlay()" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
+ <mat-icon>info_outline</mat-icon>
+ </button>
+ <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="overlayOpen">
+ <span class="overlay-text" i18n>Quicker line by line chat responses, could be costlier</span>
+ </ng-template>
+ </p>
  </div>
  <mat-grid-list cols="4" rowHeight="2rem">
  <mat-grid-tile i18n>Last Upgrade</mat-grid-tile><mat-grid-tile i18n>Last Sync</mat-grid-tile>

src/app/manager-dashboard/manager-dashboard.component.ts

@@ -69,6 +69,8 @@ export class ManagerDashboardComponent implements OnInit, OnDestroy {
  fetchItemCount = 0;
  pendingPushCount = 0;
  isHub = false;
+ streaming: boolean;
+ overlayOpen = false;
 
  constructor(
  private userService: UserService,
@@ -84,6 +86,7 @@ export class ManagerDashboardComponent implements OnInit, OnDestroy {
  ) {}
 
  ngOnInit() {
+ this.streaming = this.planetConfiguration.streaming;
  this.isUserAdmin = this.userService.get().isUserAdmin;
  if (this.planetType !== 'center') {
  this.checkRequestStatus();
@@ -300,4 +303,18 @@ export class ManagerDashboardComponent implements OnInit, OnDestroy {
  });
  }
 
+ toggleOverlay(): void {
+ this.overlayOpen = !this.overlayOpen;
+ }
+
+ toggleStreaming(): void {
+ const configuration = this.planetConfiguration;
+ this.configurationService.updateConfiguration({ ...configuration, streaming: this.streaming }).subscribe(null,
+ error => this.planetMessageService.showAlert($localize`An error occurred please try again.`),
+ () => {
+ this.planetMessageService.showMessage($localize`Streaming has been ${this.streaming ? 'enabled' : 'disabled'}.`);
+ }
+ );
+ }
+
 }