Skip to content

Add React-TypeScript-Vite frontend with FastAPI backend#19

Draft
Copilot wants to merge 13 commits intomainfrom
copilot/add-react-typescript-vite-frontend
Draft

Add React-TypeScript-Vite frontend with FastAPI backend#19
Copilot wants to merge 13 commits intomainfrom
copilot/add-react-typescript-vite-frontend

Conversation

Copy link
Contributor

Copilot AI commented Feb 19, 2026

Replaces the Streamlit UI with a modern React frontend and exposes existing RAG functionality via a FastAPI backend with SQLite persistence.

Backend (/backend)

  • FastAPI app with REST + WebSocket endpoints: /api/health, /api/chat (HTTP & WS streaming), /api/documents (upload + list), /api/models, /api/auth/token
  • JWT auth with optional API key support (X-API-Key header), anonymous fallback for local dev
  • SQLite via SQLModel + Alembic for chat session/message persistence (ChatSession, ChatMessage)
  • Existing LamaCppClient, Chroma, ConversationHandler wired through API routes without modification
  • Path traversal protection on document upload (filename sanitization via Path.name)

Frontend (/frontend)

  • Vite + React 19 + TypeScript scaffold with TailwindCSS v4
  • ChatGPT-style dark UI: sidebar (session list, document manager, model/strategy selector, settings), message area with markdown rendering (react-markdown), streaming cursor
  • Zustand for state, React Query + Axios for data fetching, native WebSocket for token streaming
  • Components: Sidebar, ChatArea, MessageBubble, ChatInput, ModelSelector, SettingsPanel

Infrastructure

  • docker-compose.yml: backend (FastAPI/uvicorn) + frontend (multi-stage Node build → Nginx) with volume mounts for models/, vector_store/, docs/
  • Nginx config with SPA routing and /api/ reverse proxy with WebSocket upgrade
  • Makefile targets: frontend-{install,build,test}, backend-{install,test}, docker-{up,down}

Tests

  • 11 backend pytest tests (health, auth, chat CRUD, WebSocket streaming, models/strategies) using TestClient with in-memory SQLite
  • 14 frontend Vitest + React Testing Library tests (ChatInput, MessageBubble, chatStore)
  • All existing tests unaffected

Example: Chat via API

# Get a token
curl -X POST http://localhost:8000/api/auth/token -H 'Content-Type: application/json' -d '{"username":"dev"}'

# Send a message
curl -X POST http://localhost:8000/api/chat/ -H 'Content-Type: application/json' \
  -d '{"message":"What is RAG?","use_rag":true,"k":2}'

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI and others added 9 commits February 19, 2026 16:07
Create backend directory with REST and WebSocket API endpoints:
- Health, auth, chat, models, and documents endpoints
- SQLModel database models for chat persistence
- JWT and API key authentication
- Alembic migration support
- Pydantic request/response schemas

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Remove unused chatbot imports from chat endpoint
- Add logging for document listing failures
- Filter chat history by message ID instead of list slicing

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Create test suite covering health, auth, chat, and models endpoints using
FastAPI TestClient with in-memory SQLite database. Tests include session
CRUD, WebSocket streaming, JWT token creation/validation, and model listing.

Add '.' to pytest pythonpath to enable backend package imports.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…ersistence, and tests

Co-authored-by: umbertogriffo <1609440+umbertogriffo@users.noreply.github.com>
- Add TypeScript types for chat sessions, messages, documents, settings
- Add Axios API client with all backend endpoints + WebSocket support
- Add Zustand store for chat state management
- Add React Query hooks for data fetching, mutations, and streaming
- Add UI components: Sidebar, ChatArea, MessageBubble, ChatInput,
  ModelSelector, SettingsPanel
- Configure TailwindCSS v4 with dark theme
- Configure Vite dev server proxy for API and WebSocket
- Remove default Vite scaffold files

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Configure Vitest in vite.config.ts with jsdom environment
- Add test setup file with jest-dom matchers
- Add test-utils with QueryClient wrapper for component tests
- Add ChatInput tests (render, send, clear, empty, disabled)
- Add MessageBubble tests (user/assistant messages, sources, markdown)
- Add chatStore tests (state, addMessage, toggleSidebar, settings, streaming)
- Add test script to package.json

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add Dockerfiles for backend (FastAPI/uvicorn) and frontend (React+Vite
with nginx), nginx reverse proxy config, and docker-compose.yml to
orchestrate both services with volume mounts for data directories.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…itignore

Co-authored-by: umbertogriffo <1609440+umbertogriffo@users.noreply.github.com>
Co-authored-by: umbertogriffo <1609440+umbertogriffo@users.noreply.github.com>
Copilot AI changed the title [WIP] Add React-TypeScript-Vite frontend with FastAPI backend Add React-TypeScript-Vite frontend with FastAPI backend Feb 19, 2026
Copilot AI requested a review from umbertogriffo February 19, 2026 16:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants