Chat Interface Components
Relevant source files
The following files were used as context for generating this wiki page:
The Chat Interface Components constitute the primary user-facing layer of the MediGuard AI platform. This system facilitates secure, real-time medical inquiries between users and the AI model, while providing visual context for ongoing anomaly detection and safety monitoring. The interface is designed to handle complex medical discourse through a structured messaging system, integrated sidebar navigation, and a specialized input layer.
The core architecture follows a reactive pattern where the main Chat page orchestrates the state between the conversation list, the active message stream, and the user's input. This interface works in tandem with the backend's multi-agent watchtower to ensure that every message processed through these components is logged and analyzed for potential medical misbehavior.
Sources: frontend/src/pages/Chat.jsx:1-12, AI Service/plan.md:1-10
Main Chat Orchestration
The Chat component serves as the central hub for the user interface. It utilizes a custom hook, useChat, to manage the state of the active conversation, the message history, and the status of outgoing requests.
Core Logic and Flow
The component initializes by loading existing conversations. When an active conversation is selected, it renders a header containing metadata about the specific AI model being used (e.g., model type and name). If no conversation is active, it presents an "Empty State" panel prompting the user to start a new session.
Messaging Components
The messaging system is divided into granular components that handle the display and formatting of individual exchanges.
ChatMessage Component
The ChatMessage component is responsible for rendering individual messages from both the user and the "MediGuard AI" assistant. It features:
- Role-based Layout: Uses conditional CSS classes (
chat-message-uservschat-message-assistant) to align bubbles and switch avatars. - Markdown Support: Implements
ReactMarkdownwithremarkGfmto render formatted medical instructions, tables, and lists. - Metadata Integration: Displays timestamps formatted to a 12-hour clock and displays the sender's name or initial.
Sources: frontend/src/components/chat/ChatMessage.jsx:1-35, frontend/src/components/chat/ChatMessage.css:7-25
Component Features Table
| Feature | Description | File Reference |
|---|---|---|
| Markdown Rendering | Supports tables, code blocks, and bold text for medical clarity. | ChatMessage.jsx:23 |
| Model Metadata | Displays the specific LLM engine (e.g., GPT, Gemini) in the header. | Chat.jsx:32 |
| Status Indicators | Visual "sending" states to prevent double-submission. | Chat.jsx:36 |
| Avatar System | Distinct icons for the AI and initials for the user. | ChatMessage.jsx:17-43 |
Visual Architecture and Styling
The interface utilizes a "Production Grade" CSS architecture defined by a strict variable-based design system.
The Design System
The interface relies on CSS variables for spatial composition and color. Key elements include:
- Surface Hierarchy: Uses
var(--bg-surface)for components andvar(--bg-primary)for the main page background to create depth. - Typography: Employs
var(--font-display)for headers (Cabinet Grotesk) andvar(--font-body)(Satoshi) for message content. - Safety Accents: The AI avatar and primary buttons use a teal gradient (
--color-primary-500to--color-primary-600) to represent the "MediGuard" brand.
Sources: frontend/src/pages/Chat.css:7-20, frontend/index.html:12-20, frontend/src/components/chat/ChatMessage.css:35-50
Layout Structure
Navigation and Sidebar
The Sidebar component provides the navigational context for the chat interface. It manages the identity of the logged-in user and the accessibility of past interactions.
Sidebar Functional Elements
- Identity Block: Displays the user's full name, email, and a generated avatar using the first initial.
- Conversation Management: Contains the
NewConversationButtonand a scrollableConversationList. - Branding: Displays the "MediGuard AI Anomaly Detection" logo with a specific heartbeat/pulse SVG icon.
Sources: frontend/src/components/layout/Sidebar.jsx:15-50
User Input and Submission
The input layer is designed for high-density medical text input.
ChatInput Logic
While the logic is primarily abstracted to the onSend prop in Chat.jsx, the visual components are optimized for multi-line text.
- Flexible Textarea: The input field supports
min-height: 48pxandmax-height: 150pxwith an auto-scrolling overflow. - Submission Control: The submit button is a teal gradient circle with a distinct SVG arrow. It includes a
chat-input-loadingstate that triggers a 1-second linear spin animation when a message is being processed.
Sources: frontend/src/components/chat/ChatInput.css:17-30, frontend/src/components/chat/ChatInput.css:70-85
The Chat Interface Components provide a robust and visually distinctive environment for medical AI interaction. By combining precise markdown rendering in ChatMessage.jsx with model-aware orchestration in Chat.jsx, the system ensures that users can effectively communicate with the AI while the underlying watchtower monitors for safety anomalies. The modularity of these components allows for a seamless flow from initial query to human review in the admin interface.
Sources: frontend/src/pages/Chat.jsx:1-40, frontend/src/components/chat/ChatMessage.jsx:1-45