A modern, responsive React TypeScript frontend for AI chatbot applications with FastAPI backend integration. Built with Vite, TailwindCSS, and featuring a sleek red, black, and purple color scheme.
- Real-time Chat Interface - Smooth, scrollable chat with message history
- FastAPI Integration - Seamless connection to Python FastAPI backend
- Message Management - Persistent chat history with timestamps
- Loading States - Elegant loading animations and status indicators
- Robust Error Handling - Comprehensive error catching with user-friendly messages
- Retry Mechanism - Automatic and manual retry options for failed requests
- Connection Status - Real-time API health monitoring with visual indicators
- Request Timeouts - Configurable timeout handling (30s default)
- Error Boundaries - Application-wide error recovery
- Auto-resizing Input - Smart textarea that grows with content
- Character Limits - 4000 character limit with real-time counter
- Keyboard Shortcuts - Enter to send, Shift+Enter for new lines, Esc to clear errors
- Message Validation - Input sanitization and validation
- Visual Feedback - Loading dots, character counts, and status indicators
- Mobile-First - Fully responsive design for all screen sizes
- Sidebar Navigation - Collapsible sidebar with chat history, prompts, documents, and tools
- Modern UI - Clean, professional interface with smooth animations
- Accessibility - ARIA labels, keyboard navigation, and screen reader support
- Environment Configuration - Configurable API endpoints and settings
- Performance Optimized - React.memo implementation and efficient re-renders
- TypeScript - Full type safety throughout the application
- Modular Architecture - Clean separation of concerns and reusable components
- Node.js 18+
- npm or yarn
- FastAPI backend running on
localhost:8000(or configured endpoint)
-
Clone and navigate to the project
cd "c:\Users\risha\python-dir\KnowledgeBase\ChatUI" -
Install dependencies
npm install
-
Configure environment (optional)
Copy-Item .env.example .env # Edit .env with your API settings
-
Start development server
npm run dev
-
Open in browser
http://localhost:5173
Create a .env file in the root directory:
# API Configuration
VITE_API_BASE_URL=http://localhost:8000
VITE_API_TIMEOUT=30000
VITE_API_RETRY_ATTEMPTS=3
# Development Settings
VITE_DEV_MODE=true
VITE_LOG_LEVEL=debugThe frontend expects the following FastAPI endpoints:
-
POST /chat- Send chat messages{ "message": "Your message here" } -
GET /health- Health check (optional)
Expected response format:
{
"message": "AI response here",
"success": true
}src/
├── components/ # React components (organized by feature)
│ ├── chat/ # Chat-related components
│ │ ├── ChatContainer.tsx # Main chat interface
│ │ ├── Message.tsx # Individual message component
│ │ ├── LoadingDots.tsx # Loading animation
│ │ └── index.ts # Chat components barrel export
│ ├── layout/ # Layout and structural components
│ │ ├── Sidebar.tsx # Navigation sidebar
│ │ ├── ErrorBoundary.tsx # Error handling wrapper
│ │ └── index.ts # Layout components barrel export
│ ├── ui/ # Reusable UI components
│ │ ├── ConnectionStatus.tsx # API status indicator
│ │ └── index.ts # UI components barrel export
│ └── index.ts # Main components barrel export
├── hooks/ # Custom React hooks
│ ├── useAutoResize.ts # Auto-resizing textarea hook
│ ├── useDebounce.ts # Debouncing hook
│ └── index.ts # Hooks barrel export
├── utils/ # Utility functions
│ └── index.ts # Validation, formatting, helper functions
├── constants/ # Application constants
│ └── index.ts # Configuration constants and enums
├── services/ # API service layer
│ └── chatService.ts # FastAPI integration
├── types/ # TypeScript definitions
│ └── chat.ts # Chat-related types
├── config/ # Configuration
│ └── api.ts # API configuration
├── styles/ # Global styles
│ ├── App.css # Component styles
│ └── index.css # Global styles
└── assets/ # Static assets
└── react.svg # Icons and images
- Primary (Red):
#ef4444- User messages, buttons, accents - Secondary (Black/Gray):
#0f172a- Text, backgrounds, borders - Accent (Purple):
#a855f7- Highlights, gradients, special elements
Colors are defined in tailwind.config.js and can be easily customized:
colors: {
primary: {
500: '#ef4444', // Main red
// ... other shades
},
secondary: {
900: '#0f172a', // Main black
// ... other shades
},
accent: {
500: '#a855f7', // Main purple
// ... other shades
}
}# Development
npm run dev # Start development server
# Building
npm run build # Build for production
npm run preview # Preview production build
# Code Quality
npm run lint # Run ESLint
npm run type-check # TypeScript type checkingYour FastAPI backend should have:
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
app = FastAPI()
# Enable CORS for frontend
app.add_middleware(
CORSMiddleware,
allow_origins=["http://localhost:5173"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
class ChatMessage(BaseModel):
message: str
@app.post("/chat")
async def chat_endpoint(chat_message: ChatMessage):
# Your AI logic here
response = await process_ai_message(chat_message.message)
return {"message": response}
@app.get("/health")
async def health_check():
return {"status": "healthy"}- TypeScript - Strict type checking enabled
- ESLint - Code linting with React best practices
- Error Handling - Comprehensive error boundaries and validation
- Performance - Optimized components with React.memo
- Accessibility - ARIA labels and keyboard navigation
- Unit tests for components (Jest + React Testing Library)
- Integration tests for API calls
- E2E testing with Playwright or Cypress
- Manual testing checklist in
CODE_QUALITY_IMPROVEMENTS.md
-
API Connection Failed
- Check if FastAPI backend is running on correct port
- Verify CORS settings in backend
- Check network connectivity
-
Build Errors
- Clear node_modules:
Remove-Item -Recurse -Force node_modules; npm install - Check TypeScript errors:
npm run type-check
- Clear node_modules:
-
Performance Issues
- Check for unnecessary re-renders in React DevTools
- Verify large message history isn't causing slowdowns
- Ensure Node.js version is 18+
- Check if ports 5173+ are available
- Verify environment variables are set correctly
- Code Quality Improvements - Detailed list of improvements and fixes
- Component Documentation - Individual component README files
- API Documentation - Service layer documentation
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
- Use TypeScript strict mode
- Follow React best practices
- Implement proper error handling
- Add accessibility features
- Write meaningful commit messages
This project is licensed under the MIT License.
- Message persistence with local storage
- File upload support
- Voice message integration
- Multi-language support
- Theming system
- Plugin architecture
- Advanced markdown rendering
- Message search functionality
Built with ❤️ using React, TypeScript, and TailwindCSS