Transparent Chat Window for Streamers 🚀

A lightweight, fully transparent, and click-through chat overlay built with Electron. Designed specifically for content creators and streamers, this app allows you to overlay your live YouTube chat directly over your games without interfering with your gameplay.

✨ Features

• Ghost Mode (Click-Through): Lock the overlay to make it completely click-through. You can game normally while reading chat directly on your screen!
• OBS Studio Integration: Embed the Control Panel directly inside OBS as a Custom Browser Dock for seamless control.
• Auto-Start Chat: Connects to OBS Studio via WebSocket. The moment you hit "Start Streaming," the app automatically detects your live YouTube stream and loads the chat—no more copying and pasting URLs!
• Fully Customizable: Adjust the background opacity, chat text size, and background color on the fly.
• High-Priority Performance: Built to ensure the chat window never lags or crashes when your PC is under heavy gaming loads.
• Automatic Updates: The app automatically updates itself in the background when new versions are released.

---

📥 Installation

1. Go to the Releases page.
2. Download the latest TransparentChat-Setup-X.X.X.exe file. (Note: Ignore the .blockmap file, that is used internally for auto-updates).
3. Run the installer. The app will launch automatically!

---

🛠️ How to Use

1. Basic Setup

• Open the Chat Control window from your system tray.
• Paste your YouTube Live URL (or just the Video ID) into the input box and click Load Chat Overlay.
• Adjust the Opacity, Size, and Color to your liking.
• Check "Lock Overlay (Click-Through)" when you are ready to play. The chat will stay on top of your game, but your mouse clicks will pass right through it!

2. OBS Custom Browser Dock Integration

You can embed the Control Panel directly inside OBS Studio so you don't need a separate window!

1. Open OBS Studio.
2. In the top menu, go to View > Docks > Custom Browser Docks...
3. Set the Dock Name to Transparent Chat (or whatever you prefer).
4. Set the URL to: http://localhost:4567
5. Click Apply. You can now drag and snap the Control Panel anywhere in your OBS layout!

3. Auto-Detect Stream Feature (No more copy/pasting URLs!)

Want the chat to magically appear the second you start your stream?

1. In the Control Panel, enter your YouTube Handle (e.g., @YourChannel).
2. (Optional) If you have an OBS WebSocket Password set in OBS (Tools > WebSocket Server Settings), enter it. If you don't use a password, leave it blank.
3. Check the box for "Auto-Start Chat when OBS streams".
4. From now on, when you click Start Streaming in OBS, the app instantly detects it, secretly visits your YouTube channel to find your live video ID, and automatically loads your chat overlay on your screen!

---

💻 For Developers

Want to build or modify this app yourself?

Prerequisites

• Node.js installed on your machine.

Setup

```bash

Clone the repository

git clone https://github.com/Mayur541/ChatWindow.git

Navigate into the directory

cd "ChatWindow"

Install dependencies

npm install

Start the application locally

npm start ```

Building for Production

To package the app into a .exe installer: ```bash npm run build ```

📜 License

MIT License. Free to use and modify!