Spaces:
Sleeping
Sleeping
File size: 4,768 Bytes
aa63765 ef83e66 aa63765 ef83e66 90160c5 aa63765 b6650bb aa63765 ef83e66 aa63765 ef83e66 90160c5 ef83e66 aa63765 ef83e66 aa63765 ef83e66 aa63765 ef83e66 0122657 9513bb7 0122657 90160c5 9513bb7 90160c5 9513bb7 90160c5 4c04529 90160c5 4c04529 90160c5 4c04529 0122657 4c04529 90160c5 9513bb7 90160c5 9513bb7 90160c5 9513bb7 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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
## 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
```
### Tenant & Role selector
- The navbar widget now stores both the tenant ID and the MCP role (Viewer, Editor, Admin, Owner) in `localStorage`.
- Every API call automatically includes `x-tenant-id` and `x-user-role` headers so the backend RBAC layer can authorize ingestion, admin rule uploads, analytics, and delete operations.
- If you see a 403 "insufficient permissions" error, switch the role dropdown to a higher privilege (e.g., Admin) before retrying the action.
- **Note**: Analytics is now accessible to all roles (viewer, editor, admin, owner) for improved transparency.
## Features
### Main Landing Page (`/`)
- **Hero section** with platform introduction
- **Feature grid** showcasing key capabilities
- **Chat panel** for real-time AI conversations with reasoning visualizations
- **Analytics panel** with query metrics and tool usage statistics
- **Ingestion card** for quick document uploads
### Real-Time Visualizations
The frontend includes three powerful visualization components:
#### 1. Reasoning Path Visualizer (`reasoning-visualizer.tsx`)
- Step-by-step visualization of agent decision-making
- Animated progression through reasoning steps
- Status indicators and detailed metrics
- Integrated into chat panel with collapsible section
#### 2. Tool Invocation Timeline (`tool-timeline.tsx`)
- Visual timeline of tool executions
- Latency and result count visualization
- Summary statistics
- Integrated into chat panel
#### 3. Tenant Activity Heatmap (`tenant-heatmap.tsx`)
- Query activity heatmap (hour-by-hour, day-by-day)
- Per-tool usage trends
- Integrated into analytics page
### 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 + role 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
### Analytics Page (`/analytics`)
- **Analytics overview** with key metrics (queries, users, red flags)
- **Tool usage statistics** with detailed breakdowns
- **Tenant activity heatmap** showing query patterns over time
- **Per-tool usage trends** with visual bar charts
- **Access**: All roles can view analytics (viewer, editor, admin, owner)
### Components
- `chat-panel.tsx` - Real-time chat interface with streaming responses and visualization integration
- `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
- `reasoning-visualizer.tsx` - Real-time reasoning path visualizer component
- `tool-timeline.tsx` - Tool invocation timeline component
- `tenant-heatmap.tsx` - Tenant activity heatmap 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.
|