React Application Architecture
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The React application serves as the frontend layer of the AI Assistant platform, providing a real-time, interactive interface for users to communicate with dual AI models (Phi-3 and Gemini). It is built using React 19 and Vite, utilizing a modular component-based architecture to handle authentication, conversation management, and memory visualization.
Sources: ai-assistant-react/package.json:15-18, README.md:143-147
The architecture is designed to communicate with a Node.js Auth & Orchestration Service via REST APIs, facilitating secure JWT-based authentication and persistent chat sessions. The frontend maintains local state for active conversations, model preferences, and session status, ensuring a responsive user experience.
Sources: README.md:9-15, ai-assistant-react/src/App.jsx:13-20
Core Application Structure
The application entry point is main.jsx, which renders the App component. The App component manages global authentication state and routing.
Routing and Authentication Flow
The application uses react-router-dom to manage navigation between the Login, Register, and Chat views. Authentication is verified on startup by calling the /api/v1/auth/check endpoint.
State Management
The application employs a mix of React's useState for local component state and localStorage for persisting non-sensitive session data such as the activeConversationId.
Sources: ai-assistant-react/src/components/Chat/ChatInterface.jsx:19-24
Component Architecture
The frontend is divided into functional modules located in src/components/.
Chat Interface Component
ChatInterface.jsx is the primary functional component, responsible for the chat loop, model switching, and memory management.
| Feature | Implementation Detail |
|---|---|
| Model Switching | Calls /api/v1/settings/model to toggle between phi3 and gemini. |
| Message History | Fetches previous messages via /api/v1/conversations/:id. |
| Memory Training | Triggers manual memory extraction through /api/v1/memories/train. |
| Persistence | Uses localStorage to keep track of activeConversationId. |
Sources: ai-assistant-react/src/components/Chat/ChatInterface.jsx:21-24, ai-assistant-react/src/components/Chat/ChatInterface.jsx:105-122, ai-assistant-react/src/components/Chat/ChatInterface.jsx:215-230
Legacy Socket.IO Implementation
Earlier versions of the frontend utilized socket.io-client for real-time communication directly with the Python backend on port 5000. While the current architecture prioritizes REST via the Node.js service, the legacy Chat.jsx component demonstrates an event-driven flow for message exchange.
Data Flow and API Integration
The frontend interacts with the backend service (defaulting to http://localhost:5001) using the fetch API and axios.
Chat Request Flow
When a user sends a message, the application follows a specific orchestration path to ensure context is maintained.
Key API Endpoints Used by Frontend
| Endpoint | Method | Purpose |
|---|---|---|
/api/v1/auth/login | POST | Authenticate user and receive JWT. |
/api/v1/ai/chat | POST | Send message and receive AI response with metadata. |
/api/v1/memories | GET | Retrieve extracted facts for the user. |
/api/v1/settings | GET | Load user preferences like default model. |
/api/v1/conversations | GET | Fetch list of previous chat sessions. |
Sources: ai-assistant-react/src/components/Chat/ChatInterface.jsx:32-40, ai-assistant-react/src/components/Chat/ChatInterface.jsx:124-138, README.md:100-115
Styling and UI Design
The application utilizes a Dark Glassmorphism theme implemented via index.css.
- CSS Variables: Defines a palette including primary indigo (
#6366f1) and secondary violet (#8b5cf6). - Layout: Uses Flexbox for the
main-contentarea, dividing it into a fixedsidebar(280px) and a fluidchat-container. - Animations: Includes
pulsefor status indicators andtypingfor the AI response placeholder. - Responsiveness: Implements media queries to hide the sidebar and adjust bubble width on devices with a width less than 768px.
Sources: ai-assistant-react/src/index.css:5-22, ai-assistant-react/src/index.css:98-106, ai-assistant-react/src/index.css:355-364
Technical Stack Summary
The frontend leverages a modern JavaScript ecosystem:
- Vite: Used as the build tool for Fast Refresh (HMR) and optimized production builds.
- React 19: Core UI library.
- Zustand: Mentioned in dependencies for state management (though
useStateis prevalent in primary components). - Framer Motion: Utilized for smooth UI transitions and animations.
Sources: ai-assistant-react/package.json:10-21, Ai-Assistant-v2/frontend-react/README.md:1-5
Conclusion
The React Application Architecture for the AI Assistant Platform is characterized by its strict separation of concerns, routing users through a secure authentication gate before allowing access to an orchestrated chat environment. By integrating directly with Node.js middleware, the frontend provides a seamless interface for complex backend operations like vector-based memory retrieval and multi-model AI inference.