Merge pull request #7 from Roopan-Microsoft/PSL-BUG-8413

fix: [Internal-UX] | [Accessibility] | Bug - BYOc - Chat Conversations with chat history

Author: Roopan-Microsoft

ClientAdvisor/App/frontend/src/components/Cards/Cards.tsx

@@ -17,6 +17,13 @@ const Cards: React.FC<CardsProps> = ({ onCardClick }) => {
   const [selectedClientId, setSelectedClientId] = useState<string | null>(null);
   const [loadingUsers, setLoadingUsers] = useState<boolean>(true);
 
+
+  useEffect(() => {
+    if(selectedClientId != null && appStateContext?.state.clientId == ''){
+      setSelectedClientId('')
+    }
+  },[appStateContext?.state.clientId]);
+  
   useEffect(() => {
     const fetchUsers = async () => {
       try {

ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css

@@ -77,3 +77,11 @@
     width: 100%;
   }
 }
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .container{
+      border: 2px solid WindowText;
+      background-color: Window;
+      color: WindowText;
+  }
+}

ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx

@@ -111,7 +111,7 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
         <StackItem>
           <Text
             role="heading"
-            aria-level={2}
+            aria-level={3}
             style={{
               alignSelf: 'center',
               fontWeight: '600',

ClientAdvisor/App/frontend/src/components/common/Button.module.css

@@ -25,6 +25,7 @@
 .historyButtonRoot {
   width: 180px;
   border: 1px solid #d1d1d1;
+  border-radius: 5px;
 }
 
 .historyButtonRoot:hover {

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

@@ -35,7 +35,7 @@ html, body {
     0px 0px 2px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   overflow-y: auto;
-  max-height: calc(100vh - 300px);
+  max-height: calc(100vh - 240px);
   height: 100vh;
   width: 100%;
 }

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

@@ -751,7 +751,7 @@ const Chat = (props: any) => {
               <Stack className={styles.chatEmptyState}>
                 <img src={ui?.chat_logo ? ui.chat_logo : TeamAvatar} className={styles.chatIcon} aria-hidden="true" />
                 <h1 className={styles.chatEmptyStateTitle}>{ui?.chat_title}</h1>
-                <h2 className={styles.chatEmptyStateSubtitle}>{ui?.chat_description}</h2>
+                <h3 className={styles.chatEmptyStateSubtitle}>{ui?.chat_description}</h3>
               </Stack>
             ) : (
               <div id="chatMessagesContainer" className={styles.chatMessageStream} style={{ marginBottom: isLoading ? '40px' : '0px' }} role="log">

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

@@ -52,6 +52,11 @@ const Layout = () => {
     fetchpbi()
   }, [])
 
+  const resetClientId= ()=>{
+    appStateContext?.dispatch({ type: 'RESET_CLIENT_ID' });
+    setSelectedUser(null);
+    setShowWelcomeCard(true);
+  }
 
   const closePopup = () => {
     setIsVisible(!isVisible);
@@ -157,7 +162,7 @@ const Layout = () => {
       />
       <div className={styles.cardsColumn}>
         <div className={styles.selectClientHeading}>
-          <h3 className={styles.meeting}>Upcoming meetings</h3>
+          <h2 className={styles.meeting}>Upcoming meetings</h2>
         </div>
 
         <Cards onCardClick={handleCardClick} />
@@ -167,9 +172,9 @@ const Layout = () => {
           <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
             <Stack horizontal verticalAlign="center">
               <img src={ui?.logo ? ui.logo : TeamAvatar} className={styles.headerIcon} aria-hidden="true" alt="" />
-              <Link to="/" className={styles.headerTitleContainer}>
-                <h1 className={styles.headerTitle}>{ui?.title}</h1>
-              </Link>
+              <div className={styles.headerTitleContainer} onClick={resetClientId} onKeyDown={e => (e.key === 'Enter' || e.key === ' ' ? resetClientId() : null)} tabIndex={-1}>
+                <h2 className={styles.headerTitle} tabIndex={0}>{ui?.title}</h2>
+              </div>
             </Stack>
             <Stack horizontal tokens={{ childrenGap: 4 }} className={styles.shareButtonContainer}>
               {appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && (

ClientAdvisor/App/frontend/src/state/AppProvider.tsx

@@ -51,7 +51,8 @@ export type Action =
   | { type: 'GET_FEEDBACK_STATE'; payload: string }
   | { type: 'UPDATE_CLIENT_ID'; payload: string }
   | { type: 'SET_IS_REQUEST_INITIATED'; payload: boolean }
-  | { type: 'TOGGLE_LOADER' };
+  | { type: 'TOGGLE_LOADER' }
+  | { type: 'RESET_CLIENT_ID'};
 
 const initialState: AppState = {
   isChatHistoryOpen: false,

ClientAdvisor/App/frontend/src/state/AppReducer.tsx

@@ -80,6 +80,8 @@ export const appStateReducer = (state: AppState, action: Action): AppState => {
       return {...state, isRequestInitiated : action.payload}
     case 'TOGGLE_LOADER':
       return {...state, isLoader : !state.isLoader}
+    case 'RESET_CLIENT_ID':
+      return {...state, clientId: ''}
     default:
       return state
   }