From ddedb2b1748f61d0ea915f5266bdfaeae3aa86a3 Mon Sep 17 00:00:00 2001 From: Andrew Charneski Date: Sun, 8 Dec 2024 19:16:06 -0500 Subject: [PATCH] Update README.md --- webapp/README.md | 284 +++++++++++++++++++---------------------------- 1 file changed, 116 insertions(+), 168 deletions(-) diff --git a/webapp/README.md b/webapp/README.md index a8d3d2b5..7e1604b9 100644 --- a/webapp/README.md +++ b/webapp/README.md @@ -1,211 +1,159 @@ -Here's a detailed README.md for the chat application: +# Chat Web Application -# Chat Application - -A modern, feature-rich chat application built with React, TypeScript, and Redux Toolkit. This application provides real-time messaging, theme customization, and -a responsive design with enterprise-grade features. - -## Key Features - -### Real-Time Communication - -* WebSocket-based messaging with automatic reconnection -* Message versioning and deduplication -* HTML content sanitization -* Configurable retry attempts and timeouts - -### Rich UI Features - -* Multiple theme options (Main, Night, Forest, Pony, Alien) -* Responsive layout with styled-components -* Modal system for dialogs -* Tab-based content organization - -### Developer Experience - -* TypeScript type safety -* Redux DevTools integration -* Hot module replacement +A modern, feature-rich chat web application built with React, TypeScript, and WebSocket communication. ## Features -## Technology Stack - -### Core - -* React 18 -* TypeScript 4.9 -* Redux Toolkit -* Styled Components - -### UI Components - -* Font Awesome icons -* QR Code generator - -### Security & Data - -* WebSocket protocol -* Local storage persistence +### Core Functionality +- Real-time chat messaging using WebSocket connections +- Support for HTML and Markdown message formatting +- Message history and threading +- Reference message linking +- Code syntax highlighting with Prism.js +- Mermaid diagram support +- QR code generation + +### UI/UX +- Multiple theme support with smooth transitions +- Responsive design with mobile optimization +- Accessible components following ARIA guidelines +- Rich text editor with Markdown toolbar +- Message preview mode +- Loading states and error handling +- Archive mode for offline viewing + +### Themes +- 8 built-in themes: + - Main (Light) + - Night (Dark) + - Forest + - Pony + - Alien + - Sunset + - Ocean + - Cyberpunk +- Theme persistence in localStorage +- Auto theme switching support + +### Technical Features +- TypeScript for type safety +- Redux state management with slices +- Styled Components for CSS-in-JS +- WebSocket connection management with auto-reconnect +- Message queuing and batching +- Performance optimizations +- Comprehensive error handling +- Detailed logging system +- Unit test setup ## Project Structure ``` - src/ - ├── components/ # Reusable UI components - │ ├── Menu/ # Navigation menu components - │ ├── Modal/ # Modal dialog components - │ └── MessageList/ # Message display components - ├── hooks/ # Custom React hooks - ├── services/ # External services (WebSocket, API) - ├── store/ # Redux store and slices - │ └── slices/ # Redux slice definitions - ├── styles/ # Global styles - ├── themes/ # Theme definitions - ├── utils/ # Utility functions - ├── types/ # TypeScript type definitions - └── App.tsx # Root component +webapp/ +├── src/ +│ ├── components/ # React components +│ ├── hooks/ # Custom React hooks +│ ├── services/ # Core services (WebSocket, config) +│ ├── store/ # Redux store and slices +│ ├── styles/ # Global styles +│ ├── themes/ # Theme definitions +│ ├── types/ # TypeScript type definitions +│ └── utils/ # Utility functions ``` ## Key Components -### Menu System - -* Main navigation menu with dropdowns -* Theme selector with live preview -* WebSocket configuration interface -* Session management controls - -### Message Components - -* Real-time message list with automatic updates -* Rich text input with submit handling -* Message action buttons (run, regenerate, cancel) -* HTML content rendering with sanitization - -## State Management - -The application uses Redux Toolkit with the following slices: - -* **Config**: Application configuration state -* **Messages**: Chat message handling -* **UI**: Theme and modal management -* **User**: Authentication and preferences - -Each slice includes: - -* Persistence where appropriate - -## Themes - -The application supports multiple themes: - -* **Main**: Light theme with blue accents -* **Night**: Dark theme with blue highlights -* **Forest**: Dark green nature-inspired theme -* **Pony**: Pink playful theme -* **Alien**: High contrast green/black theme - -Each theme includes: - -* Consistent color palette -* Typography settings -* Spacing/sizing variables - -## WebSocket Integration - -Real-time messaging is handled through a WebSocket service with: +### Chat Interface +- `ChatInterface.tsx`: Main chat container component +- `MessageList.tsx`: Renders chat messages with formatting +- `InputArea.tsx`: Message input with Markdown editor -* Automatic reconnection -* Message queueing -* Connection state management +### Theme System +- `ThemeProvider.tsx`: Theme context and switching +- `ThemeMenu.tsx`: Theme selection UI +- `themes.ts`: Theme definitions and utilities -## Security Features +### State Management +- Redux store with slices for: + - Messages + - UI state + - Configuration + - User data -* Content Security Policy -* XSS prevention +## Setup & Development -## Development Tools - -* Redux DevTools integration -* React Developer Tools support - -## Getting Started - -1. Clone the repository: - -```bash -git clone -``` - -2. Install dependencies: +### Prerequisites +- Node.js 14+ +- npm or yarn +### Installation ```bash -cd chat-app +# Install dependencies npm install -``` -3. Start the development server: - -```bash +# Start development server npm start -``` -4. Build for production: +# Run tests +npm test -```bash +# Build for production npm run build ``` -## Environment Variables +### Environment Variables +- `REACT_APP_API_URL`: Backend API URL (optional) +- `NODE_ENV`: Environment mode ('development' or 'production') -Create a `.env` file with: +## WebSocket Communication -``` -REACT_APP_WS_URL=ws://localhost:8083 -REACT_APP_API_URL=http://localhost:3000 -REACT_APP_ENV=development -``` +The app uses a WebSocket connection for real-time messaging with features like: -## Configuration +- Automatic reconnection with exponential backoff +- Message queuing +- Connection state management +- Error handling +- Message batching for performance -The application can be configured through the Redux store: - -* WebSocket settings -* Logging preferences -* Theme configuration - -## Testing - -### Unit Tests +## Styling -```bash -npm test -``` +The project uses Styled Components with: -### End-to-End Tests +- Global styles +- Theme-based styling +- CSS variables +- Responsive design +- Smooth transitions +- Accessibility features -```bash -npm run test:e2e -``` +## Testing -### Type Checking +- Jest test setup +- React Testing Library +- Console output formatting +- Error boundary testing -```bash -npm run type-check -``` +## Browser Support -## Styling +- Modern browsers (Chrome, Firefox, Safari, Edge) +- Fallback handling for older browsers +- Responsive design for mobile devices -The application uses styled-components with: +## Contributing -* CSS animations -* Flexbox layouts -* CSS variables +1. Fork the repository +2. Create a feature branch +3. Make your changes +4. Run tests +5. Submit a pull request -# Getting Started with Create React App +## Acknowledgments -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +- React team for the core framework +- Styled Components for the styling system +- Redux team for state management +- PrismJS for code highlighting +- Mermaid for diagrams ## Available Scripts