Phase 1 - Add AI Chat functionality and assets

- Introduced new AI chat feature with components: AIChat, AIChatContainer, ChatHeader, ChatInput, and ChatMessage.
- Added AIChatBanner for easy access from the HomePage.
- Included multiple images for AI chat interface.
- Updated routing to include a dedicated ChatPage.
- Enhanced HomePage with AI chat integration for improved user experience.

Author: jkestering-modus

docs/assets/images/8 - AI_Expanded.png

@@ -11,6 +11,7 @@ import UserEditPage from 'pages/Users/components/UserEdit/UserEditPage';
 import AccountPage from 'pages/Account/AccountPage';
 import ProfilePage from 'pages/Account/components/Profile/ProfilePage';
 import DiagnosticsPage from 'pages/Account/components/Diagnostics/DiagnosticsPage';
+import ChatPage from 'pages/Chat/ChatPage';
 
 /**
  * The `TabNavigation` component provides a router outlet for all of the
@@ -56,6 +57,9 @@ const TabNavigation = (): JSX.Element => {
           <Route exact path="/tabs/account/diagnostics">
             <DiagnosticsPage />
           </Route>
+          <Route exact path="/tabs/chat">
+            <ChatPage />
+          </Route>
           <Route exact path="/">
             <Redirect to="/tabs/home" />
           </Route>

docs/assets/images/8 - Chat_AI_Dialogue.png

@@ -1,8 +1,11 @@
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
+import AIChatContainer from './components/AIChatContainer/AIChatContainer';
 
 /**
  * The `ChatPage` component displays the chat interface.
+ * This page can be accessed from the tab navigation and serves as the full
+ * page version of the AI chat functionality.
  * @returns JSX
  */
 const ChatPage = (): JSX.Element => {
@@ -20,6 +23,12 @@ const ChatPage = (): JSX.Element => {
           <h1>{t('pages.chat.subtitle')}</h1>
           <p>{t('pages.chat.description')}</p>
         </div>
+        
+        {/* 
+          We're using the same AIChatContainer component here
+          This demonstrates how we can reuse the component across different views
+        */}
+        <AIChatContainer />
       </IonContent>
     </IonPage>
   );

docs/assets/images/8 - Chat_AI_placeholder.png

@@ -0,0 +1,86 @@
+.ai-chat {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+  border-radius: 1.25rem 1.25rem 0 0;
+  box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: height 0.3s ease-in-out;
+  position: relative;
+  
+  &--expanded {
+    border-radius: 1.25rem;
+    height: 90vh;
+    max-height: 40rem;
+  }
+  
+  &__content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+  }
+  
+  &__messages {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding-bottom: 1rem;
+  }
+  
+  &__empty-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    color: #666;
+    padding: 2rem;
+    
+    p {
+      font-size: 1rem;
+      max-width: 20rem;
+      margin: 0 auto;
+    }
+  }
+  
+  &__loading {
+    display: flex;
+    align-items: center;
+    margin: 0.5rem 0;
+    padding-left: 1rem;
+  }
+  
+  &__loading-dots {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    
+    span {
+      width: 0.5rem;
+      height: 0.5rem;
+      background-color: #4765ff;
+      border-radius: 50%;
+      display: inline-block;
+      animation: bounce 1.4s infinite ease-in-out both;
+      
+      &:nth-child(1) {
+        animation-delay: -0.32s;
+      }
+      
+      &:nth-child(2) {
+        animation-delay: -0.16s;
+      }
+    }
+  }
+}
+
+@keyframes bounce {
+  0%, 80%, 100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}