No description
Find a file
SamoilenkoVadym ff840c9842 Complete full-featured UI with sidebar, navigation, and analytics
Alembic Migration:
- 001_initial_migration.py - Create all database tables
- Users, Sessions, Conversations, Messages, TokenUsage, UserMemory
- Proper indexes and foreign keys with cascade deletes
- Ready for production deployment

ChatList Sidebar:
- List all conversations with last message date
- Click to select and load conversation
- New Chat button at top
- Inline title editing (click ✏️ Rename)
- Archive conversations (hidden from list)
- Delete conversations with confirmation
- Dropdown menu (⋮) for actions
- Active conversation highlighting
- Empty state with helpful message

TokenUsageDashboard:
- Total tokens and cost display
- 7/30/90 days period selector
- Bar chart visualization for last 7 days
- Detailed daily breakdown table
- Average tokens per day calculation
- Hover tooltips on chart bars
- Responsive grid layout

App Layout:
- Sidebar toggle button (☰)
- Navigation tabs: 💬 Chat | 📊 Usage
- Collapsible sidebar (mobile friendly)
- User info and logout in header
- Full-height layout with proper overflow
- Persistent sidebar state

Layout Styles (layout.css):
- Complete app structure (header, sidebar, main content)
- Responsive sidebar (full-screen on mobile)
- Chat list item styles with hover effects
- Dropdown menu positioning
- Token dashboard cards and charts
- Chart bar animations
- Mobile-optimized breakpoints

UI Features:
- Sidebar can be toggled on/off
- Switch between Chat and Usage views
- Conversations load on app start
- Active conversation tracked in sidebar
- Inline editing with ✓/✕ buttons
- Confirmation dialog for deletions
- Loading states for all operations
- Error handling with user feedback

Theme Updates:
- Chat container now full-height
- Removed max-width restriction
- Better integration with sidebar layout

All functionality now complete:
 MSAL authentication
 Conversation management (CRUD)
 Message sending with AI responses
 Sidebar with conversation list
 Token usage analytics dashboard
 Navigation between views
 Responsive design
 Full RAG enforcement
 Citation validation
 Multi-turn conversations

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-27 14:42:23 +00:00
backend Complete full-featured UI with sidebar, navigation, and analytics 2026-01-27 14:42:23 +00:00
frontend Complete full-featured UI with sidebar, navigation, and analytics 2026-01-27 14:42:23 +00:00
.gitignore Add comprehensive backend test suite and Phase 1 foundation 2026-01-27 14:24:59 +00:00
docker-compose.yml Add comprehensive backend test suite and Phase 1 foundation 2026-01-27 14:24:59 +00:00
QUICKSTART.md Add comprehensive backend test suite and Phase 1 foundation 2026-01-27 14:24:59 +00:00
README.md Add comprehensive backend test suite and Phase 1 foundation 2026-01-27 14:24:59 +00:00

APAC Ops Bot

AI-powered operations assistant for Oliver Agency's APAC region. Built with FastAPI, React, and OpenAI Responses API.

Features

  • 🔐 Azure AD Authentication - Secure SSO via MSAL with PKCE flow
  • 🤖 RAG-powered Chatbot - Strictly answers from Vector Store documents (no hallucinations)
  • 💬 Multi-turn Conversations - Maintains context across conversation history
  • 📊 Token Usage Tracking - Complete analytics and cost monitoring
  • 🎨 Dark & Gold UI - Beautiful, professional interface
  • 🐳 Dockerized - Easy deployment with Docker Compose

Tech Stack

Backend:

  • FastAPI (Python 3.11+)
  • PostgreSQL + SQLAlchemy
  • Redis
  • OpenAI Responses API
  • MSAL Authentication

Frontend:

  • React 18 + TypeScript
  • MSAL React
  • TailwindCSS
  • WebSocket for real-time

Prerequisites

  • Docker & Docker Compose
  • OpenAI API Key with access to Responses API
  • Azure AD Application (for MSAL authentication)

Quick Start

1. Clone the repository

git clone <repository-url>
cd apac-ops-bot

2. Configure environment variables

Backend:

cd backend
cp .env.example .env
# Edit .env with your actual values

Required environment variables:

  • SECRET_KEY - Generate with: openssl rand -hex 32
  • AZURE_TENANT_ID - Your Azure AD tenant ID
  • AZURE_CLIENT_ID - Your Azure AD application client ID
  • AZURE_CLIENT_SECRET - Your Azure AD application client secret
  • OPENAI_API_KEY - Your OpenAI API key

3. Start services with Docker Compose

# From project root
docker-compose up --build

This will start:

  • PostgreSQL (port 5432)
  • Redis (port 6379)
  • Backend API (port 8000)

4. Access the application

Development

Backend Development

# Install dependencies
cd backend
pip install -r requirements.txt
pip install -r requirements-dev.txt

# Run migrations
alembic upgrade head

# Start development server
uvicorn app.main:app --reload

Frontend Development

# Install dependencies
cd frontend
npm install

# Start development server
npm start

Database Migrations

# Create a new migration
alembic revision --autogenerate -m "description"

# Apply migrations
alembic upgrade head

# Rollback migration
alembic downgrade -1

Docker Commands

# Start all services
docker-compose up

# Start in detached mode
docker-compose up -d

# View logs
docker-compose logs -f backend

# Stop services
docker-compose down

# Rebuild containers
docker-compose up --build

# Run migrations in container
docker-compose exec backend alembic upgrade head

# Access PostgreSQL
docker-compose exec postgres psql -U apac_ops_bot

Project Structure

apac-ops-bot/
├── backend/                # FastAPI backend
│   ├── app/
│   │   ├── api/           # API endpoints
│   │   ├── models/        # SQLAlchemy models
│   │   ├── schemas/       # Pydantic schemas
│   │   ├── services/      # Business logic
│   │   ├── repositories/  # Data access layer
│   │   └── core/          # Security, middleware
│   ├── alembic/           # Database migrations
│   └── tests/             # Backend tests
│
├── frontend/              # React frontend
│   └── src/
│       ├── components/    # React components
│       ├── context/       # State management
│       ├── hooks/         # Custom hooks
│       └── services/      # API services
│
└── docker-compose.yml     # Docker services configuration

API Documentation

Once the backend is running, access the interactive API documentation at:

Security

  • All code and comments are in English only
  • Strict RAG-only responses (no AI hallucinations)
  • MSAL PKCE flow for authentication
  • Token hashing before storage
  • Rate limiting enabled
  • CORS configured
  • SQL injection protection via ORM

Testing

# Backend tests
cd backend
pytest

# Frontend tests
cd frontend
npm test

Deployment

See DEPLOYMENT.md for production deployment instructions.

Contributing

  1. All code, comments, and commit messages must be in English
  2. Follow existing code style (Black for Python, Prettier for TypeScript)
  3. Write tests for new features
  4. Update documentation as needed

License

Proprietary - Oliver Agency

Support

For issues and questions, please contact the development team.