# DocuMente Frontend

Modern React-based web interface for DocuMente - Sistema di Retrieval Agentico con AI.

## 🚀 Features

- **Authentication**: API Key-based login
- **Dashboard**: System overview with stats and recent documents
- **Documents**: Drag & drop upload, document management
- **Chat**: Conversational interface with RAG and source citations
- **Settings**: Theme toggle (light/dark), LLM provider selection
- **Responsive**: Mobile-friendly design

## 🛠️ Tech Stack

- **React 18** - UI library
- **TypeScript** - Type safety
- **Vite** - Build tool
- **Tailwind CSS** - Styling
- **shadcn/ui** - UI components
- **Zustand** - State management
- **Axios** - HTTP client
- **React Router** - Routing

## 📦 Installation

```bash
cd frontend
npm install
```

## 🔧 Development

```bash
# Start development server
npm run dev

# Server runs at http://localhost:3000
```

## 🔨 Build

```bash
# Build for production
npm run build

# Preview production build
npm run preview
```

## 🌐 Environment Variables

Create `.env` file in frontend directory:

```env
VITE_API_URL=http://localhost:8000
```

## 📁 Project Structure

```
frontend/
├── src/
│   ├── components/
│   │   ├── layout/      # Layout components
│   │   └── ui/          # shadcn/ui components
│   ├── pages/           # Route pages
│   │   ├── Login.tsx
│   │   ├── Dashboard.tsx
│   │   ├── Documents.tsx
│   │   ├── Chat.tsx
│   │   └── Settings.tsx
│   ├── api/
│   │   └── client.ts    # API client
│   ├── stores/
│   │   ├── authStore.ts
│   │   ├── chatStore.ts
│   │   └── settingsStore.ts
│   ├── types/
│   │   └── index.ts     # TypeScript types
│   ├── lib/
│   │   └── utils.ts     # Utility functions
│   ├── App.tsx
│   └── main.tsx
├── public/
├── index.html
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts
```

## 🔐 Authentication

The frontend supports API Key authentication:

1. Enter your API key on the login page
2. The key is stored in localStorage
3. Sent with every request via `X-API-Key` header

## 🎨 Customization

### Themes
- Edit `src/index.css` for CSS variables
- Toggle between light/dark/system in Settings

### API Configuration
- Update `vite.config.ts` proxy settings
- Or set `VITE_API_URL` environment variable

### Adding Components

```bash
# Install shadcn/ui component
npx shadcn-ui@latest add button
```

## 📝 Available Scripts

| Script | Description |
|--------|-------------|
| `npm run dev` | Start dev server |
| `npm run build` | Build for production |
| `npm run preview` | Preview production build |
| `npm run lint` | Run ESLint |

## 🔗 API Endpoints

The frontend connects to these API endpoints:

- `GET /api/health` - Health check
- `GET /api/v1/documents` - List documents
- `POST /api/v1/documents` - Upload document
- `DELETE /api/v1/documents/:id` - Delete document
- `POST /api/v1/query` - Query with RAG
- `POST /api/v1/chat` - Chat endpoint
- `GET /api/v1/providers` - List providers
- `GET /api/v1/config` - Get config

## 🐛 Troubleshooting

### Build Errors
If you see TypeScript errors about unused variables:
```bash
# Check for unused imports
npm run lint
```

### API Connection Issues
Make sure the backend is running on port 8000, or update the proxy in `vite.config.ts`.

### CORS Errors
The Vite dev server proxies `/api` requests to the backend. For production, ensure CORS is configured on the backend.

## 📄 License

Same as the main project.