+
+
+ {messages.length === 0 ? (
+
+ )
+}));
+
+vi.mock('../../../components/Chat/ChatInput', () => ({
+ default: ({ onSendMessage, testid }: { onSendMessage: (text: string) => void; testid: string }) => (
+ Empty State
+ ) : (
+ messages.map((message) => (
+
+ {message.text}
+
+ ))
+ )}
+
+ ) => {}}
+ />
+
+
+ )
+}));
+
+// Mock the IonModal implementation
+vi.mock('@ionic/react', async () => {
+ const actual = await vi.importActual('@ionic/react');
+
+ // Create mock implementations for Ionic components
+ const mockIonApp = ({ children }: { children: React.ReactNode }) => (
+ {children}
+ );
+
+ return {
+ ...actual,
+ IonApp: mockIonApp,
+ IonModal: ({ isOpen, children, className, 'data-testid': testId, onDidDismiss }: IonModalProps) => (
+ isOpen ? (
+
+
+ {children}
+
+ ) : null
+ ),
+ IonIcon: ({ icon, 'aria-hidden': ariaHidden }: { icon: string; 'aria-hidden'?: boolean }) => (
+
+ {icon}
+
+ ),
+ // Mock other Ionic components used in the component
+ IonHeader: ({ children }: { children: React.ReactNode }) => {children}
,
+ IonToolbar: ({ children }: { children: React.ReactNode }) => {children}
,
+ IonButtons: ({ children }: { children: React.ReactNode }) => {children}
,
+ IonButton: ({ onClick, children, 'data-testid': testId }: { onClick?: () => void; children: React.ReactNode; 'data-testid'?: string }) => (
+
+ ),
+ IonTitle: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+ {children}
+ ),
+ IonContent: ({ children }: { children: React.ReactNode }) => {children}
,
+ IonFooter: ({ children }: { children: React.ReactNode }) => {children}
,
+ isPlatform: () => false,
+ getPlatforms: () => [],
+ getConfig: () => ({})
+ };
+});
+
+// Import the mock directly to use in tests
+import { chatService as mockChatService } from '../../../services/ChatService';
+
+// Custom render that includes providers
+const customRender = (ui: React.ReactElement) => {
+ return render(ui, { wrapper: WithTestProviders });
+};
+
+describe('AIAssistantModal', () => {
+ const mockSetIsOpen = vi.fn();
+ const defaultProps = {
+ isOpen: true,
+ setIsOpen: mockSetIsOpen,
+ testid: 'test-ai-assistant'
+ };
+
+ beforeEach(() => {
+ mockSetIsOpen.mockClear();
+ vi.clearAllMocks();
+ });
+
+ it('renders the modal when isOpen is true', () => {
+ customRender(
+ {messages.length === 0 ? (
+
+ );
+};
+
+export default ChatContainer;
\ No newline at end of file
diff --git a/frontend/src/common/components/Chat/ChatInput.scss b/frontend/src/common/components/Chat/ChatInput.scss
new file mode 100644
index 00000000..4793cf29
--- /dev/null
+++ b/frontend/src/common/components/Chat/ChatInput.scss
@@ -0,0 +1,46 @@
+.chat-input-container {
+ padding: 0.5rem 1rem 1rem;
+ background: transparent;
+ position: relative;
+ width: 100%;
+ z-index: 2;
+
+ .input-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 3.5rem;
+
+ .message-input {
+ 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;
+ }
+
+ .send-fab {
+ right: 0;
+
+ .send-button {
+ --background: var(--ion-color-primary);
+ --ion-color-base: var(--ion-color-primary);
+ width: 3rem;
+ height: 3rem;
+ margin: 0;
+ }
+
+ ion-icon {
+ font-size: 1.25rem;
+ color: white;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/common/components/Chat/ChatInput.tsx b/frontend/src/common/components/Chat/ChatInput.tsx
new file mode 100644
index 00000000..6685941c
--- /dev/null
+++ b/frontend/src/common/components/Chat/ChatInput.tsx
@@ -0,0 +1,84 @@
+import { IonFab, IonFabButton, IonIcon, IonInput } from '@ionic/react';
+import { paperPlaneOutline } from 'ionicons/icons';
+import React, { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import './ChatInput.scss';
+
+interface ChatInputProps {
+ onSendMessage: (message: string) => void;
+ testid?: string;
+ className?: string;
+ placeholder?: string;
+}
+
+/**
+ * ChatInput component for entering and sending chat messages.
+ * Can be used in both modal and page contexts.
+ */
+const ChatInput: React.FC
+
+ ) : (
+ messages.map((message) => (
+ {t('common.aiAssistant.emptyState', 'How can I help you today?')}
+
+
+ );
+};
+
+export default ChatInput;
\ No newline at end of file
diff --git a/frontend/src/common/components/Chat/ChatMessage.scss b/frontend/src/common/components/Chat/ChatMessage.scss
new file mode 100644
index 00000000..f71d8855
--- /dev/null
+++ b/frontend/src/common/components/Chat/ChatMessage.scss
@@ -0,0 +1,77 @@
+.chat-message {
+ display: flex;
+ flex-direction: row;
+ max-width: 90%;
+ margin-bottom: 0.75rem;
+ align-self: flex-start;
+
+ .message-content {
+ padding: 0.75rem 1rem;
+ border-radius: 1rem;
+
+ p {
+ margin: 0;
+ white-space: pre-wrap;
+ word-break: break-word;
+ }
+ }
+
+ &.user-message {
+ .message-content {
+ background-color: #EBECFD;
+ color: var(--ion-color-dark);
+ }
+ }
+
+ &.assistant-message {
+ .message-content {
+ background-color: #FFFFFF;
+ color: var(--ion-color-dark);
+ }
+ }
+
+ // Avatar styling
+ .message-avatar {
+ width: 1.5rem;
+ height: 1.5rem;
+ border-radius: 50%;
+ margin-right: 0.5rem;
+ align-self: flex-start;
+
+ &.user-avatar {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ ion-icon {
+ width: 1.5rem;
+ height: 1.5rem;
+ }
+
+ }
+
+ &.assistant-avatar {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ svg, img, ion-icon {
+ width: 1.5rem;
+ height: 1.5rem;
+ }
+
+ }
+ }
+}
+
+// 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;
+}
\ No newline at end of file
diff --git a/frontend/src/common/components/Chat/ChatMessage.tsx b/frontend/src/common/components/Chat/ChatMessage.tsx
new file mode 100644
index 00000000..24c9fc00
--- /dev/null
+++ b/frontend/src/common/components/Chat/ChatMessage.tsx
@@ -0,0 +1,72 @@
+import { IonIcon } from '@ionic/react';
+import { personCircleOutline } from 'ionicons/icons';
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import './ChatMessage.scss';
+
+export interface ChatMessageData {
+ id: string;
+ text: string;
+ sender: 'user' | 'assistant';
+ timestamp: Date;
+}
+
+interface ChatMessageProps {
+ message: ChatMessageData;
+ aiIconSrc?: string;
+ robotIcon?: IconDefinition;
+ testid?: string;
+}
+
+/**
+ * ChatMessage component displays a single message in the chat UI.
+ * It can be used for both user and AI assistant messages.
+ */
+const ChatMessage: React.FC
+
+
+
+
+
+
+
+ {isUser && (
+
+ );
+};
+
+export default ChatMessage;
\ No newline at end of file
diff --git a/frontend/src/common/components/Input/__tests__/CheckboxInput.test.tsx b/frontend/src/common/components/Input/__tests__/CheckboxInput.test.tsx
index 5aaa7080..742b9ec1 100644
--- a/frontend/src/common/components/Input/__tests__/CheckboxInput.test.tsx
+++ b/frontend/src/common/components/Input/__tests__/CheckboxInput.test.tsx
@@ -1,9 +1,70 @@
import { describe, expect, it, vi } from 'vitest';
import userEvent from '@testing-library/user-event';
import { Form, Formik } from 'formik';
+import { waitFor } from '@testing-library/react';
+import { ReactNode } from 'react';
import { render, screen } from 'test/test-utils';
+// Mock IonCheckbox to better simulate its behavior in tests
+vi.mock('@ionic/react', async () => {
+ const actual = await vi.importActual('@ionic/react');
+ return {
+ ...actual,
+ IonCheckbox: ({
+ children,
+ onIonChange,
+ checked,
+ value,
+ 'data-testid': testId,
+ className,
+ name
+ }: {
+ children?: ReactNode;
+ onIonChange?: (event: { detail: { checked: boolean; value?: string } }) => void;
+ checked?: boolean | string;
+ value?: string;
+ 'data-testid'?: string;
+ className?: string;
+ name?: string;
+ }) => {
+ const handleChange = () => {
+ const newChecked = typeof checked === 'string' ? checked === 'false' : !checked;
+ const detailObj = {
+ checked: newChecked,
+ value
+ };
+ onIonChange?.({ detail: detailObj });
+ };
+
+ const checkedValue = String(checked);
+ const ariaChecked = checkedValue === 'true' ? 'true' : 'false';
+
+ return (
+
+
+
+ )}
+
+ {!isUser && (
+
+ {robotIcon ? (
+
+ ) : aiIconSrc ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+
+
+
+ {new Intl.DateTimeFormat('en-US', {
+ hour: 'numeric',
+ minute: 'numeric'
+ }).format(message.timestamp)}
+
+ {message.text}
+ {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ handleChange();
+ }
+ }}
+ role="checkbox"
+ tabIndex={0}
+ className={`ion-checkbox ${className || ''}`}
+ data-testid={testId}
+ aria-checked={ariaChecked as 'false' | 'true'}
+ data-checked={checkedValue}
+ data-name={name}
+ data-value={value}
+ >
+ {children}
+
+ );
+ }
+ };
+});
+
import CheckboxInput from '../CheckboxInput';
describe('CheckboxInput', () => {
@@ -39,7 +100,7 @@ describe('CheckboxInput', () => {
// ASSERT
expect(screen.getByTestId('input')).toBeDefined();
- expect(screen.getByTestId('input')).toHaveAttribute('checked', 'false');
+ expect(screen.getByTestId('input')).toHaveAttribute('data-checked', 'false');
});
it('should be checked', async () => {
@@ -57,7 +118,7 @@ describe('CheckboxInput', () => {
// ASSERT
expect(screen.getByTestId('input')).toBeDefined();
- expect(screen.getByTestId('input')).toHaveAttribute('checked', 'true');
+ expect(screen.getByTestId('input')).toHaveAttribute('data-checked', 'true');
});
it('should change boolean value', async () => {
@@ -73,14 +134,16 @@ describe('CheckboxInput', () => {
,
);
await screen.findByTestId('input');
- expect(screen.getByTestId('input')).toHaveAttribute('checked', 'false');
+ expect(screen.getByTestId('input')).toHaveAttribute('data-checked', 'false');
// ACT
- await user.click(screen.getByText('MyCheckbox'));
+ await user.click(screen.getByTestId('input'));
// ASSERT
- expect(screen.getByTestId('input')).toBeDefined();
- expect(screen.getByTestId('input')).toHaveAttribute('checked', 'true');
+ await waitFor(() => {
+ expect(screen.getByTestId('input')).toBeDefined();
+ expect(screen.getByTestId('input')).toHaveAttribute('data-checked', 'true');
+ }, { timeout: 1000 });
});
it('should change array value', async () => {
@@ -99,26 +162,29 @@ describe('CheckboxInput', () => {
,
);
await screen.findByTestId('one');
- expect(screen.getByTestId('one')).toHaveAttribute('checked', 'false');
- expect(screen.getByTestId('two')).toHaveAttribute('checked', 'false');
+ expect(screen.getByTestId('one')).toHaveAttribute('data-checked', 'false');
+ expect(screen.getByTestId('two')).toHaveAttribute('data-checked', 'false');
// ACT
- await user.click(screen.getByText('CheckboxOne'));
+ await user.click(screen.getByTestId('one'));
// ASSERT
- expect(screen.getByTestId('one')).toBeDefined();
- expect(screen.getByTestId('one')).toHaveAttribute('checked', 'true');
- expect(screen.getByTestId('two')).toHaveAttribute('checked', 'false');
+ await waitFor(() => {
+ expect(screen.getByTestId('one')).toHaveAttribute('data-checked', 'true');
+ expect(screen.getByTestId('two')).toHaveAttribute('data-checked', 'false');
+ }, { timeout: 1000 });
// ACT
- await user.click(screen.getByText('CheckboxOne'));
+ await user.click(screen.getByTestId('one'));
// ASSERT
- expect(screen.getByTestId('one')).toHaveAttribute('checked', 'false');
- expect(screen.getByTestId('two')).toHaveAttribute('checked', 'false');
+ await waitFor(() => {
+ expect(screen.getByTestId('one')).toHaveAttribute('data-checked', 'false');
+ expect(screen.getByTestId('two')).toHaveAttribute('data-checked', 'false');
+ }, { timeout: 1000 });
});
- it.skip('should call onChange function', async () => {
+ it('should call onChange function', async () => {
// ARRANGE
const user = userEvent.setup();
const onChange = vi.fn();
@@ -132,13 +198,15 @@ describe('CheckboxInput', () => {
,
);
- await screen.findByText(/MyCheckbox/i);
+ await screen.findByTestId('input');
// ACT
- await user.click(screen.getByText(/MyCheckbox/i));
+ await user.click(screen.getByTestId('input'));
// ASSERT
- expect(onChange).toHaveBeenCalledTimes(1);
- expect(screen.getByTestId('input')).toHaveAttribute('checked', 'true');
+ await waitFor(() => {
+ expect(onChange).toHaveBeenCalledTimes(1);
+ expect(screen.getByTestId('input')).toHaveAttribute('data-checked', 'true');
+ }, { timeout: 1000 });
});
});
diff --git a/frontend/src/common/components/Menu/AppMenu.tsx b/frontend/src/common/components/Menu/AppMenu.tsx
index b3ae9265..44d6fa9d 100644
--- a/frontend/src/common/components/Menu/AppMenu.tsx
+++ b/frontend/src/common/components/Menu/AppMenu.tsx
@@ -69,6 +69,12 @@ const AppMenu = ({ className, testid = 'menu-app' }: AppMenuProps): JSX.Element
Home Page
,
}));
+vi.mock('pages/Chat/ChatPage', () => ({
+ default: () => Chat Page
,
+}));
+
vi.mock('pages/Users/components/UserList/UserListPage', () => ({
default: () => User List Page
,
}));
diff --git a/frontend/src/common/services/ChatService.ts b/frontend/src/common/services/ChatService.ts
new file mode 100644
index 00000000..28cede9d
--- /dev/null
+++ b/frontend/src/common/services/ChatService.ts
@@ -0,0 +1,75 @@
+import { ChatMessageData } from '../components/Chat/ChatMessage';
+
+/**
+ * Service for managing chat functionality including sending messages and getting responses.
+ */
+class ChatService {
+ /**
+ * Send a message to the AI assistant and get a response
+ * @param message The message text to send
+ * @returns A promise that resolves to the AI's response
+ */
+ async sendMessage(message: string): Promise
+ 
+ {t('pages.chat.title', 'AI Assistant')}
+
+
-
+ {t('pages.chat.subtitle')}
-{t('pages.chat.description')}
-
+
+ {children}
+
+ );
+
+ return {
+ IonPage: createMockComponent('ion-page'),
+ IonHeader: createMockComponent('ion-header'),
+ IonToolbar: createMockComponent('ion-toolbar'),
+ IonTitle: createMockComponent('ion-title'),
+ IonContent: createMockComponent('ion-content'),
+ IonFooter: createMockComponent('ion-footer'),
+ IonItem: createMockComponent('ion-item'),
+ IonButtons: createMockComponent('ion-buttons'),
+ IonButton: createMockComponent('ion-button'),
+ IonIcon: createMockComponent('ion-icon'),
+ IonTextarea: createMockComponent('ion-textarea'),
+ IonSpinner: createMockComponent('ion-spinner'),
+ IonInput: createMockComponent('ion-input'),
+ IonFab: createMockComponent('ion-fab'),
+ IonFabButton: createMockComponent('ion-fab-button'),
+ IonRow: createMockComponent('ion-row'),
+ IonCol: createMockComponent('ion-col'),
+ IonGrid: createMockComponent('ion-grid'),
+ IonList: createMockComponent('ion-list'),
+ isPlatform: () => false,
+ getPlatforms: () => [],
+ getConfig: () => ({
+ getBoolean: () => false,
+ get: () => undefined
+ })
+ };
+});
+
+// Mock shared components
+vi.mock('../../../common/components/Chat/ChatContainer', () => ({
+ default: ({ messages = [], testid }: { messages?: Array<{ id: string; text: string; sender: string; timestamp: Date }>; testid: string }) => {
+ if (!messages) {
+ messages = [];
+ }
+ return (
+
+ {messages.length === 0 ? (
+
+ );
+ }
+}));
+
+vi.mock('../../../common/components/Chat/ChatInput', () => ({
+ default: ({ onSendMessage, testid }: { onSendMessage: (text: string) => void; testid: string }) => {
+ const handleSend = () => {
+ if (onSendMessage) {
+ onSendMessage('Test message');
+ }
+ };
+
+ return (
+ Empty State
+ ) : (
+ messages.map((message) => (
+
+ {message.text}
+
+ ))
+ )}
+
+ ) => {}}
+ />
+
+
+ );
+ }
+}));
+
+describe('ChatPage', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it('renders the chat page with title', () => {
+ render(
+ {children}
+);
+
const WithMinimalProviders = ({ children }: PropsWithChildren): JSX.Element => {
return (
+
+
+ {children}
+
+