StatGPT Portal Frontend

Frontend codebase for StatGPT portals.
StatGPT is an SDMX-driven platform for statistical organizations allowing to query,
transform, analyze, visualize, and interpret statistical data using natural language interface.
This repository providing reusable libraries and application example for building StatGPT Portals.
The application features a conversational interface powered by the DIAL API, optimized for working with SDMX data.

📋 Table of Contents

• ✨ Main Features
• 🏗️ Architecture Overview
• 🚀 Getting Started
  • 🛠️ Prerequisites
  • 📦 Installation
  • ▶️ Running Applications
  • 🏗️ Building Libraries
• 🏗️ Project Structure
• 🧑‍💻 Development
  • 🛠️ Prerequisites
  • 🧩 Development Setup
• 🎨 Styling
• 📚 Libraries
• 🧪 Testing
• 🔗 Related Resources
• 🤝 Contributing
• 🔒 Security
• 📄 License
• 🔗 Related Projects

✨ Main Features

• Modular Nx workspace with reusable libraries
• Example application for rapid prototyping
• Integration with Apis: SDMX and DIAL APIs
• Advanced UI components for data exploration and sharing
• Conversation Management: Create, read, update, and delete conversations
• Real-time Messaging: Stream responses from LLM models using Server-Sent Events
• Monorepo Architecture: Organized with Nx for scalable development
• Authentication Support: NextAuth.js integration for secure user authentication

🏗️ Architecture Overview

This project uses:

• Next.js with App Router for the frontend framework
• Nx Monorepo for project organization and tooling
• TypeScript for type safety
• Tailwind CSS for styling
• DIAL API for LLM backend integration
• React for building UI components
• NextAuth.js for authentication (optional)

🚀 Getting Started

🛠️ Prerequisites

• Node.js >= 22.19.0
• npm >= 11.0.0
• DIAL API access (for backend integration)

📦 Installation

Clone the repository and install dependencies:

git clone https://github.com/epam/statgpt-portal-frontend.git
cd statgpt-portal-frontend
npm install

▶️ Running Applications

To start a development server for an application (e.g., portals-example):

nx serve portals-example

Replace portals-example with the desired app name.

🏗️ Building Libraries

To build a library:

nx build <library-name>

🏗️ Project Structure

apps/
  portals-example/           # Example portal application
  ...
libs/
  conversation-view/         # Advanced conversation view components
  share-conversation/        # Conversation sharing utilities
  dial-toolkit/              # DIAL API integration toolkit
  sdmx-toolkit/              # SDMX API integration toolkit
  ...

🧑‍💻 Development

Prerequisites

• Node.js >= 22.19.0
• npm >= 11.0.0
• Git

Development Setup

1. Fork and Clone

   git clone https://github.com/epam/statgpt-portal-frontend.git
   cd statgpt-portal-frontend

2. Install Dependencies

   npm install

3. Set up environment variables.

   Create a .env file in the application directory:

   # DIAL API Configuration
   DIAL_API_URL=https://your-dial-api-endpoint.com
   DIAL_API_VERSION=your-dial-api-version
   DIAL_API_KEY=your-api-key
   DEFAULT_MODEL="ADD_VALUE_HERE"
   
   # SDMX API Configuration
   SDMX_API_URL=https://your-sdmx-api-endpoint.com

4. Start Development Environment

   # Start Vite dev server
   npm run start

   Once the server is up and running, open http://localhost:4200 in your browser to view the application.

🎨 Styling

The project uses Tailwind CSS with a custom theme configuration:

• Primary colors: Blue palette (CSS variables)
• Secondary colors: Slate/gray palette
• Custom animations: fade-in, slide-up, pulse-slow
• Custom spacing: Extended spacing scale
• Font families: Inter (sans), JetBrains Mono (mono)

See tailwind.config.js for the complete configuration.

📚 Libraries

You can find libraries with detailed documentation in the libs/ directory:

@statgpt/conversation-list

React components for managing conversation history.

@statgpt/conversation-view

React components for chat interface.

@statgpt/dial-toolkit

DIAL Api client library.

@statgpt/download-panel

React components for downloading SDMX data.

@statgpt/sdmx-toolkit

SDMX Api client library.

@statgpt/share-conversation

Utilities for sharing conversations via link or QR code.

@statgpt/shared-toolkit

Shared TypeScript interfaces.

@statgpt/ui-components

Reusable React components.

🧪 Testing

The project uses Jest for testing:

# Run all tests
npm run test

# Run tests for specific app/lib
npm run nx test portals-example
npm run nx test dial-toolkit

🔗 Related Resources

• DIAL API Documentation
• Next.js Documentation
• NX Documentation
• Tailwind CSS
• NextAuth.js Documentation

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details on:

• Code style guidelines
• Testing requirements
• Pull request process

🔒 Security

If you discover a security vulnerability, please refer to our Security Policy.

📄 License

MIT - see the LICENSE file for details.

🔗 Related Projects

• AI-DIAL - Entrypoint for all AI Dial projects

Made by EPAM Systems

`