MQL5-Google-Onedrive/pentagi/frontend

PegtAGI Frontend

A chat application built with React, TypeScript, and GraphQL that enables intelligent conversations with AI agents.

Features

• 💬 Real-time chat interface with AI agents
• 🤖 Multiple AI agent support and management
• 📊 Real-time terminal output monitoring
• 🎯 Task and subtask tracking system
• 🔍 Integrated search capabilities
• 📚 Vector store for knowledge base management
• 📸 Screenshot capture and management
• 🌓 Dark/Light theme support
• 📱 Responsive design (mobile, tablet, desktop)
• 🔐 Authentication system with multiple providers
• 🔄 Real-time updates via GraphQL subscriptions
• ⚡ High-performance React components

Tech Stack

• Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• UI Components:
  • shadcn/ui
  • Radix UI primitives
  • Lucide icons
• State Management:
  • React Context
  • Custom Hooks
• API Integration:
  • GraphQL
  • Apollo Client
  • WebSocket subscriptions
• Type Safety: TypeScript
• Authentication: Multiple provider support
• Code Quality:
  • ESLint
  • Prettier
  • TypeScript strict mode

Project Structure

src/ ├── components/ # Shared UI components │ ├── ui/ # Base UI components │ └── icons/ # SVG icons and logo ├── features/ # Feature-based modules │ ├── chat/ # Chat related components │ ├── authentication/ # Auth related components ├── hooks/ # Custom React hooks ├── lib/ # Utilities and configurations ├── graphql/ # GraphQL operations and types ├── models/ # TypeScript interfaces └── pages/ # Application routes

Key Components

Chat Interface

• Split view with messages and tools panels
• Resizable panels for desktop
• Mobile-optimized view with tabs
• Real-time message updates

Task System

• Real-time task tracking
• Subtask management
• Progress monitoring
• Status updates

Terminal

• Command output display
• Real-time updates
• Scrollable history
• Syntax highlighting

Vector Store

• Knowledge base integration
• Search capabilities
• Data management

Agent System

• Multi-agent support
• Agent status monitoring
• Agent communication logs

Development

Prerequisites

• Node.js 18+
• npm 8+

Installation

1. Clone the repository
2. Install dependencies: npm install
3. Start the development server: npm run dev

Building for Production

npm run build

Environment Variables

Create a .env file in the root directory:

VITE_API_URL=your_api_url

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request