Merge pull request #159 from ModusCreateOrg/ADE-200-Adam-fix

[ADE-200] UI fixes

Author: GuidoBR

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/ChatContainer.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import ChatMessage, { ChatMessageData } from './ChatMessage';
 import './ChatContainer.scss';
@@ -23,7 +22,6 @@ const ChatContainer: React.FC<ChatContainerProps> = ({
   testid = 'chat-container',
   className = '',
 }) => {
-  const { t } = useTranslation();
   const chatContainerRef = useRef<HTMLDivElement>(null);
 
   // Auto-scroll to bottom when new messages arrive
@@ -41,11 +39,7 @@ const ChatContainer: React.FC<ChatContainerProps> = ({
       aria-label="Chat messages"
       data-testid={testid}
     >
-      {messages.length === 0 ? (
-        <div className="chat-empty-state" data-testid={`${testid}-empty`}>
-          <p>{t('aiAssistant.emptyState', 'How can I help you today?')}</p>
-        </div>
-      ) : (
+      {messages.length > 0 &&
         messages.map((message) => (
           <ChatMessage
             key={message.id}
@@ -54,8 +48,7 @@ const ChatContainer: React.FC<ChatContainerProps> = ({
             robotIcon={robotIcon}
             testid={`${testid}-message`}
           />
-        ))
-      )}
+        ))}
     </div>
   );
 };

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;

frontend/src/pages/Chat/ChatPage.tsx

@@ -2,6 +2,8 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/rea
 import { useTranslation } from 'react-i18next';
 import { useState, useEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
+import { useHistory } from 'react-router';
+import closeIcon from 'assets/icons/close.svg';
 import ChatContainer from '../../common/components/Chat/ChatContainer';
 import ChatInput from '../../common/components/Chat/ChatInput';
 import { chatService } from '../../common/services/ChatService';
@@ -19,11 +21,17 @@ const ChatPage = (): JSX.Element => {
   const [messages, setMessages] = useState<ChatMessageData[]>([]);
   const location = useLocation();
   const prevPathRef = useRef(location.pathname);
+  const history = useHistory();
 
   const resetChatState = () => {
     setMessages([]);
   };
 
+  // Handle close button
+  const handleClose = () => {
+    history.push('/tabs/home');
+  };
+
   // Handle initial setup and cleanup
   useEffect(() => {
     // Create a new session when the component mounts using an IIFE
@@ -92,6 +100,14 @@ const ChatPage = (): JSX.Element => {
               <span>{t('pages.chat.title', 'AI Assistant')}</span>
             </div>
           </IonTitle>
+          <div slot="end">
+            <button
+              onClick={handleClose}
+              style={{ backgroundColor: 'transparent', marginRight: '2em' }}
+            >
+              <img src={closeIcon} alt="Close" />
+            </button>
+          </div>
         </IonToolbar>
       </IonHeader>
       <IonContent className="chat-page-content">