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

Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>

Author: hirokiterashima

package-lock.json

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ChatbotComponent } from './chatbot.component';
 import { ChatbotService } from './chatbot.service';
-import { AwsBedRockService } from './awsBedRock.service';
 import { ConfigService } from '../../assets/wise5/services/configService';
 import { DataService } from '../services/data.service';
 import { ProjectService } from '../../assets/wise5/services/projectService';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { of, throwError } from 'rxjs';
 import { Chat, ChatMessage } from './chat';
 import { provideHttpClient } from '@angular/common/http';
+import { OpenAiChatService } from '../services/chat/openAiChat.service';
 
 describe('ChatbotComponent', () => {
   let component: ChatbotComponent;
   let fixture: ComponentFixture<ChatbotComponent>;
   let chatbotService: jasmine.SpyObj<ChatbotService>;
-  let awsBedRockService: jasmine.SpyObj<AwsBedRockService>;
+  let chatService: jasmine.SpyObj<OpenAiChatService>;
   let configService: jasmine.SpyObj<ConfigService>;
   let dataService: jasmine.SpyObj<DataService>;
   let projectService: jasmine.SpyObj<ProjectService>;
@@ -41,7 +41,7 @@ describe('ChatbotComponent', () => {
       'updateChat',
       'deleteChat'
     ]);
-    const awsBedRockServiceSpy = jasmine.createSpyObj('AwsBedRockService', [
+    const chatServiceSpy = jasmine.createSpyObj('OpenAiChatService', [
       'sendMessage',
       'generateChatTitle'
     ]);
@@ -66,7 +66,7 @@ describe('ChatbotComponent', () => {
       imports: [ChatbotComponent],
       providers: [
         { provide: ChatbotService, useValue: chatbotServiceSpy },
-        { provide: AwsBedRockService, useValue: awsBedRockServiceSpy },
+        { provide: OpenAiChatService, useValue: chatServiceSpy },
         { provide: ConfigService, useValue: configServiceSpy },
         { provide: DataService, useValue: dataServiceSpy },
         { provide: ProjectService, useValue: projectServiceSpy },
@@ -76,7 +76,7 @@ describe('ChatbotComponent', () => {
     }).compileComponents();
 
     chatbotService = TestBed.inject(ChatbotService) as jasmine.SpyObj<ChatbotService>;
-    awsBedRockService = TestBed.inject(AwsBedRockService) as jasmine.SpyObj<AwsBedRockService>;
+    chatService = TestBed.inject(OpenAiChatService) as jasmine.SpyObj<OpenAiChatService>;
     configService = TestBed.inject(ConfigService) as jasmine.SpyObj<ConfigService>;
     dataService = TestBed.inject(DataService) as jasmine.SpyObj<DataService>;
     projectService = TestBed.inject(ProjectService) as jasmine.SpyObj<ProjectService>;
@@ -134,8 +134,8 @@ describe('ChatbotComponent', () => {
       const assistantResponse = 'Hi there!';
       component['userInput'] = userMessage;
 
-      awsBedRockService.sendMessage.and.returnValue(Promise.resolve(assistantResponse));
-      awsBedRockService.generateChatTitle.and.returnValue(Promise.resolve('New Title'));
+      chatService.sendMessage.and.returnValue(Promise.resolve(assistantResponse));
+      spyOn(component, 'generateChatTitle').and.returnValue(Promise.resolve('New Title'));
       await component['sendMessage']();
 
       expect(component['messages'].length).toBe(2);
@@ -156,12 +156,12 @@ describe('ChatbotComponent', () => {
 
       // First user message (only system message exists initially)
       component['messages'] = [];
-      awsBedRockService.sendMessage.and.returnValue(Promise.resolve(assistantResponse));
-      awsBedRockService.generateChatTitle.and.returnValue(Promise.resolve(newTitle));
+      chatService.sendMessage.and.returnValue(Promise.resolve(assistantResponse));
+      spyOn(component, 'generateChatTitle').and.returnValue(Promise.resolve(newTitle));
 
       await component['sendMessage']();
 
-      expect(awsBedRockService.generateChatTitle).toHaveBeenCalledWith(userMessage);
+      expect(component['generateChatTitle']).toHaveBeenCalledWith(userMessage);
       expect(component['currentChat']?.title).toBe(newTitle);
       expect(chatbotService.updateChat).toHaveBeenCalled();
     });
@@ -171,7 +171,7 @@ describe('ChatbotComponent', () => {
 
       await component['sendMessage']();
 
-      expect(awsBedRockService.sendMessage).not.toHaveBeenCalled();
+      expect(chatService.sendMessage).not.toHaveBeenCalled();
       expect(component['messages'].length).toBe(0);
     });
 
@@ -181,7 +181,7 @@ describe('ChatbotComponent', () => {
 
       await component['sendMessage']();
 
-      expect(awsBedRockService.sendMessage).not.toHaveBeenCalled();
+      expect(chatService.sendMessage).not.toHaveBeenCalled();
     });
 
     it('should not send messages when no current chat', async () => {
@@ -190,12 +190,12 @@ describe('ChatbotComponent', () => {
 
       await component['sendMessage']();
 
-      expect(awsBedRockService.sendMessage).not.toHaveBeenCalled();
+      expect(chatService.sendMessage).not.toHaveBeenCalled();
     });
 
     it('should handle errors when sending messages', async () => {
       component['userInput'] = 'Hello';
-      awsBedRockService.sendMessage.and.returnValue(Promise.reject(new Error('API error')));
+      chatService.sendMessage.and.returnValue(Promise.reject(new Error('API error')));
 
       await component['sendMessage']();
 
@@ -336,8 +336,8 @@ describe('ChatbotComponent', () => {
 
     it('should send message on Enter key press', () => {
       component['userInput'] = 'Hello';
-      awsBedRockService.sendMessage.and.returnValue(Promise.resolve('Response'));
-      awsBedRockService.generateChatTitle.and.returnValue(Promise.resolve('New Title'));
+      chatService.sendMessage.and.returnValue(Promise.resolve('Response'));
+      spyOn(component, 'generateChatTitle').and.returnValue(Promise.resolve('New Title'));
 
       const event = new KeyboardEvent('keypress', { key: 'Enter' });
       spyOn(event, 'preventDefault');
@@ -356,7 +356,7 @@ describe('ChatbotComponent', () => {
       component['handleKeyPress'](event);
 
       expect(event.preventDefault).not.toHaveBeenCalled();
-      expect(awsBedRockService.sendMessage).not.toHaveBeenCalled();
+      expect(chatService.sendMessage).not.toHaveBeenCalled();
     });
   });
 

src/app/chatbot/chat.service.ts

@@ -10,16 +10,16 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { BreakpointObserver } from '@angular/cdk/layout';
-import { skip, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { ChatbotService } from './chatbot.service';
 import { ConfigService } from '../../assets/wise5/services/configService';
 import { DataService } from '../services/data.service';
 import { Chat, ChatMessage } from './chat';
-import { AwsBedRockService } from './awsBedRock.service';
 import { ProjectService } from '../../assets/wise5/services/projectService';
 import { MarkdownComponent } from 'ngx-markdown';
 import { ChatHistoryDialogComponent } from './chat-history-dialog.component';
-import { MatDividerModule } from '@angular/material/divider';
+import { ChatService } from '../services/chat/chat.service';
+import { OpenAiChatService } from '../services/chat/openAiChat.service';
 
 @Component({
   imports: [
@@ -42,7 +42,7 @@ import { MatDividerModule } from '@angular/material/divider';
 export class ChatbotComponent {
   private breakpointObserver = inject(BreakpointObserver);
   private chatbotService: ChatbotService = inject(ChatbotService);
-  private awsBedRockService: AwsBedRockService = inject(AwsBedRockService);
+  private chatService: ChatService = inject(OpenAiChatService);
   private configService: ConfigService = inject(ConfigService);
   private dataService: DataService = inject(DataService);
   private projectService = inject(ProjectService);
@@ -112,7 +112,7 @@ export class ChatbotComponent {
     this.loading = true;
     this.scrollToBottom();
     try {
-      const response = await this.awsBedRockService.sendMessage(this.messages);
+      const response = await this.chatService.sendMessage(this.messages);
       this.messages.push(
         new ChatMessage('assistant', response, this.dataService.getCurrentNode().id)
       );
@@ -154,7 +154,7 @@ export class ChatbotComponent {
    */
   private async generateAndSetChatTitle(firstUserMessage: ChatMessage): Promise<void> {
     try {
-      let newTitle = await this.awsBedRockService.generateChatTitle(firstUserMessage.content);
+      let newTitle = await this.generateChatTitle(firstUserMessage.content);
       // Remove surrounding quotes if any
       newTitle = newTitle.replace(/^["'](.*)["']$/, '$1').trim();
       if (newTitle) {
@@ -165,6 +165,24 @@ export class ChatbotComponent {
     }
   }
 
+  /**
+   * Generates a short, concise title for a chat based on the first message.
+   * @param message The first user message content.
+   * @returns A promise that resolves to the generated title.
+   */
+  async generateChatTitle(message: string): Promise<string> {
+    const prompt = `Generate a short, concise title (max 5 words) for a chat that starts with this message: "${message}". Respond only with the title, no quotes or extra text. If the language of the message is not English, return the title in that language.`;
+    const messages: ChatMessage[] = [
+      new ChatMessage(
+        'system',
+        'You are a helpful assistant that generates short titles for chat conversations.',
+        ''
+      ),
+      new ChatMessage('user', prompt, '')
+    ];
+    return this.chatService.sendMessage(messages);
+  }
+
   protected switchToChat(chat: Chat): void {
     this.currentChat = chat;
     this.messages = [...chat.messages];

src/app/chatbot/chatbot.component.spec.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { ChatService } from './chat.service';
 
 @Injectable({ providedIn: 'root' })
-export class AwsBedRockService extends ChatService {
+export class AwsBedRockChatService extends ChatService {
   protected chatEndpoint = '/api/aws-bedrock/chat';
   protected model: string = 'google.gemma-3-27b-it';
 

src/app/chatbot/chatbot.component.ts

@@ -0,0 +1,37 @@
+import { inject } from '@angular/core';
+import { ChatMessage } from '../../chatbot/chat';
+import { firstValueFrom } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+
+export abstract class ChatService {
+  protected abstract chatEndpoint: string;
+  protected abstract model: string;
+
+  private http = inject(HttpClient);
+
+  /**
+   * Sends a message to the chat endpoint.
+   * @param messages The conversation history.
+   * @returns A promise that resolves to the response from the chat endpoint.
+   */
+  async sendMessage(messages: ChatMessage[]): Promise<string> {
+    const payload = {
+      messages: messages.map((msg) => ({
+        role: msg.role,
+        content: msg.content
+      })),
+      model: this.model
+    };
+    try {
+      const response = await firstValueFrom(this.http.post<any>(`${this.chatEndpoint}`, payload));
+      return this.processResponse(response.choices[0].message.content);
+    } catch (error) {
+      console.error('Error calling chat endpoint:', error);
+      throw error;
+    }
+  }
+
+  processResponse(response: string): string {
+    return response;
+  }
+}

src/app/chatbot/awsBedRock.service.ts …/services/chat/awsBedRockChat.service.tssrc/app/chatbot/awsBedRock.service.ts renamed to src/app/services/chat/awsBedRockChat.service.ts src/app/chatbot/awsBedRock.service.ts renamed to src/app/services/chat/awsBedRockChat.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+import { ChatService } from './chat.service';
+
+@Injectable({ providedIn: 'root' })
+export class OpenAiChatService extends ChatService {
+  protected chatEndpoint = '/api/chat-gpt';
+  protected model: string = 'gpt-4o';
+}

src/app/services/chat/chat.service.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);
+    }
+  }
+}