From c7798630b469b4a6590ba59546049a0ab77cd8e5 Mon Sep 17 00:00:00 2001
From: lublagg <lvblagg@gmail.com>
Date: Wed, 18 Dec 2024 14:12:41 -0500
Subject: [PATCH] Fix: limit chat scrolling to chat transcript container.

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

diff --git a/src/components/chat-transcript-message.tsx b/src/components/chat-transcript-message.tsx
index 0d1d8f1..0a867b8 100644
--- a/src/components/chat-transcript-message.tsx
+++ b/src/components/chat-transcript-message.tsx
@@ -46,11 +46,10 @@ export const ChatTranscriptMessage = ({message, showDebugLog}: IProps) => {
       data-testid="chat-message"
       role="listitem"
     >
-      <h3 aria-label="speaker" data-testid="chat-message-speaker">
+      <h3 data-testid="chat-message-speaker">
         {speaker}
       </h3>
       <div
-        aria-label="message"
         className={`chat-message-content ${speakerClass}`}
         data-testid="chat-message-content"
       >
diff --git a/src/components/chat-transcript.test.tsx b/src/components/chat-transcript.test.tsx
index 45736ff..51bfdcc 100644
--- a/src/components/chat-transcript.test.tsx
+++ b/src/components/chat-transcript.test.tsx
@@ -39,7 +39,6 @@ describe("test chat transcript component", () => {
       expect(speaker).toHaveTextContent(chatTranscript.messages[index].speaker);
 
       const content = within(message).getByTestId("chat-message-content");
-      expect(content).toHaveAttribute("aria-label", "message");
       expect(content).toHaveTextContent(chatTranscript.messages[index].messageContent.content);
     });
   });
diff --git a/src/components/chat-transcript.tsx b/src/components/chat-transcript.tsx
index 007d4ca..d175c16 100644
--- a/src/components/chat-transcript.tsx
+++ b/src/components/chat-transcript.tsx
@@ -20,9 +20,9 @@ export const ChatTranscriptComponent = observer(({chatTranscript, showDebugLog,
     const chatTranscriptContainer = chatTranscriptRef.current;
     if (chatTranscriptContainer) {
       const lastMessage = chatTranscriptContainer.querySelector(".chat-transcript__message:last-of-type");
-      lastMessage?.scrollIntoView({behavior: "smooth"});
+      lastMessage?.scrollIntoView({behavior: "smooth", block: "nearest"});
     }
-  }, [chatTranscript.messages.length]);
+  }, [chatTranscript.messages.length, isLoading]);
 
   return (
     <div ref={chatTranscriptRef} id="chat-transcript" className="chat-transcript" data-testid="chat-transcript" role="group">
diff --git a/src/components/loading-message.tsx b/src/components/loading-message.tsx
index 727afb7..6b0b7fe 100644
--- a/src/components/loading-message.tsx
+++ b/src/components/loading-message.tsx
@@ -4,17 +4,16 @@ import { timeStamp } from "../utils/utils";
 
 export const LoadingMessage = () => {
   return (
-    <section
+    <div
       aria-label={`${DAVAI_SPEAKER} at ${timeStamp()}`}
       className={`chat-transcript__message ${DAVAI_SPEAKER.toLowerCase()}`}
       data-testid="chat-message"
       role="listitem"
     >
-      <h3 aria-label="speaker" data-testid="chat-message-speaker">
+      <h3 data-testid="chat-message-speaker">
         {DAVAI_SPEAKER}
       </h3>
       <div
-        aria-label="message"
         className={`chat-message-content ${DAVAI_SPEAKER.toLowerCase()}`}
         data-testid="chat-message-content"
       >
@@ -25,6 +24,6 @@ export const LoadingMessage = () => {
         >
         </div>
       </div>
-    </section>
+    </div>
   );
 };