Skip to content

[ADE-200] UI fixes #159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GuidoBR merged 2 commits into from
May 6, 2025
Merged

[ADE-200] UI fixes #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d5c824b
feat: add close button to ChatPage for navigation
adamrefaey May 6, 2025
da8c72a
feat: enhance AIAssistantModal with a modal body wrapper and adjust c…
adamrefaey May 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions frontend/src/common/components/AIAssistant/AIAssistantModal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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;
Expand Down Expand Up @@ -62,8 +70,10 @@

.ai-assistant-content {
--padding: 0;

flex: 1;
overflow: hidden;
overflow: scroll;
height: 80%;
}

.ai-assistant-footer {
Expand Down
70 changes: 36 additions & 34 deletions frontend/src/common/components/AIAssistant/AIAssistantModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
Expand Down
11 changes: 2 additions & 9 deletions frontend/src/common/components/Chat/ChatContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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
Expand All @@ -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}
Expand All @@ -54,8 +48,7 @@ const ChatContainer: React.FC<ChatContainerProps> = ({
robotIcon={robotIcon}
testid={`${testid}-message`}
/>
))
)}
))}
</div>
);
};
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/common/components/Chat/ChatInput.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -32,6 +35,7 @@
.send-button {
--background: var(--ion-color-primary);
--ion-color-base: var(--ion-color-primary);

width: 3rem;
height: 3rem;
margin: 0;
Expand Down
16 changes: 16 additions & 0 deletions frontend/src/pages/Chat/ChatPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand Down Expand Up @@ -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">
Expand Down