@zosmaai/reva
v1.3.3
Published
A lightweight, embeddable AI chat widget that can be easily integrated into any website with API key configuration.
Downloads
11
Readme
🤖 Reva Chat Widget
A lightweight, embeddable AI chat widget that can be easily integrated into any website with API key configuration.
✨ Features
- 🔧 Ultra-Simple Integration: Single script tag with data attribute
- 🔐 API Key Configuration: Secure API key management
- 🎨 Shadow DOM Isolation: No CSS conflicts with your website
- ⚡ Auto-Initialization: Automatically starts with
api-key - 📱 Responsive Design: Works on all device sizes
- 🔄 Destroy/Reinitialize: Full control over widget lifecycle
🚀 Quick Start
Step 1: Include the Script
Add the Reva script to your HTML page:
<script src="https://cdn.zosma.ai/reva.js"></script>Step 2: Add API Key
Add your API key as a data attribute:
<script
src="https://cdn.zosma.ai/reva.js"
api-key="your-api-key-here"></script>Complete Example
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<!-- Your page content -->
<!-- Reva Chat Widget - Auto-initializes with api-key -->
<script
src="https://cdn.zosma.ai/reva.js"
api-key="your-api-key-here"></script>
</body>
</html>📖 API Reference
Auto-Initialization (Recommended)
The widget automatically initializes when you include the API key as a data attribute:
<script src="https://cdn.zosma.ai/reva.js" api-key="your-api-key"></script>Reva.init(config) (Manual)
For advanced use cases, you can still manually initialize the widget:
Parameters:
config(object): Configuration objectapiKey(string, optional): Your Reva API key
Example:
Reva.init({
apiKey: 'reva_sk_1234567890abcdef',
});Note: Manual initialization is only needed if you don't use the api-key attribute.
Reva.destroy()
Destroys the current widget instance and removes it from the DOM.
Example:
Reva.destroy();Reva.isInitialized()
Checks if the widget is currently initialized.
Returns:
boolean:trueif initialized,falseotherwise
Example:
if (Reva.isInitialized()) {
console.log('Widget is active');
}Reva.getConfig()
Gets the current widget configuration (immutable copy).
Returns:
RevaConfig | null: Current configuration ornullif not initialized
Example:
const config = Reva.getConfig();
if (config) {
console.log('API Key:', config.apiKey);
}🔧 Development
Prerequisites
- Node.js 18+
- npm or yarn
Installation
# Clone the repository
git clone https://github.com/zosma-ai/reva-chatbot.git
cd reva-chatbot
# Install dependencies
npm installDevelopment Server
# Start development server
npm run devBuilding for Production
# Build the widget
npm run buildThis generates:
dist/reva.js- The main widget scriptdist/reva.css- Widget styles (auto-injected)
Testing
You can test the widget integration by creating a simple HTML file or integrating it into your existing project.
🏗️ Project Structure
src/
├── embed/ # Widget embed system (modular)
│ ├── types.ts # TypeScript interfaces & types
│ ├── widget-manager.tsx # Core widget creation & management
│ └── index.ts # Main embed orchestration
├── components/
│ ├── atoms/ # Basic UI components (Button, Input, etc.)
│ └── molecules/ # Complex UI components
│ └── chat-widget.tsx # Main chat widget component
├── lib/ # Utility functions
├── schema/ # Data type definitions
├── embed.tsx # Main entry point (re-exports embed/*)
└── index.css # Global styles & Tailwind
dist/ # Built files
├── reva.js # Main widget script (IIFE format)
└── vite.svg # Build artifactArchitecture Overview
embed/types.ts- All TypeScript interfaces and type definitionsembed/widget-manager.tsx- Core widget creation, DOM manipulation, and React mountingembed/index.ts- Main orchestration and global object exposureembed.tsx- Entry point that re-exports the modular system
This modular structure provides:
- Separation of Concerns - Each file has a single responsibility
- Type Safety - Centralized type definitions
- Maintainability - Easy to modify individual components
- Testability - Pure functions that can be tested in isolation
- Scalability - Easy to add new features without bloating single files
🎯 Roadmap
Current Features
- ✅ Auto-initialization with data attributes
- ✅ API key configuration
- ✅ Basic chat interface
- ✅ Shadow DOM isolation
- ✅ Responsive design
- ✅ Modular architecture
- ✅ Functional programming patterns
Planned Features
- [ ] Multiple theme options
- [ ] Custom positioning
- [ ] Message history persistence
- [ ] File upload support
- [ ] Typing indicators
- [ ] Real-time API integration
- [ ] Custom welcome messages
- [ ] Analytics integration
🔐 Security
- API keys are only stored in memory during widget operation
- Shadow DOM provides style isolation
- No data persistence in browser storage (currently)
- Input validation and sanitization
🤝 Contributing
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Code Style
- Follow ES6+ modern JavaScript patterns
- Use functional programming approaches where possible
- Maintain TypeScript strict mode compliance
- Follow the existing modular architecture
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🆘 Support
For support, please contact:
- Email: [email protected]
- Website: https://zosma.ai
🔗 Links
Made with ❤️ by Zosma AI