App Layout & Navigation
Relevant source files
The following files were used as context for generating this wiki page:
LV.AI utilizes a modular layout architecture built on Next.js 16 and the App Router. The system organizes the user interface into distinct functional zones: a global application shell, a dual-pane chat and artifact interface, and specialized management pages for knowledge bases and construction projects.
The navigation logic employs a combination of traditional routing, contextual headers, and slash commands within the chat interface to provide a seamless transition between construction-specific workflows like creating bill of quantities (LV) and general AI interaction.
Global Application Shell
The root layout establishes the technical foundation for the application, providing global providers for themes, authentication sessions, and tooltips. It utilizes a custom theme script to prevent hydration mismatches and ensure consistent styling across light and dark modes.
The root layout wraps all pages, applying Geist and Geist Mono fonts and setting the viewport to prevent excessive scaling on mobile devices.
Sources: app/layout.tsx:55-87, README.md:30-40
Chat & Artifact Interface
The primary workspace features a dual-pane layout designed for concurrent conversation and document manipulation. The interface dynamically adjusts its structure based on the presence and status of "Artifacts"—specialized views for text, code, sheets, or images.
Desktop Layout
On desktop devices, the screen splits into a chat area and a side panel. The side panel (Artifact) occupies 60% of the width when visible, sliding in with a cubic-bezier transition.
Sources: components/chat/artifact.tsx:340-349
Mobile Layout
On mobile devices, the layout switches to a full-screen overlay for artifacts. The application uses framer-motion to animate the artifact from its original bounding box in the chat message to a fixed full-screen container.
Sources: components/chat/artifact.tsx:318-338
Artifact Navigation Flow
The following sequence illustrates how the layout responds when a user interacts with a document preview in the chat:
Project-Specific Navigation
When viewing a specific construction project (identified by projectId), the application provides a specialized header with direct navigation links to AVA-specific modules.
| Navigation Item | Destination Purpose | Icon / Component |
|---|---|---|
| Zurück | Returns to the main chat interface | ArrowLeftIcon |
| Preisspiegel | Opens the bid comparison view | FileSpreadsheetIcon |
| Bieter | Navigates to the bidder management list | ClipboardListIcon |
| Plan | Accesses the SVG/PDF plan generator | RulerIcon |
| Create LV | Initiates a new document within the project | CreateLvDocumentButton |
Sources: app/(chat)/lv/[projectId]/page.tsx:44-78
Knowledge Base Navigation
The Knowledge Base (/knowledge) uses a dedicated layout structure optimized for file management. It removes the chat-centric sidebars in favor of a full-height (h-dvh) flex container.
- Header: A simplified top bar containing a "Back to Chat" navigation button and the section title.
- Upload Zone: A central area for drag-and-drop file ingestion.
- File List: A scrollable list of uploaded documents with contextual actions (Open, Delete).
- Info Box: A reference section explaining the use of different file types (GAEB, DIN, VOB).
Sources: app/knowledge/page.tsx:114-233
Command-Based Navigation
The MultimodalInput component integrates navigation functionality directly into the chat input field via slash commands. This allows users to trigger app-level navigation without leaving the conversation flow.
- /new: Navigates the router to the root path to start a new chat.
- /clear: Clears the current message array in the UI.
- /delete: Triggers a delete request for the current chat and redirects to home.
- /purge: Deletes all chats in the history and redirects to home.
Sources: components/chat/multimodal-input.tsx:129-170
Summary
The LV.AI layout system prioritizes workspace utility for construction professionals by balancing conversational AI with specialized document views. Navigation is facilitated through structural headers in project views and command-based shortcuts in the chat, ensuring that complex AVA tasks remain accessible within a unified web interface.