Topical info generation

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 i18n class="margin-lr-3" (click)="showTopicInfo = !showTopicInfo">{{showTopicInfo ? 'Hide ' : 'Get Additional topic info'}}</button>
+ <button mat-stroked-button i18n class="margin-lr-3" (click)="generateTopicInfo()">{{showTopicInfo ? 'Hide ' : 'Get Additional topic info'}}</button>
  <span class="toolbar-fill"></span>
  <div>
  <span class="margin-lr-10" *ngIf="attempts && !parent" i18n>Past attempts: {{attempts}}</span>
@@ -73,7 +73,11 @@ <h3 class="margin-lr-3 ellipsis-title"><ng-container i18n>Step</ng-container> {{
  </mat-toolbar>
  <div [ngClass]="{'full-view-container':!showTopicInfo}" class="view-container view-full-height" *ngIf="stepDetail?.description || resource?._attachments; else emptyRecord">
  <div class="course-detail bg-light-grey" [ngClass]="{'invisible':!showTopicInfo}">
-
+ <div class="ai-banner" i18n>This content is AI generated<mat-icon>error_outline</mat-icon></div>
+ <div class="spinner-container" *ngIf="topicLoader">
+ <mat-spinner></mat-spinner>
+ </div>
+ {{topicalInfo}}
  </div>
  <planet-markdown *ngIf="stepDetail?.description" class="description img-resize" [content]="stepDetail.description"></planet-markdown>
  <planet-resources-viewer

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',
@@ -35,17 +36,21 @@ export class CoursesStepViewComponent implements OnInit, OnDestroy {
  canManage = false;
  countActivity = true;
  showTopicInfo = false;
+ topicLoader = false;
+ topicalInfo: string;
+
  @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() {
@@ -188,4 +193,24 @@ export class CoursesStepViewComponent implements OnInit, OnDestroy {
  this.previewButton.closeMenu();
  this.goToExam(stepType, true);
  }
+
+ generateTopicInfo() {
+ this.topicLoader = true;
+ this.showTopicInfo = !this.showTopicInfo;
+
+ this.chatService.getPrompt({
+ content: `Give general info about this topic ${this.stepDetail.stepTitle}`,
+ aiProvider: { name: 'openai' }
+ }, false).subscribe({
+ next: (res) => {
+ this.topicalInfo = res?.chat;
+ this.topicLoader = false;
+ },
+ error: (err) => {
+ this.topicLoader = err;
+ this.topicLoader = false;
+ }
+ });
+ }
+
 }

src/app/courses/step-view-courses/courses-step-view.scss

@@ -1,3 +1,5 @@
+@import '../../variables';
+
 :host {
 
  .view-container {
@@ -16,6 +18,23 @@
  max-width: 100%;
  }
 
+ .course-detail {
+ padding: 2rem;
+ }
+
+ .spinner-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .ai-banner {
+ padding: 0.2rem;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ text-align: center;
+ margin-bottom: 1rem;
+ }
+
  .full-view-container.view-container {
  grid-template-columns: 0 1fr;
  grid-column-gap: 0;