Chat Widget

A modern, customizable chat widget built with React, TypeScript, and Tailwind CSS. This widget provides a beautiful and responsive chat interface that can be easily integrated into any web application.

Features

• 🎨 Modern and clean UI design with Radix UI components
• 📱 Fully responsive design
• 💬 Real-time chat functionality
• 🔒 Type-safe with TypeScript
• 🎭 Customizable appearance with Tailwind CSS
• 🚀 Easy to integrate
• 🎯 Built with modern React patterns and hooks
• 📦 Optimized bundle size with Rollup
• 🔌 Configurable chat endpoint URL

Installation

npm install n8n-chat-widget

Usage

Basic Integration

1. First, import the ChatWidget component:

import ChatWidget from 'n8n-chat-widget';

2. Add the widget to your application with the required URL prop:

function App() {
  return (
    <div>
      <ChatWidget url="https://your-chat-endpoint.com/api/chat" />
    </div>
  );
}

The url prop is required and should point to your chat API endpoint. This endpoint will be used for all chat communications.

CDN Integration (Upcoming)

If you prefer to use the widget via CDN, add the following to your HTML:

<!-- Required dependencies -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/lucide-react@latest/dist/umd/lucide-react.min.js"></script>

<!-- Chat Widget -->
<script src="https://unpkg.com/n8n-chat-widget/dist/chat-widget.umd.js"></script>

<!-- Mount the widget -->
<script>
  ChatWidget.createChatWidget('chat-root', {
    url: 'https://your-chat-endpoint.com/api/chat'
  });
</script>

Dependencies

The widget has the following peer dependencies:

• React (>=16.8.0)
• React DOM (>=16.8.0)
• Lucide React (>=0.462.0)

Additional dependencies:

• @radix-ui/react-slot
• @radix-ui/react-toast
• class-variance-authority
• tailwind-merge
• clsx

Development

To run the widget locally:

1. Clone the repository
2. Install dependencies:

npm install

3. Build the widget:

npm run build

The build process uses Rollup to create both ESM and UMD bundles, along with TypeScript declarations.

Project Structure

src/
├── components/     # Reusable UI components
├── lib/           # Utility functions and hooks
├── Chat.tsx       # Main chat component
├── ChatButton.tsx # Chat toggle button
├── ChatWindow.tsx # Chat window component
├── index.tsx      # Entry point
└── index.css      # Global styles

License

ISC

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.