Chat Interface Components
Relevant source files
The following files were used as context for generating this wiki page:
The Chat Interface Components represent the primary user interaction layer of the AI Assistant platform. These components provide a real-time, responsive environment for users to communicate with multiple AI models (Phi-3 and Gemini), manage conversation history, and interact with the system's long-term memory extraction and retrieval capabilities.
The frontend is built using React and interfaces with a Node.js orchestration service (Port 5001) which acts as a gateway to the Python-based AI services. The interface handles state management for messages, model selection, and UI feedback such as typing indicators and connection status.
Sources: README.md, ai-assistant-react/src/components/Chat/ChatInterface.jsx:1-20
Core Chat Functionality
Message Orchestration
The primary component, ChatInterface, manages the message lifecycle from user input to AI response. When a user sends a message, the system creates a local message object, updates the UI immediately, and then dispatches a POST request to the backend. The component tracks the conversationId to maintain context across sessions.
The diagram shows the synchronous flow of a single message request from the React frontend through the orchestration layer to the ML backend.
Sources: ai-assistant-react/src/components/Chat/ChatInterface.jsx:61-125, Ai-Assistant-v2/auth-service/server.js:231-300
Real-time Interaction and Feedback
The interface provides several feedback mechanisms to enhance user experience:
- Typing Indicator: A visual state triggered when
isTypingis true, showing an animated three-dot indicator while waiting for the AI response. - Connection Status: In legacy versions, a Socket.io connection was used to track connectivity to the "AI Brain". In the modern interface, a status indicator in the header displays the connection state.
- Auto-scrolling: A
useRefhook (messagesEndRef) ensures the message container automatically scrolls to the newest message whenever the message list updates.
Sources: ai-assistant-react/src/components/Chat/ChatInterface.jsx:36-40, Ai-Assistant-v2/frontend-react/src/Chat.jsx:18-40, ai-assistant-react/src/index.css:424-445
Model and Memory Management
AI Model Switching
Users can toggle between supported AI models (Phi-3 Mini and Gemini) directly from the sidebar. Switching models updates the user's settings on the backend and affects future messages within the conversation.
| Feature | Description | Source |
|---|---|---|
| Phi-3 Mini | Local, privacy-focused GGUF model. | README.md |
| Gemini | Cloud-based Google API for advanced reasoning. | README.md |
| Switch Model | Endpoint: POST /api/v1/settings/model. | ChatInterface.jsx:127-143 |
Memory System Integration
The chat interface interacts with the system's vector-based memory retrieval. The backend extracts "facts" from conversations which are then stored and retrieved during chat to provide context-aware responses.
- Train Memory: Manually triggers the extraction process from recent conversations via
POST /api/v1/memories/train. - View Memories: Opens a modal fetching all stored user facts from
GET /api/v1/memories. - Memory Count: A live counter in the stats section displays the current number of stored memories.
Sources: ai-assistant-react/src/components/Chat/ChatInterface.jsx:145-177, Ai-Assistant-v2/auth-service/routes/ai.js:145-197
Data Structures and API Interaction
Message Data Model
Messages are stored in the React state as objects with specific metadata. When retrieved from the backend (e.g., during history loading), they are mapped to this format.
// Internal React State Format
{
role: 'user' | 'assistant',
text: string,
timestamp: Date,
intent: string, // e.g., 'question', 'command'
sentiment: string // e.g., 'positive', 'neutral'
}
Sources: ai-assistant-react/src/components/Chat/ChatInterface.jsx:218-226, Ai-Assistant-v2/auth-service/server.js:278-285
Key API Endpoints Used by UI
The component utilizes several endpoints on the Node.js backend (Port 5001) to synchronize state.
| Endpoint | Method | Purpose |
|---|---|---|
/api/v1/ai/chat | POST | Sends message and retrieves AI response + metadata. |
/api/v1/conversations | GET | Fetches all past conversations for the history modal. |
/api/v1/conversations/:id | GET | Loads a specific conversation's message history. |
/api/v1/settings | GET | Loads user preferences (default model, theme). |
/api/v1/memories/count | GET | Updates the memory count statistic in the sidebar. |
Sources: ai-assistant-react/src/components/Chat/ChatInterface.jsx:45-60, Ai-Assistant-v2/auth-service/routes/ai.js:15-100
UI Styling and Components
The interface utilizes a "Dark Glassmorphism" theme defined in the global CSS.
- Sidebar: Contains model selectors, feature buttons (Train/History), and session statistics.
- Chat Container: The main viewport containing the
messagesarea and theinput-area. - Modals: Used for displaying "Chat History" and "View Memories" without navigating away from the active session.
- Meta Tags: Inline badges displayed on user messages to show detected
intentandsentiment.
Sources: ai-assistant-react/src/index.css:1-100, ai-assistant-react/src/components/Chat/ChatInterface.jsx:310-330
Conclusion
The Chat Interface Components act as the sophisticated frontend orchestrator for the AI Assistant Platform. By managing complex state transitions between user input, model switching, and memory management, it provides a seamless interface for interacting with multi-modal AI services. The use of React hooks for persistent conversation loading and visual feedback ensures a production-ready conversational experience.