Chat UI Components
Relevant source files
The following files were used as context for generating this wiki page:
The Chat UI Components provide the primary interface for users to interact with the LV.AI system. These components handle real-time message streaming, file attachments, model selection, and the display of specialized artifacts such as construction-related documents and spreadsheets.
The system uses a shell-based architecture that balances a conversational message list with a side panel for detailed document editing and visualization. This modular approach allows the UI to handle complex construction industry tasks like generating Leistungsverzeichnisse (LVs) while maintaining a standard chat experience.
Sources: components/chat/shell.tsx:32-40, components/chat/artifact.tsx:28-35
Core Architecture and Data Flow
The ChatShell acts as the root container for the chat interface. It manages the layout transition between a full-width chat and a split-view when an artifact becomes visible. It orchestrates state between the message list, the multimodal input, and the artifact side panel.
Component Relationship
The following diagram illustrates the structural relationship between the main chat components:
Message Streaming Flow
The system utilizes the useActiveChat hook to manage the lifecycle of a conversation, including message sending and streaming responses from the AI.
Primary Components
Multimodal Input
The MultimodalInput component handles user text entry and file uploads. It supports slash commands (e.g., /new, /clear, /model) and provides a model selector for choosing between different LLMs.
| Feature | Description |
|---|---|
| Slash Commands | Triggers system actions like clearing history or changing themes. |
| File Uploads | Handles multi-file selection and image pasting from clipboard. |
| Model Selector | Allows switching between curated models with specific capabilities (Vision, Reasoning). |
| Suggested Actions | Displays clickable prompts when the chat is empty. |
Sources: components/chat/multimodal-input.tsx:136-160, components/chat/multimodal-input.tsx:290-340
Message List and Preview
The Messages component renders the conversation history. Individual messages are displayed via PreviewMessage, which distinguishes between user and assistant roles and handles various content types, including text, reasoning, and tool results.
- Reasoning: Displays the AI's internal "thinking" process if supported by the model.
- Tool Results: Renders specialized UIs for tool outputs like weather or document creation.
- Attachments: Shows previews for files uploaded by the user.
Sources: components/chat/messages.tsx:75-115, components/chat/message.tsx:48-90
Artifact Side Panel
The Artifact component provides a dedicated space for complex outputs. It supports different kinds of content, such as text, code, image, and sheet.
- Version Control: Allows users to navigate through different versions of a document.
- Real-time Updates: Synchronizes with the data stream during AI generation.
- Editing: Supports manual edits which are then persisted via the
/api/documentendpoint.
Sources: components/chat/artifact.tsx:170-210, components/chat/artifact.tsx:280-320
Data Structures and Types
The chat components rely on standardized types defined in lib/types.ts and lib/db/schema.ts to ensure consistency across the UI.
Chat Message Structure
export type ChatMessage = UIMessage<
MessageMetadata,
CustomUIDataTypes,
ChatTools
>;
export type CustomUIDataTypes = {
textDelta: string;
codeDelta: string;
"chat-title": string;
kind: ArtifactKind;
// ... other data types
};
Sources: lib/types.ts:32-50
Database Schema (Chat & Messages)
| Table | Field | Type | Description |
|---|---|---|---|
| Chat | id | uuid | Primary key for the conversation. |
| Chat | visibility | varchar | Visibility status (public/private). |
| Message_v2 | role | varchar | The sender's role (user/assistant/system). |
| Message_v2 | parts | json | Array of message components (text, tools, etc). |
Sources: lib/db/schema.ts:114-142
Sidebar and History Management
The SidebarHistory component manages the retrieval and grouping of previous conversations. It organizes chats by timeframes such as "Today", "Yesterday", and "Last 30 days".
- Pagination: Uses
useSWRInfiniteto load chat history in chunks of 20. - Deletion: Provides an
AlertDialogto confirm permanent removal of a chat from the server. - Optimistic Updates: Mutates the local cache upon deletion before the API call completes.
Sources: components/chat/sidebar-history.tsx:45-80, components/chat/sidebar-history.tsx:136-160
Summary
The Chat UI Components form a robust, feature-rich interface for the LV.AI project. By segregating conversational logic into the Messages list and complex content into the Artifact panel, the system maintains usability even when performing heavy-duty construction industry data processing. The integration with a real-time data stream ensures that AI responses and document generations are visible to the user as they happen.
Sources: components/chat/shell.tsx:160-180, components/chat/artifact.tsx:400-410