AI ChatBot Plugin

A React-based AI ChatBot plugin with WebSocket support for easy integration into any web application.

Features

• 🤖 AI-powered chat interface
• 🔌 WebSocket real-time communication
• ⚛️ React-based components
• 🎨 Customizable styling
• 📦 Easy integration with any framework
• 🔧 TypeScript support

Installation

npm install ai-chatbot-plugin

Usage

Basic Usage

<!-- Include the plugin in your HTML -->
<script src="https://unpkg.com/ai-chatbot-plugin@latest/dist/chatbot.umd.js"></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/ai-chatbot-plugin@latest/dist/ai-chatbot-plugin.css"
/>

// Initialize the chatbot
const container = document.getElementById("chatbot-container");
AIChatBot.renderChatBot(container, {
  isWidgetOpen: true,
  userData: {
    email: "[email protected]",
    role: "Admin",
    position: "Developer",
    department: "IT",
    uuid: "user-uuid-123",
  },
});

React Integration

import { renderChatBot } from "ai-chatbot-plugin";

function App() {
  useEffect(() => {
    const container = document.getElementById("chatbot-root");
    renderChatBot(container, {
      isWidgetOpen: true,
      userData: {
        email: "[email protected]",
        role: "Admin",
        position: "Developer",
        department: "IT",
        uuid: "user-uuid-123",
      },
    });
  }, []);

  return <div id="chatbot-root"></div>;
}

Angular Integration

// In your Angular component
ngAfterViewInit() {
  const container = document.getElementById('ai-chatbot-root');
  (window as any).AIChatBot.renderChatBot(container, {
    isWidgetOpen: true,
    userData: {
      email: '[email protected]',
      role: 'Admin',
      position: 'Developer',
      department: 'Frontend',
      uuid: 'angular-user-123'
    }
  });
}

Props

| Prop | Type | Description | | -------------- | --------- | -------------------------- | | isWidgetOpen | boolean | Whether the widget is open | | userData | User | User information object |

User Object

interface User {
  email: string;
  role: string;
  position: string;
  department: string;
  uuid: string;
}

WebSocket Configuration

The plugin connects to a WebSocket server at ws://localhost:7999/ws by default. You can modify this in the source code or pass it as a prop.

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

License

MIT

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