Merge pull request #88 from aws-samples/feature/report

feat: scroll bug

Author: binbin821

report-front-end/src/components/chatbot-panel/chat-input-panel.tsx

@@ -1,5 +1,5 @@
 import { Button, Container, Icon, SpaceBetween, } from "@cloudscape-design/components";
-import { Dispatch, SetStateAction, useState, } from "react";
+import { Dispatch, SetStateAction, useEffect, useLayoutEffect, useState, } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { ChatBotHistoryItem, ChatInputState, } from "./types";
 import CustomQuestions from "./custom-questions";
@@ -15,6 +15,12 @@ export interface ChatInputPanelProps {
   setMessageHistory: Dispatch<SetStateAction<ChatBotHistoryItem[]>>;
 }
 
+export abstract class ChatScrollState {
+  static userHasScrolled = false;
+  static skipNextScrollEvent = false;
+  static skipNextHistoryUpdate = false;
+}
+
 export default function ChatInputPanel(props: ChatInputPanelProps) {
   const [state, setTextValue] = useState<ChatInputState>({
     value: ""
@@ -39,6 +45,45 @@ export default function ChatInputPanel(props: ChatInputPanelProps) {
     props.setMessageHistory([]);
   };
 
+  useEffect(() => {
+    const onWindowScroll = () => {
+      if (ChatScrollState.skipNextScrollEvent) {
+        ChatScrollState.skipNextScrollEvent = false;
+        return;
+      }
+
+      const isScrollToTheEnd =
+        Math.abs(
+          window.innerHeight +
+          window.scrollY -
+          document.documentElement.scrollHeight
+        ) <= 10;
+
+      ChatScrollState.userHasScrolled = !isScrollToTheEnd;
+    };
+
+    window.addEventListener("scroll", onWindowScroll);
+
+    return () => {
+      window.removeEventListener("scroll", onWindowScroll);
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    if (ChatScrollState.skipNextHistoryUpdate) {
+      ChatScrollState.skipNextHistoryUpdate = false;
+      return;
+    }
+
+    if (!ChatScrollState.userHasScrolled && props.messageHistory.length > 0) {
+      ChatScrollState.skipNextScrollEvent = true;
+      window.scrollTo({
+        top: document.documentElement.scrollHeight + 1000,
+        behavior: "smooth",
+      });
+    }
+  }, [props.messageHistory]);
+
   return (
     <Container>
       <SpaceBetween size={'s'}>

report-front-end/src/components/chatbot-panel/chat-message.tsx

@@ -12,7 +12,9 @@ import {
 import {
   ChatBotAnswerItem,
   ChatBotHistoryItem,
-  ChatBotMessageType, FeedBackItem, FeedBackType,
+  ChatBotMessageType,
+  FeedBackItem,
+  FeedBackType,
   SQLSearchResult
 } from "./types";
 import Button from "@cloudscape-design/components/button";
@@ -187,7 +189,7 @@ function SQLResultPanel(props: SQLResultProps) {
             variant="footer"
             headerText="SQL">
             <SpaceBetween size={'s'}>
-              <div className={styles.sql}>
+              <div className={styles.sql_container}>
                 <SyntaxHighlighter language="javascript">
                   {props.result.sql}
                 </SyntaxHighlighter>

report-front-end/src/components/chatbot-panel/chat.module.scss

@@ -26,7 +26,7 @@
   }
 }
 
-.sql {
+.sql_container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: stretch;
@@ -65,8 +65,8 @@
     transparent 0%,
     awsui.$color-background-container-content 20%
   );
-  margin-left: -8px;
-  margin-right: -8px;
+  //margin-left: -8px;
+  //margin-right: -8px;
   container-type: inline-size;
   container-name: input_container;
 }

report-front-end/src/components/chatbot-panel/chat.tsx

@@ -13,34 +13,12 @@ export default function Chat(
   const [messageHistory, setMessageHistory] = useState<ChatBotHistoryItem[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
 
-  const scrollTo = (element : any) => {
-    if (element && !isInViewPort(element)) {
-      element.scrollIntoView({behavior: "smooth"});
-    }
-  };
-
-  function isInViewPort(element: any) {
-    const viewWidth = window.innerWidth || document.documentElement.clientWidth;
-    const viewHeight = window.innerHeight || document.documentElement.clientHeight;
-    const {
-      top,
-      right,
-      bottom,
-      left,
-    } = element.getBoundingClientRect();
-
-    return (
-      top >= 0 && left >= 0 && right <= viewWidth && bottom <= (viewHeight - 500)
-    );
-  }
-
   return (
     <div className={styles.chat_container}>
       <SpaceBetween size={'xxl'}>
         {messageHistory.map((message, idx) => {
-            const isLast = idx === messageHistory.length - 2;
             return (
-              <div key={idx} ref={!loading && isLast ? scrollTo : undefined}>
+              <div key={idx}>
                 <ChatMessage
                   key={idx}
                   message={message}
@@ -52,7 +30,8 @@ export default function Chat(
           }
         )}
         {loading && (
-          <div ref={loading ? scrollTo : undefined}>
+          /*<div ref={loading ? scrollTo : undefined}>*/
+          <div>
             <Box float="left">
               <Spinner/>
             </Box>