Enhance AIAssistantModal with avatar support and styling updates

- Added avatar rendering for user and assistant messages in AIAssistantModal.
- Updated styles in AIAssistantModal.scss for improved layout and responsiveness.
- Introduced nullish coalescing operator (`??`) usage guideline in general rules.
- Added new images for AI assistant functionality.
- Updated tests to verify expand/collapse behavior of the modal.

Author: jkestering-modus

.cursor/rules/general.mdc

@@ -123,3 +123,5 @@ AWS architecture: [aws architecture.pdf](mdc:docs/assets/aws architecture.pdf)
 ```
 
 This rule provides clear guidelines on what units to use, how to convert between units, and why it's important for your project. You can add this to your general rules to ensure consistency across the codebase.
+
+Prefer using nullish coalescing operator (`??`) instead of a logical or (`||`), as it is a safer operator.

docs/assets/images/8 - AI_Expanded.png

@@ -7,13 +7,19 @@
   align-items: flex-end;
 
   &.expanded {
-    --height: 90vh;
-    --max-height: 90vh;
+    --height: 85vh;
+    --max-height: 85vh;
+    
+    &::part(content) {
+      margin: 2rem 1rem;
+    }
   }
 
   &::part(content) {
     border-radius: var(--border-radius);
     margin: 0 1rem 5rem 1rem;
+    display: flex;
+    flex-direction: column;
   }
 
   .ai-assistant-header {
@@ -37,6 +43,8 @@
 
   .ai-assistant-content {
     --padding: 0;
+    flex: 1;
+    overflow: hidden;
 
     .chat-container {
       display: flex;
@@ -60,7 +68,8 @@
       .chat-message {
         display: flex;
         flex-direction: column;
-        max-width: 80%;
+        max-width: 90%;
+        margin-bottom: 0.75rem;
 
         .message-content {
           padding: 0.75rem 1rem;
@@ -92,13 +101,45 @@
             border-bottom-left-radius: 0.25rem;
           }
         }
+        
+        // Avatar styling
+        .message-avatar {
+          width: 1.5rem;
+          height: 1.5rem;
+          border-radius: 50%;
+          margin-bottom: 0.25rem;
+          
+          &.user-avatar {
+            align-self: flex-end;
+            margin-right: 0.25rem;
+          }
+          
+          &.assistant-avatar {
+            align-self: flex-start;
+            margin-left: 0.25rem;
+            background-color: var(--ion-color-primary);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            
+            svg, img {
+              width: 1rem;
+              height: 1rem;
+              filter: brightness(0) invert(1);
+            }
+          }
+        }
       }
     }
   }
 
   .ai-assistant-footer {
     padding: 0.5rem 1rem 1rem;
     background: transparent;
+    position: sticky;
+    bottom: 0;
+    width: 100%;
+    z-index: 2;
 
     .input-container {
       display: flex;

docs/assets/images/8 - Chat_AI_Dialogue.png

@@ -11,7 +11,7 @@ import {
   IonFooter,
 } from '@ionic/react';
 import { useState, useRef, useEffect } from 'react';
-import { closeOutline, expandOutline, paperPlaneOutline } from 'ionicons/icons';
+import { closeOutline, expandOutline, contractOutline, paperPlaneOutline, personCircleOutline } from 'ionicons/icons';
 import { useTranslation } from 'react-i18next';
 import iconOnly from '../../../assets/img/icon-only.png';
 import './AIAssistantModal.scss';
@@ -65,6 +65,13 @@ const AIAssistantModal: React.FC<AIAssistantModalProps> = ({
 
   const handleExpand = () => {
     setIsExpanded(!isExpanded);
+    
+    // Ensure scroll position is maintained after expanding/collapsing
+    setTimeout(() => {
+      if (chatContainerRef.current) {
+        chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+      }
+    }, 100);
   };
 
   const handleSendMessage = () => {
@@ -107,6 +114,40 @@ const AIAssistantModal: React.FC<AIAssistantModalProps> = ({
     setInputValue(e.detail.value || '');
   };
 
+  const renderMessageWithAvatar = (message: ChatMessage) => {
+    const isUser = message.sender === 'user';
+
+    return (
+      <div 
+        key={message.id} 
+        className={`chat-message ${isUser ? 'user-message' : 'assistant-message'}`}
+        aria-label={`${isUser ? 'You' : 'AI Assistant'}: ${message.text}`}
+      >
+        {isUser && (
+          <div className="message-avatar user-avatar">
+            <IonIcon icon={personCircleOutline} aria-hidden="true" />
+          </div>
+        )}
+        
+        {!isUser && (
+          <div className="message-avatar assistant-avatar">
+            <img src={iconOnly} alt="AI" aria-hidden="true" />
+          </div>
+        )}
+        
+        <div className="message-content">
+          <p>{message.text}</p>
+        </div>
+        <span className="sr-only">
+          {new Intl.DateTimeFormat('en-US', {
+            hour: 'numeric',
+            minute: 'numeric'
+          }).format(message.timestamp)}
+        </span>
+      </div>
+    );
+  };
+
   return (
     <IonModal 
       isOpen={isOpen}
@@ -128,7 +169,7 @@ const AIAssistantModal: React.FC<AIAssistantModalProps> = ({
               aria-label={isExpanded ? "Collapse chat" : "Expand chat"}
               data-testid={`${testid}-expand-button`}
             >
-              <IonIcon icon={expandOutline} aria-hidden="true" />
+              <IonIcon icon={isExpanded ? contractOutline : expandOutline} aria-hidden="true" />
             </IonButton>
             <IonButton 
               onClick={handleClose}
@@ -154,23 +195,7 @@ const AIAssistantModal: React.FC<AIAssistantModalProps> = ({
               <p>{t('common.aiAssistant.emptyState', 'How can I help you today?')}</p>
             </div>
           ) : (
-            messages.map((message) => (
-              <div 
-                key={message.id} 
-                className={`chat-message ${message.sender === 'user' ? 'user-message' : 'assistant-message'}`}
-                aria-label={`${message.sender === 'user' ? 'You' : 'AI Assistant'}: ${message.text}`}
-              >
-                <div className="message-content">
-                  <p>{message.text}</p>
-                </div>
-                <span className="sr-only">
-                  {new Intl.DateTimeFormat('en-US', {
-                    hour: 'numeric',
-                    minute: 'numeric'
-                  }).format(message.timestamp)}
-                </span>
-              </div>
-            ))
+            messages.map(renderMessageWithAvatar)
           )}
         </div>
       </IonContent>

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

@@ -21,6 +21,15 @@ interface IonInputProps {
   'data-testid'?: string;
 }
 
+// Mock icons
+vi.mock('ionicons/icons', () => ({
+  closeOutline: 'mock-close-icon',
+  expandOutline: 'mock-expand-icon',
+  contractOutline: 'mock-contract-icon',
+  paperPlaneOutline: 'mock-paper-plane-icon',
+  personCircleOutline: 'mock-person-circle-icon'
+}));
+
 // Mock the IonModal implementation
 vi.mock('@ionic/react', async () => {
   const actual = await vi.importActual('@ionic/react');
@@ -45,6 +54,11 @@ vi.mock('@ionic/react', async () => {
         onChange={(e) => onIonInput?.({ detail: { value: e.target.value } })}
         onKeyPress={onKeyPress}
       />
+    ),
+    IonIcon: ({ icon, 'aria-hidden': ariaHidden }: { icon: string; 'aria-hidden'?: boolean }) => (
+      <span data-testid={`icon-${icon}`} aria-hidden={ariaHidden}>
+        {icon}
+      </span>
     )
   };
 });
@@ -101,4 +115,24 @@ describe('AIAssistantModal', () => {
 
     expect(mockSetIsOpen).toHaveBeenCalledWith(false);
   });
+
+  it('toggles between expanded and collapsed state when expand button is clicked', () => {
+    customRender(<AIAssistantModal {...defaultProps} />);
+    
+    // Initially should show expand icon
+    expect(screen.getByTestId('icon-mock-expand-icon')).toBeDefined();
+    
+    // Click expand button
+    const expandButton = screen.getByTestId('test-ai-assistant-expand-button');
+    fireEvent.click(expandButton);
+    
+    // Now should show contract icon
+    expect(screen.getByTestId('icon-mock-contract-icon')).toBeDefined();
+    
+    // Click again to collapse
+    fireEvent.click(expandButton);
+    
+    // Should show expand icon again
+    expect(screen.getByTestId('icon-mock-expand-icon')).toBeDefined();
+  });
 });