Add AI icon and update styles in AIAssistant and ChatPage

- Introduced new SVG icon for AI Assistant.
- Replaced PNG icon with SVG in AIAssistantModal and ChatPage.
- Adjusted icon size in AIAssistantModal.scss and ChatPage.scss for better alignment.
- Centered title text in ChatPage.scss for improved layout.

Author: jkestering-modus

frontend/src/assets/img/ai-icon.svg

@@ -46,8 +46,7 @@
   }
 
   .ai-assistant-title-icon {
-    height: 1.5rem;
-    margin-right: 0.5rem;
+    height: 2.5rem;
   }
 
   .ai-assistant-title-text {

frontend/src/common/components/AIAssistant/AIAssistantModal.scss

@@ -10,7 +10,7 @@ import {
 } from '@ionic/react';
 import { useState, useRef } from 'react';
 import { closeOutline, expandOutline, contractOutline } from 'ionicons/icons';
-import iconOnly from '../../../assets/img/icon-only.png';
+import aiIcon from '../../../assets/img/ai-icon.svg';
 import ChatContainer from '../Chat/ChatContainer';
 import ChatInput from '../Chat/ChatInput';
 import { chatService } from '../../services/ChatService';
@@ -73,7 +73,7 @@ const AIAssistantModal: React.FC<AIAssistantModalProps> = ({
       <IonHeader className="ai-assistant-header">
         <IonToolbar className="ai-assistant-toolbar">
           <div className="ai-assistant-title-container">
-            <img src={iconOnly} alt="AI Assistant Icon" className="ai-assistant-title-icon" />
+            <img src={aiIcon} alt="AI Assistant Icon" className="ai-assistant-title-icon" />
             <span className="ai-assistant-title-text">AI Assistant</span>
           </div>
           <IonButtons slot="end">
@@ -98,7 +98,7 @@ const AIAssistantModal: React.FC<AIAssistantModalProps> = ({
       <IonContent className="ai-assistant-content">
         <ChatContainer
           messages={messages}
-          aiIconSrc={iconOnly}
+          aiIconSrc={aiIcon}
           testid={`${testid}-chat-container`}
         />
       </IonContent>

frontend/src/common/components/AIAssistant/AIAssistantModal.tsx

@@ -9,14 +9,19 @@
 .chat-page-title {
   display: flex;
   align-items: center;
-  text-align: left;
-  justify-content: flex-start;
+  text-align: center;
+  justify-content: center;
   padding-left: 0;
   margin-left: 1rem;
 
   .ai-assistant-title-icon {
-    height: 1.5rem;
-    margin-right: 0.5rem;
+    height: 2.5rem;
+  }
+  
+  .title-container {
+    display: flex;
+    align-items: center;
+    justify-content: left;
   }
 }
 

frontend/src/pages/Chat/ChatPage.scss

@@ -5,7 +5,7 @@ import ChatContainer from '../../common/components/Chat/ChatContainer';
 import ChatInput from '../../common/components/Chat/ChatInput';
 import { chatService } from '../../common/services/ChatService';
 import { ChatMessageData } from '../../common/components/Chat/ChatMessage';
-import iconOnly from '../../assets/img/icon-only.png';
+import aiIcon from '../../assets/img/ai-icon.svg';
 import './ChatPage.scss';
 
 /**
@@ -36,15 +36,17 @@ const ChatPage = (): JSX.Element => {
       <IonHeader>
         <IonToolbar className="chat-page-toolbar">
           <IonTitle className="chat-page-title">
-            <img src={iconOnly} alt="AI Assistant Icon" className="ai-assistant-title-icon" />
-            {t('pages.chat.title', 'AI Assistant')}
+            <div className="title-container">
+              <img src={aiIcon} alt="AI Assistant Icon" className="ai-assistant-title-icon" />
+              <span>{t('pages.chat.title', 'AI Assistant')}</span>
+            </div>
           </IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent className="chat-page-content">
         <ChatContainer
           messages={messages}
-          aiIconSrc={iconOnly}
+          aiIconSrc={aiIcon}
           testid="chat-page-container"
           className="chat-page-container"
         />