## IntegraChat Frontend

Next.js 16 / React 19 app that showcases everything wired up in `backend/`.  
It provides a polished operator console with:

- **Hero section** + feature overview describing the FastAPI + MCP stack
- **Live chat panel** that POSTs to `POST /agent/message` for AI conversations
- **Analytics dashboard** pulling from `GET /analytics/overview` with real-time metrics
- **Knowledge base management** page (`/knowledge-base`) for document search and ingestion
- **Document ingestion UI** for uploading PDF, DOCX, TXT files or raw text
- **Feature grid** showcasing platform capabilities

**Note:** IntegraChat also includes a Gradio-based UI (`app.py`) with interactive visualizations, statistics cards, and Plotly charts. See the root `README.md` for details on running the Gradio interface.

## Running Locally

```bash
cd frontend
npm install
npm run dev
```

Visit `http://localhost:3000` for the main landing page, or `http://localhost:3000/knowledge-base` for document management.

### API configuration

The UI calls the FastAPI service through `NEXT_PUBLIC_API_URL` (default `http://localhost:8000`).  
Update `.env.local` if your backend runs elsewhere:

```
NEXT_PUBLIC_API_URL=http://localhost:8000
```

## Features

### Main Landing Page (`/`)
- **Hero section** with platform introduction
- **Feature grid** showcasing key capabilities
- **Chat panel** for real-time AI conversations
- **Analytics panel** with query metrics and tool usage statistics
- **Ingestion card** for quick document uploads

### Knowledge Base Page (`/knowledge-base`)
- **Document listing** with pagination and filtering by type (text, PDF, FAQ, link)
- **Search interface** for semantic search across documents
- **Document ingestion** with support for:
  - Raw text input
  - URL ingestion (automatic content fetching)
  - PDF file uploads
  - DOCX file uploads
  - TXT and Markdown file uploads
- **Document management** with tenant isolation:
  - Delete individual documents by ID
  - Delete all documents for a tenant (with confirmation)
  - Real-time document list updates after operations
  - Error handling with clear user feedback

### Components

- `chat-panel.tsx` - Real-time chat interface with streaming responses
- `analytics-panel.tsx` - Analytics dashboard with metrics visualization
- `knowledge-base-panel.tsx` - Document search and ingestion component
- `ingestion-card.tsx` - Quick document upload card
- `hero.tsx` - Landing page hero section
- `feature-grid.tsx` - Feature showcase grid
- `footer.tsx` - Footer component

## Deploy

Deploy like any Next.js app (Vercel, Docker, etc.). Ensure the backend endpoints are reachable from the browser and CORS is enabled (already configured in `backend/api/main.py`).

**Note:** Make sure Celery workers are running in production for document ingestion and analytics processing to work properly.