feat: enhance AIAssistantModal with a modal body wrapper and adjust content overflow

Author: adamrefaey

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

@@ -1,9 +1,17 @@
+.ai-assistant-modal-body {
+  border: 1px solid #fbd3f8;
+  border-radius: 1rem;
+  width: 100%;
+  height: 100%;
+}
+
 .ai-assistant-modal {
   --height: auto;
   --max-height: 70vh;
   --border-radius: 1rem;
-  --box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.1);
+  --box-shadow: 0 -0.25rem 1rem rgb(0 0 0 / 10%);
   --backdrop-opacity: 0.3;
+
   align-items: flex-end;
   transition:
     --height 0.3s ease-out,
@@ -14,13 +22,13 @@
     --max-height: 85vh;
 
     &::part(content) {
-      margin: 2rem 1rem 5rem 1rem;
+      margin: 2rem 1rem 5rem;
     }
   }
 
   &::part(content) {
     border-radius: var(--border-radius);
-    margin: 0 1rem 5rem 1rem;
+    margin: 0 1rem 5rem;
     display: flex;
     flex-direction: column;
     transition: margin 0.3s ease-out;
@@ -62,8 +70,10 @@
 
   .ai-assistant-content {
     --padding: 0;
+
     flex: 1;
-    overflow: hidden;
+    overflow: scroll;
+    height: 80%;
   }
 
   .ai-assistant-footer {

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

@@ -90,42 +90,44 @@ const AIAssistantModal: React.FC<AIAssistantModalProps> = ({
       data-testid={testid}
       aria-labelledby="ai-assistant-title"
     >
-      <IonHeader className="ai-assistant-header">
-        <IonToolbar className="ai-assistant-toolbar">
-          <div className="ai-assistant-title-container">
-            <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">
-            <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>
+      <div className="ai-assistant-modal-body">
+        <IonHeader className="ai-assistant-header">
+          <IonToolbar className="ai-assistant-toolbar">
+            <div className="ai-assistant-title-container">
+              <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">
+              <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>
+        <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>
+        <IonFooter className="ai-assistant-footer">
+          <ChatInput onSendMessage={handleSendMessage} testid={`${testid}-input`} />
+        </IonFooter>
+      </div>
     </IonModal>
   );
 };

frontend/src/common/components/Chat/ChatInput.scss

@@ -16,14 +16,17 @@
       flex: 1;
       width: 100%;
       background-color: var(--ion-color-light);
+
       --padding-start: 1rem;
       --padding-end: 1rem;
       --padding-top: 0.75rem;
       --padding-bottom: 0.75rem;
       --placeholder-color: var(--ion-color-medium);
       --placeholder-opacity: 0.8;
+
       border-radius: 1.5rem;
       margin-right: 3.5rem;
+      border: 1px solid #ccc;
     }
 
     .send-fab {
@@ -32,6 +35,7 @@
       .send-button {
         --background: var(--ion-color-primary);
         --ion-color-base: var(--ion-color-primary);
+
         width: 3rem;
         height: 3rem;
         margin: 0;