Chat UI Components
Relevant source files
The following files were used as context for generating this wiki page:
The Chat UI Components form the frontend interface for the OpenPoke assistant, providing a responsive, iMessage-style communication layer between the user and the multi-agent backend. The system is built using Next.js and Tailwind CSS, focusing on real-time feedback through optimistic updates, polling mechanisms, and visual indicators like typing animations.
The interface is structured to manage conversation history, user input, and configuration settings (such as timezone and Gmail integrations) while proxying requests to a Python-based FastAPI server.
Sources: README.md:9-13, web/app/page.tsx:1-12
Core Component Architecture
The chat interface is composed of several modular React components managed by a central page controller. This architecture separates the concerns of message rendering, input handling, and global state management.
Component Hierarchy
- ChatHeader: Displays the application title and provides actions for clearing history and opening settings.
- ChatMessages: Renders the list of conversation bubbles and the typing indicator.
- ChatInput: Handles user text entry and submission.
- SettingsModal: Manages user preferences including timezone detection and Gmail OAuth connections.
- ErrorBanner: Surfaces API or network errors to the user.
Sources: web/app/page.tsx:191-218, web/components/chat/ChatHeader.tsx:6-28
Message Data Model
Messages are represented using the ChatBubble interface, which defines the necessary structure for rendering and tracking individual entries in the transcript.
| Field | Type | Description |
|---|---|---|
id | string | Unique identifier for the message (often prefixed with 'history-' or 'user-'). |
role | string | The sender's role (e.g., 'user', 'assistant', or 'draft'). |
text | string | The actual content of the message, processed for escape characters. |
Sources: web/components/chat/types.ts:1-5, web/app/page.tsx:28-36
Data Flow and State Management
The chat system utilizes a combination of optimistic UI updates and a polling-based synchronization strategy to ensure the interface reflects the state of the backend orchestration.
Message Submission Flow
When a user sends a message, the system immediately adds it to the local state with a temporary ID before initiating the API request.
The diagram shows the transition from user input to backend processing and the subsequent polling for assistant replies.
Sources: web/app/page.tsx:103-176, web/app/api/chat/route.ts:24-52
Polling Mechanism
Because the backend uses an asynchronous multi-agent orchestration stack, the frontend does not receive the final response in the initial POST request. Instead, it implements two polling strategies:
- Interval Polling: A global interval runs every 1500ms to keep the history in sync.
- Adaptive Polling: After sending a message, the
sendMessagefunction triggers a more frequent (1000ms) poll specifically looking for the assistant's response to the specific user input.
Sources: web/app/page.tsx:17-21, web/app/page.tsx:143-170
Visual Presentation and Styling
The UI adheres to a "witty and warm" personality through its styling, utilizing a light color scheme and specific bubble shapes to distinguish between participants.
iMessage-Style Bubbles
Styling is handled via Tailwind CSS utility classes and custom CSS components. The ChatMessages component determines the alignment and "tail" of bubbles based on the message role and sequence.
| Class | Purpose | Style Detail |
|---|---|---|
.bubble-out | User Messages | Brand-600 background, white text, right-aligned. |
.bubble-in | Assistant/Agent | Gray-100 background, dark text, left-aligned. |
.bubble-tail-out | Message Tail | Rounded bottom-right corner for last user message in a group. |
.bubble-tail-in | Message Tail | Rounded bottom-left corner for last assistant message in a group. |
Sources: web/app/globals.css:34-51, web/components/chat/ChatMessages.tsx:18-35
Interaction Indicators
- Typing Indicator: A three-dot bounce animation rendered via
TypingIndicatorwhenisWaitingForResponseis true. - Empty State: A centered prompt encouraging the user to start a conversation when no messages are present.
- Loading States: Buttons in the
SettingsModalusearia-busyand label changes (e.g., "Refreshing...") to indicate background activity.
Sources: web/components/chat/ChatMessages.tsx:44-57, web/components/SettingsModal.tsx:432-463
Integration and Configuration
The SettingsModal is a critical component for configuring the environment in which the chat operates.
Timezone and Identity Management
The system automatically detects the browser's timezone using Intl.DateTimeFormat().resolvedOptions().timeZone and persists it to both the server and localStorage. User identity is maintained via a web- prefixed UUID stored in localStorage to associate chat sessions and integrations.
Sources: web/app/page.tsx:75-100, web/components/SettingsModal.tsx:135-155
Gmail OAuth Flow
The UI manages complex integration states for Gmail through Composio.
This flowchart illustrates the manual steps required to link a Gmail account for email triage features.
Sources: web/components/SettingsModal.tsx:186-224, web/components/SettingsModal.tsx:226-287
The Chat UI Components provide a robust, stateful environment that abstracts the complexities of the multi-agent backend into a familiar messaging interface, ensuring high technical accuracy through strict data validation and synchronized state management.