README.md

# 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.