Fix: limit chat scrolling to chat transcript container.

concord-consortium · Dec 18, 2024 · c779863 · c779863
1 parent b0722df
commit c779863
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
   );
 };