142 lines
4.4 KiB
Markdown
142 lines
4.4 KiB
Markdown
# 🚀 Readme File Overhaul — AI Project Editor Frontend
|
|
|
|
## Overview
|
|
|
|
This is the **Readme** document for the **Web MVP: AI Project Editor**, a cutting-edge front-end application designed to streamline project management and collaboration with AI-driven tools. The goal of this project is to provide users with an intuitive interface that integrates seamlessly with our backend system while offering powerful features such as file browsing, collaborative editing, and AI-assisted task tracking.
|
|
|
|
---
|
|
|
|
## Table of Contents
|
|
|
|
- [Getting Started](#getting-started)
|
|
- [Key Features](#key-features)
|
|
- [Project Structure](#project-structure)
|
|
- [Technical Details](#technical-details)
|
|
- [Installation & Setup](#installation-and-setup)
|
|
- [Contributing](#contributing)
|
|
- [Acknowledgments](#acknowledgments)
|
|
|
|
---
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
Before you begin, ensure your environment meets these requirements:
|
|
|
|
- Node.js v14.x or higher
|
|
- Docker Compose installed on your machine
|
|
|
|
### Installation & Setup
|
|
|
|
To set up the development environment:
|
|
|
|
1. Clone the repository:
|
|
```bash
|
|
git clone https://github.com/your-repo.git
|
|
```
|
|
|
|
2. Navigate into the project folder:
|
|
```bash
|
|
cd ai-project-editor-frontend
|
|
```
|
|
|
|
3. Install dependencies using npm:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
4. Start the local server:
|
|
```bash
|
|
docker-compose up --build
|
|
```
|
|
|
|
5. Open the frontend in your browser at:
|
|
- `http://localhost:8080`
|
|
|
|
### Running Backend Locally
|
|
|
|
The backend is also available via Docker Compose. To run it alongside the frontend:
|
|
|
|
1. Change directories to the backend location:
|
|
```bash
|
|
cd /path/to/backend-directory
|
|
```
|
|
|
|
2. Run the following command:
|
|
```bash
|
|
docker-compose up --build
|
|
```
|
|
|
|
3. Access the backend service at:
|
|
- `http://localhost:8081`
|
|
|
|
---
|
|
|
|
## Key Features
|
|
|
|
### Core Functionality
|
|
|
|
- **File Browsing**: Securely access files from user's local directory through `showDirectoryPicker` or fallback `input[webkitdirectory]`. Directories like `.git` are excluded automatically.
|
|
|
|
- **Recursive Tree View**: Recursively display folders and their contents, allowing users to navigate deep hierarchies easily.
|
|
|
|
- **Markdown Editing**: Create new Markdown files (.md) directly within the interface by clicking the "+MD" button.
|
|
|
|
- **Collaborative Review System**: Users can track changes made to documents, view diffs, and approve/reject individual files or sections.
|
|
|
|
- **Responsive Layout**: Three-column layout with default widths: 15%, 65%, and 20%.
|
|
|
|
- **Integration with Backend Services**: Real-time communication between frontend and backend includes:
|
|
- Post requests to `/api/rag/sessions` and polling for updates using `GET /api/rag/sessions/{rag_session_id}/jobs/{index_job_id}`.
|
|
- Chat dialogues via `POST /api/chat/dialogs` and messages via `POST /api/chat/messages` with real-time polled responses.
|
|
|
|
- **Validation**: Ensure all required fields in changesets are validated before processing ("create", "update", "delete").
|
|
|
|
- **Review Status Management**: Track review statuses including `pending`, `accepted_partial`, `accepted_full`, `rejected`, `conflict`, and `applied`.
|
|
|
|
- **Apply Accepted Changes**: Apply approved changes after verifying hashes and confirming deletion.
|
|
|
|
- **No Git Operations**: No direct interaction with Git repositories; no automatic application of edits.
|
|
|
|
---
|
|
|
|
## Technical Details
|
|
|
|
### Project Structure
|
|
|
|
The project is organized into several key components:
|
|
|
|
- **Frontend**: Built using Monaco Editor, React, and CSS modules.
|
|
- **Backend**: Uses RESTful APIs powered by Node.js and Express.
|
|
- **Database**: Stores user data and session information in MongoDB.
|
|
|
|
### Tools Used
|
|
|
|
- **Monaco Editor**: Powerful JavaScript-based editor embedded within the application.
|
|
- **React**: For building dynamic interfaces and managing state.
|
|
- **MongoDB**: Manages persistent storage for user sessions and configurations.
|
|
- **Docker Compose**: Facilitates easy deployment and integration testing.
|
|
|
|
---
|
|
|
|
## Contributing
|
|
|
|
If you'd like to contribute to this project, follow these steps:
|
|
|
|
1. Fork the repository.
|
|
2. Create a new branch for your feature or bug fix.
|
|
3. Make necessary changes and submit a pull request.
|
|
4. Discuss any major changes with the team beforehand.
|
|
|
|
---
|
|
|
|
## Acknowledgments
|
|
|
|
Special thanks to the developers who contributed to this project, including:
|
|
|
|
- Alex Semenov
|
|
- Codex 2026.02.23
|
|
- Team members
|
|
|
|
This project would not be possible without their dedication and expertise! |