feat: add close button to ChatPage for navigation

Author: adamrefaey

frontend/src/common/components/Chat/ChatContainer.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import ChatMessage, { ChatMessageData } from './ChatMessage';
 import './ChatContainer.scss';
@@ -23,7 +22,6 @@ const ChatContainer: React.FC<ChatContainerProps> = ({
   testid = 'chat-container',
   className = '',
 }) => {
-  const { t } = useTranslation();
   const chatContainerRef = useRef<HTMLDivElement>(null);
 
   // Auto-scroll to bottom when new messages arrive
@@ -41,11 +39,7 @@ const ChatContainer: React.FC<ChatContainerProps> = ({
       aria-label="Chat messages"
       data-testid={testid}
     >
-      {messages.length === 0 ? (
-        <div className="chat-empty-state" data-testid={`${testid}-empty`}>
-          <p>{t('aiAssistant.emptyState', 'How can I help you today?')}</p>
-        </div>
-      ) : (
+      {messages.length > 0 &&
         messages.map((message) => (
           <ChatMessage
             key={message.id}
@@ -54,8 +48,7 @@ const ChatContainer: React.FC<ChatContainerProps> = ({
             robotIcon={robotIcon}
             testid={`${testid}-message`}
           />
-        ))
-      )}
+        ))}
     </div>
   );
 };

frontend/src/pages/Chat/ChatPage.tsx

@@ -2,6 +2,8 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/rea
 import { useTranslation } from 'react-i18next';
 import { useState, useEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
+import { useHistory } from 'react-router';
+import closeIcon from 'assets/icons/close.svg';
 import ChatContainer from '../../common/components/Chat/ChatContainer';
 import ChatInput from '../../common/components/Chat/ChatInput';
 import { chatService } from '../../common/services/ChatService';
@@ -19,11 +21,17 @@ const ChatPage = (): JSX.Element => {
   const [messages, setMessages] = useState<ChatMessageData[]>([]);
   const location = useLocation();
   const prevPathRef = useRef(location.pathname);
+  const history = useHistory();
 
   const resetChatState = () => {
     setMessages([]);
   };
 
+  // Handle close button
+  const handleClose = () => {
+    history.push('/tabs/home');
+  };
+
   // Handle initial setup and cleanup
   useEffect(() => {
     // Create a new session when the component mounts using an IIFE
@@ -92,6 +100,14 @@ const ChatPage = (): JSX.Element => {
               <span>{t('pages.chat.title', 'AI Assistant')}</span>
             </div>
           </IonTitle>
+          <div slot="end">
+            <button
+              onClick={handleClose}
+              style={{ backgroundColor: 'transparent', marginRight: '2em' }}
+            >
+              <img src={closeIcon} alt="Close" />
+            </button>
+          </div>
         </IonToolbar>
       </IonHeader>
       <IonContent className="chat-page-content">