WellysAI Web

A modern chat interface application for Wellysa AI, built with Next.js 16 and React 19. This application provides an interactive conversational experience with integrated profile management, internationalization, and comprehensive health monitoring.

Tech Stack

Framework & Runtime

• Next.js 16.1.3 - React framework with App Router
• React 19.2.3 - UI library with React Compiler enabled
• TypeScript 5 - Type-safe development

UI & Styling

• Tailwind CSS 4 - Utility-first CSS framework
• Radix UI - Accessible component primitives (alert dialogs, dropdowns, switches, separators)
• Lucide React - Icon library
• class-variance-authority - Component variant management
• tw-animate-css - Tailwind animation utilities

Features

• Internationalization (i18n) support: English and Polish
• Real-time chat interface with streaming responses
• Customizable user profiles and settings
• Theme management (dark/light mode support)
• Health checks and metrics endpoints for monitoring

Getting Started

Prerequisites

• Node.js 20+ (recommended)
• npm, yarn, pnpm, or bun

Installation

# Clone the repository
git clone https://github.com/Wellysa/wellysai-web.git
cd wellysai-web

# Install dependencies
npm install

Development

# Start the development server
npm run dev

# Start with other package managers
yarn dev
pnpm dev
bun dev

Open http://localhost:3000 to view the application in your browser. The page auto-updates as you edit files.

Build & Production

# Build for production
npm run build

# Start production server
npm run start

# Lint the codebase
npm run lint

Architecture Overview

Directory Structure

src/
├── app/                          # Next.js App Router pages
│   ├── api/
│   │   └── wellysa-chat/        # Chat API endpoint (streaming)
│   ├── health/                  # Health check endpoint
│   ├── metrics/                 # Metrics endpoint
│   ├── profile/                 # User profile page
│   ├── readme/                  # README metadata endpoint
│   ├── settings/                # Settings page
│   ├── layout.tsx               # Root layout
│   ├── page.tsx                 # Home page (chat interface)
│   └── globals.css              # Global styles
├── components/
│   ├── chat/                    # Chat feature components
│   │   ├── api/                 # Chat API client
│   │   ├── composer/            # Message composer (editor, attachments, send)
│   │   ├── hooks/               # Chat-related hooks (history, messages, scroll, composer)
│   │   ├── toolbar/             # Chat toolbar
│   │   ├── chat-bubble.tsx
│   │   ├── chat-empty.tsx
│   │   ├── chat-messages.tsx
│   │   ├── chat-screen.tsx
│   │   ├── recommended-package-callout.tsx
│   │   ├── types.ts
│   │   └── typing-indicator.tsx
│   ├── profile/                 # Profile feature components
│   │   ├── hooks/               # Profile hooks
│   │   └── types.ts
│   ├── settings/                # Settings feature components
│   │   └── hooks/               # Settings hooks (theme management)
│   ├── ui/                      # Reusable UI components (shadcn/ui style)
│   └── app-shell.tsx            # Main application shell
├── i18n/                        # Internationalization
│   └── dictionaries/
│       ├── en/                  # English translations
│       └── pl/                  # Polish translations
├── lib/                         # Utility libraries
└── utils/                       # Helper functions

Key Features

Chat System

• Streaming chat interface with Wellysa AI
• Message history management
• Auto-scroll behavior
• Typing indicators
• Rich text composer with attachment support
• Recommended package callouts

User Management

• Profile customization
• Settings panel with theme toggle
• Persistent user preferences

Internationalization

• Multi-language support (EN/PL)
• Dictionary-based translation system

Monitoring

• /health - Health check endpoint for uptime monitoring
• /metrics - Application metrics endpoint

API Endpoints

Endpoint	Method	Description
/api/wellysa-chat	POST	Main chat endpoint with streaming support
/health	GET	Health check endpoint
/metrics	GET	Application metrics
/readme	GET	README metadata endpoint

Development Notes

• React Compiler: This project uses babel-plugin-react-compiler (v1.0.0) for automatic React optimization
• Font Optimization: Uses next/font for optimized font loading (unverified — confirm with team)
• Component Library: UI components follow shadcn/ui patterns with Radix UI primitives
• Styling: Configured with Tailwind CSS 4 and PostCSS

Environment Configuration

(unverified — confirm with team)

Required environment variables for chat API integration and backend services should be configured in .env.local. Check with the team for:

• API base URLs
• Authentication tokens
• Feature flags
• Third-party service credentials

Deployment

This application is optimized for deployment on Vercel, the platform from the creators of Next.js:

For other platforms, consult the Next.js deployment documentation.

Contributing

(unverified — confirm with team)

Please follow the existing code style and run npm run lint before submitting changes. Ensure TypeScript strict mode compliance and maintain test coverage for new features.

License

(unverified — confirm with team)

---

Built with ❤️ by the Wellysa team