From de304c90a714ae2348f46a9d6689dec39ec63f40 Mon Sep 17 00:00:00 2001
From: Ethan McElroy <emcelroy@concord.org>
Date: Tue, 3 Dec 2024 14:01:31 -0500
Subject: [PATCH] fix: auto scroll chat

---
 src/components/chat-transcript.scss     | 1 +
 src/components/chat-transcript.test.tsx | 1 -
 src/components/chat-transcript.tsx      | 6 +++---
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/chat-transcript.scss b/src/components/chat-transcript.scss
index 1266732..c239b81 100644
--- a/src/components/chat-transcript.scss
+++ b/src/components/chat-transcript.scss
@@ -2,6 +2,7 @@
 
 .chat-transcript {
   margin: 0;
+  max-height: 250px;
   overflow-y: auto;
 
   .chat-transcript__messages {
diff --git a/src/components/chat-transcript.test.tsx b/src/components/chat-transcript.test.tsx
index 616096d..9a40f58 100644
--- a/src/components/chat-transcript.test.tsx
+++ b/src/components/chat-transcript.test.tsx
@@ -34,7 +34,6 @@ describe("test chat transcript component", () => {
       expect(message).toHaveAttribute("aria-label", labelContent);
 
       const speaker = within(message).getByTestId("chat-message-speaker");
-      expect(speaker).toHaveAttribute("aria-label", "speaker");
       expect(speaker).toHaveTextContent(chatTranscript.messages[index].speaker);
 
       const content = within(message).getByTestId("chat-message-content");
diff --git a/src/components/chat-transcript.tsx b/src/components/chat-transcript.tsx
index 9cb9759..737a338 100644
--- a/src/components/chat-transcript.tsx
+++ b/src/components/chat-transcript.tsx
@@ -14,13 +14,13 @@ export const ChatTranscriptComponent = observer(({chatTranscript}: IProps) => {
   const chatTranscriptRef = useRef<HTMLElement>(null);
 
   useEffect(() => {
-    // Always scroll to the bottom of the chat transcript.
+    // Autoscroll to the top of the latest message in the transcript.
     const chatTranscriptContainer = chatTranscriptRef.current;
     if (chatTranscriptContainer) {
       const lastMessage = chatTranscriptContainer.querySelector(".chat-transcript__message:last-of-type");
       lastMessage?.scrollIntoView({behavior: "smooth"});
     }
-  }, [chatTranscript]);
+  }, [chatTranscript.messages.length]);
 
   return (
     <section ref={chatTranscriptRef} id="chat-transcript" className="chat-transcript" data-testid="chat-transcript" role="group">
@@ -44,7 +44,7 @@ export const ChatTranscriptComponent = observer(({chatTranscript}: IProps) => {
               key={message.timestamp}
               role="listitem"
             >
-              <h3 aria-label="speaker" data-testid="chat-message-speaker">
+              <h3 data-testid="chat-message-speaker">
                 {message.speaker}
               </h3>
               <div