@electropi/chatbot-plugin
v1.0.2
Published
A beautiful, customizable chatbot component built with Stencil and TailwindCSS
Readme
ChatBot Plugin - Stencil Component
A beautiful, customizable chatbot component built with Stencil, converted from React to provide framework-agnostic web component support.
Features
🟢 Auto-Open Chat: If the page URL ends with
/chat, the chat window will automatically open for the user.✨ Beautiful UI: Gradient animations, hover effects, and smooth transitions
🌍 RTL Support: Full Right-to-Left support for Arabic text
📱 Responsive: Works perfectly on all device sizes
🎨 Customizable: Configurable themes, positions, and messages
💬 Real-time Chat: Live messaging with typing indicators
📝 Markdown Support: Rich text formatting in chat messages
🔒 User Info Collection: Collects user details before starting chat
⚡ Modern: Built with modern web standards and shadow DOM
Installation
npm install @electropi/chatbot-pluginBasic Usage
HTML
<!DOCTYPE html>
<html>
<head>
<script type="module" src="path/to/chatbot-plugin.esm.js"></script>
</head>
<body>
<chatbot-plugin></chatbot-plugin>
</body>
</html>React
import '@electropi/chatbot-plugin';
function App() {
return (
<div>
<chatbot-plugin></chatbot-plugin>
</div>
);
}Vue
<template>
<chatbot-plugin></chatbot-plugin>
</template>
<script>
import '@electropi/chatbot-plugin';
</script>Angular
// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}<!-- app.component.html -->
<chatbot-plugin></chatbot-plugin>Advanced Usage
Custom Position and Theme
<chatbot-plugin
position="bottom-left"
initial-message="مرحباً! كيف يمكنني مساعدتك اليوم؟"
api-key="your-api-key">
</chatbot-plugin>Programmatic Control
// Get reference to the component
const chatbot = document.querySelector('chatbot-plugin');
// Open chat programmatically
await chatbot.openChat();
// Close chat programmatically
await chatbot.closeChat();API Endpoint
The component expects a POST endpoint at http://dev.electropi.ai:8060/api/chat with the following request format:
{
message: string;
username?: string;
userphone?: string;
history: Array<{
text: string;
sender: 'user' | 'bot';
}>;
}Expected response format:
{
response: string | string[]; // Single message or array of messages
}About Electro Pi
This plugin is developed and maintained by Electro Pi. For more information, visit Electro Pi.
Properties
| Property | Attribute | Description | Type | Default |
| ---------------- | ----------------- | ----------- | -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| apiKey | api-key | | string | undefined |
| initialMessage | initial-message | | string | "Hi there! 👋 I'm here to help you with anything you need. What can I assist you with today?" |
| position | position | | "bottom-left" | "bottom-right" | "top-left" | "top-right" | 'bottom-right' |
| theme | theme | | ChatBotTheme | { primary: '#fff4d7', secondary: '#f8fafc', background: '#ffffff', text: '#1e293b', } |
Methods
closeChat() => Promise<void>
Returns
Type: Promise<void>
openChat() => Promise<void>
Returns
Type: Promise<void>