From 53960e3ac38af89b88aae1831578aae3123193ce Mon Sep 17 00:00:00 2001
From: Jonathan Lim-Breitbart <breity10@gmail.com>
Date: Fri, 6 Jun 2025 09:50:03 -0700
Subject: [PATCH 1/4] feat(AIChat): constrain chat box height

---
 .../aiChat/ai-chat-show-work/ai-chat-show-work.component.html   | 1 +
 .../aiChat/ai-chat-student/ai-chat-student.component.html       | 1 +
 .../aiChat/ai-chat-student/ai-chat-student.component.scss       | 2 ++
 3 files changed, 4 insertions(+)

diff --git a/src/assets/wise5/components/aiChat/ai-chat-show-work/ai-chat-show-work.component.html b/src/assets/wise5/components/aiChat/ai-chat-show-work/ai-chat-show-work.component.html
index 48d5aeee7fe..b567926528f 100644
--- a/src/assets/wise5/components/aiChat/ai-chat-show-work/ai-chat-show-work.component.html
+++ b/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"
     [messages]="messages"
     [workgroupId]="workgroupId"
     [computerAvatar]="computerAvatar"
diff --git a/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.html b/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.html
index 6b3c6355a25..519c6644073 100644
--- a/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.html
+++ b/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.html
@@ -6,6 +6,7 @@
 <mat-card *ngIf="!computerAvatarSelectorVisible" appearance="outlined" class="mat-elevation-z2">
   <component-header [component]="component"></component-header>
   <ai-chat-messages
+    class="max-h-[500px]"
     [messages]="messages"
     [workgroupId]="workgroupId"
     [waitingForComputerResponse]="waitingForComputerResponse"
diff --git a/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.scss b/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.scss
index d2bbead6371..e91a178f581 100644
--- a/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.scss
+++ b/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.scss
@@ -9,6 +9,8 @@
 ai-chat-messages {
   display: block;
   margin-bottom: 12px;
+  max-height: 500px;
+  overflow-y: auto;
 }
 
 .add-response {

From a975b980428ac86a5343185768d743230f678b9e Mon Sep 17 00:00:00 2001
From: Jonathan Lim-Breitbart <breity10@gmail.com>
Date: Fri, 6 Jun 2025 11:02:52 -0700
Subject: [PATCH 2/4] Scroll to bottom after each message

---
 .../ai-chat-student.component.html                | 15 ++++++++-------
 .../ai-chat-student.component.scss                |  3 +--
 .../ai-chat-student/ai-chat-student.component.ts  | 14 +++++++++++++-
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.html b/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.html
index 519c6644073..92a8811b7b6 100644
--- a/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.html
+++ b/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.html
@@ -5,13 +5,14 @@
 />
 <mat-card *ngIf="!computerAvatarSelectorVisible" appearance="outlined" class="mat-elevation-z2">
   <component-header [component]="component"></component-header>
-  <ai-chat-messages
-    class="max-h-[500px]"
-    [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)"
diff --git a/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.scss b/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.scss
index e91a178f581..2ac4c0a8c49 100644
--- a/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.scss
+++ b/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.scss
@@ -6,8 +6,7 @@
   max-width: functions.breakpoint('sm.min');
 }
 
-ai-chat-messages {
-  display: block;
+.messages {
   margin-bottom: 12px;
   max-height: 500px;
   overflow-y: auto;
diff --git a/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts b/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts
index 459a6cf5d6b..2e64a0ab193 100644
--- a/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts
+++ b/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,6 +89,7 @@ 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,
@@ -95,6 +97,7 @@ export class AiChatStudentComponent extends ComponentStudent {
       );
       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;
+
+  scrollToBottom(): void {
+    setTimeout(() => {
+      this.messagesContainer.nativeElement.scroll({
+        top: this.messagesContainer.nativeElement.scrollHeight,
+        behavior: 'smooth'
+      });
+    }, 100);
+  }
 }
 
 applyMixins(AiChatStudentComponent, [ComputerAvatarInitializer]);

From e047f4a5cfd91a4d3b77dedb9ee2e9bc351e4d46 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Fri, 6 Jun 2025 18:11:25 +0000
Subject: [PATCH 3/4] Updated messages

---
 src/messages.xlf | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/messages.xlf b/src/messages.xlf
index fcbc00f3a43..2b43fa1cbe7 100644
--- a/src/messages.xlf
+++ b/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">

From 4fb466f3e4b28bae418a52d952b6ead0c6c766cc Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Fri, 6 Jun 2025 12:53:49 -0700
Subject: [PATCH 4/4] minor fixes

---
 .../aiChat/ai-chat-show-work/ai-chat-show-work.component.html   | 2 +-
 .../aiChat/ai-chat-student/ai-chat-student.component.ts         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/assets/wise5/components/aiChat/ai-chat-show-work/ai-chat-show-work.component.html b/src/assets/wise5/components/aiChat/ai-chat-show-work/ai-chat-show-work.component.html
index b567926528f..98755d5e900 100644
--- a/src/assets/wise5/components/aiChat/ai-chat-show-work/ai-chat-show-work.component.html
+++ b/src/assets/wise5/components/aiChat/ai-chat-show-work/ai-chat-show-work.component.html
@@ -1,6 +1,6 @@
 <div class="component--grading__response__content">
   <ai-chat-messages
-    class="max-h-[500px] overflow-y-auto"
+    class="max-h-[500px] overflow-y-auto block"
     [messages]="messages"
     [workgroupId]="workgroupId"
     [computerAvatar]="computerAvatar"
diff --git a/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts b/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts
index 2e64a0ab193..9c47e2a8fb2 100644
--- a/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts
+++ b/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts
@@ -133,7 +133,7 @@ export class AiChatStudentComponent extends ComponentStudent {
 
   initializeComputerAvatar: () => void;
 
-  scrollToBottom(): void {
+  private scrollToBottom(): void {
     setTimeout(() => {
       this.messagesContainer.nativeElement.scroll({
         top: this.messagesContainer.nativeElement.scrollHeight,