Scroll to current view if not in viewport

Author: binbin821

report-front-end/src/common/API.ts

@@ -1,6 +1,7 @@
 import { ChatBotHistoryItem } from "@/components/chatbot/types";
 import { Dispatch, SetStateAction } from "react";
 import { BACKEND_URL } from "../tools/const";
+import { DEFAULT_QUERY_CONFIG } from "../enum/DefaultQueryEnum";
 
 export interface QueryProps {
   query: string;
@@ -14,12 +15,12 @@ export async function query(props: QueryProps) {
   try {
     const param = {
       query: props.query,
-      bedrock_model_id: props.configuration.selectedLLM,
+      bedrock_model_id: props.configuration.selectedLLM || DEFAULT_QUERY_CONFIG.selectedLLM,
       use_rag_flag: true,
       visualize_results_flag: true,
       intent_ner_recognition_flag: props.configuration.intentChecked,
       agent_cot_flag: props.configuration.complexChecked,
-      profile_name: props.configuration.selectedDataPro,
+      profile_name: props.configuration.selectedDataPro || DEFAULT_QUERY_CONFIG.selectedDataPro,
       explain_gen_process_flag: true,
       gen_suggested_question_flag: props.configuration.modelSuggestChecked,
       top_k: props.configuration.topK,

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

@@ -71,18 +71,33 @@ export default function Chat(
 
   // On first render and on unmount there is no DOM element so `element` will be `null`
   const scrollTo = (element : any) => {
-    if (element) {
+    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 - 200)
+    );
+  }
+
   return (
     <div className={styles.chat_container}>
       <SpaceBetween size={'xxl'}>
         {messageHistory.map((message, idx) => {
             const isLast = idx === messageHistory.length - 1;
             return (
-              <div key={idx} ref={isLast ? scrollTo : undefined}>
+              <div key={idx} ref={isLast && !loading ? scrollTo : undefined}>
                 <ChatMessage
                   key={idx}
                   message={message}