Merge pull request #59 from microsoft/main

Merge: Merging current branch from main branch

Author: Prasanjeet-Microsoft

ClientAdvisor/App/frontend/src/assets/Dismiss.svg

@@ -26,7 +26,9 @@ import ChatHistoryList from './ChatHistoryList'
 
 import styles from './ChatHistoryPanel.module.css'
 
-interface ChatHistoryPanelProps {}
+interface ChatHistoryPanelProps {
+  isLoading: boolean
+}
 
 export enum ChatHistoryPanelTabs {
   History = 'History'
@@ -44,6 +46,7 @@ const commandBarStyle: ICommandBarStyles = {
 const commandBarButtonStyle: Partial<IStackStyles> = { root: { height: '50px' } }
 
 export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
+  const { isLoading} = _props
   const appStateContext = useContext(AppStateContext)
   const [showContextualMenu, setShowContextualMenu] = React.useState(false)
   const [hideClearAllDialog, { toggle: toggleClearAllDialog }] = useBoolean(true)
@@ -67,7 +70,7 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
   }
 
   const menuItems: IContextualMenuItem[] = [
-    { key: 'clearAll', text: 'Clear all chat history',disabled: !hasChatHistory, iconProps: { iconName: 'Delete' }}
+    { key: 'clearAll', text: 'Clear all chat history',disabled: (!hasChatHistory || isLoading), iconProps: { iconName: 'Delete' }}
   ]
 
   const handleHistoryClick = () => {

ClientAdvisor/App/frontend/src/assets/TickIcon.svg

@@ -377,3 +377,58 @@ a {
     max-width: 100%;
   }
 }
+
+
+ /* 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/components/ChatHistory/ChatHistoryPanel.tsx

@@ -11,6 +11,8 @@ 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 {
@@ -57,6 +59,7 @@ 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,
@@ -97,6 +100,19 @@ 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)
@@ -584,6 +600,7 @@ const Chat = () => {
   }
 
   const newChat = () => {
+    setIsVisible(true);
     setProcessMessages(messageStatus.Processing)
     setMessages([])
     setIsCitationPanelOpen(false)
@@ -716,6 +733,20 @@ 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
@@ -938,7 +969,7 @@ const Chat = () => {
             </Stack.Item>
           )}
           {appStateContext?.state.isChatHistoryOpen &&
-            appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && <ChatHistoryPanel />}
+            appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && <ChatHistoryPanel isLoading={isLoading} />}
         </Stack>
       )}
     </div>