Merge pull request #29 from ModusCreateOrg/ADE-30-manual-steps

[ADE-30] - AI Health Assistant on Home Screen

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

@@ -0,0 +1,98 @@
+.ai-assistant-modal {
+  --height: auto;
+  --max-height: 70vh;
+  --border-radius: 1rem;
+  --box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.1);
+  --backdrop-opacity: 0.3;
+  align-items: flex-end;
+  transition: --height 0.3s ease-out, --max-height 0.3s ease-out;
+  
+  &.expanded {
+    --height: 85vh;
+    --max-height: 85vh;
+    
+    &::part(content) {
+      margin: 2rem 1rem 5rem 1rem;
+    }
+  }
+  
+  &::part(content) {
+    border-radius: var(--border-radius);
+    margin: 0 1rem 5rem 1rem;
+    display: flex;
+    flex-direction: column;
+    transition: margin 0.3s ease-out;
+  }
+  
+  .ai-assistant-header {
+    ion-toolbar {
+      --padding-top: 0.5rem;
+      --padding-bottom: 0.5rem;
+    }
+  }
+  
+  .ai-assistant-toolbar {
+    --background: transparent;
+    --border-color: transparent;
+    --border-width: 0;
+    --padding-start: 1rem;
+  }
+  
+  .ai-assistant-title-container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    text-align: left;
+  }
+  
+  .ai-assistant-title-icon {
+    height: 2.5rem;
+    width: 2.5rem;
+    font-size: 2rem;
+    margin-right: 0.75rem;
+    color: var(--ion-color-primary);
+  }
+  
+  .ai-assistant-title-text {
+    font-weight: 600;
+    font-size: 1.125rem;
+  }
+  
+  .ai-assistant-content {
+    --padding: 0;
+    flex: 1;
+    overflow: hidden;
+  }
+  
+  .ai-assistant-footer {
+    background: transparent;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.5rem 0;
+  }
+}
+
+// Screen reader only class
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+// Additional animation for modal entrance
+ion-modal.ai-assistant-modal {
+  &.show-modal {
+    transition: all 0.3s ease-in-out;
+  }
+  
+  &::part(content) {
+    transition: transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1);
+  }
+} 

docs/assets/images/8 - Chat_AI_Dialogue.png

@@ -0,0 +1,123 @@
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonModal,
+  IonToolbar,
+  IonFooter,
+} from '@ionic/react';
+import { useState, useRef, useEffect } from 'react';
+import { closeOutline, expandOutline, contractOutline } from 'ionicons/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faRobot } from '@fortawesome/free-solid-svg-icons';
+import ChatContainer from '../Chat/ChatContainer';
+import ChatInput from '../Chat/ChatInput';
+import { chatService } from '../../services/ChatService';
+import { ChatMessageData } from '../Chat/ChatMessage';
+import './AIAssistantModal.scss';
+
+interface AIAssistantModalProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  testid?: string;
+}
+
+const AIAssistantModal: React.FC<AIAssistantModalProps> = ({ 
+  isOpen, 
+  setIsOpen,
+  testid = 'ai-assistant-modal'
+}) => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+  const [messages, setMessages] = useState<ChatMessageData[]>([]);
+  const modalRef = useRef<HTMLIonModalElement>(null);
+  
+  // Reset expanded state whenever modal opens
+  useEffect(() => {
+    if (isOpen) {
+      setIsExpanded(false);
+    }
+  }, [isOpen]);
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const handleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const handleSendMessage = async (text: string) => {
+    // Always expand the modal on any message
+    if (!isExpanded) {
+      setIsExpanded(true);
+    }
+    
+    const userMessage = chatService.createUserMessage(text);
+    setMessages(prevMessages => [...prevMessages, userMessage]);
+
+    try {
+      // Get AI response
+      const responseText = await chatService.sendMessage(text);
+      const assistantMessage = chatService.createAssistantMessage(responseText);
+      setMessages(prevMessages => [...prevMessages, assistantMessage]);
+    } catch (error) {
+      console.error('Error getting AI response:', error);
+      // You could add error handling here, like showing an error message
+    }
+  };
+
+  return (
+    <IonModal 
+      isOpen={isOpen}
+      onDidDismiss={() => setIsOpen(false)}
+      ref={modalRef}
+      className={`ai-assistant-modal ${isExpanded ? 'expanded' : ''}`}
+      data-testid={testid}
+      aria-labelledby="ai-assistant-title"
+    >
+      <IonHeader className="ai-assistant-header">
+        <IonToolbar className="ai-assistant-toolbar">
+          <div className="ai-assistant-title-container">
+            <FontAwesomeIcon icon={faRobot} className="ai-assistant-title-icon" />
+            <span className="ai-assistant-title-text">AI Assistant</span>
+          </div>
+          <IonButtons slot="end">
+            <IonButton 
+              onClick={handleExpand}
+              aria-label={isExpanded ? "Collapse chat" : "Expand chat"}
+              data-testid={`${testid}-expand-button`}
+            >
+              <IonIcon icon={isExpanded ? contractOutline : expandOutline} aria-hidden="true" />
+            </IonButton>
+            <IonButton 
+              onClick={handleClose}
+              aria-label="Close AI Assistant"
+              data-testid={`${testid}-close-button`}
+            >
+              <IonIcon icon={closeOutline} aria-hidden="true" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      
+      <IonContent className="ai-assistant-content">
+        <ChatContainer
+          messages={messages}
+          robotIcon={faRobot}
+          testid={`${testid}-chat-container`}
+        />
+      </IonContent>
+
+      <IonFooter className="ai-assistant-footer">
+        <ChatInput
+          onSendMessage={handleSendMessage}
+          testid={`${testid}-input`}
+        />
+      </IonFooter>
+    </IonModal>
+  );
+};
+
+export default AIAssistantModal;