feat(Grade By Step): Summarize student work using AI

src/app/services/localStorageService.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LocalStorageService {
+  setItem(key: string, value: any): void {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch (e) {
+      console.error('Error saving to local storage', e);
+    }
+  }
+
+  getItem(key: string): any {
+    try {
+      const item = localStorage.getItem(key);
+      return item ? JSON.parse(item) : null;
+    } catch (e) {
+      console.error('Error reading from local storage', e);
+      return null;
+    }
+  }
+
+  removeItem(key: string): void {
+    try {
+      localStorage.removeItem(key);
+    } catch (e) {
+      console.error('Error removing from local storage', e);
+    }
+  }
+
+  clear(): void {
+    try {
+      localStorage.clear();
+    } catch (e) {
+      console.error('Error clearing local storage', e);
+    }
+  }
+}

src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.html

@@ -72,6 +72,30 @@
             />
           </mat-card-content>
         </mat-card>
+      } @else if (component?.type === 'OpenResponse') {
+        <mat-card appearance="outlined" class="w-full">
+          <mat-card-content>
+            <open-response-summary
+              [nodeId]="node.id"
+              [componentId]="component.id"
+              [periodId]="periodId"
+              [source]="source"
+              [doRender]="true"
+            />
+          </mat-card-content>
+        </mat-card>
+      } @else if (component?.type === 'Discussion') {
+        <mat-card appearance="outlined" class="w-full">
+          <mat-card-content>
+            <discussion-summary-display
+              [nodeId]="node.id"
+              [componentId]="component.id"
+              [periodId]="periodId"
+              [source]="source"
+              [doRender]="true"
+            />
+          </mat-card-content>
+        </mat-card>
       }
     </div>
   }

src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.spec.ts

@@ -12,6 +12,7 @@ import { CRaterService } from '../../../services/cRaterService';
 import { TeacherDataService } from '../../../services/teacherDataService';
 import { SummaryService } from '../../../components/summary/summaryService';
 import { PeerGroupButtonComponent } from '../peer-group-button/peer-group-button.component';
+import { ProjectService } from '../../../services/projectService';
 
 let component: ComponentSummaryComponent;
 let fixture: ComponentFixture<ComponentSummaryComponent>;
@@ -31,6 +32,7 @@ describe('ComponentSummaryComponent', () => {
           AnnotationService,
           ComponentServiceLookupService,
           CRaterService,
+          ProjectService,
           SummaryService
         ),
         MockProvider(TeacherDataService, {

src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.ts

@@ -14,14 +14,19 @@ import { IdeasSummaryComponent } from '../../../directives/teacher-summary-displ
 import { MatchSummaryDisplayComponent } from '../../../directives/teacher-summary-display/match-summary-display/match-summary-display.component';
 import { MatCardModule } from '@angular/material/card';
 import { CRaterService } from '../../../services/cRaterService';
+import { OpenResponseSummaryDisplayComponent } from '../../../directives/teacher-summary-display/open-response-summary-display/open-response-summary-display.component';
+import { ProjectService } from '../../../services/projectService';
+import { DiscussionSummaryDisplayComponent } from '../../../directives/teacher-summary-display/discussion-summary-display/discussion-summary-display.component';
 
 @Component({
   imports: [
     ComponentCompletionComponent,
+    DiscussionSummaryDisplayComponent,
     IdeasSummaryComponent,
     MatCardModule,
     MatchSummaryDisplayComponent,
     MilestoneReportButtonComponent,
+    OpenResponseSummaryDisplayComponent,
     PeerGroupButtonComponent,
     TeacherSummaryDisplayComponent
   ],
@@ -48,6 +53,7 @@ export class ComponentSummaryComponent {
     private componentServiceLookupService: ComponentServiceLookupService,
     private cRaterService: CRaterService,
     private dataService: TeacherDataService,
+    private projectService: ProjectService,
     private summaryService: SummaryService
   ) {}
 
@@ -79,6 +85,9 @@ export class ComponentSummaryComponent {
       (this.hasScoresSummary && this.hasScoreAnnotation) ||
       this.hasIdeaRubricData ||
       this.component?.type === 'Match';
+    if (this.component?.type === 'OpenResponse' || this.component?.type === 'Discussion') {
+      this.hasSummaryData = this.projectService.getProject().ai?.enabled;
+    }
   }
 
   private setSource(): void {

src/assets/wise5/directives/teacher-summary-display/ai-summary-display/ai-summary-display.component.html

@@ -0,0 +1,24 @@
+@if (hasStudentResponses) {
+  <div class="flex gap-2 flex-wrap items-center mat-caption">
+    <div class="flex items-center gap-2">
+      <button mat-button (click)="generateSummary()" [disabled]="generatingSummary" color="primary">
+        <span i18n>Generate Class Summary</span><mat-icon>auto_awesome</mat-icon>
+      </button>
+      @if (generatingSummary) {
+        <mat-spinner diameter="20" />
+      }
+    </div>
+    @if (newSummaryAvailable) {
+      <span class="info" i18n>*New responses since last summary</span>
+    }
+  </div>
+  @if (summary) {
+    <markdown [data]="summary" />
+    <div class="mat-caption text-secondary" i18n>
+      Summary generated {{ summaryDate | date: 'short' }} from
+      {{ latestComponentStates.length }} responses
+    </div>
+  }
+} @else {
+  <div i18n>No student responses</div>
+}

src/assets/wise5/directives/teacher-summary-display/ai-summary-display/ai-summary-display.component.ts

@@ -0,0 +1,84 @@
+import { Component, inject } from '@angular/core';
+import { TeacherSummaryDisplayComponent } from '../teacher-summary-display.component';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { AwsBedRockService } from '../../../../../app/chatbot/awsBedRock.service';
+import { ChatMessage } from '../../../../../app/chatbot/chat';
+import { TeacherDataService } from '../../../services/teacherDataService';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { LocalStorageService } from '../../../../../app/services/localStorageService';
+import { MarkdownComponent } from 'ngx-markdown';
+import { DatePipe } from '@angular/common';
+
+@Component({
+  imports: [DatePipe, MarkdownComponent, MatButton, MatIcon, MatProgressSpinner],
+  templateUrl: './ai-summary-display.component.html'
+})
+export abstract class AiSummaryDisplayComponent extends TeacherSummaryDisplayComponent {
+  protected awsBedRockService: AwsBedRockService = inject(AwsBedRockService);
+  protected generatingSummary: boolean = false;
+  protected hasStudentResponses: boolean = false;
+  protected latestComponentStates: any[] = [];
+  private localStorageService: LocalStorageService = inject(LocalStorageService);
+  protected newSummaryAvailable: boolean = false;
+  protected summary: string;
+  protected summaryDate: Date;
+
+  ngOnInit(): void {
+    this.renderDisplay();
+  }
+
+  protected renderDisplay(): void {
+    super.renderDisplay();
+    this.latestComponentStates = this.getLatestComponentStates();
+    this.hasStudentResponses = this.latestComponentStates.length > 0;
+    if (!this.hasStudentResponses) {
+      return;
+    }
+    this.summary = this.localStorageService.getItem(this.getSummaryKey()) || '';
+    const summaryTime = this.localStorageService.getItem(this.getSummaryTimeKey()) || 0;
+    this.summaryDate = new Date(summaryTime);
+    this.newSummaryAvailable = summaryTime > 0 && this.getLastResponseTime() > summaryTime;
+  }
+
+  private getLastResponseTime(): number {
+    return this.latestComponentStates.reduce(
+      (max, state) => Math.max(max, state.serverSaveTime),
+      0
+    );
+  }
+
+  protected getLatestComponentStates(): any[] {
+    return (this.dataService as TeacherDataService)
+      .getComponentStatesByComponentId(this.componentId)
+      .filter((state) => state.periodId === this.periodId || this.periodId === -1)
+      .sort((a, b) => a.serverSaveTime - b.serverSaveTime);
+  }
+
+  protected async generateSummary(): Promise<void> {
+    this.generatingSummary = true;
+    const prompt = this.projectService.getComponent(this.nodeId, this.componentId).prompt;
+    this.summary = await this.awsBedRockService.sendMessage([
+      new ChatMessage('system', this.getSystemPrompt(prompt), this.nodeId),
+      new ChatMessage('user', this.getStudentResponses(), this.nodeId)
+    ]);
+    this.localStorageService.setItem(this.getSummaryKey(), this.summary);
+    const summaryTime = new Date().getTime();
+    this.localStorageService.setItem(this.getSummaryTimeKey(), summaryTime);
+    this.summaryDate = new Date(summaryTime);
+    this.generatingSummary = false;
+    this.newSummaryAvailable = false;
+  }
+
+  protected abstract getStudentResponses(): string;
+
+  protected abstract getSystemPrompt(prompt: string): string;
+
+  private getSummaryKey(): string {
+    return `component-summary-${this.periodId}-${this.nodeId}-${this.componentId}`;
+  }
+
+  private getSummaryTimeKey(): string {
+    return `component-summary-time-${this.periodId}-${this.nodeId}-${this.componentId}`;
+  }
+}

src/assets/wise5/directives/teacher-summary-display/discussion-summary-display/discussion-summary-display.component.ts

@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MarkdownComponent } from 'ngx-markdown';
+import { AiSummaryDisplayComponent } from '../ai-summary-display/ai-summary-display.component';
+import { DatePipe } from '@angular/common';
+
+interface Thread {
+  id: number;
+  post: string;
+  replies: string[];
+}
+
+@Component({
+  imports: [DatePipe, MarkdownComponent, MatButton, MatIcon, MatProgressSpinner],
+  selector: 'discussion-summary-display',
+  templateUrl: '../ai-summary-display/ai-summary-display.component.html'
+})
+export class DiscussionSummaryDisplayComponent extends AiSummaryDisplayComponent {
+  protected getSystemPrompt(prompt: string): string {
+    return `You are a teacher who is summarizing students' discussion threads, which include posts and replies to the following question: "${prompt}".
+      Each thread is in the format: <thread><post>Post</post><replies><reply>Reply 1</reply><reply>Reply 2</reply></replies></thread>.
+      In the same language as the question, provide a summary of the threads in 100 words or less.`;
+  }
+
+  protected getStudentResponses(): string {
+    return this.getDiscussionThreads().reduce(
+      (soFar, thread) =>
+        `${soFar}<thread><post>${thread.post}</post><replies>${thread.replies.map((reply) => `<reply>${reply}</reply>`).join('')}</replies></thread>`,
+      ''
+    );
+  }
+
+  private getDiscussionThreads(): Thread[] {
+    const threads = this.latestComponentStates
+      .filter((state) => state.studentData.componentStateIdReplyingTo == null)
+      .map((post) => ({ id: post.id, post: post.studentData.response, replies: [] }));
+    this.latestComponentStates
+      .filter((state) => state.studentData.componentStateIdReplyingTo != null)
+      .forEach((reply) => {
+        threads
+          .find((t) => t.id === reply.studentData.componentStateIdReplyingTo)
+          ?.replies.push(reply.studentData.response);
+      });
+    return threads;
+  }
+}