courses: enabling context chat (fixes #7578) (#7579)

Co-authored-by: dogi <[email protected]>

package.json

@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.14.79",
+  "version": "0.14.80",
   "myplanet": {
-    "latest": "v0.19.55",
-    "min": "v0.18.55"
+    "latest": "v0.19.65",
+    "min": "v0.18.65"
   },
   "scripts": {
     "ng": "ng",

src/app/chat/chat.component.ts

@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { ChatService } from '../shared/chat.service';
-import { AIServices, ProviderName } from './chat.model';
 
 @Component({
   selector: 'planet-chat',
@@ -11,7 +10,7 @@ import { AIServices, ProviderName } from './chat.model';
 })
 export class ChatComponent implements OnInit {
   activeService: string;
-  aiServices: { name: ProviderName, value: ProviderName }[] = [];
+  aiServices: { name: string, value: string }[] = [];
   displayToggle: boolean;
 
   constructor(
@@ -21,20 +20,11 @@ export class ChatComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.chatService.listAIProviders().subscribe((services: AIServices | null) => {
-      if (services) {
-        for (const [ key, value ] of Object.entries(services)) {
-          if (value === true) {
-            this.aiServices.push({
-              name: key as ProviderName,
-              value: key as ProviderName
-            });
-          }
-        }
-        this.activeService = this.aiServices[0].value;
-        this.displayToggle = this.aiServices.length > 0;
-        this.chatService.toggleAIServiceSignal(this.activeService);
-      }
+    this.chatService.listAIProviders().subscribe((providers) => {
+      this.aiServices = providers;
+      this.activeService = this.aiServices[0]?.value;
+      this.displayToggle = this.aiServices.length > 0;
+      this.chatService.toggleAIServiceSignal(this.activeService);
     });
   }
 

src/app/courses/step-view-courses/courses-step-view.component.html

@@ -5,7 +5,7 @@
 <div class="space-container">
   <mat-toolbar class="primary-color font-size-1">
     <h3 class="margin-lr-3 ellipsis-title"><ng-container i18n>Step</ng-container> {{stepNum}}<span *ngIf="stepDetail.stepTitle">: </span>{{stepDetail.stepTitle}}</h3>
-    <button mat-stroked-button class="margin-lr-3" (click)="showChat = !showChat" i18n>
+    <button *ngIf="isOpenai" mat-stroked-button class="margin-lr-3" (click)="showChat = !showChat" i18n>
       {{ showChat ? 'Hide Course Chat' : 'Show Course Chat' }}
     </button>
     <span class="toolbar-fill"></span>

src/app/courses/step-view-courses/courses-step-view.component.ts

@@ -10,6 +10,7 @@ import { SubmissionsService } from '../../submissions/submissions.service';
 import { ResourcesService } from '../../resources/resources.service';
 import { DialogsSubmissionsComponent } from '../../shared/dialogs/dialogs-submissions.component';
 import { StateService } from '../../shared/state.service';
+import { ChatService } from '../../shared/chat.service';
 
 @Component({
   templateUrl: './courses-step-view.component.html',
@@ -36,17 +37,19 @@ export class CoursesStepViewComponent implements OnInit, OnDestroy {
   countActivity = true;
   isGridView = true;
   showChat = false;
+  isOpenai = false;
   @ViewChild(MatMenuTrigger) previewButton: MatMenuTrigger;
 
   constructor(
+    private chatService: ChatService,
+    private coursesService: CoursesService,
+    private dialog: MatDialog,
+    private resourcesService: ResourcesService,
     private router: Router,
     private route: ActivatedRoute,
-    private dialog: MatDialog,
-    private coursesService: CoursesService,
-    private userService: UserService,
+    private stateService: StateService,
     private submissionsService: SubmissionsService,
-    private resourcesService: ResourcesService,
-    private stateService: StateService
+    private userService: UserService,
   ) {}
 
   ngOnInit() {
@@ -74,6 +77,9 @@ export class CoursesStepViewComponent implements OnInit, OnDestroy {
       this.coursesService.requestCourse({ courseId: this.courseId, parent: this.parent });
     });
     this.resourcesService.requestResourcesUpdate(this.parent);
+    this.chatService.listAIProviders().subscribe((providers) => {
+      this.isOpenai = providers.some(provider => provider.value === 'openai');
+    });
   }
 
   getSubmission() {

src/app/courses/view-courses/courses-view.component.html

@@ -37,9 +37,6 @@ <h3 class="margin-lr-3 ellipsis-title">{{courseDetail.courseTitle}}</h3>
     <button mat-stroked-button *ngIf="canManage" (click)="updateCourse()">
       <mat-icon>edit</mat-icon>
     </button>
-    <!-- <button mat-stroked-button class="margin-lr-3" (click)="toggleFullView('chat')" i18n>
-      {fullView, select, on {Show Course Chat}}
-    </button> -->
     <span class="toolbar-fill"></span>
    </ng-template>
 

src/app/shared/chat.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject, Observable, Subject, of } from 'rxjs';
-import { catchError } from 'rxjs/operators';
+import { catchError, map, shareReplay } from 'rxjs/operators';
 
 import { environment } from '../../environments/environment';
 import { findDocuments, inSelector } from '../shared/mangoQueries';
@@ -22,12 +22,12 @@ import { AIServices } from '../chat/chat.model';
   private newChatSelected: Subject<void> = new Subject<void>();
   private toggleAIService = new Subject<string>();
   private selectedConversationIdSubject = new BehaviorSubject<object | null>(null);
-  private aiProvidersSubject = new BehaviorSubject<AIServices | null>(null);
-  aiProviders$ = this.aiProvidersSubject.asObservable();
+  private aiProvidersSubject = new BehaviorSubject<Array<{ name: string; value: string }>>([]);
 
   newChatAdded$ = this.newChatAdded.asObservable();
   newChatSelected$ = this.newChatSelected.asObservable();
   toggleAIService$ = this.toggleAIService.asObservable();
+  aiProviders$ = this.aiProvidersSubject.asObservable();
   selectedConversationId$: Observable<object | null> = this.selectedConversationIdSubject.asObservable();
 
 
@@ -51,17 +51,29 @@ import { AIServices } from '../chat/chat.model';
   }
 
   private fetchAIProviders() {
-    this.httpClient.get<AIServices>(`${this.baseUrl}/checkproviders`).pipe(
-      catchError(err => {
-        console.error(err);
-        return of({ openai: false, perplexity: false, gemini: false });
-      })
-    ).subscribe((services: AIServices) => {
-      this.aiProvidersSubject.next(services);
-    });
+    this.httpClient
+      .get<AIServices>(`${this.baseUrl}/checkproviders`)
+      .pipe(
+        catchError((err) => {
+          console.error(err);
+          return of({ openai: false, perplexity: false, gemini: false });
+        }),
+        map((services: AIServices) => {
+          if (services) {
+            return Object.entries(services)
+              .filter(([ _, value ]) => value === true)
+              .map(([ key ]) => ({ name: key, value: key }));
+          } else {
+            return [];
+          }
+        })
+      )
+      .subscribe((providers) => {
+        this.aiProvidersSubject.next(providers);
+      });
   }
 
-  listAIProviders() {
+  listAIProviders(): Observable<Array<{ name: string; value: string }>> {
     return this.aiProviders$;
   }