Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@acharneski
acharneski committed Dec 9, 2024
1 parent fc77c1f commit ddedb2b
Showing 1 changed file with 116 additions and 168 deletions.
284 changes: 116 additions & 168 deletions webapp/README.md
View file
Original file line number Diff line number Diff line change
@@ -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 <repository-url>
```

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

Expand Down

0 comments on commit ddedb2b

Please sign in to comment.