Skip to content

feat: Implement React-TypeScript-Vite frontend with FastAPI backend to have more flexibility compared to Streamlit#10

Draft
umbertogriffo wants to merge 13 commits intomainfrom
umberto/add-ts-frontend
Draft

feat: Implement React-TypeScript-Vite frontend with FastAPI backend to have more flexibility compared to Streamlit#10
umbertogriffo wants to merge 13 commits intomainfrom
umberto/add-ts-frontend

Conversation

@umbertogriffo
Copy link
Owner

@umbertogriffo umbertogriffo commented Feb 28, 2025

This pull request introduces significant improvements to both the backend and frontend of the chatbot application, focusing on enabling true asynchronous, concurrent LLM inference, and scaffolding a new React-based frontend.

The backend now uses thread pools to offload CPU-bound LLM operations, ensuring the event loop remains responsive during concurrent requests.

The frontend is bootstrapped with Vite, React, and TypeScript, including configuration, dependencies, and development documentation.

Backend: Asynchronous LLM Inference and Concurrency Improvements

  • Refactored the LamaCppClient and context synthesis strategies to use thread pools for CPU-bound LLM operations, ensuring thread safety and enabling concurrent prompt generation and answer synthesis without blocking the event loop. This includes the use of threading.Lock for model access and the use of asyncio.get_event_loop().run_in_executor for all LLM calls.

  • Updated the context synthesis (AsyncTreeSummarizationStrategy) to generate prompts and answers in parallel using asyncio, significantly improving performance for multi-chunk responses.

  • Removed unnecessary dependencies and blocking event loop hacks (such as nest_asyncio) in favour of proper asynchronous execution.

Backend: API and Application Structure

  • Added a new FastAPI application in main.py, including CORS support, health check, and a placeholder /api/chat/ endpoint for chatbot queries.

Frontend: Project Bootstrapping and Tooling

  • Bootstrapped a new React + TypeScript + Vite frontend, including:
    • Initial project structure, index.html, and App.css for styling.
    • ESLint configuration for React, TypeScript, and recommended hooks/linting rules.
    • package.json with dependencies for React, MUI, axios, and development tools.
    • .gitignore for node, logs, and editor files.
    • README.md with setup and development instructions.

Other Minor Backend Fixes

  • Updated batch context joining to use list(text_batch) for clarity.
  • Modernised event loop usage in conversation_handler.py to use asyncio.run instead of get_event_loop().run_until_complete.

@umbertogriffo umbertogriffo self-assigned this Feb 28, 2025
@umbertogriffo umbertogriffo changed the title feat: Implement frontend with Typescript to have more flexibility compared to Streamlit feat: Implement frontend with Typescript and Vite to have more flexibility compared to Streamlit Feb 28, 2025
@umbertogriffo umbertogriffo requested a review from Copilot April 26, 2025 10:37
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR implements a new FastAPI backend and a React frontend using TypeScript and Vite, enhancing the chatbot application's flexibility and development environment.

  • Introduces a FastAPI app with endpoints and middleware for the backend.
  • Sets up a React-based frontend with Material-UI components and configuration files for Vite, ESLint, and TypeScript.

Reviewed Changes

Copilot reviewed 14 out of 21 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
frontend/vite.config.ts Basic Vite configuration for a React project
frontend/src/main.tsx Initializes the React app and connects it with the root element
frontend/src/components/SearchBar.tsx Implements a search bar with Material-UI, including option toggling
frontend/src/components/ChatWindow.tsx Provides a chat message display component using Material-UI
frontend/src/App.tsx Main application container managing theme, chat messages, and API calls
frontend/index.html Defines the HTML entry point for the React app
frontend/eslint.config.js Configures ESLint for TypeScript and React-related linting
frontend/README.md Outlines instructions for setting up and using the React TypeScript project
chatbot/main.py New FastAPI backend with endpoints, logging, and CORS middleware
Files not reviewed (7)
  • frontend/.gitignore: Language not supported
  • frontend/package.json: Language not supported
  • frontend/src/App.css: Language not supported
  • frontend/src/index.css: Language not supported
  • frontend/tsconfig.app.json: Language not supported
  • frontend/tsconfig.json: Language not supported
  • frontend/tsconfig.node.json: Language not supported

backend/main.py Outdated

Code: `code`

- Go fuck yourself!
Copy link

Copilot AI Apr 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The markdown response contains unprofessional language which should be removed or replaced to maintain a professional tone in production.

Suggested change
- Go fuck yourself!
- Thank you for your patience!

Copilot uses AI. Check for mistakes.
@umbertogriffo umbertogriffo force-pushed the umberto/add-ts-frontend branch from ddecfe0 to e98e90a Compare November 1, 2025 14:14
@umbertogriffo umbertogriffo force-pushed the umberto/add-ts-frontend branch from 6bf6e28 to 6c4fb24 Compare February 19, 2026 15:25
@umbertogriffo umbertogriffo changed the title feat: Implement frontend with Typescript and Vite to have more flexibility compared to Streamlit feat: Implement React-TypeScript-Vite frontend with FastAPI backend to have more flexibility compared to Streamlit Feb 21, 2026
umbertogriffo and others added 7 commits February 21, 2026 16:40
* Initial plan

* Modernise RAG Chatbot: backend API layer, Tailwind UI, WebSocket streaming, and API tests

Co-authored-by: umbertogriffo <1609440+umbertogriffo@users.noreply.github.com>

* feat: refactor WebSocket handling and improve error logging in chat stream

* feat: refactor WebSocket handling and improve error logging in chat stream

* feat: update API endpoints and WebSocket paths for improved routing

* feat: update chat endpoint to use LamaCppClient dependency and add comprehensive tests

* feat: update chat endpoint to use LamaCppClient dependency and add comprehensive tests

* feat: update chat endpoint to use LamaCppClient dependency and add comprehensive tests

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: umbertogriffo <1609440+umbertogriffo@users.noreply.github.com>
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.

3 participants