feat(AIChat): constrain chat box height

src/assets/wise5/components/aiChat/ai-chat-show-work/ai-chat-show-work.component.html

@@ -1,5 +1,6 @@
 <div class="component--grading__response__content">
   <ai-chat-messages
+    class="max-h-[500px] overflow-y-auto block"
     [messages]="messages"
     [workgroupId]="workgroupId"
     [computerAvatar]="computerAvatar"

src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.html

@@ -5,12 +5,14 @@
 />
 <mat-card *ngIf="!computerAvatarSelectorVisible" appearance="outlined" class="mat-elevation-z2">
   <component-header [component]="component"></component-header>
-  <ai-chat-messages
-    [messages]="messages"
-    [workgroupId]="workgroupId"
-    [waitingForComputerResponse]="waitingForComputerResponse"
-    [computerAvatar]="computerAvatar"
-  ></ai-chat-messages>
+  <div #messagesContainer class="messages">
+    <ai-chat-messages
+      [messages]="messages"
+      [workgroupId]="workgroupId"
+      [waitingForComputerResponse]="waitingForComputerResponse"
+      [computerAvatar]="computerAvatar"
+    ></ai-chat-messages>
+  </div>
   <chat-input
     [submitDisabled]="waitingForComputerResponse"
     (submitEvent)="submitStudentResponse($event)"

src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.scss

@@ -6,9 +6,10 @@
   max-width: functions.breakpoint('sm.min');
 }
 
-ai-chat-messages {
-  display: block;
+.messages {
   margin-bottom: 12px;
+  max-height: 500px;
+  overflow-y: auto;
 }
 
 .add-response {

src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { ComponentStudent } from '../../component-student.component';
 import { ConfigService } from '../../../services/configService';
 import { AnnotationService } from '../../../services/annotationService';
@@ -30,6 +30,7 @@ export class AiChatStudentComponent extends ComponentStudent {
   protected computerAvatarSelectorVisible: boolean = false;
   private connectedComponentResponse: string;
   protected messages: AiChatMessage[] = [];
+  @ViewChild('messagesContainer') private messagesContainer: ElementRef;
   protected studentResponse: string = '';
   protected submitEnabled: boolean = false;
   protected waitingForComputerResponse: boolean = false;
@@ -88,13 +89,15 @@ export class AiChatStudentComponent extends ComponentStudent {
       this.connectedComponentResponse = null;
     }
     this.messages.push(new AiChatMessage('user', response));
+    this.scrollToBottom();
     try {
       const response = await this.aiChatService.sendChatMessage(
         this.messages,
         this.componentContent.model
       );
       this.waitingForComputerResponse = false;
       this.messages.push(new AiChatMessage('assistant', response.choices[0].message.content));
+      this.scrollToBottom();
       this.emitComponentSubmitTriggered();
     } catch (error) {
       this.waitingForComputerResponse = false;
@@ -129,6 +132,15 @@ export class AiChatStudentComponent extends ComponentStudent {
   }
 
   initializeComputerAvatar: () => void;
+
+  private scrollToBottom(): void {
+    setTimeout(() => {
+      this.messagesContainer.nativeElement.scroll({
+        top: this.messagesContainer.nativeElement.scrollHeight,
+        behavior: 'smooth'
+      });
+    }, 100);
+  }
 }
 
 applyMixins(AiChatStudentComponent, [ComputerAvatarInitializer]);

src/messages.xlf

@@ -15880,7 +15880,7 @@ Are you sure you want to proceed?</source>
         <source>An error occurred.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts</context>
-          <context context-type="linenumber">101</context>
+          <context context-type="linenumber">104</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1141886420788473147" datatype="html">