Phase 3 - Add AI Chat integration across the app

- Introduced `AIChatProvider` to manage chat visibility and state.
- Updated `App.tsx` to wrap the app in `AIChatProvider`.
- Modified `TabNavigation.tsx` to open chat on tab click.
- Enhanced `ChatPage.tsx` to automatically open chat on navigation.
- Updated `AIChatBanner` to trigger chat opening.
- Refactored `AIChatContainer` to accept visibility and close handler as props.
- Improved `HomePage.tsx` with AI chat access and updated UI elements.

Author: jkestering-modus

frontend/src/App.tsx

@@ -13,6 +13,7 @@ import AuthProvider from 'common/providers/AuthProvider';
 import AxiosProvider from 'common/providers/AxiosProvider';
 import ToastProvider from 'common/providers/ToastProvider';
 import ScrollProvider from 'common/providers/ScrollProvider';
+import { AIChatProvider } from 'common/providers/AIChatProvider';
 import Toasts from 'common/components/Toast/Toasts';
 import AppRouter from 'common/components/Router/AppRouter';
 
@@ -58,9 +59,11 @@ const App = (): JSX.Element => {
               <AxiosProvider>
                 <ToastProvider>
                   <ScrollProvider>
-                    <AppRouter />
-                    <Toasts />
-                    <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
+                    <AIChatProvider>
+                      <AppRouter />
+                      <Toasts />
+                      <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
+                    </AIChatProvider>
                   </ScrollProvider>
                 </ToastProvider>
               </AxiosProvider>

frontend/src/common/components/Router/TabNavigation.tsx

@@ -1,5 +1,6 @@
 import { IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
 import { Redirect, Route } from 'react-router';
+import { useAIChat } from 'common/providers/AIChatProvider';
 
 import './TabNavigation.scss';
 import AppMenu from '../Menu/AppMenu';
@@ -29,6 +30,8 @@ import ChatPage from 'pages/Chat/ChatPage';
  * @see {@link AppMenu}
  */
 const TabNavigation = (): JSX.Element => {
+  const { openChat } = useAIChat();
+  
   return (
     <>
       <AppMenu />
@@ -93,7 +96,14 @@ const TabNavigation = (): JSX.Element => {
               />
             </div>
           </IonTabButton>
-          <IonTabButton className="ls-tab-navigation__bar-button" tab="chat" href="/tabs/chat">
+          <IonTabButton 
+            className="ls-tab-navigation__bar-button" 
+            tab="chat" 
+            onClick={(e) => {
+              e.preventDefault();
+              openChat();
+            }}
+          >
             <Icon
               className="ls-tab-navigation__bar-button-icon"
               icon="comment"

frontend/src/common/providers/AIChatProvider.tsx

@@ -0,0 +1,49 @@
+import React, { createContext, useState, useContext, ReactNode } from 'react';
+import AIChatContainer from 'pages/Chat/components/AIChatContainer/AIChatContainer';
+
+// Context to manage the visibility of the AI Chat globally
+interface AIChatContextType {
+  openChat: () => void;
+  closeChat: () => void;
+  isVisible: boolean;
+}
+
+const AIChatContext = createContext<AIChatContextType | undefined>(undefined);
+
+// Custom hook for components to access the AI Chat context
+export const useAIChat = () => {
+  const context = useContext(AIChatContext);
+  if (!context) {
+    throw new Error('useAIChat must be used within an AIChatProvider');
+  }
+  return context;
+};
+
+interface AIChatProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Provider component that makes AI Chat available throughout the app
+ */
+export const AIChatProvider: React.FC<AIChatProviderProps> = ({ children }) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const openChat = () => {
+    setIsVisible(true);
+  };
+
+  const closeChat = () => {
+    setIsVisible(false);
+  };
+
+  return (
+    <AIChatContext.Provider value={{ openChat, closeChat, isVisible }}>
+      {children}
+      <AIChatContainer 
+        isVisible={isVisible} 
+        onClose={closeChat} 
+      />
+    </AIChatContext.Provider>
+  );
+}; 

frontend/src/pages/Chat/ChatPage.tsx

@@ -1,6 +1,7 @@
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
-import AIChatContainer from './components/AIChatContainer/AIChatContainer';
+import { useAIChat } from 'common/providers/AIChatProvider';
+import { useEffect } from 'react';
 
 /**
  * The `ChatPage` component displays the chat interface.
@@ -10,6 +11,12 @@ import AIChatContainer from './components/AIChatContainer/AIChatContainer';
  */
 const ChatPage = (): JSX.Element => {
   const { t } = useTranslation();
+  const { openChat } = useAIChat();
+
+  // Automatically open the chat when navigating to this page
+  useEffect(() => {
+    openChat();
+  }, [openChat]);
 
   return (
     <IonPage>
@@ -22,13 +29,14 @@ const ChatPage = (): JSX.Element => {
         <div className="ion-padding">
           <h1>{t('pages.chat.subtitle')}</h1>
           <p>{t('pages.chat.description')}</p>
+          
+          <IonButton 
+            expand="block" 
+            onClick={openChat}
+          >
+            {t('pages.chat.openButton')}
+          </IonButton>
         </div>
-        
-        {/* 
-          We're using the same AIChatContainer component here
-          This demonstrates how we can reuse the component across different views
-        */}
-        <AIChatContainer />
       </IonContent>
     </IonPage>
   );

frontend/src/pages/Chat/components/AIChatBanner/AIChatBanner.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import './AIChatBanner.scss';
 
 interface AIChatBannerProps {
-  onOpenChat: () => void;
+  onClick: () => void;
 }
 
 /**
  * AIChatBanner component displays a banner on the home screen for accessing the AI chat
  */
-const AIChatBanner: React.FC<AIChatBannerProps> = ({ onOpenChat }) => {
+const AIChatBanner: React.FC<AIChatBannerProps> = ({ onClick }) => {
   return (
-    <div className="ai-chat-banner" onClick={onOpenChat}>
+    <div className="ai-chat-banner" onClick={onClick}>
       <div className="ai-chat-banner__content">
         <div className="ai-chat-banner__icon">
           <span className="ai-chat-banner__icon-symbol">✨</span>

frontend/src/pages/Chat/components/AIChatContainer/AIChatContainer.tsx

@@ -3,16 +3,20 @@ import AIChat from '../AIChat/AIChat';
 import { ChatProvider } from '../../context/ChatContext';
 import './AIChatContainer.scss';
 
+interface AIChatContainerProps {
+  isVisible: boolean;
+  onClose: () => void;
+}
+
 /**
  * AIChatContainer manages the AI chat modal state and handles outside clicks
  */
-const AIChatContainer: React.FC = () => {
-  const [isVisible, setIsVisible] = useState(false);
+const AIChatContainer: React.FC<AIChatContainerProps> = ({ isVisible, onClose }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
   const handleClose = () => {
-    setIsVisible(false);
+    onClose();
     // Reset to collapsed state when closing
     setIsExpanded(false);
   };
@@ -21,10 +25,6 @@ const AIChatContainer: React.FC = () => {
     setIsExpanded(prev => !prev);
   };
 
-  const handleOpen = () => {
-    setIsVisible(true);
-  };
-  
   const handleClickOutside = (event: MouseEvent) => {
     if (
       containerRef.current && 
@@ -42,19 +42,15 @@ const AIChatContainer: React.FC = () => {
     };
   }, [isVisible]);
 
+  // Reset expanded state when visibility changes
+  useEffect(() => {
+    if (!isVisible) {
+      setIsExpanded(false);
+    }
+  }, [isVisible]);
+  
   return (
     <ChatProvider>
-      {/* AI Chat toggle button for bottom nav */}
-      <div className="ai-chat-container__toggle">
-        <button 
-          className="ai-chat-container__toggle-button"
-          onClick={handleOpen}
-          aria-label="Open AI Chat"
-        >
-          AI
-        </button>
-      </div>
-      
       {/* AI Chat modal */}
       {isVisible && (
         <div className="ai-chat-container" ref={containerRef}>