Merge pull request #60 from microsoft/PSL-BUG-7026

fix: display confirmation of chat history saved popup

Author: Roopan-Microsoft

ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css

@@ -379,56 +379,3 @@ a {
 }
 
 
- /* popup css*/
- .popupContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: #fff;
-  border: 1px solid #ccc;
-  padding: 10px;
-  border-radius: 5px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  z-index: 1;
-  position: fixed;
-  right: 1rem;
-  top: 6rem;
-}
-
-
-.popupContent {
-  display: flex;
-  align-items: center;
-}
-
-.checkmark {
-  color: white;
-  font-size: 13px;
-  vertical-align: middle;
-  padding-right: 0.4rem;
-}
-
-.popupText {
-  margin-left: 10px;
-}
-
-.headerText{
-  font-weight: 600;
-  color: #242424;
-}
-.popupSubtext {
-  font-size: smaller;
-  color: #242424;
-  padding-left: 1.4rem;
-  width: 75%;
-
-}
-
-.closeButton {
-  background: none;
-  border: none;
-  font-size: 13px;
-  cursor: pointer;
-  position: absolute;
-  right: 0.8rem;
-}

ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx

@@ -11,8 +11,6 @@ import DOMPurify from 'dompurify'
 
 import styles from './Chat.module.css'
 import TeamAvatar from '../../assets/TeamAvatar.svg'
-import TickIcon  from '../../assets/TickIcon.svg'
-import DismissIcon from '../../assets/Dismiss.svg'
 import { XSSAllowTags } from '../../constants/xssAllowTags'
 
 import {
@@ -44,7 +42,7 @@ const enum messageStatus {
   Done = 'Done'
 }
 
-const Chat = () => {
+const Chat = (props: any) => {
   const appStateContext = useContext(AppStateContext)
   const ui = appStateContext?.state.frontendSettings?.ui
   const AUTH_ENABLED = appStateContext?.state.frontendSettings?.auth_enabled
@@ -59,7 +57,6 @@ const Chat = () => {
   const [clearingChat, setClearingChat] = useState<boolean>(false)
   const [hideErrorDialog, { toggle: toggleErrorDialog }] = useBoolean(true)
   const [errorMsg, setErrorMsg] = useState<ErrorMessage | null>()
-  const [isVisible, setIsVisible] = useState(false);
 
   const errorDialogContentProps = {
     type: DialogType.close,
@@ -100,19 +97,6 @@ const Chat = () => {
       setErrorMsg(null)
     }, 500)
   }
-  const closePopup = () => {
-    setIsVisible(!isVisible);
-  };
-
-  useEffect(() => {
-    if (isVisible) {
-      const timer = setTimeout(() => {
-        setIsVisible(false);
-      }, 4000); // Popup will disappear after 3 seconds
-
-      return () => clearTimeout(timer); // Cleanup the timer on component unmount
-    }
-  }, [isVisible]);
 
   useEffect(() => {
     setIsLoading(appStateContext?.state.chatHistoryLoadingState === ChatHistoryLoadingState.Loading)
@@ -600,7 +584,7 @@ const Chat = () => {
   }
 
   const newChat = () => {
-    setIsVisible(true);
+    props.setIsVisible(true);
     setProcessMessages(messageStatus.Processing)
     setMessages([])
     setIsCitationPanelOpen(false)
@@ -733,20 +717,6 @@ const Chat = () => {
 
   return (
     <div className={styles.container} role="main">
-      {isVisible && (
-        <div className={styles.popupContainer}>
-          <div className={styles.popupContent}>
-            <div className={styles.popupText}>
-              <div className={styles.headerText}><span className={styles.checkmark}>
-                <img alt="check mark" src={TickIcon} /></span>Chat saved
-                <img alt="close icon" src={DismissIcon} className={styles.closeButton} onClick={closePopup}/>
-              </div>
-              <div className={styles.popupSubtext}><span className={styles.popupMsg}>Your chat history has been saved successfully!</span></div>
-            </div>
-            
-          </div>
-        </div>
-    )}
       {showAuthMessage ? (
         <Stack className={styles.chatEmptyState}>
           <ShieldLockRegular

ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css

@@ -254,4 +254,58 @@
   padding: 10px 20px;
   cursor: pointer;
   font-size: 16px;
-}
+}
+
+/* popup css*/
+.popupContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+  border: 1px solid #ccc;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 1;
+  position: fixed;
+  right: 1.4rem;
+  top: 4.4rem;
+}
+
+
+.popupContent {
+  display: flex;
+  align-items: center;
+}
+
+.checkmark {
+  color: white;
+  font-size: 13px;
+  vertical-align: middle;
+  padding-right: 0.4rem;
+}
+
+.popupText {
+  margin-left: 10px;
+}
+
+.headerText{
+  font-weight: 600;
+  color: #242424;
+}
+.popupSubtext {
+  font-size: smaller;
+  color: #242424;
+  padding-left: 1.4rem;
+  width: 75%;
+
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  font-size: 13px;
+  cursor: pointer;
+  position: absolute;
+  right: 0.8rem;
+}

ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx

@@ -12,7 +12,8 @@ import Chat from '../chat/Chat' // Import the Chat component
 import { AppStateContext } from '../../state/AppProvider'
 import { getUserInfo, getpbi } from '../../api'
 import { User } from '../../types/User'
-
+import TickIcon  from '../../assets/TickIcon.svg'
+import DismissIcon from '../../assets/Dismiss.svg'
 import welcomeIcon from '../../assets/welcomeIcon.png'
 import styles from './Layout.module.css';
 import SpinnerComponent from '../../components/Spinner/Spinner';
@@ -37,7 +38,7 @@ const Layout = () => {
   const [name, setName] = useState<string>('')
 
   const [pbiurl, setPbiUrl] = useState<string>('')
-
+  const [isVisible, setIsVisible] = useState(false);
   useEffect(() => {
     const fetchpbi = async () => {
       try {
@@ -51,6 +52,21 @@ const Layout = () => {
     fetchpbi()
   }, [])
 
+
+  const closePopup = () => {
+    setIsVisible(!isVisible);
+  };
+
+  useEffect(() => {
+    if (isVisible) {
+      const timer = setTimeout(() => {
+        setIsVisible(false);
+      }, 4000); // Popup will disappear after 3 seconds
+
+      return () => clearTimeout(timer); // Cleanup the timer on component unmount
+    }
+  }, [isVisible]);
+
   const handleCardClick = (user: User) => {
     setSelectedUser(user)
     setShowWelcomeCard(false)
@@ -121,6 +137,20 @@ const Layout = () => {
 
   return (
     <div className={styles.layout}>
+       {isVisible && (
+        <div className={styles.popupContainer}>
+          <div className={styles.popupContent}>
+            <div className={styles.popupText}>
+              <div className={styles.headerText}><span className={styles.checkmark}>
+                <img alt="check mark" src={TickIcon} /></span>Chat saved
+                <img alt="close icon" src={DismissIcon} className={styles.closeButton} onClick={closePopup}/>
+              </div>
+              <div className={styles.popupSubtext}><span className={styles.popupMsg}>Your chat history has been saved successfully!</span></div>
+            </div>
+            
+          </div>
+        </div>
+    )}
       <SpinnerComponent
         loading={appStateContext?.state.isLoader != undefined ? appStateContext?.state.isLoader : false}
         label="Please wait.....!"
@@ -184,7 +214,7 @@ const Layout = () => {
               )}
               <Pivot defaultSelectedKey="chat">
                 <PivotItem headerText="Chat" itemKey="chat">
-                  <Chat />
+                  <Chat setIsVisible={setIsVisible}/>
                 </PivotItem>
                 <PivotItem headerText="Client 360 Profile" itemKey="profile">
                   <PowerBIChart chartUrl={calculateChartUrl(selectedUser)} />