DOCSEARCHbyAlgolia
Submit Docs

Elysia Frontend

repository·main·Indexed 41 days ago

https://github.com/weaviate/elysia-frontend

An AI-powered single-page application (SPA) providing an interface for AI interactions, data exploration, and configuration management. Built with Next.js 14, Radix UI, and Tailwind CSS, it serves as the user interface for the Elysia ecosystem.

Tokens
1K
Snippets
3
Records
6
Agent score
2%

What's inside Elysia Frontend

  1. How Elysia Frontend handles navigation and state

    main

    Elysia is built as a Single Page Application (SPA) using Next.js with client-side routing.

    Navigation: Main navigation is handled through a RouterContext (React context) to allow transitions between sections (Chat, Data, Settings, Evaluation, Explorer) without full page reloads.

    State Management: The application follows these patterns:

    • Context-based state management for global state.
    • Custom hooks for shared logic.
    • Component composition using Radix UI primitives for UI building blocks.

  2. Understand the Elysia Frontend project structure

    main

    The project is organized using Next.js 14 App Router conventions, with components categorized by feature. Key directories include:

    • app/api/: Server-side API route handlers for backend communication.
    • app/components/: Core application components organized by feature (e.g., chat/, configuration/, explorer/, threejs/).
    • app/pages/: Main page components like Chat, Data, Settings, etc.
    • app/types/: TypeScript interfaces and type definitions.
    • components/ui/: Reusable UI primitives built with Radix UI.
    • hooks/: Custom React hooks for shared logic.
    • lib/: Utility functions.
    • public/: Static assets like images and icons.

  3. Install and run Elysia Frontend locally

    main

    To set up the Elysia Frontend development environment, ensure you have Node.js (version 18 or higher) and npm installed. Follow these steps to clone, install, and launch the application:

    1. Clone the repository
      git clone <repository-url>
cd elysia-frontend
    2. Install dependencies
      npm install
    3. Start the development server
      npm run dev
    4. Access the app Open your browser and navigate to http://localhost:3000
    git clone <repository-url>
cd elysia-frontend
npm install
npm run dev

  4. Configure static export mode via environment variables

    main

    To enable static export mode, which is required for the custom build and assembly process used to integrate with the backend, set the following environment variable:

    • NEXT_PUBLIC_IS_STATIC: Enables static export mode.

  5. Use available npm scripts for development and deployment

    main

    Elysia Frontend provides several scripts for managing the application lifecycle, including development, production builds, and static exports for backend integration.

    Development

    • npm run dev: Starts the development server.
    • npm run lint: Runs ESLint to check code quality.

    Building & Production

    • npm run build: Creates an optimized production build.
    • npm run build:clean: Performs a clean build by removing the cache first.
    • npm start: Starts the production server.

    Export & Assembly (for Backend Integration)

    The application uses a custom process to generate static files and move them to the backend's static directory (typically ../elysia/api/static).

    • npm run export: Generates static files in the out/ directory.
    • npm run assemble: Performs both the build and export in a single command.
    • npm run assemble:clean: Performs a clean build and then exports.
    # Development
npm run dev

# Building
npm run build
npm run build:clean

# Export & Assembly
npm run export
npm run assemble
npm run assemble:clean

# Other
npm start
npm run lint

  6. Merge Tailwind CSS classes with cn()

    main

    The cn utility function is used to conditionally join CSS class names and resolve Tailwind CSS class conflicts. It combines clsx for conditional logic and tailwind-merge to ensure that the last class provided for a specific property wins (preventing style collisions). This is the standard way to manage dynamic or overriding styles in this project.

    import { cn } from "@/lib/utils";

// Example usage with conditional classes and Tailwind overrides
const className = cn(
  "base-class text-red-500", // Base styles
  isError && "border-red-500", // Conditional style
  "text-blue-500" // This will override text-red-500 due to twMerge
);