# ChatGPT Web Interface

<!--
Project: ChatGPT Web Interface
Developer: Molla Samser
Email: help@rskworld.in
Phone: +91 93305 39277
Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147
Website: https://rskworld.in/
Year: 2026
-->

Web-based ChatGPT interface with modern UI for conversational AI interactions.

## Features

### Core Features
- Real-time messaging interface
- Conversation history with localStorage persistence
- Modern React UI with beautiful design
- OpenAI API integration (GPT-3.5 Turbo, GPT-4, GPT-4 Turbo)
- Responsive design for mobile and desktop
- Dark/Light theme toggle

### Enhanced Features
- **Markdown Support**: Full markdown rendering with syntax highlighting for code blocks
- **Message Actions**: Copy, edit, delete, and regenerate messages
- **Streaming Responses**: Real-time streaming responses (optional)
- **Conversation Management**:
- Search conversations
- Rename conversations
- Export conversations as JSON
- Delete conversations
- **Settings Panel**:
- Model selection (GPT-3.5 Turbo, GPT-4, GPT-4 Turbo)
- Temperature control
- Max tokens configuration
- **Keyboard Shortcuts**:
- `Ctrl/Cmd + K` - Toggle Sidebar
- `Ctrl/Cmd + N` - New Conversation
- `Ctrl/Cmd + ,` - Open Settings
- **Code Highlighting**: Syntax highlighting for multiple programming languages
- **Message Editing**: Edit your messages after sending
- **Regenerate Response**: Regenerate AI responses

## Technologies Used

- OpenAI API
- JavaScript
- React
- ChatGPT
- Web

## Installation

1. Install dependencies:
```bash
npm install
```

2. Create a `.env` file in the root directory and add your OpenAI API key:
```
REACT_APP_OPENAI_API_KEY=your_api_key_here
```

3. Start the development server:
```bash
npm start
```

## Usage

1. Enter your message in the input field
2. Press Enter or click Send to send your message
3. View conversation history in the sidebar
4. Start new conversations using the "New Chat" button
5. Use the settings panel to customize model, temperature, and other options
6. Switch between light and dark themes
7. Export conversations, rename them, or search through your chat history
8. Edit or regenerate messages as needed
9. Copy messages to clipboard with one click

## Advanced Features

### Markdown Support
The interface supports full markdown rendering including:
- Code blocks with syntax highlighting
- Tables
- Lists (ordered and unordered)
- Links
- Headings
- Blockquotes

### Keyboard Shortcuts
- `Ctrl/Cmd + K` - Toggle sidebar
- `Ctrl/Cmd + N` - Create new conversation
- `Ctrl/Cmd + ,` - Open settings panel
- `Enter` - Send message
- `Shift + Enter` - New line in message input

## Project Structure

```
chatgpt-web-interface/
├── public/
│ ├── index.html
│ └── manifest.json
├── src/
│ ├── components/
│ │ ├── ChatInterface.js
│ │ ├── MessageList.js
│ │ ├── Message.js
│ │ ├── Sidebar.js
│ │ ├── SidebarEnhanced.js
│ │ ├── InputArea.js
│ │ └── SettingsPanel.js
│ ├── services/
│ │ └── openaiService.js
│ ├── utils/
│ │ ├── markdownRenderer.js
│ │ └── theme.js
│ ├── styles/
│ │ └── App.css
│ ├── App.js
│ └── index.js
├── package.json
└── README.md
```

## License

Copyright © 2026 Molla Samser (rskworld.in). All rights reserved.

# ChatGPT Web Interface v1.0.0 Release Notes

## 🎉 Initial Release

### Overview
A modern, feature-rich web interface for ChatGPT with OpenAI API integration. Built with React, this application provides a beautiful and intuitive chat experience with advanced features for conversation management and customization.

### ✨ Core Features

#### Real-time Messaging
- Interactive chat interface with OpenAI API integration
- Support for GPT-3.5 Turbo, GPT-4, and GPT-4 Turbo models
- Optional streaming responses for real-time typing effect
- Message timestamps and conversation history

#### Modern UI/UX
- Beautiful dark/light theme toggle
- Responsive design for mobile and desktop
- Clean, modern interface design
- Smooth animations and transitions

#### Message Management
- Copy messages to clipboard
- Edit user messages after sending
- Delete messages
- Regenerate AI responses
- Markdown rendering with syntax highlighting
- Code blocks with language detection

#### Conversation Management
- Multiple conversation support
- Search conversations
- Rename conversations inline
- Export conversations as JSON
- Delete conversations
- Conversation history persistence (localStorage)

#### Customization & Settings
- Model selection (GPT-3.5 Turbo, GPT-4, GPT-4 Turbo)
- Temperature control (0-2)
- Max tokens configuration (100-4000)
- Streaming responses toggle
- Theme preferences

#### Keyboard Shortcuts
- `Ctrl/Cmd + K` - Toggle Sidebar
- `Ctrl/Cmd + N` - New Conversation
- `Ctrl/Cmd + ,` - Open Settings

### 🛠️ Technical Stack

- **Frontend Framework:** React 18.2.0
- **API Integration:** OpenAI API v4.20.1
- **Markdown:** react-markdown 9.0.1
- **Syntax Highlighting:** react-syntax-highlighter 15.5.0
- **Build Tool:** Create React App
- **Styling:** CSS with CSS Variables

### 📦 Installation

```bash
# Clone the repository
git clone https://github.com/rskworld/chatgpt-web-interface.git
cd chatgpt-web-interface

# Install dependencies
npm install

# Create .env file with your OpenAI API key
REACT_APP_OPENAI_API_KEY=your_api_key_here

# Start development server
npm start
```

### 🚀 Getting Started

1. Get your OpenAI API key from [OpenAI Platform](https://platform.openai.com/api-keys)
2. Add your API key to the `.env` file
3. Install dependencies: `npm install`
4. Start the app: `npm start`
5. Open [http://localhost:3000](http://localhost:3000) in your browser

### 📋 Project Structure

```
chatgpt-web-interface/
├── public/
│ ├── index.html
│ └── manifest.json
├── src/
│ ├── components/
│ │ ├── ChatInterface.js
│ │ ├── MessageList.js
│ │ ├── Message.js
│ │ ├── Sidebar.js
│ │ ├── SidebarEnhanced.js
│ │ ├── InputArea.js
│ │ └── SettingsPanel.js
│ ├── services/
│ │ └── openaiService.js
│ ├── utils/
│ │ ├── markdownRenderer.js
│ │ └── theme.js
│ ├── styles/
│ │ └── App.css
│ ├── App.js
│ └── index.js
├── package.json
├── LICENSE
└── README.md
```

### 🔒 Security Note

⚠️ **Important:** This application uses the OpenAI API key directly in the browser. For production use, it's recommended to create a backend API proxy to handle OpenAI requests securely.

### 📝 License

MIT License - Copyright (c) 2026 Molla Samser (rskworld.in)

### 👤 Developer

- **Name:** Molla Samser
- **Email:** help@rskworld.in
- **Website:** https://rskworld.in/
- **GitHub:** https://github.com/rskworld

### 🙏 Acknowledgments

- OpenAI for the API
- React community
- Open source contributors

---

**Version:** 1.0.0
**Release Date:** 2026
**Repository:** https://github.com/rskworld/chatgpt-web-interface