Skip to content

Releases: Chourioz/chatbot-plugin

v1.0.2

20 Jun 16:37
@Chourioz Chourioz
v1.0.2
324f11c

Choose a tag to compare

View all tags
v1.0.2 Latest
Latest

Full Changelog: v1.0.1...v1.0.2

Assets 2
Loading

v1.0.1

20 Jun 03:51
@Chourioz Chourioz
v1.0.1
e61f9f5

Choose a tag to compare

View all tags
v1.0.1

Full Changelog: production...v1.0.1

Loading

v1.0.0

20 Jun 03:31
@Chourioz Chourioz
production
c02bc8d

Choose a tag to compare

View all tags
v1.0.0

🎉 Web component of AI agent for sales v1.0.0 - Initial Release

🚀 Introducing the Modern Chatbot Web Component

We're excited to announce the first stable release of React Chatbot Component - a powerful, animated, and fully customizable chatbot solution that works with any frontend framework!

✨ What's New

🎨 GSAP-Powered Animations

  • Smooth floating button with hover effects
  • Elegant chat interface transitions
  • Staggered message animations with SplitType integration
  • Professional typing indicators
  • Hardware-accelerated animations for optimal performance

⚡ Universal Compatibility

  • React 19 support with modern JSX transform
  • Web Component architecture - works with any framework
  • CDN-ready for ecommerce platforms (WooCommerce, Shopify, Magento)
  • TypeScript support with full type definitions

🔧 Developer Experience

  • Clean, intuitive API with sensible defaults
  • Comprehensive TypeScript interfaces
  • Modular architecture with separation of concerns
  • Extensive test coverage (80%+) with Vitest
  • Modern build system with Vite

🎯 Key Features

  • Floating Button UI - Configurable positioning (4 corners)
  • Responsive Design - Mobile-first approach with Tailwind CSS
  • Custom Theming - CSS variables for easy customization
  • API Integration - Built-in message handling with async support
  • Accessibility - Full ARIA support and keyboard navigation
  • Performance Optimized - Lazy loading and efficient re-renders

📦 Installation

# NPM
npm install @chouriodev/custom-agent-sales-chatbot

# pnpm
pnpm add @chouriodev/custom-agent-sales-chatbot

# Yarn
yarn add @chouriodev/custom-agent-sales-chatbot

🔗 CDN Usage

<script src="https://unpkg.com/@chouriodev/custom-agent-sales-chatbot/dist/react-chatbot-component.umd.js"></script>
<react-chatbot api-key="your-key" position="bottom-right"></react-chatbot>

🎮 Quick Start

React/Next.js Integration

import { ReactChatbot } from "@chouriodev/custom-agent-sales-chatbot";

function App() {
  const handleMessage = async (message) => {
    // Your chat logic here
    return "Bot response";
  };

  return (
    <ReactChatbot
      title="Support Assistant"
      apiKey="your-api-key"
      onMessage={handleMessage}
      position="bottom-right"
      theme={{ primary: "#3b82f6" }}
    />
  );
}

Vue.js Integration

<template>
  <div>
    <react-chatbot
      api-key="your-api-key"
      position="bottom-right"
    ></react-chatbot>
  </div>
</template>

<script>
import "@chouriodev/custom-agent-sales-chatbot/dist/style.css";
</script>

Angular Integration

// Component
import { Component } from "@angular/core";

@Component({
  selector: "app-home",
  template: `
    <react-chatbot api-key="your-api-key" position="bottom-right">
    </react-chatbot>
  `,
})
export class HomeComponent {}
/* styles.css */
@import "@chouriodev/custom-agent-sales-chatbot/dist/style.css";

🎨 Custom Theming

<ReactChatbot
  theme={{
    primary: "#ff6b35",
    secondary: "#1e40af",
    background: "#ffffff",
    text: "#1f2937",
    surface: "#f8fafc",
  }}
/>

📋 Component Props

Prop Type Default Description
apiKey string - API key for authentication
title string "Chat Assistant" Chatbot title in header
position "bottom-right" | "bottom-left" | "top-right" | "top-left" "bottom-right" Floating button position
theme Partial<ChatbotTheme> Default theme Custom color scheme
onMessage (msg: string) => Promise<string> - Message handler function
className string - Additional CSS classes
welcomeMessage string "Hello! How can I help you today?" Initial bot message
placeholder string "Type your message..." Input placeholder text
maxMessages number 100 Maximum messages to keep in memory

🏗️ Technical Architecture

  • React 19 with hooks and functional components
  • GSAP for smooth animations and transitions
  • Tailwind CSS for utility-first styling
  • TypeScript for type safety and developer experience
  • Vite for fast builds and development
  • Vitest for comprehensive testing
  • Web Components for universal framework compatibility

📊 Bundle Information

  • ES Module: 761.64 kB (153.29 kB gzipped)
  • UMD: 284.24 kB (95.27 kB gzipped)
  • TypeScript Declarations: Included
  • CSS: Embedded in JavaScript bundle

🧪 Testing & Quality

  • Unit Tests: Comprehensive component testing with React Testing Library
  • Integration Tests: Full user interaction workflows
  • Type Tests: TypeScript interface validation
  • Coverage: 80%+ across all metrics
  • Accessibility: WCAG 2.1 AA compliant
  • Performance: Optimized for Core Web Vitals

🔧 Development Setup

# Clone the repository
git clone https://github.com/Chourioz/chatbot-plugin.git

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Run tests
pnpm test

# Build for production
pnpm build

🌐 Browser Support

  • Chrome: 88+
  • Firefox: 78+
  • Safari: 14+
  • Edge: 88+
  • Mobile: iOS Safari 14+, Chrome Mobile 88+

🚀 What's Next (Roadmap)

v1.1.0 - Enhanced Features

  • Voice integration (speech-to-text, text-to-speech)
  • File upload support (images, documents)
  • Rich message types (cards, buttons, quick replies)

v1.2.0 - Advanced Functionality

  • Multi-language support (i18n)
  • Dark mode with automatic detection
  • Analytics and usage metrics

v2.0.0 - Major Enhancements

  • Plugin system for custom extensions
  • Advanced conversation flows
  • Integration with popular chat platforms

📚 Documentation & Resources

🐛 Known Issues

  • None reported in initial release

🤝 Contributing

We welcome contributions! Please:

  1. Fork the repository
  2. Create a feature branch
  3. Add tests for new functionality
  4. Ensure all tests pass
  5. Submit a pull request

📄 License

MIT License - see LICENSE for details.

🙏 Acknowledgments

Special thanks to:

  • GSAP team for the amazing animation library
  • React team for the excellent framework
  • Tailwind CSS for utility-first CSS
  • Vite for the lightning-fast build tool
  • Testing Library for excellent testing utilities

💬 Get Started Today!

Ready to add intelligent chat to your application?

npm install @chouriodev/custom-agent-sales-chatbot

Questions or feedback? Open an issue on GitHub!

This release represents months of development and testing. We're excited to see what you build with it! 🚀

Full Changelog: https://github.com/Chourioz/chatbot-plugin/commits/v1.0.0

Loading