experiment: add ratings & suggest improvements for courses

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

@@ -42,11 +42,15 @@
     </div>
     <div class="steps-container">
       <planet-courses-step [(steps)]="steps" (addStepEvent)="addStep()"></planet-courses-step>
+      <!-- {{sanitizeText(rating)}} -->
+      <!-- {{rating}} -->
+      <br><span [innerHTML]="rating"></span>
     </div>
     <div class="actions-container">
       <button type="submit" (click)="onSubmit()" [planetSubmit]="courseForm.valid" mat-raised-button color="primary" i18n>Submit</button>
       <button class="margin-lr-2" type="button" mat-raised-button color="warn" (click)="cancel()" i18n>Cancel</button>
       <button mat-raised-button color="accent" (click)="addStep()" i18n>Add Step</button>
+      <button class="margin-lr-2" type="button" mat-raised-button color="basic" (click)="rateCourse()" i18n>Rate Course</button>
     </div>
   </div>
 </div>

src/app/courses/add-courses/courses-add.component.ts

@@ -18,6 +18,7 @@ import { PouchService } from '../../shared/database/pouch.service';
 import { debug } from '../../debug-operator';
 import { TagsService } from '../../shared/forms/tags.service';
 import { showFormErrors } from '../../shared/table-helpers';
+import { ChatService } from '../../shared/chat.service';
 
 @Component({
   templateUrl: 'courses-add.component.html',
@@ -58,6 +59,7 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
   languageNames = languages.map(list => list.name);
 
   mockStep = { stepTitle: $localize`Add title`, description: '!!!' };
+  rating: String;
 
   constructor(
     private router: Router,
@@ -71,7 +73,8 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
     private stateService: StateService,
     private planetStepListService: PlanetStepListService,
     private pouchService: PouchService,
-    private tagsService: TagsService
+    private tagsService: TagsService,
+    private chatService: ChatService
   ) {
     this.createForm();
     this.onFormChanges();
@@ -273,4 +276,43 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
     return { ...this.coursesService.storeMarkdownImages({ ...course, steps }) };
   }
 
+  rateCourse() {
+    if (this.courseForm.valid) {
+      const stepsContent = this.steps.length > 0 ?
+      `The course has ${this.steps.length} steps: ${this.steps.map(step => `${step.stepTitle} - ${step.description}`).join('\n')}`
+       : '';
+
+      const content = `In 3 clear blobs, 1. provide a rating for this course(granular rating out of 100%), 2. Explain why you gave the rating 3. Explain how to improve the course
+      Course Title: ${this.courseForm.get('courseTitle').value}
+      Course Description: ${this.courseForm.get('description').value.text}
+      Grade Level: ${this.courseForm.get('gradeLevel').value}
+      Subject Level: ${this.courseForm.get('subjectLevel').value}
+      ${stepsContent}
+      `;
+
+      this.chatService.getPrompt(content).subscribe(
+      (rating) => {
+        this.rating = this.sanitizeText(rating?.chat);
+      }
+    );
+    } else {
+      showFormErrors(this.courseForm.controls);
+      return;
+    }
+  }
+
+  sanitizeText(text: any): any {
+    // Replace newline characters with <br> tags
+    const textWithLineBreaks = text.replace(/\n/g, '<br>');
+
+    // Replace code block markers with <code> tags
+    const codeBlockStart = /```/g;
+    const codeBlockEnd = /```/g;
+    const textWithCodeBlocks = textWithLineBreaks
+      .replace(codeBlockStart, '<code>')
+      .replace(codeBlockEnd, '</code>');
+
+    return textWithCodeBlocks;
+  }
+
 }

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

@@ -29,6 +29,10 @@
         </mat-chip>
       </mat-chip-list>
     </ng-container>
+    <button mat-raised-button color="basic" (click)="rateStep()" i18n>Rate course step</button>
+    <!-- <br><div>{{sanitizeText(rating)}}</div> -->
+    <!-- <br><div>{{rating}}</div> -->
+    <br><div [innerHTML]="rating"></div>
   </div>
   <div planetStepListActions>
     <a mat-raised-button color="primary" (click)="addExam()" i18n>{{activeStep?.exam ? 'Update' : 'Add' }} Test</a>

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

@@ -7,6 +7,7 @@ import { takeUntil } from 'rxjs/operators';
 import { CoursesService } from '../courses.service';
 import { DialogsAddResourcesComponent } from '../../shared/dialogs/dialogs-add-resources.component';
 import { DialogsLoadingService } from '../../shared/dialogs/dialogs-loading.service';
+import { ChatService } from '../../shared/chat.service';
 
 @Component({
   selector: 'planet-courses-step',
@@ -24,14 +25,16 @@ export class CoursesStepComponent implements OnDestroy {
   dialogRef: MatDialogRef<DialogsAddResourcesComponent>;
   activeStep: any;
   activeStepIndex = -1;
+  rating: Text;
   private onDestroy$ = new Subject<void>();
 
   constructor(
     private router: Router,
     private fb: FormBuilder,
     private dialog: MatDialog,
     private coursesService: CoursesService,
-    private dialogsLoadingService: DialogsLoadingService
+    private dialogsLoadingService: DialogsLoadingService,
+    private chatService: ChatService
   ) {
     this.stepForm = this.fb.group({
       id: '',
@@ -100,4 +103,32 @@ export class CoursesStepComponent implements OnDestroy {
     this.addStepEvent.emit();
   }
 
+  rateStep() {
+    const content = `In 3 clear blobs, 1. provide a rating for this course step(granular rating out of 100%), 2. Explain why you gave the rating 3. Explain how to improve the course step
+    ${this.stepForm.get('stepTitle').value} - ${this.stepForm.get('description').value.text}`;
+
+    this.chatService.getPrompt(content).subscribe(
+      (completion: any) => {
+        this.rating = this.sanitizeText(completion?.chat);
+      },
+      (error: any) => {
+        console.log(error);
+      }
+    );
+  }
+
+  sanitizeText(text: any): any {
+    // Replace newline characters with <br> tags
+    const textWithLineBreaks = text.replace(/\n/g, '<br>');
+
+    // Replace code block markers with <code> tags
+    const codeBlockStart = /```/g;
+    const codeBlockEnd = /```/g;
+    const textWithCodeBlocks = textWithLineBreaks
+      .replace(codeBlockStart, '<code>')
+      .replace(codeBlockEnd, '</code>');
+
+    return textWithCodeBlocks;
+  }
+
 }