Chat Interface UI
Relevant source files
The following files were used as context for generating this wiki page:
The Chat Interface UI allows visitors to ask questions about the site owner. The system processes these queries through an AI agent that answers based on the owner's biography. The interface manages message input, conversation history, and real-time state updates.
This module coordinates frontend state via Redux, local browser storage for persistence, and communication with the backend API to manage message threads and replies.
Messaging Logic and Validation
The UI enforces specific rules for message processing to ensure data integrity and a clean user experience. When a visitor sends a message, the system validates the content before transmission.
- Trimming: The system trims whitespace and cuts long messages to a maximum of 500 characters.
- Empty Messages: The system prevents sending blank or whitespace-only messages.
- Immediate Feedback: Sent messages appear in the chat immediately, and the input field clears.
Sources: apps/web/spec/chat.md:12-25, apps/web/test/features/chat/chat.schema.test.ts:5-13
Message Processing Flow
The following diagram illustrates the flow from user input to API request.
State Management
The chat slice manages the application state for the interface. It tracks the active conversation, pending requests, and error notices.
Chat State Structure
| Field | Type | Description |
|---|---|---|
loaded | boolean | Indicates if history has been loaded from storage. |
conversations | Conversation[] | List of saved chat histories. |
activeId | string | The ID of the currently viewed chat. |
draft | string | The current text in the message input. |
asking | Asking | null | Stores the metadata of a question currently in flight. |
notice | string | null | User-facing status or error messages. |
Sources: apps/web/src/redux/slices/chat.ts:20-27
Thunks and Reducers
The system uses Redux Thunks to handle asynchronous actions like sending questions and loading history.
sendQuestion: Triggers theaskedaction, calls the API, and then triggers eitheransweredorfailed.loadHistory: Retrieves saved conversations from the browser'slocalStorageand populates the state.answered: Updates the conversation with the agent's reply and persists the state.
Sources: apps/web/src/redux/slices/chat.ts:70-128, apps/web/src/redux/slices/chat.ts:153-195
Thread and History Management
The interface manages conversations as "threads." A new thread starts on the first message, and subsequent messages follow the same thread unless the thread expires.
Threading Rules
- First Message: Starts a new thread and assigns a unique ID.
- Follow-up: Uses the existing thread ID.
- Expiration: If a thread is not found (404), the visitor is notified, and the next message starts a new thread.
- Site Handle: All threads are tied to a specific configured site handle.
Sources: apps/web/spec/chat.md:18-22, apps/web/test/features/chat/chat.api.test.ts:52-87
Persistence Logic
Conversations are saved in the browser's localStorage to maintain history across sessions.
- Capacity: The system keeps only the 20 newest conversations.
- Ordering: Conversations are saved newest first.
- Corruption Handling: If saved data is unreadable, the visitor starts with no history.
Sources: apps/web/spec/chat.md:15-17, apps/web/test/features/chat/chat.history.test.ts:38-57
Error Handling
The UI provides specific feedback when communication with the agent fails.
| Failure Type | User Notice | Behavior |
|---|---|---|
expired | "This conversation expired. Send your message again to start a new one." | Thread ID is cleared; message returns to input. |
failed | "Something went wrong. Please try again." | Message returns to the input field. |
Sources: apps/web/src/redux/slices/chat.ts:29-34, apps/web/src/redux/slices/chat.ts:107-128
The Chat Interface UI ensures a robust interaction model by combining strict input validation, sophisticated state management via Redux, and persistent browser storage. This architecture maintains conversation context across sessions while providing clear feedback during network or session failures.
Sources: apps/web/src/features/chat/index.ts, apps/web/src/redux/slices/chat.ts, apps/web/spec/chat.md