Compu-Global-Hyper-Mega-Net-Chat

A modern, feature-rich React chat interface for RAG (Retrieval-Augmented Generation) chatbot applications. Built with React 18, Tailwind CSS, and shadcn/ui components.

Features

Chat Interface

• Real-time conversation management
• Markdown message rendering
• Code syntax highlighting
• Message editing and retry functionality
• Conversation history with search and filtering
• Export chat conversations to JSON
• Auto-scrolling message list
• Message timestamps
• Loading states and error handling

Document Management

• Upload and manage context documents
• Document metadata support
• Document deletion
• Progress indicators for uploads
• Error handling for document operations

Customization

• Multiple theme options:
  • Light/Dark modes
  • Nature themes (Forest, Ocean, Sunset, Amber)
  • Holiday themes (Christmas, Halloween, Valentine's, etc.)
  • TV Show themes (Simpsons, Dragon Ball Z, Naruto, etc.)
• Customizable chat settings:
  • Response formats
  • Prompt strategies
  • Context modes

UI/UX

• Responsive design
• Collapsible sidebar
• Loading states
• Error boundaries
• Keyboard shortcuts
• Copy to clipboard functionality
• Message action buttons

Technology Stack

• React 18 - Modern React with hooks
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - High-quality React components
• Vite - Next-generation frontend tooling
• Lucide React - Beautiful hand-crafted icons
• React Markdown - Markdown rendering
• date-fns - Modern JavaScript date utility library

Getting Started

Prerequisites

• Node.js 16.x or higher
• npm or yarn package manager

Installation

1. Clone the repository:

git clone https://github.com/yourusername/compu-global-hyper-mega-net-chat.git
cd compu-global-hyper-mega-net-chat

2. Install dependencies:

npm install
# or
yarn install

3. Create a .env file in the root directory with your API configuration:

VITE_API_BASE_URL=your_api_base_url

4. Start the development server:

npm run dev
# or
yarn dev

The application will be available at http://localhost:5173

Project Structure

src/
├── components/
│   ├── chat/           # Chat-related components
│   ├── common/         # Shared components
│   ├── documents/      # Document management components
│   ├── layout/         # Layout components
│   └── ui/            # UI components (shadcn/ui)
├── config/            # Configuration files
├── hooks/             # Custom React hooks
├── lib/              # Utility libraries
├── services/         # API services
└── utils/            # Utility functions

Configuration

Chat Settings

The application supports various chat configuration options:

• Prompt Strategies:

  • Standard
  • Academic
  • Concise
  • Creative
  • Step-by-Step

• Response Formats:

  • Default
  • JSON
  • Markdown
  • Bullet Points

• Context Modes:

  • Strict
  • Flexible

Themes

The application includes multiple theme options that can be configured in src/config/themes.js. Each theme includes:

• Primary and secondary colors
• Text colors
• Border colors
• Background colors
• Accent colors
• Message styling

API Integration

The application expects a RAG chatbot API with the following endpoints:

• /conversation - Conversation management
• /ask - Message handling
• /document - Document management

Refer to the API documentation for detailed endpoint specifications.

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• shadcn/ui for the beautiful React components
• Lucide for the icon set
• Tailwind CSS for the utility-first CSS framework

Support

For support, please open an issue in the GitHub repository or contact the maintainers.