fix: auto scroll chat

concord-consortium · Dec 3, 2024 · de304c9 · de304c9
1 parent cd9b2f0
commit de304c9
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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