IntegraChat / frontend /README.md
nothingworry's picture
imporvement in the UI in app.py
b6650bb
|
raw
history blame
2.87 kB
## 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.