NetWatchAI Chat Widget

A customizable chat widget that can be embedded into any website, powered by OpenAI's GPT models. Built with TypeScript, Tailwind CSS, and Web Components.

Features

• 🎨 Modern, responsive design with Tailwind CSS
• 🔌 Easy to embed using Web Components
• ⚡ Real-time chat interface
• 🎯 Customizable positioning and themes
• 🔒 Secure API handling through backend proxy
• 📦 Lightweight and fast
• 🔄 Zabbix integration for real-time monitoring data

Installation

NPM

npm install netwatchai-chat

CDN

Add the following script to your HTML:

<script src="https://cdn.jsdelivr.net/npm/netwatchai-chat@latest/dist/netwatchai-chat.js"></script>

You can also use a specific version:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/netwatchai-chat.js"></script>

Or use the minified version:

<script src="https://cdn.jsdelivr.net/npm/netwatchai-chat@latest/dist/netwatchai-chat.min.js"></script>

Quick Start

1. Set up the backend proxy (required):

// backend/server.js
const express = require('express');
const { OpenAI } = require('openai');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

app.post('/chat', async (req, res) => {
  try {
    const response = await openai.chat.completions.create({
      model: "gpt-3.5-turbo",
      messages: req.body.messages,
      zabbix_url: req.body.zabbix_url,
      zabbix_api_token: req.body.zabbix_api_token
    });
    res.json(response);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(8080, () => {
  console.log('Backend server running on port 8080');
});

2. Include the widget in your HTML:

<!-- Using NPM -->
<script type="module">
  import { ChatWidget } from 'netwatchai-chat';
  
  const chatWidget = new ChatWidget({
    backendUrl: 'http://localhost:8080',
    position: 'bottom-right',
    theme: 'light',
    initialMessage: 'Hello! How can I help you today?',
    zabbixUrl: 'https://your-zabbix-instance.com/api_jsonrpc.php',
    zabbixApiToken: 'your-zabbix-api-token'
  });
</script>

<!-- Using Web Component -->
<netwatchai-chat
  backend-url="http://localhost:8080"
  position="bottom-right"
  theme="light"
  initial-message="Hello! How can I help you today?"
  zabbix-url="https://your-zabbix-instance.com/api_jsonrpc.php"
  zabbix-api-token="your-zabbix-api-token">
</netwatchai-chat>

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | backendUrl | string | required | URL of your backend proxy server | | position | string | 'bottom-right' | Widget position on screen | | theme | string | 'light' | Color theme | | initialMessage | string | 'Hello! How can I help you today?' | First message shown | | zabbixUrl | string | required | URL of your Zabbix API endpoint (e.g., https://zabbix.example.com/api_jsonrpc.php) | | zabbixApiToken | string | required | Your Zabbix API token for authentication |

Position Options

• bottom-right
• bottom-left
• top-right
• top-left

Theme Options

• light
• dark

Development

1. Clone the repository:

git clone https://github.com/yourusername/netwatchai-chat.git
cd netwatchai-chat

2. Install dependencies:

npm install

3. Start development server:

npm run dev

This will start the development server at http://localhost:3000

4. Build for production:

npm run build

Security Best Practices

1. Always use a backend proxy to handle API calls
2. Implement proper CORS settings on your backend
3. Use environment variables for sensitive data
4. Implement rate limiting on your backend
5. Add authentication if needed
6. Store Zabbix API tokens securely and never expose them in client-side code
7. Use HTTPS for all API communications

Example backend proxy with rate limiting:

const rateLimit = require('express-rate-limit');

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100 // limit each IP to 100 requests per windowMs
});

app.use(limiter);

Contributing

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

License

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

Support

If you encounter any issues or have questions, please:

1. Check the documentation
2. Open an issue
3. Contact support at [email protected]