Spaces:
Sleeping
Sleeping
File size: 2,873 Bytes
aa63765 ef83e66 aa63765 ef83e66 90160c5 aa63765 b6650bb aa63765 ef83e66 aa63765 ef83e66 90160c5 ef83e66 aa63765 ef83e66 aa63765 ef83e66 aa63765 ef83e66 90160c5 4c04529 90160c5 4c04529 90160c5 4c04529 90160c5 aa63765 ef83e66 aa63765 90160c5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
## 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.
|